/* Darricau — wizm (piste G, « Liberté : de l'aube au soir ») La peau de la maquette G posée sur le balisage existant : blocs du contenu (classes du thème d'origine : .wrap, .grid-2, .grid-3, .gite, .activite, .piece, .galerie, .intro-gite, .detail-gite, .en_savoir_plus…), extensions (WP Review Slider Pro, Smoobu, Contact Form 7, FAQ de darricau-gites) et gabarits du journal (.dj-*). Rien n'est réordonné : seules la forme, la lumière et le mouvement changent. */ /* ———————————— Jetons ———————————— */ :root { --encre: #31403B; /* RAL 6012 */ --vert: #3F7366; --aube: #F6F7F4; --jour: #E8EDEC; --dore: #F3EEE3; --ombre: #D9E0DA; --crepuscule: #DED7C6; --matinee: #EFF2EF; --soir: #31403B; --nuit: #283430; --or: #B0925A; --or-clair: #CFB57E; --or-encre: #6A5529; --lait: #F1EFE8; --logo: #1C5E51; --gris: #4E5C57; --titres: "Bodoni Moda", Georgia, "Times New Roman", serif; --texte: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --gout: clamp(12px, 1.6vw, 24px); --marge: clamp(20px, 5vw, 72px); --large: 1240px; --lecture: 42rem; --h-entete: 92px; --lent: cubic-bezier(.22, .61, .36, 1); --filet: rgba(49, 64, 59, .16); --resa-chevauche: clamp(28px, 4vw, 48px); /* 80 : le moteur de réservation mord sur le héros d'autant ; c'est aussi l'écart entre le titre et le moteur */ --galerie-rapport: 4 / 3; /* 86 : rapport unique des photos des galeries des fiches de gîte */ } @media (max-width: 860px) { :root { --h-entete: 72px; } } /* ———————————— Base ———————————— */ html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--h-entete) + 12px); } #book, #booking-tool-container-allApartments { scroll-margin-top: 12px; } /* 97, 106 : l'ancre « Réserver » arrive sur le haut du cadre blanc, un peu de la photo restant visible sous l'en-tête */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body.darricau { margin: 0; font-family: var(--texte); font-size: 17px; line-height: 1.65; color: var(--encre); background: var(--aube); overflow-x: hidden; } body.darricau img { max-width: 100%; height: auto; } body.darricau a { color: var(--vert); text-underline-offset: .2em; text-decoration-thickness: 1px; } body.darricau a:hover { color: var(--encre); } :focus-visible { outline: 2px solid var(--vert); outline-offset: 3px; } .darricau h1, .darricau h2, .darricau h3, .darricau h4 { font-family: var(--titres); font-weight: 400; line-height: 1.1; letter-spacing: -.005em; color: inherit; } .darricau p { margin: 0 0 1em; } .visuel-masque, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .evitement { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--encre); color: var(--lait) !important; padding: 10px 16px; } .evitement:focus { top: 12px; } sup { line-height: 0; } /* Le filet d'or des titres de section (l'« heure en marge » de G, sans texte ajouté) */ .filet-or::before, .darricau-accueil .entry-content > :is(section, div, .wp-block-columns) > h2:first-child::before, .darricau-accueil .entry-content > section > .wp-block-group:first-child > h2:first-child::before, .darricau-accueil .entry-content > section > .wp-block-group__inner-container > .wp-block-group:first-child h2:first-child::before, .darricau-accueil .entry-content > section .wp-block-column:first-child > h2:first-child::before { content: ""; display: block; width: 44px; height: 1px; background: var(--or); margin: 0 0 28px; transform-origin: left center; } /* Largeurs : .wrap du thème d'origine, cadre de 1240 px et gouttières de G */ .wrap { width: min(100% - 2 * var(--marge), var(--large)); margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; } .wrap .wrap { width: auto; } .site-principal { display: block; } .wp-site-blocks > *, .wp-site-blocks > * + * { margin-block-start: 0 !important; margin-block-end: 0; } .site-principal > .entry-content > *:not(.wp-block-cover):not(.alignfull):not(.wrap):not(.darricau-plan):not(.darricau-faq):not(#autres_gites):not(.gite-reservation):not([id="booking-tool-container-allApartments"]):not(.book) { width: min(100% - 2 * var(--marge), var(--large)); margin-left: auto; margin-right: auto; } .entry-content > * + * { margin-block-start: 0; } .wp-block-group__inner-container > * { margin-block-start: 0; } /* Pages sans photo d'ouverture : le contenu passe sous l'en-tête fixe */ .site-principal:not(:has(> .entry-content:first-child > .wp-block-cover:first-child)):not(:has(> .dj-hero:first-child:not(.dj-hero--plain))) { padding-top: var(--h-entete); } /* Boutons */ .bouton, .dj-btn, .gite-cta-button, .wp-block-button__link, .en_savoir_plus a, .wpcf7-submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 26px; border: 1px solid var(--encre); background: var(--encre); color: var(--aube) !important; font: 500 15px/1.2 var(--texte); letter-spacing: .02em; text-decoration: none !important; cursor: pointer; border-radius: 0; transition: background .4s var(--lent), color .4s var(--lent), border-color .4s var(--lent); } .bouton:hover, .dj-btn:hover, .gite-cta-button:hover, .wp-block-button__link:hover, .en_savoir_plus a:hover, .wpcf7-submit:hover { background: var(--vert); border-color: var(--vert); color: #fff !important; } .dj-btn--ghost { background: transparent; color: var(--encre) !important; } .lien-fleche, .gite-lien a, .dj-more { font-weight: 500; color: var(--vert); text-decoration: none !important; border-bottom: 1px solid currentColor; padding-bottom: 2px; } .lien-fleche:hover, .gite-lien a:hover { color: var(--encre); } /* ———————————— En-tête ———————————— */ .site-entete { margin: 0; } .entete { position: fixed; top: 0; left: 0; right: 0; z-index: 50; color: var(--encre); background: rgba(246, 247, 244, .97); border-bottom: 1px solid rgba(49, 64, 59, .12); transition: background .6s var(--lent), color .6s var(--lent), border-color .6s var(--lent); } .admin-bar .entete { top: 32px; } @media (max-width: 782px) { .admin-bar .entete { top: 46px; } } .entete.sur-heros { background: transparent; color: #fff; border-bottom-color: transparent; } .entete.sur-heros::before { content: ""; position: absolute; inset: 0 0 -40px; background: linear-gradient(to bottom, rgba(24, 33, 30, .45), rgba(24, 33, 30, 0)); pointer-events: none; z-index: -1; } .entete-in { display: flex; align-items: center; gap: 28px; height: var(--h-entete); padding: 0 clamp(20px, 3.4vw, 48px); max-width: 1600px; margin: 0 auto; box-sizing: border-box; } .logo { color: var(--logo) !important; display: block; flex: none; width: 172px; height: 120px; margin: -6px 0 -6px -8px; transition: color .6s var(--lent); } .logo-svg { display: block; width: 100%; height: 100%; fill: currentColor; } .entete.sur-heros .logo { color: #fff !important; } .nav-principale { margin: 0 auto 0 12px; } .nav-principale .menu { display: flex; gap: clamp(16px, 2vw, 30px); list-style: none; margin: 0; padding: 0; } .nav-principale .menu li { margin: 0; } .nav-principale .menu a { color: inherit !important; text-decoration: none; font-size: 15px; letter-spacing: .02em; padding: 6px 0; border-bottom: 1px solid transparent; } .nav-principale .menu a:hover, .nav-principale .menu .current-menu-item > a { border-bottom-color: currentColor; } .nav-principale .sub-menu { display: none; } .outils { display: flex; align-items: center; gap: 20px; margin-left: auto; } .langues-zone, .langues-zone .widget { display: flex; align-items: center; gap: 8px; } .langues-zone ul { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; } .langues-zone a { color: inherit !important; opacity: .8; text-decoration: none; } .langues-zone a:hover { opacity: 1; } .langues-zone img { display: block; width: 20px; height: auto; } .burger { display: none; background: none; border: 0; color: inherit; width: 44px; height: 44px; padding: 10px; cursor: pointer; } .burger span { display: block; height: 1px; background: currentColor; margin: 6px 0; transition: transform .4s var(--lent), opacity .3s; } .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 1240px) { .nav-principale .menu { gap: 18px; } } @media (max-width: 1060px) { .burger { display: block; } html.js .nav-principale { display: none; } html.js .nav-principale.ouvert { display: block; position: fixed; top: var(--h-entete); left: 0; right: 0; bottom: 0; background: var(--aube); color: var(--encre); padding: 32px 24px; overflow: auto; z-index: 49; margin: 0; } .admin-bar .nav-principale.ouvert { top: calc(var(--h-entete) + 46px); } html.js .nav-principale.ouvert .menu { display: block; } html.js .nav-principale.ouvert .menu a { display: block; font-family: var(--titres); font-size: 34px; line-height: 1.2; padding: 12px 0; color: var(--encre) !important; border-bottom: 1px solid rgba(49, 64, 59, .14); } html:not(.js) .nav-principale .menu { flex-wrap: wrap; gap: 6px 14px; } body.panneau-ouvert { overflow: hidden; } } @media (max-width: 860px) { .entete-in { gap: 12px; } .logo { width: 104px; height: 73px; margin: 0 0 0 -6px; } } /* ———————————— Couvertures (photo d'ouverture des pages) ———————————— */ .entry-content > .wp-block-cover:first-child { width: 100%; max-width: none; margin: 0; min-height: min(78vh, 760px); padding: calc(var(--h-entete) + 40px) var(--marge) clamp(88px, 12vh, 128px); align-items: flex-end; box-sizing: border-box; } .wp-block-cover.has-parallax, .wp-block-cover .has-parallax { background-attachment: scroll !important; } .entry-content > .wp-block-cover:first-child .wp-block-cover__background { background: linear-gradient(to top, rgba(24, 33, 30, .72) 0%, rgba(24, 33, 30, .32) 40%, rgba(24, 33, 30, .05) 70%), linear-gradient(to bottom, rgba(24, 33, 30, .45), rgba(24, 33, 30, 0) 180px) !important; opacity: 1 !important; } .entry-content > .wp-block-cover:first-child .wp-block-cover__inner-container { width: min(100%, var(--large)); margin: 0 auto; color: #fff; } .entry-content > .wp-block-cover:first-child h1 { font-size: clamp(56px, 9vw, 136px) !important; line-height: 1.05; text-align: left !important; color: #fff; margin: 0; letter-spacing: -.012em; } .entry-content > .wp-block-cover:first-child h2 { font-style: italic; font-size: clamp(22px, 2.2vw, 32px); text-align: left !important; color: #F3EEE3; margin: .3em 0 0; } /* Accueil : le héros plein cadre et son diaporama */ .darricau-heros.wp-block-cover { min-height: 100vh !important; min-height: 100svh !important; padding: 0 !important; overflow: hidden; background: var(--encre); align-items: stretch; } .darricau-heros > .wp-block-cover__background { display: none; } .darricau-heros > .wp-block-cover__image-background { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: 52% 56% !important; } .darricau-diapos { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .darricau-diapo { position: absolute; inset: 0; overflow: hidden; opacity: 0; display: none; } html.js .darricau-diapo { display: block; } .darricau-diapo img { position: absolute; inset: 0; width: 100%; height: 100% !important; max-width: none; object-fit: cover; } .darricau-diapo.entrante { z-index: 2; } .darricau-diapo.active { z-index: 1; } .kb { animation: kb 15s linear forwards; } .darricau-diapo.kb { animation: none; } .darricau-diapo.kb img { animation: kb 15s linear forwards; } @keyframes kb { from { transform: scale(1.1); } to { transform: scale(1); } } .darricau-voile { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(24, 33, 30, .78) 0%, rgba(24, 33, 30, .42) 34%, rgba(24, 33, 30, 0) 62%), linear-gradient(to bottom, rgba(24, 33, 30, .45), rgba(24, 33, 30, 0) 160px); } .darricau-heros > .wp-block-cover__inner-container { position: absolute !important; z-index: 2; left: var(--marge); right: var(--marge); bottom: clamp(150px, 19vh, 200px); width: auto !important; margin: 0 !important; } .darricau-heros .wp-block-group { padding: 0 !important; margin: 0 !important; } .darricau-heros h1, .darricau-heros .darricau-title { font-size: clamp(84px, 14vw, 216px) !important; line-height: 1.1; letter-spacing: -.015em; margin: 0 0 .12em -.04em !important; text-align: left !important; color: #fff !important; } .darricau-title__sub { display: block; font-family: var(--texte); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; letter-spacing: .01em; margin: .5em 0 0 .25em; max-width: 28em; } .darricau-heros h2 { font-family: var(--titres); font-style: italic; font-size: clamp(22px, 2.2vw, 32px) !important; margin: 0 !important; color: #F3EEE3 !important; text-align: left !important; } .heros-commandes { position: absolute; z-index: 5; right: var(--marge); left: var(--marge); bottom: clamp(76px, 10vh, 96px); display: flex; align-items: center; justify-content: flex-end; gap: 22px; } .reperes { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; } .reperes button { background: none; border: 0; color: rgba(255, 255, 255, .78); font: 13px/1.3 var(--texte); letter-spacing: .04em; padding: 10px 0 0; cursor: pointer; position: relative; min-width: 44px; min-height: 44px; text-align: left; } .reperes button::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255, 255, 255, .35); } .reperes button::after { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 0; background: #fff; } .reperes button[aria-current="true"] { color: #fff; } .reperes button[aria-current="true"]::after { width: 100%; transition: width var(--tenue, 9s) linear; } html.en-pause .reperes button::after { transition: none; } .pause { width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .6); background: transparent; color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; } .pause:hover { background: rgba(255, 255, 255, .14); } .pause svg { width: 14px; height: 14px; } html:not(.js) .heros-commandes { display: none; } @media (max-width: 860px) { .darricau-heros > .wp-block-cover__inner-container { bottom: 150px; } .darricau-heros h1, .darricau-heros .darricau-title { font-size: clamp(76px, 22vw, 120px) !important; } .heros-commandes { bottom: 52px; justify-content: space-between; } .reperes { gap: 12px; } .reperes button { font-size: 12px; } } /* ———————————— Accueil : paliers de lumière ———————————— */ .darricau-accueil .entry-content > #intro { background: var(--aube); } .darricau-accueil .entry-content > #gites { background: var(--jour); } .darricau-accueil .entry-content > #activites { background: var(--dore); } .darricau-accueil .entry-content > #reviews { background: var(--crepuscule); } .darricau-plan { background: var(--matinee); } .darricau-faq { background: var(--soir); } html.ciel-actif [data-fond] { background: transparent !important; } .ciel { position: fixed; inset: 0; z-index: -1; background: var(--aube); } html.ciel-actif body.darricau { background: transparent; } /* Les sections de l'accueil occupent toute la largeur (le fond va au bord), leur contenu reste dans le cadre */ .darricau-accueil .entry-content > :is(#intro, section, #reviews) { width: 100% !important; max-width: none !important; margin: 0 !important; box-sizing: border-box; } .darricau-accueil .entry-content > :is(section, #reviews):not(.darricau-plan):not(.darricau-faq) { padding: clamp(88px, 10vw, 140px) var(--marge); } .darricau-accueil .entry-content > :is(section, #reviews):not(.darricau-plan):not(.darricau-faq) > *, .darricau-accueil .entry-content > :is(section, #reviews) > .wp-block-group__inner-container > * { max-width: var(--large); margin-left: auto !important; margin-right: auto !important; } .titre-section, .darricau-accueil .entry-content > :is(section, #reviews) h2 { font-size: clamp(46px, 6.6vw, 108px); line-height: 1.1; padding-bottom: .08em; margin: 0 0 32px; text-align: left !important; } /* Matin : l'intro (la photo au bord, le texte posé à côté) */ .darricau-accueil #intro { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); gap: 0 clamp(24px, 4vw, 64px); align-items: center; padding: clamp(40px, 6vw, 96px) var(--marge) 0 0; margin: 0; } .darricau-accueil #intro > .wp-block-column { margin: 0; flex: none; width: auto; } .darricau-accueil #intro .wp-block-image { margin: 0; } .darricau-accueil #intro .wp-block-image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .darricau-accueil #intro .wp-block-column:first-child > p:empty { display: none; } .darricau-accueil #intro p.intro { font-size: 19px !important; line-height: 1.7; max-width: 34em; } .darricau-accueil #intro p.intro::first-line { font-family: var(--titres); font-size: 1.25em; } @media (max-width: 860px) { .darricau-accueil #intro { display: block; padding: 0 0 40px; } .darricau-accueil #intro > .wp-block-column:last-child { padding: 40px 20px 0; } } /* Matin : Natura 2000 (titre, texte, vue aérienne, les saisons) */ .darricau-accueil .entry-content > section:has(.wp-block-gallery) .wp-block-columns { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: end; } .darricau-accueil .entry-content > section:has(.wp-block-gallery) .wp-block-column { margin: 0; width: auto; } .darricau-accueil .entry-content > section:has(.wp-block-gallery) .wp-block-column .wp-block-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .wp-block-gallery.bande, .darricau-accueil .entry-content > section .wp-block-gallery { --e: clamp(20px, 2.4vw, 40px); display: flex !important; flex-wrap: nowrap !important; gap: var(--e) !important; container-type: inline-size; margin: clamp(64px, 8vw, 112px) auto 0 !important; padding: 0; align-items: flex-start; } .darricau-accueil .entry-content > section .wp-block-gallery > figure.wp-block-image { margin: 0 !important; flex: 1 1 0 !important; width: auto !important; min-width: 0; height: calc((100cqw - 3 * var(--e)) / 2) !important; display: flex !important; flex-direction: column !important; transition: flex-grow 1.1s var(--lent); } .darricau-accueil .entry-content > section .wp-block-gallery > figure.actuelle { flex-grow: 3 !important; } .wp-block-gallery.bande:has(figure:hover) > figure { flex-grow: 1 !important; } .wp-block-gallery.bande:has(figure:hover) > figure:hover { flex-grow: 6 !important; } .darricau-accueil .entry-content > section .wp-block-gallery > figure img { width: 100% !important; height: 100% !important; flex: 1 1 auto; min-height: 0; object-fit: cover !important; } .darricau-accueil .entry-content > section .wp-block-gallery figcaption { position: static !important; background: none !important; color: #56635E !important; font-size: 13px !important; padding: 12px 0 0 !important; margin: 0 !important; text-align: left !important; max-height: none !important; overflow: visible !important; flex: none; } @media (prefers-reduced-motion: reduce) { .wp-block-gallery.bande > figure { transition: none !important; } } @media (max-width: 860px) { .darricau-accueil .entry-content > section:has(.wp-block-gallery) .wp-block-columns { display: block; } .darricau-accueil .entry-content > section .wp-block-gallery { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 28px 12px !important; } .darricau-accueil .entry-content > section .wp-block-gallery > figure.wp-block-image { height: auto !important; } .darricau-accueil .entry-content > section .wp-block-gallery > figure img { aspect-ratio: 3 / 5; height: auto !important; } .darricau-accueil .entry-content > section .wp-block-gallery > figure.actuelle { grid-column: 1 / -1; order: -1; } .darricau-accueil .entry-content > section .wp-block-gallery > figure.actuelle img { aspect-ratio: 1; } } .en_savoir_plus { margin: 40px 0 0 !important; } .wp-block-group:has(> .en_savoir_plus), .wp-block-group__inner-container:has(> .en_savoir_plus) { display: block; } /* Midi : les gîtes (fiches sur le blanc du matin, dans l'ordre du contenu) */ .darricau-accueil #gites .wp-block-group.intro { position: relative; display: block; padding-left: calc(min(100% - 2 * var(--marge), var(--large)) * .54); max-width: var(--large); box-sizing: border-box; } .darricau-accueil #gites .wp-block-group.intro > *, .darricau-accueil #gites .wp-block-group.intro > .wp-block-group__inner-container > * { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; } .darricau-accueil #gites .wp-block-group.intro h2 { position: absolute; left: 0; bottom: 0; width: 50%; margin: 0 !important; } .darricau-accueil #gites .wp-block-group.intro p { margin: 0 0 1em; } .darricau-accueil #gites .wp-block-group.intro p:last-child { margin-bottom: 0; } .grid-2, .grid-2 > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 40px); } .grid-2 > .wp-block-group__inner-container { display: contents; } .darricau-accueil #gites .grid-2 { margin-top: clamp(56px, 6vw, 88px) !important; } .gite.wp-block-group { position: relative; background: var(--aube); padding: 0 0 clamp(28px, 3vw, 44px); margin: 0; display: flex; flex-direction: column; } .gite.wp-block-group > *:not(figure:first-child) { margin-left: clamp(24px, 3vw, 44px) !important; margin-right: clamp(24px, 3vw, 44px) !important; max-width: none; } .gite.wp-block-group > figure:first-child, .gite > .wp-block-group__inner-container > figure:first-child { margin: 0 0 22px; overflow: hidden; } .gite figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.2s var(--lent); } .gite figure a:hover img { transform: scale(1.03); } .gite figure.plaque-atout-france::after { content: ""; position: absolute; top: 16px; right: 16px; width: 64px; height: 76px; background: url("../img/illustrations/plaque-atout-france.svg") center / contain no-repeat; pointer-events: none; } .gite h3 { font-size: clamp(36px, 3.4vw, 52px); margin: 0 0 6px; } .gite h3 a { color: inherit !important; text-decoration: none; } /* la ligne de capacité qui suit le titre (La Serre) */ .gite h3 + p { font-family: var(--titres); font-style: italic; font-size: 21px; margin: 0 0 18px; } .gite ul { list-style: none; margin: 0 0 20px !important; padding: 0 !important; font-size: 16px; } .gite ul li { padding: 8px 0; border-top: 1px solid var(--filet); } .gite ul li:last-child { border-bottom: 1px solid var(--filet); } .gite ul ul { margin: 6px 0 0 !important; } .gite ul ul li { border: 0 !important; padding: 2px 0 2px 14px; position: relative; } .gite ul ul li::before { content: ""; position: absolute; left: 0; top: .9em; width: 6px; height: 1px; background: var(--or); } .gite p.gite-lien { margin-top: auto !important; padding-top: 8px; } .darricau-accueil #gites > .en_savoir_plus, .darricau-accueil #gites > * > .en_savoir_plus { text-align: left; } @media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } .darricau-accueil #gites .wp-block-group.intro { padding-left: 0; } .darricau-accueil #gites .wp-block-group.intro h2 { position: static; width: auto; margin: 0 0 24px !important; } } /* Après-midi : les activités, en un défilé que pilote le curseur */ .darricau-accueil #activites > .wrap, .darricau-accueil #activites > .wp-block-group__inner-container > .wrap { max-width: var(--large); } .darricau-accueil #activites p.intro { max-width: 40em; font-size: 18px; margin-left: 0 !important; } .darricau-accueil .entry-content > section .is-layout-constrained > :is(p, h2, ul) { margin-left: 0 !important; } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px); } .grid-3 > .wp-block-group__inner-container { display: contents; } .defile { max-width: none !important; width: auto; margin: clamp(56px, 7vw, 100px) calc(-1 * var(--marge)) 0 !important; border-top: 1px solid rgba(176, 146, 90, .55); padding-top: clamp(28px, 3vw, 40px); display: block !important; } .darricau-accueil .entry-content > #activites > .defile { max-width: none !important; margin: clamp(56px, 7vw, 100px) calc(-1 * var(--marge)) 0 !important; } .defile-piste, .defile:not(:has(.defile-piste)) { display: flex !important; gap: clamp(28px, 3vw, 48px) !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--marge); overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--or) transparent; padding: 0 var(--marge) 18px !important; margin: 0 !important; } .defile-piste:focus-visible { outline-offset: -2px; } .defile-piste > .activite { flex: 0 0 clamp(270px, 26vw, 400px) !important; scroll-snap-align: start; margin: 0 !important; } .defile.pilote .defile-piste { scroll-snap-type: none; scrollbar-width: none; cursor: ew-resize; } .defile.pilote .defile-piste::-webkit-scrollbar { display: none; } .activite figure { margin: 0 0 18px !important; } .activite img { width: 100%; aspect-ratio: 536 / 236; object-fit: cover; } .activite p { font-size: 15.5px; line-height: 1.6; margin: 0 0 8px !important; max-width: 34em; } .activite p + p { font-size: 13.5px; color: var(--or-encre); letter-spacing: .02em; } .activite p + p a { color: var(--or-encre) !important; } @media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr; } .defile-piste > .activite { flex-basis: 78vw !important; } .defile { margin-left: calc(-1 * var(--marge)) !important; margin-right: calc(-1 * var(--marge)) !important; } } /* Fin du jour : les avis (WP Review Slider Pro, habillé sans toucher à ses données) */ #reviews h2 { text-align: left !important; } #reviews .wprevpro_badge, #reviews .wprevpro_badge_container .wprevpro_badge { background: transparent !important; border: 0 !important; border-top: 1px solid rgba(49, 64, 59, .24) !important; box-shadow: none !important; border-radius: 0 !important; color: var(--encre) !important; font-family: var(--texte) !important; } #reviews #wprev-badge-1 { border-top: 0 !important; padding: 0 !important; margin: 0 0 clamp(40px, 5vw, 64px) !important; max-width: none !important; } #reviews .wppro_dashboardReviewSummary { background: transparent !important; border: 0 !important; box-shadow: none !important; font-family: var(--texte) !important; } #reviews .wppro_dashboardReviewSummary__avgRating, #reviews .wppro_dashboardReviewSummary .wppro_dashboardReviewSummary__avgRating { font-family: var(--titres) !important; font-weight: 400 !important; color: var(--encre) !important; } #reviews .wp-block-columns { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gout) !important; margin: 0 !important; } #reviews .wp-block-column { margin: 0 !important; width: auto !important; } #reviews .wp-block-column p { text-align: left !important; font-size: 14px; color: #3C4B46; margin: 8px 0 0 !important; } #reviews .wprevpro_badge img { filter: grayscale(.2); } #reviews a { color: var(--encre) !important; } .wprevpro, .wprev_outer_wb, .wprevpro-shortcode-wrapper { font-family: var(--texte) !important; } .wprevpro .indrevdiv, .wprevpro .wprevpro_t1_DIV_2, .wprev-slick-slider .w3_wprs-col > div { border-radius: 0 !important; box-shadow: none !important; } .wprevpro p, .wprevpro .wprevpro_t1_P_3 { font-family: var(--titres) !important; font-style: italic; font-size: 18px !important; line-height: 1.5 !important; color: var(--encre) !important; } @media (max-width: 860px) { #reviews .wp-block-columns { grid-template-columns: 1fr 1fr; } } /* La nuit : questions fréquentes (bloc de l'extension darricau-gites) */ section.darricau-faq { max-width: none !important; width: auto !important; margin: 0 !important; padding: clamp(88px, 10vw, 140px) var(--marge) clamp(64px, 7vw, 96px) !important; background: var(--soir); color: var(--lait); } section.darricau-faq > * { max-width: 46rem !important; margin-left: auto !important; margin-right: auto !important; } section.darricau-faq .darricau-faq__title { font-family: var(--titres) !important; font-weight: 400 !important; font-size: clamp(44px, 4.8vw, 76px) !important; text-align: left !important; color: var(--lait) !important; margin-bottom: clamp(32px, 4vw, 48px) !important; } section.darricau-faq .darricau-faq__title::before { content: ""; display: block; width: 44px; height: 1px; background: var(--or-clair); margin: 0 0 28px; } section.darricau-faq .darricau-faq__subtitle { font-family: var(--texte) !important; font-size: 12px !important; letter-spacing: .2em; text-transform: uppercase; color: var(--or-clair) !important; font-weight: 500 !important; margin: 48px auto 16px !important; text-align: left !important; } section.darricau-faq .darricau-faq__item { border: 0 !important; border-top: 1px solid rgba(241, 239, 232, .22) !important; border-radius: 0 !important; background: transparent !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; } section.darricau-faq .darricau-faq__list .darricau-faq__item:last-child { border-bottom: 1px solid rgba(241, 239, 232, .22) !important; } section.darricau-faq .darricau-faq__q { list-style: none; cursor: pointer; display: flex !important; justify-content: space-between; gap: 24px; align-items: baseline; padding: 14px 0 !important; font-family: var(--titres) !important; font-weight: 400 !important; font-size: clamp(18px, 1.45vw, 21px) !important; line-height: 1.35; color: var(--lait) !important; background: none !important; } section.darricau-faq .darricau-faq__q::-webkit-details-marker { display: none; } section.darricau-faq .darricau-faq__q::before { display: none !important; } section.darricau-faq .darricau-faq__q::after { content: "" !important; flex: none; width: 9px; height: 9px; border-right: 1px solid var(--or-clair); border-bottom: 1px solid var(--or-clair); transform: translateY(-3px) rotate(45deg); transition: transform .5s var(--lent); background: none !important; position: static !important; } section.darricau-faq details[open] > .darricau-faq__q::after { transform: translateY(2px) rotate(225deg); } section.darricau-faq .darricau-faq__a, section.darricau-faq .darricau-faq__a p { color: #E2E6E0 !important; font-size: 16px; max-width: 40em; padding: 0 !important; margin: 0 0 18px !important; background: none !important; } section.darricau-faq a { color: var(--lait) !important; } /* ———————————— Plan du domaine (piste G) ———————————— */ .g { display: grid; grid-template-columns: [bord-g] minmax(20px, 1fr) repeat(12, minmax(0, 88px)) minmax(20px, 1fr) [bord-d]; column-gap: var(--gout); } .darricau-plan { width: 100% !important; max-width: none !important; margin: 0 !important; padding: clamp(96px, 11vw, 150px) 0 clamp(88px, 10vw, 140px); box-sizing: border-box; } .darricau-plan .plan-tete { grid-column: 2 / 9; grid-row: 1; } .darricau-plan .plan-tete h2 { margin: 0; } .darricau-plan .plan-tete h2::before { content: ""; display: block; width: 44px; height: 1px; background: var(--or); margin: 0 0 28px; } .darricau-plan .plan-texte { grid-column: 9 / 14; grid-row: 1; align-self: end; } .plan-outils { grid-column: 2 / 14; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: clamp(48px, 5vw, 72px) 0 14px; } .plan-outils .groupe { display: flex; align-items: center; gap: 18px; padding: 0 26px; border-left: 1px solid rgba(176, 146, 90, .55); } .plan-outils .groupe:first-child { padding-left: 0; border-left: 0; } .bascule { background: none; border: 0; border-bottom: 1px solid transparent; padding: 10px 0 8px; min-height: 44px; font: 400 15px/1.2 var(--texte); color: var(--gris); cursor: pointer; transition: color .4s var(--lent), border-color .4s var(--lent); } .bascule:hover { color: var(--encre); } .bascule[aria-pressed="true"] { color: var(--encre); border-bottom-color: var(--or); } html:not(.js) .plan-outils, .plan-outils [hidden] { display: none; } .plan-scene { grid-column: 2 / bord-d; position: relative; } .plan-cadre { --k: 1.6; --p-hors: #E4E9E1; --p-bourg: #E3E1D8; --p-foret: #BCCDBB; --p-cime: #A6BDA6; --p-clair: #EDF0E2; --p-eau: #AFC8CB; --p-eau-trait: #8AAFB4; --p-reflet: #DCE9EA; --p-route: #FAFAF6; --p-allee: #F6F2E6; --p-bati: #BE9C82; --p-bati-trait: #6D5B4C; --p-halo: #F2F4EE; --p-plaque: rgba(242, 244, 238, .9); --p-ombre: rgba(49, 64, 59, .22); position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 84vh; min-height: 520px; overflow: hidden; overflow: clip; background: var(--p-hors); border-top: 1px solid var(--or); } .plan-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .plan-svg .f-hors { fill: var(--p-hors); } .plan-svg .f-bourg { fill: var(--p-bourg); } .plan-svg .f-eau { fill: var(--p-eau); stroke: var(--p-eau-trait); stroke-width: calc(var(--k) * 1px); } .plan-svg .f-reflet { fill: none; stroke: var(--p-reflet); stroke-width: calc(var(--k) * 1px); stroke-linecap: round; } .plan-svg .f-route-bord { fill: none; stroke: var(--p-bati-trait); stroke-opacity: .22; stroke-width: 9; stroke-linejoin: round; } .plan-svg .f-route { fill: none; stroke: var(--p-route); stroke-width: 7; stroke-linejoin: round; } .plan-svg .f-chemin { fill: none; stroke: var(--p-route); stroke-width: 4; } .plan-svg .f-parc { fill: var(--p-foret); } .plan-svg #cimes circle, .plan-svg #cimes-fines circle { fill: var(--p-cime); } .plan-svg .f-cimes { opacity: .5; transition: opacity .8s var(--lent); } .plan-svg .f-cimes-fines { opacity: 0; transition: opacity .8s var(--lent); } .plan-cadre.lisible .plan-svg .f-cimes { opacity: 0; } .plan-cadre.lisible .plan-svg .f-cimes-fines { opacity: .55; } .plan-svg .f-clair { fill: var(--p-clair); } .plan-svg .f-ruisseau { fill: none; stroke: var(--p-eau-trait); stroke-width: calc(var(--k) * 1px); stroke-linecap: round; stroke-linejoin: round; } .plan-svg .f-allee { fill: none; stroke: var(--p-allee); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; } .plan-svg .f-allee-axe { fill: none; stroke: var(--encre); stroke-opacity: .45; stroke-width: calc(var(--k) * .8px); stroke-linejoin: round; } .plan-svg .ombre { fill: var(--p-ombre); } .plan-svg .bat { fill: var(--p-bati); stroke: var(--p-bati-trait); stroke-width: calc(var(--k) * .8px); stroke-linejoin: round; transition: fill .5s var(--lent); } .plan-svg .bat.allume { fill: var(--or); stroke: var(--encre); } .plan-svg .trace-bord { fill: none; stroke: var(--encre); stroke-width: calc(var(--k) * 1.3px); stroke-linejoin: round; } .plan-svg .trace-allee { fill: none; stroke: var(--or); stroke-width: calc(var(--k) * 2px); stroke-linejoin: round; stroke-linecap: round; } .plan-svg .entree { stroke: var(--or); stroke-width: calc(var(--k) * 3px); stroke-linecap: square; } .plan-svg text { font-family: var(--texte); font-size: calc(var(--k) * 12px); fill: var(--encre); paint-order: stroke; stroke: var(--p-halo); stroke-width: calc(var(--k) * 3.2px); stroke-linejoin: round; } .plan-svg .lieu { font-size: calc(var(--k) * 10.5px); letter-spacing: .14em; text-transform: uppercase; fill: #46544F; } .plan-svg .eau-nom, .plan-svg .allee-nom { font-family: var(--titres); font-style: italic; font-size: calc(var(--k) * 15px); } .plan-svg .petit { font-family: var(--texte); font-style: normal; font-size: calc(var(--k) * 12px); } .plan-svg .filet-nom { fill: none; stroke: var(--encre); stroke-width: calc(var(--k) * .8px); } .plan-svg .loin { transition: opacity .7s var(--lent); } .plan-cadre.lisible .plan-svg .loin { opacity: 0; } html.js .plan-svg .noms-sans-js { display: none; } .plan-cadre.a-tracer .trace-bord, .plan-cadre.a-tracer .trace-allee { stroke-dasharray: 1 1; stroke-dashoffset: 1; } .plan-cadre.a-tracer .entree { opacity: 0; } .plan-cadre.a-tracer.trace .trace-bord { stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s var(--lent); } .plan-cadre.a-tracer.trace .trace-allee { stroke-dashoffset: 0; transition: stroke-dashoffset 2s var(--lent) 1.5s; } .plan-cadre.a-tracer.trace .entree { opacity: 1; transition: opacity .8s var(--lent) 1.2s; } .plan-reperes { position: absolute; inset: 0; pointer-events: none; } .plan-reperes > .repere, .plan-reperes > .paire { position: absolute; pointer-events: auto; } .repere { display: flex; align-items: center; gap: 9px; background: none; border: 0; padding: 4px 2px; min-height: 32px; cursor: pointer; color: var(--encre); font: 500 14px/1.2 var(--texte); transform: translate(-9px, -50%); white-space: nowrap; } .repere.cote-g { flex-direction: row-reverse; transform: translate(calc(-100% + 9px), -50%); } .repere .point, .paire > .point { width: 12px; height: 12px; flex: none; background: var(--encre); transform: rotate(45deg); box-shadow: 0 0 0 2px var(--p-halo); transition: background .4s var(--lent), transform .4s var(--lent); } .repere:not(.gite) .point { background: var(--p-halo); box-shadow: inset 0 0 0 1.5px var(--encre), 0 0 0 2px var(--p-halo); } .repere .nom { background: var(--p-plaque); padding: 3px 8px; border-bottom: 1px solid transparent; transition: border-color .4s var(--lent); } .repere:not(.gite) .nom { font-family: var(--titres); font-style: italic; font-weight: 400; font-size: 15px; } .repere:hover .nom, .repere.allume .nom, .repere[aria-expanded="true"] .nom { border-bottom-color: var(--or); } .repere.allume .point, .repere[aria-expanded="true"] .point, .paire.allume > .point { background: var(--or); transform: rotate(45deg) scale(1.25); } .repere:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; } .paire { display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -6px); } .paire .demis { display: flex; margin-top: 6px; background: var(--p-plaque); } .paire .repere { transform: none; padding: 4px 10px; min-height: 32px; } .paire .repere + .repere { border-left: 1px solid rgba(176, 146, 90, .7); } .paire .repere .nom { background: none; padding: 2px 0; } .amas { transform: translate(-9px, -50%); } .plan-cadre .plan-reperes > .repere:not(.amas), .plan-cadre .plan-reperes > .paire { opacity: 0; visibility: hidden; transition: opacity .5s var(--lent), visibility 0s linear .5s; } .plan-cadre.lisible .plan-reperes > .repere:not(.amas), .plan-cadre.lisible .plan-reperes > .paire { opacity: 1; visibility: visible; transition: opacity .8s var(--lent) calc(var(--i, 0) * .16s), visibility 0s; } .plan-cadre .amas { transition: opacity .5s var(--lent), visibility 0s; } .plan-cadre.lisible .amas { opacity: 0; visibility: hidden; transition: opacity .4s var(--lent), visibility 0s linear .4s; } .plan-heure { position: absolute; left: 16px; top: 16px; margin: 0 !important; background: var(--p-plaque); padding: 10px 16px 10px 14px; z-index: 3; display: flex; align-items: center; gap: 14px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--or-encre); font-weight: 500; } .plan-heure::before { content: ""; width: 44px; height: 1px; background: var(--or); } .plan-compas { position: absolute; right: 16px; top: 16px; width: 58px; height: 58px; background: var(--p-plaque); z-index: 3; } .plan-compas svg { width: 100%; height: 100%; display: block; } .plan-echelle { position: absolute; left: 16px; bottom: 16px; z-index: 3; background: var(--p-plaque); padding: 8px 12px; font-size: 12.5px; color: #46544F; display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; max-width: calc(100% - 32px); } .plan-echelle .barre { display: block; height: 5px; border: 1px solid var(--encre); border-top: 0; width: 0; } .plan-echelle .txt { color: var(--encre); } html:not(.js) .plan-echelle .barre { display: none; } /* le plan se manipule à même le dessin (maquette G, lot 10) : clic = zoom avant, nouveau clic = retour, appui + glissé = déplacement */ html.js .plan-cadre { cursor: zoom-in; } html.js .plan-cadre.zoome { cursor: zoom-out; touch-action: none; } html.js .plan-cadre.tire { cursor: grabbing; } .plan-cadre .repere { cursor: pointer; } .plan-cadre.tire .repere { cursor: inherit; } .apercu { position: absolute; z-index: 8; left: 16px; top: 16px; width: min(320px, calc(100% - 32px)); background: var(--aube); border: 1px solid rgba(49, 64, 59, .18); box-shadow: 0 24px 48px -30px rgba(49, 64, 59, .55); } .apercu[hidden] { display: none; } .apercu img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .apercu-corps { padding: 18px 22px 22px; } .apercu h3 { font-size: 34px; margin: 0 0 4px; } .apercu .capacite { font-family: var(--titres); font-style: italic; font-size: 18px; margin: 0 0 10px; } .apercu .ligne { font-size: 14.5px; line-height: 1.55; color: #3C4B46; margin: 0 0 16px; } .apercu .actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; } .apercu .fermer { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; display: grid; place-items: center; background: rgba(246, 247, 244, .92); border: 0; color: var(--encre); cursor: pointer; } .apercu .fermer svg { width: 14px; height: 14px; } html.anime .apercu { animation: apercu-vient .5s var(--lent); } @keyframes apercu-vient { from { opacity: 0; transform: translateY(6px); } } .plan-liste { grid-column: 2 / 14; list-style: none; margin: clamp(36px, 4vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gout); } .plan-liste li { border-top: 1px solid rgba(176, 146, 90, .55); padding: 18px 0 0; transition: border-color .4s var(--lent); } .plan-liste li.allume { border-top-color: var(--encre); } .plan-liste h3 { font-size: clamp(28px, 2.4vw, 36px); margin: 0 0 4px; } .plan-liste .cap { font-size: 15px; margin: 0 0 12px; color: #3C4B46; } .plan-liste .actions { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; margin: 0; } .situer { background: none; border: 0; padding: 8px 0; min-height: 40px; font: 500 15px/1.2 var(--texte); color: var(--encre); cursor: pointer; border-bottom: 1px solid rgba(49, 64, 59, .35); } .situer:hover { border-bottom-color: var(--or); } @media (prefers-reduced-motion: reduce) { .plan-cadre *, .plan-liste li { transition: none !important; } html.anime .apercu { animation: none; } } @media (max-width: 860px) { .g { grid-template-columns: 20px 1fr 20px; column-gap: 0; } .g > * { grid-column: 2 / 3 !important; grid-row: auto !important; } .g > .plan-scene { grid-column: 1 / -1 !important; } .darricau-plan .plan-texte { margin-top: 24px; } .plan-outils { margin-top: 40px; } .plan-outils .groupe { padding: 0 16px; gap: 14px; } .plan-cadre { aspect-ratio: 4 / 5; min-height: 0; max-height: none; border-top: 0; } .plan-heure { left: 10px; top: 10px; padding: 8px 10px; font-size: 11px; letter-spacing: .16em; } .plan-heure::before { width: 24px; } .plan-compas { right: 10px; top: 10px; width: 46px; height: 46px; } .plan-echelle { left: 10px; bottom: 10px; font-size: 11.5px; gap: 8px; } .plan-svg text { font-size: calc(var(--k) * 10.5px); } .plan-svg .detail { display: none; } .apercu { position: relative; left: auto !important; top: auto !important; width: auto; margin: 0 20px; box-shadow: none; border-top: 0; } .plan-liste { grid-template-columns: 1fr; gap: 0; } .plan-liste li { padding: 16px 0 18px; } } @media (min-width: 480px) and (max-width: 860px) { .apercu { display: grid; grid-template-columns: 44% 1fr; } .apercu img { height: 100%; aspect-ratio: auto; min-height: 220px; } } /* ———————————— Pages intérieures ———————————— */ .breadcrumb { font-size: 13.5px; letter-spacing: .02em; color: var(--gris); margin: clamp(28px, 4vw, 48px) 0 clamp(24px, 3vw, 40px); } .breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px 10px; list-style: none; margin: 0; padding: 0; } .breadcrumb li { margin: 0; } .breadcrumb li.separator { color: var(--or); } .breadcrumb a { color: var(--gris) !important; text-decoration: none; border-bottom: 1px solid rgba(49, 64, 59, .3); } .breadcrumb a:hover { color: var(--encre) !important; } .site-principal:not(.modele-accueil) .entry-content > h2, .site-principal:not(.modele-accueil) .entry-content .wp-block-group > h2, .site-principal:not(.modele-accueil) .entry-content .wp-block-group__inner-container > h2 { font-size: clamp(34px, 3.6vw, 56px); margin: clamp(48px, 6vw, 80px) 0 24px; } .site-principal:not(.modele-accueil) .entry-content h3 { font-size: clamp(24px, 2.2vw, 32px); margin: 32px 0 12px; } .site-principal .entry-content p, .site-principal .entry-content li { max-width: 46em; } .site-principal .entry-content ul.wp-block-list { padding-left: 1.1em; } .site-principal .entry-content ul.wp-block-list li::marker { color: var(--or); } .has-text-align-center { text-align: inherit; } /* Fiche gîte : réservation Smoobu, présentation, pièces, calendrier */ .book.wp-block-group, #book, #booking-tool-container-allApartments { width: min(100% - 2 * var(--marge), var(--large)); margin: calc(-1 * var(--resa-chevauche, 48px)) auto 0 !important; position: relative; z-index: 3; background: var(--aube); border: 1px solid var(--filet); padding: clamp(12px, 2vw, 24px); box-sizing: border-box; } #book iframe, #booking-tool-container-allApartments iframe { display: block; width: 100% !important; border: 0; } .intro-gite { margin-top: clamp(24px, 3vw, 40px) !important; } .detail-gite { display: grid !important; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px) !important; align-items: start; margin: 0 !important; } .detail-gite .wp-block-column { margin: 0 !important; width: auto !important; } .detail-gite .wp-block-column:first-child p { font-size: 18px; line-height: 1.7; } .detail-gite .wp-block-column:first-child p:first-child::first-line { font-family: var(--titres); font-size: 1.2em; } .detail-gite .wp-block-column + .wp-block-column { background: var(--jour); padding: clamp(24px, 3vw, 40px); position: relative; } .detail-gite .wp-block-column + .wp-block-column ul { list-style: none; padding: 0 !important; margin: 0 0 20px !important; } .detail-gite .wp-block-column + .wp-block-column li { padding: 8px 0; border-top: 1px solid var(--filet); margin: 0; } .detail-gite .wp-block-column + .wp-block-column li:last-child { border-bottom: 1px solid var(--filet); } .detail-gite .wp-block-column + .wp-block-column ul:first-child li:first-child { font-family: var(--titres); font-style: italic; font-size: 22px; border-top: 0; } .intro-gite::after, .calendrier::before, #reviews:not(.darricau-accueil #reviews)::before { content: ""; display: block; width: 44px; height: 1px; background: var(--or); margin: clamp(56px, 7vw, 96px) auto; } .piece { width: min(100% - 2 * var(--marge), var(--large)) !important; margin: clamp(48px, 6vw, 88px) auto 0 !important; } .piece > h2, .piece > .wp-block-group__inner-container > h2 { font-size: clamp(30px, 3vw, 46px) !important; margin: 0 0 20px !important; text-align: left !important; } .galerie, .galerie > .wp-block-group__inner-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gout); } .galerie > .wp-block-group__inner-container { display: contents; } .galerie > * { margin: 0 !important; width: 100% !important; } .galerie figure img { width: 100%; height: auto; object-fit: contain; } /* 328 : proportions d'origine (le rapport vient des attributs width et height de l'image), rien n'est coupé */ .galerie .galerie-detail { background: var(--jour); padding: clamp(20px, 2.6vw, 36px); } .galerie .galerie-detail:empty, .galerie .galerie-detail > .wp-block-group__inner-container:empty { display: none; } .galerie ul { columns: 2; list-style: none; padding: 0; } .galerie ul li { padding: 4px 0; border-top: 1px solid var(--filet); break-inside: avoid; } @media (max-width: 760px) { .galerie { grid-template-columns: 1fr; } .detail-gite { grid-template-columns: 1fr; } } .calendrier.wp-block-group { margin-top: 0 !important; } .calendrier .calendarWidget, .calendrier iframe { max-width: 100%; } .gite-reservation { width: min(100% - 2 * var(--marge), var(--large)); box-sizing: border-box; margin: clamp(40px, 5vw, 72px) auto !important; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: clamp(20px, 2.6vw, 32px) clamp(24px, 3vw, 44px); background: var(--encre); color: var(--lait); border: 0; border-radius: 0; } .gite-reservation .gite-cta-prix { display: flex; align-items: baseline; gap: 10px; } .gite-reservation .gite-cta-from, .gite-reservation .gite-cta-unit { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--or-clair); } .gite-reservation .gite-cta-montant { font-family: var(--titres); font-weight: 400; font-size: clamp(40px, 4vw, 60px); color: var(--lait); line-height: 1; } .gite-reservation .gite-cta-button { background: var(--lait); border-color: var(--lait); color: var(--encre) !important; } .gite-reservation .gite-cta-button:hover { background: transparent; color: var(--lait) !important; } .modele-gite section.darricau-faq { margin-top: clamp(56px, 7vw, 100px) !important; } #autres_gites { width: min(100% - 2 * var(--marge), var(--large)); margin: 0 auto; padding: clamp(72px, 8vw, 120px) 0; } #autres_gites > h2 { font-size: clamp(40px, 4.4vw, 68px); margin: 0 0 clamp(32px, 4vw, 48px); } #autres_gites > h2::before { content: ""; display: block; width: 44px; height: 1px; background: var(--or); margin: 0 0 28px; } ul.gites { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(20px, 2.4vw, 32px); list-style: none; margin: 0; padding: 0; } ul.gites > li.gite { margin: 0; background: var(--aube); } ul.gites > li.gite > a { display: block; color: var(--encre) !important; text-decoration: none; height: 100%; } ul.gites > li.gite figure { margin: 0; overflow: hidden; } ul.gites > li.gite img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.2s var(--lent); } ul.gites > li.gite a:hover img { transform: scale(1.04); } ul.gites > li.gite h3 { font-size: clamp(26px, 2.2vw, 34px); margin: 18px 20px 10px; } ul.gites .detail { list-style: none; margin: 0 20px 22px; padding: 0; font-size: 14.5px; color: #3C4B46; } ul.gites .detail li { padding: 5px 0; border-top: 1px solid var(--filet); } /* Nos gîtes : rangées de gîtes, texte « Quel gîte choisir ? » */ .modele-tous-nos-gites #nos-gites-intro { font-size: 19px; line-height: 1.7; max-width: 40em; } .modele-tous-nos-gites #gites { margin-top: clamp(40px, 5vw, 72px) !important; } .modele-tous-nos-gites #gites .wp-block-columns { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 3vw, 48px); align-items: center; margin: 0 0 clamp(20px, 2.4vw, 40px) !important; background: var(--aube); } .modele-tous-nos-gites #gites .wp-block-columns:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .modele-tous-nos-gites #gites .wp-block-columns:nth-child(even) > .wp-block-column:first-child { order: 2; } .modele-tous-nos-gites #gites .wp-block-column { margin: 0 !important; width: auto !important; padding: clamp(8px, 2vw, 28px); } .modele-tous-nos-gites #gites .wp-block-column:has(> figure:only-child), .modele-tous-nos-gites #gites .wp-block-column:has(> .wp-block-image:first-child) { padding: 0; } .modele-tous-nos-gites #gites img { width: 100%; object-fit: cover; aspect-ratio: 3 / 2; } .modele-tous-nos-gites .nos-gites-complement { max-width: 46rem; margin: clamp(56px, 7vw, 100px) auto !important; } @media (max-width: 860px) { .modele-tous-nos-gites #gites .wp-block-columns, .modele-tous-nos-gites #gites .wp-block-columns:nth-child(even) { grid-template-columns: 1fr; } .modele-tous-nos-gites #gites .wp-block-columns:nth-child(even) > .wp-block-column:first-child { order: 0; } } /* Page par défaut (« Le domaine ») : pièces et colonnes */ .modele-page .entry-content > .wp-block-group:not(.wrap) { width: min(100% - 2 * var(--marge), var(--large)); margin-left: auto; margin-right: auto; } .modele-page .entry-content .wp-block-columns { gap: clamp(24px, 3vw, 48px); margin: clamp(40px, 5vw, 72px) 0; } .modele-page .entry-content figure.wp-block-image img { width: 100%; height: auto; } .modele-page .entry-content figcaption { font-size: 13px; color: #4A5853; margin-top: 10px; text-align: left; } .modele-page .entry-content > :last-child { margin-bottom: clamp(72px, 8vw, 120px); } /* Pages légales */ .modele-legal .columns2 { width: min(100% - 2 * var(--marge), var(--large)); margin: 0 auto; padding: clamp(40px, 6vw, 88px) 0 clamp(72px, 8vw, 120px); } .modele-legal .legal-tete h1 { font-size: clamp(40px, 5.6vw, 84px); margin: 0 0 clamp(32px, 4vw, 56px); max-width: 16em; } .modele-legal .legal-tete h1::before { content: ""; display: block; width: 44px; height: 1px; background: var(--or); margin: 0 0 28px; } .modele-legal .content .wrap { width: auto; } .modele-legal h3 { font-family: var(--texte) !important; font-size: 13px !important; letter-spacing: .16em; text-transform: uppercase; font-weight: 500 !important; color: var(--or-encre); margin: 32px 0 10px !important; break-after: avoid; } .modele-legal h2 { font-size: clamp(26px, 2.4vw, 34px) !important; margin: 40px 0 14px !important; } .modele-legal p, .modele-legal li { font-size: 16px; line-height: 1.7; } @media (min-width: 1024px) { .modele-legal .col2 > .wp-block-group__inner-container, .modele-legal .col2:not(:has(> .wp-block-group__inner-container)) { column-count: 2; column-gap: clamp(32px, 4vw, 64px); } } /* 404 */ .modele-404 .entry-content { width: min(100% - 2 * var(--marge), var(--large)); margin: 0 auto; padding: clamp(48px, 7vw, 120px) 0; } .modele-404 h1 { font-size: clamp(48px, 7vw, 108px); } /* ———————————— Journal (index, article, rubrique, guide, archives) ———————————— */ .dj-hero { position: relative; min-height: min(72vh, 680px); display: flex; align-items: flex-end; color: #fff; background: var(--encre); overflow: hidden; margin: 0; } .dj-hero--article { min-height: min(76vh, 760px); } .dj-hero--plain { min-height: 0; padding-top: 0; background: var(--jour); color: var(--encre); } .dj-hero__media { position: absolute; inset: 0; } .dj-hero__img { width: 100%; height: 100% !important; object-fit: cover; } .dj-hero__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(24, 33, 30, .78) 0%, rgba(24, 33, 30, .38) 40%, rgba(24, 33, 30, .05) 72%), linear-gradient(to bottom, rgba(24, 33, 30, .45), rgba(24, 33, 30, 0) 180px); } .dj-hero__inner { position: relative; z-index: 2; width: min(100% - 2 * var(--marge), var(--large)); margin: 0 auto; padding: calc(var(--h-entete) + 32px) 0 clamp(48px, 7vh, 88px); } .dj-hero--plain .dj-hero__inner { padding-top: clamp(48px, 7vw, 96px); } .dj-hero__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: var(--or-clair); margin: 0 0 22px !important; } .dj-hero--plain .dj-hero__eyebrow { color: var(--or-encre); } .dj-hero__eyebrow::before { content: ""; width: 44px; height: 1px; background: currentColor; } .dj-hero__chip { color: inherit !important; text-decoration: none; border-bottom: 1px solid currentColor; } .dj-hero__title { font-size: clamp(48px, 7vw, 112px); line-height: 1.05; margin: 0; max-width: 14em; color: inherit; } .dj-hero--article .dj-hero__title { font-size: clamp(40px, 5.4vw, 84px); max-width: 18em; } .dj-hero__script { font-family: var(--titres); font-style: italic; font-size: clamp(22px, 2.2vw, 32px); color: #F3EEE3; margin: .4em 0 0 !important; } .dj-hero--plain .dj-hero__script { color: var(--encre); } .dj-hero__intro { font-size: 19px; max-width: 34em; margin: 18px 0 0 !important; } .dj-hero__meta { font-size: 14px; margin: 18px 0 0 !important; color: #EEF0EA; } .dj-meta__i + .dj-meta__i::before { content: "·"; margin: 0 .6em; color: var(--or); } .dj { background: var(--aube); } .dj-wrap { width: min(100% - 2 * var(--marge), var(--large)); margin: 0 auto; padding: clamp(48px, 6vw, 88px) 0 clamp(72px, 8vw, 120px); } .dj-section + .dj-section { margin-top: clamp(56px, 6vw, 88px); } .dj-section__title { font-family: var(--texte) !important; font-size: 12px !important; letter-spacing: .2em; text-transform: uppercase; font-weight: 500 !important; color: var(--or-encre); margin: 0 0 24px !important; display: flex; align-items: center; gap: 14px; } .dj-section__title::before { content: ""; width: 44px; height: 1px; background: var(--or); } .dj-grid--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(20px, 2.4vw, 40px); } .dj-card { position: relative; display: flex; flex-direction: column; } .dj-card__media { display: block; overflow: hidden; margin: 0 0 18px; } .dj-card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.2s var(--lent); } .dj-card:hover .dj-card__media img { transform: scale(1.04); } .dj-card__media--empty { aspect-ratio: 3 / 2; background: var(--jour); display: grid; place-items: center; font-family: var(--titres); font-size: 64px; color: var(--or); } .dj-card__meta, .dj-feature__meta { font-size: 13px; color: var(--gris); margin: 0 0 8px !important; } .dj-card__title { font-size: clamp(24px, 2vw, 30px); margin: 0 0 10px; } .dj-card__title a, .dj-feature__title a { color: var(--encre) !important; text-decoration: none; } .dj-card__link::after { content: ""; position: absolute; inset: 0; } .dj-card__excerpt { font-size: 15.5px; color: #3C4B46; margin: 0 0 14px !important; } .dj-more { align-self: flex-start; font-size: 15px; } .dj-feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: center; position: relative; } .dj-feature__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .dj-feature__title { font-size: clamp(34px, 3.6vw, 56px); margin: 0 0 16px; } .dj-feature__title a::after { content: ""; position: absolute; inset: 0; } .dj-feature__excerpt { font-size: 17px; margin: 0 0 18px !important; } .dj-pagination { margin-top: clamp(48px, 6vw, 72px); } .dj-pagination ul { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0; } .dj-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; border: 1px solid var(--filet); color: var(--encre) !important; text-decoration: none; } .dj-pagination .page-numbers.current { background: var(--encre); color: var(--aube) !important; } .dj-empty { padding: 40px 0; } .dj-article { padding-bottom: clamp(56px, 7vw, 100px); } .dj-article__crumbs { width: min(100% - 2 * var(--marge), var(--large)); margin: 0 auto; } .dj-article__article { width: min(100% - 2 * var(--marge), var(--lecture)); margin: 0 auto; } .dj-article__body { font-size: 18px; line-height: 1.75; } .dj-article__body > p:first-child::first-line { font-family: var(--titres); font-size: 1.15em; } .dj-article__body h2 { font-size: clamp(30px, 3vw, 44px) !important; margin: 56px 0 18px !important; } .dj-article__body h3 { font-size: clamp(22px, 2vw, 28px) !important; margin: 36px 0 12px !important; } .dj-article__body figure { margin: 36px 0; } .dj-article__body figure.alignwide, .dj-article__body figure.alignfull { width: min(100vw - 2 * var(--marge), var(--large)); margin-left: 50%; transform: translateX(-50%); } .dj-article__body figcaption { font-size: 13px; color: #4A5853; text-align: left; } .dj-article__body blockquote { border-left: 1px solid var(--or); margin: 32px 0; padding: 0 0 0 24px; font-family: var(--titres); font-style: italic; font-size: 1.2em; } .dj-article__tags { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; margin: 40px 0 0 !important; padding-top: 20px; border-top: 1px solid var(--filet); } .dj-article__tags span { letter-spacing: .14em; text-transform: uppercase; font-size: 12px; color: var(--or-encre); } .dj-article__tags a { color: var(--encre) !important; } .dj-adjacent { width: min(100% - 2 * var(--marge), var(--large)); margin: clamp(56px, 7vw, 100px) auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gout); } .dj-adjacent__link { display: block; padding: 22px 0; border-top: 1px solid var(--or); color: var(--encre) !important; text-decoration: none; } .dj-adjacent__link--next { text-align: right; grid-column: 2; } .dj-adjacent__label { display: block; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--or-encre); margin-bottom: 6px; } .dj-adjacent__title { font-family: var(--titres); font-size: clamp(20px, 1.8vw, 26px); } .dj-cta { width: min(100% - 2 * var(--marge), var(--large)); margin: clamp(56px, 7vw, 100px) auto 0; padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 64px); background: var(--encre); color: var(--lait); box-sizing: border-box; display: grid; gap: 18px; justify-items: start; } .dj-cta__title { font-size: clamp(36px, 4vw, 64px); margin: 0; color: var(--lait) !important; } .dj-cta__text { max-width: 36em; margin: 0 !important; color: #D9DED8; } .dj-cta .dj-btn { background: var(--lait); border-color: var(--lait); color: var(--encre) !important; } .dj-cta .dj-btn:hover { background: transparent; color: var(--lait) !important; } .dj-related { background: var(--jour); } .dj-related__all { margin: 40px 0 0 !important; } .dj-rubrique__intro { max-width: 46rem; margin-bottom: clamp(40px, 5vw, 64px); } .dj-recherche .resultat { padding: 24px 0; border-top: 1px solid var(--filet); } .dj-recherche .entry-title { font-size: clamp(24px, 2.2vw, 32px); margin: 0 0 8px; } .dj-recherche .entry-title a { color: var(--encre) !important; text-decoration: none; } @media (max-width: 960px) { .dj-grid--3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { .dj-grid--3, .dj-feature, .dj-adjacent { grid-template-columns: 1fr; } .dj-adjacent__link--next { grid-column: 1; text-align: left; } } /* ———————————— Pied de page : la nuit ———————————— */ .site-pied { margin: 0; } .pied { background: var(--nuit); color: var(--lait); font-size: 15px; padding: clamp(72px, 8vw, 110px) var(--marge) 36px; } html.ciel-actif .pied { background: transparent; } .pied-in { max-width: var(--large); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(32px, 4vw, 64px) var(--gout); } .pied a { color: var(--lait) !important; } .pied-logo .logo { width: 200px; height: 140px; margin: -20px 0 0 -14px; color: var(--lait) !important; } .pied #footer-widget-area { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); gap: clamp(32px, 4vw, 64px); } .pied .footer-widget, .pied .widget { margin: 0; } .pied h2, .pied h3 { font-family: var(--texte) !important; font-size: 12px !important; letter-spacing: .2em; text-transform: uppercase; color: var(--or-clair) !important; margin: 0 0 16px !important; font-weight: 500 !important; } .pied p { color: #DDE2DC; } .pied .wpcf7 { margin: 0; } .pied .wpcf7 p { margin: 0 0 14px; } .pied .wpcf7 label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #C9D0CA; display: block; } .pied .wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .pied .wpcf7 textarea, .pied .wpcf7 select { width: 100%; box-sizing: border-box; background: transparent; border: 0; border-bottom: 1px solid rgba(241, 239, 232, .4); color: var(--lait); font: 16px/1.4 var(--texte); padding: 10px 0; border-radius: 0; margin-top: 4px; } .pied .wpcf7 textarea { min-height: 120px; resize: vertical; } .pied .wpcf7 input:focus, .pied .wpcf7 textarea:focus { outline: none; border-bottom-color: var(--or-clair); } .pied .wpcf7 ::placeholder { color: rgba(241, 239, 232, .65); } .pied .wpcf7-submit { background: var(--lait) !important; border-color: var(--lait) !important; color: var(--encre) !important; margin-top: 8px; } .pied .wpcf7-submit:hover { background: transparent !important; color: var(--lait) !important; } .pied .wpcf7-not-valid-tip { color: #F2B8A8; font-size: 13px; } .pied .wpcf7-response-output { border-color: var(--or-clair) !important; color: var(--lait); } .pied .darricau-coord { font-style: normal; line-height: 1.7; margin-top: 24px; } .pied .darricau-coord p { margin: 0 0 4px; } .pied .darricau-coord__label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--or-clair) !important; margin-top: 14px !important; } .pied .darricau-coord__mini { font-size: 14px; color: #C9D0CA !important; } .pied #bottom-widget-area { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); gap: var(--gout); padding-top: 24px; border-top: 1px solid rgba(241, 239, 232, .16); align-items: start; } .pied #bottom-widget-area ul.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; } .pied #bottom-widget-area ul.menu a { color: #DDE2DC !important; text-decoration: none; } .pied #bottom-widget-area ul.menu a:hover { text-decoration: underline; } .pied .modes-paiement-acceptes, .pied .modes-paiement-acceptes > .wp-block-group__inner-container { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; } .pied .modes-paiement-acceptes figure { margin: 0 !important; padding: 4px 6px; opacity: .85; } .pied .modes-paiement-acceptes img { display: block; height: 22px; width: auto; } .pied .after-footer { grid-column: 1 / -1; font-size: 13.5px; color: #C9D0CA; padding-top: 24px; border-top: 1px solid rgba(241, 239, 232, .16); } .pied .after-footer a { text-decoration: none; } .pied .after-footer .credits-wizm a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(241, 239, 232, .4); } /* mention de pied habituelle de wizm */ .pied .after-footer .credits-wizm a:hover { text-decoration-color: currentColor; } @media (max-width: 860px) { .pied-in, .pied #footer-widget-area, .pied #bottom-widget-area { grid-template-columns: 1fr; } .pied-logo .logo { width: 160px; height: 112px; } .pied .modes-paiement-acceptes, .pied .modes-paiement-acceptes > .wp-block-group__inner-container { justify-content: flex-start; } } /* ———————————— Apparitions (seulement si le script tourne) ———————————— */ html.anime [data-ap] { opacity: 0; transform: translateY(16px); transition: opacity 1.1s var(--lent), transform 1.1s var(--lent); } html.anime [data-ap].vu { opacity: 1; transform: none; } html.anime [data-pose] { overflow: hidden; } html.anime [data-pose] img { opacity: 0; transform: scale(1.04); transition: opacity 1.3s var(--lent), transform 1.4s var(--lent); } html.anime [data-pose].vu img { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.anime [data-ap], html.anime [data-pose] img { opacity: 1 !important; transform: none !important; transition: none !important; } .kb, .darricau-diapo.kb img { animation: none !important; } } /* ———————————— Mobile ———————————— */ @media (max-width: 860px) { body.darricau { font-size: 16.5px; } .entry-content > .wp-block-cover:first-child { min-height: 64vh; } } /* Nos gîtes : le lien « + » de chaque rangée, en bouton carré lisible */ .bouton-plus a { display: inline-grid; place-items: center; min-width: 48px; min-height: 48px; border: 1px solid var(--encre); color: var(--encre) !important; text-decoration: none !important; font-size: 22px; line-height: 1; transition: background .4s var(--lent), color .4s var(--lent); } .bouton-plus a:hover { background: var(--encre); color: var(--aube) !important; } .modele-tous-nos-gites #gites .wprevpro_badge { box-shadow: none !important; border: 1px solid var(--filet) !important; border-radius: 0 !important; background: transparent !important; } /* ———————————— Accueil : ordre et sections de la maquette G (décision du 18/10/2026) ———————————— Bandeau de réservation, gîtes en grandes et petites fiches, histoire, soir au lac, appel, « Nous trouver / Plan d'accès ». Blocs natifs du contenu (classes accueil-*), fonds tenus sans JavaScript. */ .darricau-accueil .entry-content > #reservation { background: var(--aube); } .darricau-accueil .entry-content > #histoire { background: var(--ombre); } .darricau-accueil .entry-content > #soir { background: var(--encre); } .darricau-accueil .entry-content > #appel { background: var(--soir); } .darricau-accueil .entry-content > #acces { background: var(--nuit); } .accueil-faq-place:empty { display: none; } /* Le bandeau de réservation : posé à cheval sur le bas du héros ; des liens, pas un faux formulaire */ .darricau-accueil .entry-content > section.accueil-resa { position: relative; z-index: 6; display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 0 max(var(--marge), calc((100% - var(--large)) / 2)) clamp(56px, 7vw, 96px) !important; } .darricau-accueil .entry-content > section.accueil-resa > * { max-width: none !important; width: 100% !important; box-sizing: border-box; justify-self: stretch; margin-left: 0 !important; margin-right: 0 !important; text-align: left; } .accueil-resa > .resa-gites, .accueil-resa > .resa-bouton { margin-top: -48px !important; margin-bottom: 0 !important; background: var(--aube); border: 1px solid rgba(49, 64, 59, .16); } .accueil-resa > .resa-gites { grid-column: 1; list-style: none; padding: 0 !important; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-right: 0; } .accueil-resa .resa-gites li { border-right: 1px solid rgba(49, 64, 59, .14); margin: 0; } .accueil-resa .resa-gites a { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 84px; height: 100%; box-sizing: border-box; padding: 14px 22px; color: #4E5C57 !important; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none !important; transition: background .4s var(--lent); } .accueil-resa .resa-gites a strong { font: 500 17px/1.3 var(--texte); letter-spacing: 0; text-transform: none; color: var(--encre); } .accueil-resa .resa-gites a:hover { background: var(--jour); } .accueil-resa > .resa-bouton { grid-column: 2; display: flex; border-left: 0; } .accueil-resa .resa-bouton .wp-block-button, .accueil-resa .resa-bouton .wp-block-button__link { height: 100%; } .accueil-resa .resa-bouton .wp-block-button__link { display: flex; align-items: center; min-height: 84px; padding: 0 34px; border: 0; box-sizing: border-box; } .accueil-resa > .resa-note { grid-column: 1 / -1; margin: 14px 0 0 !important; font-size: 14px; color: #4E5C57; } .accueil-resa .resa-note strong { font-weight: 500; color: var(--encre); } /* Les gîtes : les deux grandes maisons en grandes fiches (photo au bord, fiche à côté), puis deux petites */ .darricau-accueil #gites .grid-2 > .gite:nth-child(-n+2) { grid-column: 1 / -1; width: 100%; display: grid !important; grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); grid-auto-rows: min-content; align-content: center; column-gap: 0; padding: 0; background: transparent; } .darricau-accueil #gites .grid-2 > .gite:nth-child(1) { justify-self: start; margin-left: 0 !important; margin-right: auto !important; } .darricau-accueil #gites .grid-2 > .gite:nth-child(2) { justify-self: end; margin-left: auto !important; margin-right: 0 !important; } /* même largeur que la première, décalée vers la droite (les marges auto du gabarit « contraint » de WordPress centreraient sinon) */ .darricau-accueil #gites .grid-2 > .gite:nth-child(-n+2) > * { grid-column: 2; } .darricau-accueil #gites .grid-2 > .gite:nth-child(-n+2) > figure:first-child { grid-column: 1; grid-row: 1 / span 6; margin: 0 !important; position: relative; min-height: clamp(420px, 40vw, 600px); } .darricau-accueil #gites .grid-2 > .gite:nth-child(-n+2) > figure:first-child a { position: absolute; inset: 0; display: block; } .darricau-accueil #gites .grid-2 > .gite:nth-child(-n+2) > figure:first-child img { position: absolute; inset: 0; width: 100%; height: 100% !important; aspect-ratio: auto; } .darricau-accueil #gites .grid-2 > .gite:nth-child(-n+2) > :not(figure) { background: var(--aube); margin: 0 !important; padding-left: clamp(28px, 3vw, 44px); padding-right: clamp(28px, 3vw, 44px); } .darricau-accueil #gites .grid-2 > .gite:nth-child(-n+2) > h3 { padding-top: clamp(28px, 3vw, 44px); padding-bottom: 6px; } .darricau-accueil #gites .grid-2 > .gite:nth-child(-n+2) > :last-child { padding-bottom: clamp(28px, 3vw, 44px); } .darricau-accueil #gites .grid-2 > .gite:nth-child(-n+2) > ul { margin-bottom: 0 !important; padding: 0 clamp(28px, 3vw, 44px) 20px !important; } .darricau-accueil #gites .grid-2 > .gite:nth-child(-n+2) > ul + ul { padding-top: 0 !important; } .darricau-accueil #gites .grid-2 > .gite:nth-child(2) { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); } .darricau-accueil #gites .grid-2 > .gite:nth-child(2) > * { grid-column: 1; } .darricau-accueil #gites .grid-2 > .gite:nth-child(2) > figure:first-child { grid-column: 2; } .darricau-accueil #gites .grid-2 > .gite:nth-child(n+3) > :is(ul, p) { margin-left: clamp(24px, 3vw, 44px) !important; margin-right: clamp(24px, 3vw, 44px) !important; } .darricau-accueil #gites p.gites-ensemble { margin: clamp(48px, 6vw, 80px) 0 0 !important; max-width: 36em; } @media (max-width: 860px) { .darricau-accueil #gites .grid-2 > .gite:nth-child(-n+2), .darricau-accueil #gites .grid-2 > .gite:nth-child(2) { grid-template-columns: 1fr; width: 100%; } .darricau-accueil #gites .grid-2 > .gite:nth-child(-n+2) > *, .darricau-accueil #gites .grid-2 > .gite:nth-child(-n+2) > figure:first-child { grid-column: 1; grid-row: auto; } .darricau-accueil #gites .grid-2 > .gite:nth-child(-n+2) > figure:first-child { min-height: 0; aspect-ratio: 4 / 3; } } /* L'histoire (fond vert-gris d'ombre, distinct des activités et des avis) */ .darricau-accueil .entry-content > section.accueil-histoire { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 5vw, 96px); align-items: start; padding: clamp(96px, 11vw, 160px) max(var(--marge), calc((100% - var(--large)) / 2)) clamp(72px, 8vw, 120px) !important; } .darricau-accueil .entry-content > section.accueil-histoire > * { max-width: none !important; width: 100% !important; box-sizing: border-box; margin-left: 0 !important; margin-right: 0 !important; text-align: left; } .accueil-histoire > h2 { grid-column: 1; grid-row: 1; } .accueil-histoire > .hist-tableau { grid-column: 2; grid-row: 1 / 4; margin: 0 !important; } .accueil-histoire > .hist-tableau img { width: 100%; height: auto; aspect-ratio: 668 / 845; object-fit: contain; } /* portrait du général : entier, proportions d'origine (668 × 845) */ .accueil-histoire figcaption { font-size: 13px !important; color: #4A5853; margin-top: 10px; text-align: left !important; } .accueil-histoire > .frise { grid-column: 1; grid-row: 2; list-style: none; margin: 24px 0 0 !important; padding: 0 !important; } .accueil-histoire .frise li { position: relative; padding: 22px 0 22px 144px; margin: 0; border-top: 1px solid rgba(49, 64, 59, .18); } .accueil-histoire .frise li > strong:first-child { position: absolute; left: 0; top: 22px; width: 120px; font-family: var(--titres); font-weight: 400; font-size: 30px; line-height: 1.1; } .accueil-histoire > .hist-source { grid-column: 1; grid-row: 3; font-size: 13px; color: #4A5853; margin: 0 !important; } .accueil-histoire > .hist-portraits { grid-column: 2; grid-row: 4; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gout); align-items: start; margin: 48px 0 0 !important; } .accueil-histoire .hist-portraits figure { margin: 0 !important; width: 100%; } .accueil-histoire .hist-portraits img { width: 100% !important; height: auto !important; object-fit: contain; } .accueil-histoire .hist-portraits figure:nth-child(1) img { aspect-ratio: 668 / 554 !important; } /* tableau de Churchill, entier */ .accueil-histoire .hist-portraits figure:nth-child(2) img { aspect-ratio: 668 / 432 !important; } /* manoir, entier */ .accueil-histoire a { color: var(--encre); } /* le titre se dépose lettre à lettre, puis chaque élément vient, dans un ordre tiré au hasard (script) */ .hist-anime .hist-titre .lettre { display: inline-block; opacity: 0; transform: translateY(-.32em); filter: blur(3px); transition: opacity .9s var(--lent), transform 1.1s var(--lent), filter .9s var(--lent); } .hist-anime .hist-titre .mot { display: inline-block; white-space: nowrap; } .hist-anime.joue .hist-titre .lettre { opacity: 1; transform: none; filter: none; } .hist-anime [data-hist] { opacity: 0; transition: opacity 1.4s var(--lent); } .hist-anime.joue [data-hist] { opacity: 1; } /* les photos de l'histoire en grand : fond blanc, fondu sobre */ .agrandir { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } .agrandir:focus-visible { outline: 2px solid var(--vert); outline-offset: 3px; } .visionneuse { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #fff; color: var(--encre); } .visionneuse::backdrop { background: #fff; } .visionneuse[open] { display: grid; grid-template-rows: auto 1fr auto; animation: vis-entre .35s var(--lent); } @keyframes vis-entre { from { opacity: 0; } to { opacity: 1; } } .vis-barre { display: flex; justify-content: space-between; align-items: center; padding: 16px clamp(16px, 3vw, 32px); } .vis-compte { font-size: 14px; color: #4A5853; margin: 0; } .vis-scene { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(8px, 2vw, 24px); padding: 0 clamp(8px, 2vw, 24px); min-height: 0; } .vis-scene figure { margin: 0; display: grid; justify-items: center; align-content: center; gap: 14px; min-height: 0; height: 100%; } .vis-scene img { max-width: 100%; max-height: calc(100vh - 190px); width: auto; height: auto; object-fit: contain; animation: vis-image .45s var(--lent); } @keyframes vis-image { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } } .vis-scene figcaption { font-size: 14px; color: #4A5853; max-width: 60ch; text-align: center; } .vis-bouton { width: 48px; height: 48px; display: grid; place-items: center; background: none; border: 1px solid rgba(49, 64, 59, .3); color: var(--encre); cursor: pointer; transition: border-color .3s var(--lent); } .vis-bouton:hover { border-color: var(--encre); } .vis-bouton:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; } .vis-bouton svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .vis-pied { height: 24px; } @media (max-width: 700px) { .vis-scene { grid-template-columns: 1fr; } .vis-scene .vis-bouton { position: absolute; bottom: 16px; } .vis-prec { left: 16px; } .vis-suiv { right: 16px; } .vis-pied { height: 80px; } } /* Le soir au lac : la photo plein cadre, la phrase posée en bas à gauche */ .darricau-accueil .entry-content > section.accueil-lac { position: relative; padding: 0 !important; color: #fff; } .darricau-accueil .entry-content > section.accueil-lac > * { max-width: none !important; } .accueil-lac > figure { margin: 0 !important; height: 100vh; height: 100svh; min-height: 520px; max-height: 1000px; overflow: hidden; position: relative; } .accueil-lac > figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; } .accueil-lac > figure::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 15% 85%, rgba(24, 33, 30, .62), rgba(24, 33, 30, 0) 60%); pointer-events: none; } .darricau-accueil .entry-content > section.accueil-lac > p { position: absolute; z-index: 2; left: var(--marge) !important; right: var(--marge) !important; margin: 0 !important; max-width: 620px !important; } .accueil-lac > .lac-phrase { bottom: calc(clamp(40px, 8vh, 88px) + 38px); font-family: var(--titres); font-style: italic; font-size: clamp(30px, 3.4vw, 50px); line-height: 1.2; color: #fff; } .accueil-lac > .lac-legende { bottom: clamp(40px, 8vh, 88px); font-size: 15px; color: #EEF0EA; } /* L'appel : réserver en direct, sur le soir */ .darricau-accueil .entry-content > section.accueil-appel { color: var(--lait); padding-top: clamp(56px, 7vw, 96px) !important; } .darricau-accueil .entry-content > section.accueil-appel > * { max-width: 760px !important; } .accueil-appel > h2 { border-top: 1px solid var(--or); padding-top: clamp(48px, 6vw, 80px) !important; font-size: clamp(44px, 5.2vw, 84px) !important; color: var(--lait); } .accueil-appel > h2::before { display: none !important; } .accueil-appel p { color: #D9DED8; font-size: 15px; } .darricau-accueil .entry-content > section.accueil-appel > .wp-block-buttons { margin-top: 8px !important; margin-bottom: 18px !important; } .accueil-appel .wp-block-button__link { background: var(--lait); border-color: var(--lait); color: var(--encre) !important; } .accueil-appel .wp-block-button__link:hover { background: transparent; color: var(--lait) !important; } .accueil-appel a:not(.wp-block-button__link) { color: var(--lait); } /* Nous trouver / Plan d'accès : la nuit, juste avant le pied */ .darricau-accueil .entry-content > section.accueil-acces { color: var(--lait); font-size: 15px; padding: clamp(72px, 8vw, 110px) var(--marge) clamp(48px, 5vw, 72px) !important; } .accueil-acces .wp-block-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 6vw, 96px); margin: 0 !important; } .accueil-acces .wp-block-column { margin: 0 !important; width: auto !important; } .darricau-accueil .entry-content > section.accueil-acces h2 { font-family: var(--texte); font-size: 12px !important; letter-spacing: .2em; text-transform: uppercase; color: var(--or-clair); margin: 0 0 16px !important; font-weight: 500; } .accueil-acces h2::before { display: none !important; } .accueil-acces .acces-adresse { line-height: 1.9; margin: 0; } .accueil-acces a { color: var(--lait) !important; text-decoration: none; border-bottom: 1px solid rgba(241, 239, 232, .35); } .darricau-acces { margin: 0; } .darricau-acces svg { width: 100%; height: auto; display: block; border: 1px solid rgba(241, 239, 232, .18); } .darricau-acces figcaption, .accueil-acces .acces-distance { font-size: 13px; color: #C9D0CA; margin: 10px 0 0; } .darricau-acces figcaption { display: inline; } .darricau-acces figcaption::after { content: "."; } @media (max-width: 860px) { .darricau-accueil .entry-content > section.accueil-resa { grid-template-columns: 1fr; } .accueil-resa > .resa-gites { grid-template-columns: 1fr 1fr; margin-top: -28px !important; border-right: 1px solid rgba(49, 64, 59, .16); } .accueil-resa .resa-gites li { border-bottom: 1px solid rgba(49, 64, 59, .14); } .accueil-resa .resa-gites li:nth-child(2n) { border-right: 0; } .accueil-resa .resa-gites a { min-height: 72px; padding: 12px 16px; } .accueil-resa > .resa-bouton { grid-column: 1; margin-top: 0 !important; border-left: 1px solid rgba(49, 64, 59, .16); border-top: 0; } .accueil-resa .resa-bouton .wp-block-button { width: 100%; } .accueil-resa .resa-bouton .wp-block-button__link { width: 100%; justify-content: center; min-height: 60px; } .darricau-accueil .entry-content > section.accueil-histoire { grid-template-columns: 1fr; } .accueil-histoire > * { grid-column: 1 !important; grid-row: auto !important; } .accueil-histoire > .hist-tableau { margin-top: 36px !important; } .accueil-histoire .frise li { padding-left: 100px; } .accueil-histoire .frise li > strong:first-child { font-size: 24px; } .accueil-histoire > .hist-portraits { grid-template-columns: repeat(2, minmax(0, 1fr)); } .accueil-acces .wp-block-columns { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .visionneuse[open], .vis-scene img { animation: none; } .hist-anime .hist-titre .lettre, .hist-anime [data-hist] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } } /* ———————————— Retours de recette du 18/10/2026 (signalements 326 à 330) ———————————— */ /* 328 : aucune photo n'est coupée (proportions d'origine) ; 327 : chaque photo se pose en bas de sa cellule. */ .galerie figure { align-self: end; } /* 328 (suite) : les photos dont le bloc impose un rapport 3/2 en ligne (style="aspect-ratio:3/2;object-fit:cover") reprennent aussi leurs proportions. */ .galerie figure img[style*="aspect-ratio"] { aspect-ratio: auto !important; object-fit: contain !important; contain: none; } /* 326 : une pièce à deux photos seulement les empile l'une sous l'autre, à droite du texte. */ @media (min-width: 761px) { .galerie:has(> .galerie-detail:first-child):has(> figure:nth-child(3):last-child) > .galerie-detail { grid-column: 1; grid-row: 1 / span 2; } .galerie:has(> .galerie-detail:first-child):has(> figure:nth-child(3):last-child) > figure { grid-column: 2; align-self: start; } } /* 329 : le message du formulaire de contact tient sur trois lignes. */ .pied .wpcf7 textarea { min-height: 0; height: calc(3 * 1.5em + 14px); } /* 330 : tous les logos de paiement dans la même boîte, sur une seule ligne. */ .pied .modes-paiement-acceptes, .pied .modes-paiement-acceptes > .wp-block-group__inner-container { flex-wrap: nowrap; gap: 8px; } /* 91 (19/10/2026) : chaque logo à la même hauteur, sa largeur suit ses proportions (remplace la boîte de 64 px du 330, où les logos larges rapetissaient) */ .pied .modes-paiement-acceptes, .pied .modes-paiement-acceptes > .wp-block-group__inner-container { gap: 14px; align-items: center; } .pied .modes-paiement-acceptes figure { flex: none; width: auto !important; min-width: 0; height: auto; padding: 0; margin: 0 !important; display: flex; align-items: center; } .pied .modes-paiement-acceptes img { display: block; width: auto !important; height: 22px !important; max-width: none; object-fit: contain; } /* 105 : CB et Mastercard sont dessinés petits dans leur fichier (grandes marges internes) : on les agrandit pour que tous les logos paraissent de même hauteur */ .pied .modes-paiement-acceptes img[src*="LOGO_CB"], .pied .modes-paiement-acceptes img[src*="mastercard"] { height: 34px !important; margin: -6px 0; } @media (max-width: 520px) { .pied .modes-paiement-acceptes img[src*="LOGO_CB"], .pied .modes-paiement-acceptes img[src*="mastercard"] { height: 30px !important; margin: -5px 0; } } @media (max-width: 520px) { .pied .modes-paiement-acceptes img { height: 20px !important; } .pied .modes-paiement-acceptes, .pied .modes-paiement-acceptes > .wp-block-group__inner-container { gap: 12px; } } /* ———————————— Corrections du 19/10/2026 (signalements 79 à 87, domaine-darricau.fr) ———————————— */ /* 79 : le héros des fiches de gîte (et sa photo) au rapport 2/1. 80 : le titre descend au bas du héros ; l'écart entre le titre et le bloc blanc du moteur de réservation vaut le chevauchement de ce bloc sur le héros (--resa-chevauche, 48 px sur grand écran). */ .modele-gite .entry-content > .wp-block-cover:first-child { min-height: 0 !important; aspect-ratio: 2 / 1; height: auto; padding-bottom: calc(2 * var(--resa-chevauche)); } .modele-gite .entry-content > .wp-block-cover:first-child > .wp-block-cover__image-background { background-size: cover; } .modele-gite .entry-content > .wp-block-cover:first-child .wp-block-cover__inner-container > :last-child { margin-bottom: 0 !important; } @media (max-width: 860px) { /* sur un téléphone, 2/1 laisse 195 px : le héros garde ce rapport tant que l'en-tête fixe et le titre y tiennent, et grandit sinon */ .modele-gite .entry-content > .wp-block-cover:first-child { padding-top: calc(var(--h-entete) + 20px); } } /* Retour du 19/10/2026 (après mesure en ligne : La Vigne 5/1 à cause d'un style en ligne `aspect-ratio:unset`, Le domaine et Nos gîtes 2,43/1) : TOUS les héros des pages intérieures (hors accueil) sont au rapport 2/1, quel que soit le style en ligne du bloc Couverture. */ body:not(.darricau-accueil) .entry-content > .wp-block-cover:first-child:not(.darricau-heros) { min-height: 0 !important; aspect-ratio: 2 / 1 !important; height: auto !important; } body:not(.darricau-accueil) .entry-content > .wp-block-cover:first-child:not(.darricau-heros) > .wp-block-cover__image-background { background-size: cover; } .darricau-contact .entry-content > .darricau-contact-heros:first-child { min-height: 0 !important; aspect-ratio: 2 / 1 !important; height: auto !important; } /* Retour du 19/10/2026 : héros de Contact en 4/1 sur grand écran (2/1 sur téléphone, où 4/1 ne laisserait pas la place du titre), titre « Contactez-nous » posé près du bas, photo qui respire lentement (zoom doux, coupé en mouvement réduit). */ @media (min-width: 861px) { body.darricau-contact .entry-content > .darricau-contact-heros.wp-block-cover:first-child:not(.darricau-heros) { aspect-ratio: 4 / 1 !important; padding-top: calc(var(--h-entete) + 8px); padding-bottom: clamp(14px, 1.8vw, 28px); align-items: flex-end; } .darricau-contact .darricau-contact-heros__titre { font-size: clamp(44px, 6.2vw, 104px); line-height: 1; margin: 0; padding: 0; } } @media (prefers-reduced-motion: no-preference) { .darricau-contact-heros > .darricau-contact-heros__img { animation: darricau-respire 22s ease-in-out infinite alternate; will-change: transform; } } @keyframes darricau-respire { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(-1.5%, -2%, 0); } } @media (max-width: 860px) { body:not(.darricau-accueil) .entry-content > .wp-block-cover:first-child:not(.darricau-heros), .darricau-contact .entry-content > .darricau-contact-heros:first-child { padding-top: calc(var(--h-entete) + 20px); } } /* 81 : la présentation du gîte. Le texte devient une ouverture (Bodoni, lettrine), suivi du sommaire des pièces (inc/pages.php : titre et première photo de chaque pièce du contenu) ; la fiche technique suit à droite. */ .detail-gite { align-items: start !important; } .detail-gite > .wp-block-column:first-child { position: relative; } .detail-gite > .wp-block-column:first-child::before { content: ""; display: block; width: 44px; height: 1px; background: var(--or); margin: 6px 0 28px; } .detail-gite > .wp-block-column:first-child > p { font-family: var(--titres); font-size: clamp(21px, 1.75vw, 28px) !important; line-height: 1.5 !important; text-align: left !important; letter-spacing: 0; word-spacing: normal; max-width: 34em; margin: 0 0 .8em; } .detail-gite > .wp-block-column:first-child > p:first-child::first-line { font-size: 1em; } .detail-gite > .wp-block-column:first-child > p:first-of-type::first-letter { float: left; font-size: 3.3em; line-height: .82; margin: .1em .12em 0 -.02em; color: var(--vert); } .detail-gite > .wp-block-column:first-child > p:empty { display: none; } .gite-pieces { margin: clamp(32px, 4vw, 56px) 0 0; } .gite-pieces__titre { font-family: var(--texte) !important; font-size: 12px !important; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: var(--or-encre); margin: 0 0 16px !important; display: flex; align-items: center; gap: 14px; } .gite-pieces__titre::after { content: ""; flex: 1; height: 1px; background: rgba(176, 146, 90, .45); } .gite-pieces__liste { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(var(--colonnes, 3), minmax(0, 1fr)); gap: 20px var(--gout); } .site-principal .entry-content .gite-pieces__liste li { margin: 0; padding: 0; max-width: none; border: 0; } .gite-pieces__liste a { display: block; color: var(--encre) !important; text-decoration: none !important; } .gite-pieces__liste img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--lent), filter .6s var(--lent); } .gite-pieces__liste a > img { margin: 0; } .gite-pieces__liste li a { overflow: hidden; } .gite-pieces__liste span { display: block; padding: 10px 0 0; border-bottom: 1px solid transparent; font-family: var(--titres); font-size: 19px; line-height: 1.25; transition: color .4s var(--lent); } .gite-pieces__liste a:hover span, .gite-pieces__liste a:focus-visible span { color: var(--vert); } .gite-pieces__liste a:hover img { filter: brightness(1.06); } @media (min-width: 761px) { .detail-gite > .wp-block-column + .wp-block-column { position: sticky; top: calc(var(--h-entete) + 24px); } .admin-bar .detail-gite > .wp-block-column + .wp-block-column { top: calc(var(--h-entete) + 56px); } } @media (max-width: 760px) { /* sur un téléphone, le sommaire défile de côté (au doigt), sans élargir la page */ .gite-pieces__liste { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(150px, 44%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px !important; scrollbar-width: thin; scrollbar-color: var(--or) transparent; } .gite-pieces__liste li { scroll-snap-align: start; } .detail-gite > .wp-block-column:first-child > p { font-size: 20px !important; } } @media (prefers-reduced-motion: reduce) { .gite-pieces__liste img { transition: none; } } /* 82 : toutes les photos de chaque galerie s'affichent (la cause était le filtre « m2 → m² », corrigé dans inc/reglages.php ; il cassait l'icône de la lightbox et enfermait les photos suivantes dans son bouton). */ /* 86 : sur les fiches de gîte, toutes les photos des galeries au même rapport (--galerie-rapport, 4/3), qui remplissent leur case sans trou ; une case plus haute (texte long) est remplie aussi. Remplace, pour les fiches, le parti « proportions d'origine » des retours 327 et 328. */ .modele-gite .galerie > figure { align-self: stretch !important; display: flex !important; flex-direction: column; min-height: 0; } .modele-gite .galerie figure img, .modele-gite .galerie figure img[style*="aspect-ratio"] { display: block; width: 100% !important; height: auto !important; min-height: 0; flex: 1 1 auto; aspect-ratio: var(--galerie-rapport) !important; object-fit: cover !important; } .modele-gite .galerie figcaption { flex: none; font-size: 13px; color: #4A5853; margin: 10px 0 0; text-align: left; } .galerie > p:empty { display: none; } /* 107 : paragraphe vide laissé par l'éditeur en fin de galerie */ /* un nombre impair de cases laisserait un trou en bas : le texte de la pièce prend alors deux rangées */ @media (min-width: 761px) { .modele-gite .galerie:has(> .galerie-detail:first-child):has(> :last-child:nth-child(odd):not(p:empty)) > .galerie-detail { grid-row: span 2; } /* 107 : un paragraphe vide en fin de galerie ne compte pas comme une case */ } /* 84 : « Le domaine » : les images des galeries alignées en haut de leur case, légende affichée sous chacune. */ .modele-page .galerie > figure { align-self: start !important; display: flex !important; flex-direction: column; } .modele-page .galerie figcaption, .galerie figure > figcaption.wp-element-caption { display: block !important; position: static !important; visibility: visible !important; opacity: 1 !important; max-height: none !important; overflow: visible !important; background: none !important; font-size: 13px; line-height: 1.5; color: #4A5853 !important; padding: 0 !important; margin: 10px 0 0 !important; text-align: left !important; } /* 85 : « Nos gîtes » : le badge d'avis, plus petit, en bas à droite du bloc de texte de chaque gîte. */ .modele-tous-nos-gites #gites .wp-block-column.gite_detail { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding-bottom: clamp(56px, 5vw, 72px) !important; } .modele-tous-nos-gites #gites .gite_detail > .wprevpro_badge, .modele-tous-nos-gites #gites .gite_detail > .wprevpro-shortcode-wrapper { position: absolute !important; top: auto !important; left: auto !important; right: clamp(8px, 2vw, 28px); bottom: clamp(8px, 2vw, 28px); height: auto !important; min-height: 0 !important; margin: 0 !important; width: max-content !important; text-align: right; max-width: none !important; transform: scale(.82); transform-origin: right bottom; border: 0 !important; border-top: 1px solid var(--filet) !important; padding: 8px 0 0 !important; } @media (max-width: 860px) { .modele-tous-nos-gites #gites .wp-block-column.gite_detail { padding-bottom: 72px !important; } } /* 87 : sur les fiches de gîte, les avis isolés sur un fond RAL 6012 qui va d'un bord à l'autre de la fenêtre ; les cartes d'avis restent claires, tout le texte posé sur le vert est clair (contraste AA). */ .modele-gite .entry-content > #reviews { width: 100% !important; max-width: none !important; margin: clamp(72px, 9vw, 128px) 0 0 !important; padding: clamp(72px, 8vw, 120px) var(--marge) clamp(64px, 7vw, 104px); box-sizing: border-box; background: var(--encre); color: var(--lait); } .modele-gite .entry-content > #reviews > * { max-width: var(--large); margin-left: auto !important; margin-right: auto !important; } .modele-gite .entry-content > #reviews::before { display: none !important; } .modele-gite .entry-content > #reviews > h2::before { content: ""; display: block; width: 44px; height: 1px; background: var(--or-clair); margin: 0 0 28px; } .modele-gite .entry-content > #reviews > h2 { color: var(--lait) !important; text-align: left !important; font-size: clamp(40px, 4.4vw, 68px) !important; margin-top: 0 !important; margin-bottom: clamp(32px, 4vw, 56px) !important; } .modele-gite #reviews .wprevpro_t1_SPAN_5, .modele-gite #reviews .wprevpro_t1_SPAN_5 *, .modele-gite #reviews .wprev_preview_tcolor2_T1 { color: #E2E6E0 !important; } .modele-gite #reviews .wprevpro_t1_rname { color: var(--lait) !important; font-weight: 500; letter-spacing: .06em; } .modele-gite #reviews .wprevpro_avatarimg { box-shadow: 0 0 0 2px rgba(241, 239, 232, .5); } .modele-gite #reviews .wprevpro_t1_DIV_2::after, .modele-gite #reviews .indrevdiv::after { border-top-color: #fff !important; } .modele-gite #reviews .indrevdiv, .modele-gite #reviews .wprev-google-place { background: #fff !important; } .modele-gite #reviews .wprev-google-place { border: 0 !important; box-shadow: none !important; border-radius: 0 !important; } .modele-gite #reviews .wprevpro p, .modele-gite #reviews .wprevpro .indrevtxt, .modele-gite #reviews .wprevpro .readmoretextdiv { word-break: normal !important; overflow-wrap: break-word !important; hyphens: manual !important; } .modele-gite #reviews .wprevpro_btn_show_rdpop, .modele-gite #reviews .wprs_rd_less { color: var(--vert) !important; } .modele-gite #reviews .slickwprev-dots li button::before { color: var(--lait) !important; opacity: .45 !important; } .modele-gite #reviews .slickwprev-dots li.slickwprev-active button::before { color: var(--or-clair) !important; opacity: 1 !important; } .modele-gite #reviews .slickwprev-prev::before, .modele-gite #reviews .slickwprev-next::before { color: var(--lait) !important; opacity: .8; } .modele-gite #reviews .wprevpro_load_more_btn { background: transparent !important; color: var(--lait) !important; border: 1px solid rgba(241, 239, 232, .6) !important; border-radius: 0 !important; font-family: var(--texte) !important; } .modele-gite #reviews a:not(.wprevpro_t1_site_logo_a) { color: var(--lait) !important; } .modele-gite #reviews .indrevdiv a { color: var(--vert) !important; } /* le filet d'or qui suivait les avis (avant le calendrier) n'a plus lieu d'être juste après le fond vert */ .modele-gite .entry-content > #reviews + .calendrier::before { margin-top: clamp(48px, 6vw, 80px); } /* 83 : la page Contact : photo d'ouverture (l'allée de Darricau à l'automne), puis les coordonnées et le formulaire Contact Form 7 en deux colonnes, dans la peau du site. */ .darricau-contact-heros { position: relative; display: flex; overflow: hidden; background: var(--encre); } .darricau-contact-heros > .darricau-contact-heros__img { position: absolute; inset: 0; width: 100%; height: 100% !important; max-width: none; object-fit: cover; object-position: 50% 58%; z-index: 0; } .darricau-contact-heros > .wp-block-cover__background { position: absolute; inset: 0; z-index: 1; } .darricau-contact-heros > .wp-block-cover__inner-container { position: relative; z-index: 2; } .darricau-contact .entry-content > .darricau-contact-heros:first-child { min-height: min(62vh, 620px); padding-bottom: clamp(56px, 8vh, 96px); } .darricau-contact .entry-content > .wp-block-columns { display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 112px) !important; align-items: start; padding: clamp(64px, 8vw, 120px) 0 clamp(80px, 9vw, 140px); margin: 0 auto !important; } .darricau-contact .entry-content > .wp-block-columns > .wp-block-column { margin: 0 !important; width: auto !important; min-width: 0; } /* Colonne de gauche sans second titre (le héros porte déjà « Contact ») : l'accroche devient le grand texte, les coordonnées se posent en lignes filetées, assez amples pour tenir face à la carte du formulaire. */ .darricau-contact .entry-content > .wp-block-columns > .wp-block-column:first-child > p { font-size: clamp(19px, 1.55vw, 23px); line-height: 1.55; margin: 0 !important; padding: clamp(22px, 2.2vw, 32px) 0; border-top: 1px solid var(--filet); text-align: left; letter-spacing: 0; word-spacing: normal; } .darricau-contact .entry-content > .wp-block-columns > .wp-block-column:first-child > p:last-child { border-bottom: 1px solid var(--filet); } .darricau-contact .entry-content > .wp-block-columns > .wp-block-column:first-child > p:first-child { position: relative; font-family: var(--titres); font-style: italic; font-size: clamp(32px, 3.5vw, 54px); line-height: 1.14; letter-spacing: -.005em; color: var(--encre); border-top: 0; padding: 0 0 clamp(30px, 3.2vw, 48px); } .darricau-contact .entry-content > .wp-block-columns > .wp-block-column:first-child > p:first-child::before { content: ""; display: block; width: 56px; height: 1px; background: var(--or); margin: 0 0 clamp(22px, 2.4vw, 34px); } .darricau-contact .entry-content > .wp-block-columns > .wp-block-column:first-child > p:nth-child(2) { font-size: clamp(21px, 1.9vw, 28px); line-height: 1.7; color: var(--encre); } .darricau-contact .entry-content > .wp-block-columns > .wp-block-column:first-child > p:empty { display: none; } .darricau-contact .entry-content > .wp-block-columns > .wp-block-column:first-child > h2 { font-size: clamp(40px, 4.4vw, 68px) !important; line-height: 1.08; margin: 0 0 clamp(28px, 3vw, 40px) !important; text-align: left !important; letter-spacing: -.005em; } .darricau-contact .entry-content > .wp-block-columns > .wp-block-column:first-child > h2::before { content: ""; display: block; width: 44px; height: 1px; background: var(--or); margin: 0 0 28px; } .darricau-contact .entry-content > .wp-block-columns > .wp-block-column:first-child > p { font-size: 17px; line-height: 1.7; margin: 0 !important; padding: 16px 0; border-top: 1px solid var(--filet); text-align: left; letter-spacing: 0; word-spacing: normal; } .darricau-contact .entry-content > .wp-block-columns > .wp-block-column:first-child > p:last-child { border-bottom: 1px solid var(--filet); } .darricau-contact .entry-content > .wp-block-columns > .wp-block-column:first-child > h2 + p { font-family: var(--titres); font-style: italic; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.4; border-top: 0; padding-top: 0; } .darricau-contact .entry-content > .wp-block-columns > .wp-block-column:first-child > p:empty { display: none; } .darricau-contact .entry-content .wpcf7 { background: var(--jour); padding: clamp(28px, 4vw, 56px); margin: 0; } .darricau-contact .entry-content .wpcf7 form > p { margin: 0; max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px clamp(16px, 2vw, 28px); } .darricau-contact .entry-content .wpcf7 .wpcf7-form-control-wrap { display: block; grid-column: 1 / -1; } .darricau-contact .entry-content .wpcf7 .wpcf7-form-control-wrap[data-name="your-first-name"], .darricau-contact .entry-content .wpcf7 .wpcf7-form-control-wrap[data-name="your-name"] { grid-column: auto; } .darricau-contact .entry-content .wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .darricau-contact .entry-content .wpcf7 textarea, .darricau-contact .entry-content .wpcf7 select { display: block; width: 100%; box-sizing: border-box; background: transparent; border: 0; border-bottom: 1px solid rgba(49, 64, 59, .45); border-radius: 0; color: var(--encre); font: 17px/1.4 var(--texte); padding: 14px 0 10px; margin: 0; box-shadow: none; -webkit-appearance: none; appearance: none; } .darricau-contact .entry-content .wpcf7 select { background-image: linear-gradient(45deg, transparent 50%, var(--encre) 50%), linear-gradient(135deg, var(--encre) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 6px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 28px; cursor: pointer; } .darricau-contact .entry-content .wpcf7 textarea { height: auto; min-height: 168px; resize: vertical; } .darricau-contact .entry-content .wpcf7 input:focus, .darricau-contact .entry-content .wpcf7 textarea:focus, .darricau-contact .entry-content .wpcf7 select:focus { outline: none; border-bottom: 2px solid var(--vert); padding-bottom: 9px; } .darricau-contact .entry-content .wpcf7 input:focus-visible, .darricau-contact .entry-content .wpcf7 textarea:focus-visible, .darricau-contact .entry-content .wpcf7 select:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; } .darricau-contact .entry-content .wpcf7 ::placeholder { color: #56635E; opacity: 1; } .darricau-contact .entry-content .wpcf7 .wpcf7-submit { grid-column: 1 / -1; justify-self: start; width: auto; min-width: 180px; margin-top: 22px; padding: 14px 36px; } .darricau-contact .entry-content .wpcf7 .wpcf7-spinner { grid-column: 1 / -1; } .darricau-contact .entry-content .wpcf7-not-valid-tip { color: #8E2F1E; font-size: 13px; margin-top: 4px; } .darricau-contact .entry-content .wpcf7-response-output { margin: 20px 0 0 !important; padding: 12px 16px !important; border: 1px solid var(--or) !important; font-size: 15px; } @media (max-width: 860px) { .darricau-contact .entry-content > .darricau-contact-heros:first-child { min-height: 52vh; } .darricau-contact .entry-content > .wp-block-columns { grid-template-columns: 1fr; gap: 40px !important; padding-top: 48px; } } @media (max-width: 520px) { .darricau-contact .entry-content .wpcf7 form > p { grid-template-columns: 1fr; } .darricau-contact .entry-content .wpcf7 .wpcf7-form-control-wrap[data-name="your-first-name"], .darricau-contact .entry-content .wpcf7 .wpcf7-form-control-wrap[data-name="your-name"] { grid-column: 1 / -1; } .darricau-contact .entry-content .wpcf7 .wpcf7-submit { width: 100%; } } /* 87 (suite) : le badge de note reste une carte claire, son texte en encre */ .modele-gite #reviews .wprev-google-place, .modele-gite #reviews .wprev-google-place * { color: var(--encre) !important; } /* (vu en vérifiant 83) sur un téléphone, les logos de paiement du pied passent à la ligne au lieu de déborder (« stripe » coupé) */ @media (max-width: 520px) { .pied .modes-paiement-acceptes, .pied .modes-paiement-acceptes > .wp-block-group__inner-container { flex-wrap: wrap; justify-content: flex-start; } } /* 88 (19/10/2026) : « je ne veux pas de filtre sur les photos » : aucun voile sur les photos d'ouverture des pages intérieures (fiches de gîte, Contact, Le domaine, journal…) ; le titre reste lisible par une ombre portée douce. Le diaporama de l'accueil (.darricau-voile) et « Le soir au lac » gardent leur dégradé. */ .entry-content > .wp-block-cover:first-child:not(.darricau-heros) .wp-block-cover__background { background: none !important; opacity: 0 !important; } .dj-hero__scrim { background: none !important; } .entry-content > .wp-block-cover:first-child:not(.darricau-heros) :is(h1, h2, p), .dj-hero__inner :is(h1, h2, p, a, span) { text-shadow: 0 1px 2px rgba(15, 22, 20, .55), 0 2px 18px rgba(15, 22, 20, .55), 0 0 42px rgba(15, 22, 20, .35); } .entete.sur-heros .nav-principale a, .entete.sur-heros .langues-zone a { text-shadow: 0 1px 2px rgba(15, 22, 20, .6), 0 0 16px rgba(15, 22, 20, .45); } /* 88 (suite) : sans voile, l'en-tête ne se pose plus en transparence sur une photo claire des pages intérieures : il garde son fond clair (contraste AA du menu et du logo) ; seul l'accueil le garde transparent sur son diaporama. */ body:not(.darricau-accueil) .entete.sur-heros { background: rgba(246, 247, 244, .97); color: var(--encre); border-bottom-color: rgba(49, 64, 59, .12); } body:not(.darricau-accueil) .entete.sur-heros::before { display: none; } body:not(.darricau-accueil) .entete.sur-heros .logo { color: var(--logo) !important; } body:not(.darricau-accueil) .entete.sur-heros .nav-principale a, body:not(.darricau-accueil) .entete.sur-heros .langues-zone a { text-shadow: none; } /* 90 (19/10/2026) : « Nous trouver / Plan d'accès » : une vraie carte (OpenStreetMap, image fixe du thème), avec ses liens (carte, itinéraire) et la mention de licence, lisibles sur la nuit. */ .darricau-acces img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 3; object-fit: cover; border: 1px solid rgba(241, 239, 232, .18); } .darricau-acces figcaption { display: flex !important; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; margin: 12px 0 0 !important; font-size: 13px; color: #C9D0CA; } .darricau-acces figcaption::after { content: none !important; } .darricau-acces figcaption a { color: var(--lait) !important; } .darricau-acces .acces-licence, .darricau-acces .acces-licence a { color: #C9D0CA !important; } /* Retours du 19/10/2026 (signalements 93 à 96) */ /* 94 : les deux tableaux remontent sous le portrait du général (au lieu de suivre la fin de la frise). La hauteur du portrait se déduit de la largeur de la colonne (5/12 de la largeur utile du conteneur, proportions 668 × 845) ; la légende garde deux lignes. */ @media (min-width: 861px) { .darricau-accueil .entry-content > section.accueil-histoire { container-type: inline-size; --hist-largeur: 100cqw; --hist-col: calc((var(--hist-largeur) - clamp(32px, 5vw, 96px)) * 5 / 12); } .accueil-histoire > .hist-tableau figcaption { min-height: calc(2 * 1.4 * 13px); line-height: 1.4; } .accueil-histoire > .hist-portraits { grid-row: 1 / 4; align-self: start; margin-top: calc(var(--hist-col) * 845 / 668 + 10px + 2 * 1.4 * 13px + 53px) !important; } } /* 95 : le résumé des notes ne tient plus sur toute la largeur : une colonne compacte */ #reviews #wprev-badge-1 { width: min(100%, 520px) !important; max-width: 520px !important; } #reviews .wprevpro_badge_container:has(#wprev-badge-1) { max-width: 520px; } /* 96 : les quatre plateformes en cartes : nom, étoiles, grande note en Bodoni (plus de bleu), lien centré ; les logos (mal rendus) se retirent, le nom suffit */ #reviews .wp-block-columns > .wp-block-column { display: flex; flex-direction: column; align-items: center; text-align: center; border: 1px solid rgba(49, 64, 59, .2); background: rgba(255, 255, 255, .34); padding: clamp(24px, 2.6vw, 40px) clamp(16px, 1.8vw, 28px) clamp(20px, 2.2vw, 30px); } #reviews .wp-block-columns .wprevpro_badge_container { width: 100%; } #reviews .wp-block-columns .wprevpro_badge { padding: 0 !important; border: 0 !important; width: 100% !important; text-align: center !important; } #reviews .wp-block-columns .wppro_badge5_name { font-family: var(--titres) !important; font-size: clamp(24px, 2vw, 30px) !important; font-weight: 400 !important; color: var(--encre) !important; letter-spacing: .01em; margin: 0 0 12px !important; } #reviews .wp-block-columns .wppro_badge5_stars { margin: 0 0 14px !important; display: flex; justify-content: center; } #reviews .wp-block-columns .wppro_badge5_stars .svgicons { filter: none !important; } #reviews .wp-block-columns .wppro_badge5_total { color: #3C4B46 !important; font-size: 14px !important; line-height: 1.5 !important; } #reviews .wp-block-columns .wppro_badge5_total .b5 { display: block; font-family: var(--titres) !important; font-weight: 400 !important; font-size: clamp(44px, 4vw, 60px) !important; line-height: 1 !important; color: var(--encre) !important; margin: 0 0 6px; } #reviews .wp-block-columns .wppro_badge5_icons { display: none !important; } #reviews .wp-block-columns > .wp-block-column > p { text-align: center !important; margin: auto 0 0 !important; padding-top: clamp(16px, 1.8vw, 24px); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; width: 100%; } #reviews .wp-block-columns > .wp-block-column > p a { text-decoration: underline; text-decoration-color: var(--or); text-underline-offset: .35em; text-decoration-thickness: 1px; }