/*
Theme Name: iwego child
Description: Theme iwego
Author: Iwego
Template: iwego
Version: 1.0.0
*/
/************************************************/
/** **/
/** GENERAL **/
/** **/
/************************************************/
:root {
--box-shadow : rgba(0, 0, 0, 0.04) 0px 3px 5px;
--transform-scale : scale3d(1.02, 1.02, 1.02);
--transition : all 350ms ease-in-out;
--fontAwesome : "Font Awesome 6 Free";
--border : .1rem solid #e5dfcf;
--font-secondaire : 'Fraunces', sans-serif;
}
h1 {letter-spacing: .03rem; text-wrap: balance;}
p {line-height: 1.6;}
img {display: block;}
input, select, textarea, button {font-family: inherit}
select {color: rgba(16, 44, 53, .8); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 2rem center; }
input::placeholder, textarea::placeholder {color: rgba(16, 44, 53, .8);}
input, select, textarea { border: none; text-transform: uppercase; padding: 1.5rem; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: #fff;}
input:focus-visible, select:focus-visible, textarea:focus-visible {outline-color: var(--couleur-cta); outline-style: solid;}
input[type="checkbox"] {position: relative;}
input[type="radio"] {width: 1.8rem; height: 1.8rem; min-width: 1.8rem; border: .1rem solid var(--couleur-background-dark); cursor: pointer; margin-top: .2rem; transition: border-color .2s, background .2s; position: relative; border-radius: 50%; }
input[type="radio"]:checked {background: var(--couleur-cta); border-color: var(--couleur-cta);}
input[type="search"] {background-image: url("data:image/svg+xml;utf8, "); background-repeat: no-repeat; background-position: right 2rem center; }
input[type="search"]::-webkit-search-cancel-button { opacity: 0; padding: 1rem; }
.section-large-container {margin-left: 2rem; margin-right: 2rem;}
.newsletter-form {display: flex; flex-direction: column; width: 100%; margin-top: 1rem;}
.newsletter-form button[type="submit"] {background-color: var(--couleur-cta); color: #fff; border: none; padding: 1.2rem 2rem; font-size: 1.4rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08rem; cursor: pointer; transition: background-color 0.2s ease; white-space: nowrap; width: 100%;}
.newsletter-form input[type="email"] {background-color: #fff; font-size: 1.4rem; transition: all 0.2s ease; width: 100%; }
.newsletter-form input[type="email"]::placeholder {color: rgba(16, 44, 53, .8);}
.newsletter-form input[type="email"]:focus-visible + button[type="submit"] {outline: 1px solid var(--couleur-cta); }
.section-head {width: 100%; justify-content: space-between; align-items: center;}
.section-head h2 {margin-top: 0;}
h2.h2-mixte {color: var(--couleur-secondaire); line-height: 1em; margin-top: 0;}
h2.h2-mixte em {color: var(--couleur-principale); font-style: normal; font-family: "Outfit", sans-serif; font-weight: 300; font-size: .7em; display: block; line-height: .7em;}
h1.h1-mixte {color: var(--couleur-secondaire); line-height: 1em; margin-top: 0;}
h1.h1-mixte em {color: var(--couleur-principale-light); font-size: .9em; font-style: normal; font-family: "Outfit", sans-serif; font-weight: 300; display: block; line-height: .7em;}
.img-cover {height: 100%; width: 100%; object-fit: cover;}
.img-contain {width: 100%; height: 100%; object-fit: contain;}
.no-underline {text-decoration: none;}
a.btn-cta {color: #fff; text-transform: uppercase; padding: 1.3rem 2rem; text-decoration: none; border-radius: 1rem; font-size: 1.4rem; font-weight: 600;}
.visually-hidden { position: absolute; inset: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.btn-light, .btn-light:visited {display: inline-flex; align-items: center; justify-content: center; gap: .8rem; font-size: 1.5rem; letter-spacing: .05rem; font-weight: 600; line-height: 1.2; color: #fff; background-color: var(--couleur-principale); text-decoration: none; padding: 1.3rem 2.4rem; border: .2rem solid var(--couleur-principale); border-radius: 99.9rem; transition: var(--transition);}
.btn-light i {transition: var(--transition);}
.btn-light:focus-visible {outline: .2rem solid var(--couleur-secondaire); outline-offset: .3rem;}
.pagination {column-gap: 1rem; margin: 1.5rem; width: 100%; flex-wrap: wrap;}
.pagination a, .pagination span {text-decoration: none; padding: 1rem; text-transform: uppercase;}
.pagination .current, .pagination .active {background-color: var(--couleur-cta); color: #fff;}
@media (hover: hover) {
a.btn-cta:hover {box-shadow: inset 25em 0 0 0 var(--couleur-secondaire);}
.newsletter-form button[type="submit"]:hover {background-color: var(--couleur-texte);}
input[type="radio"]:hover {border-color: var(--couleur-cta);}
.btn-light:hover {background-color: var(--couleur-secondaire); border-color: var(--couleur-secondaire); color: var(--couleur-principale);}
.btn-light:hover i {transform: translateX(.3rem);}
}
@media (min-width: 768px) {
.newsletter-form input[type="email"] {flex: 1;}
}
@media (min-width: 1025px) {
.newsletter-form {flex-direction: row;}
.newsletter-form button[type="submit"] { max-width: max-content;}
.newsletter-form input[type="email"] { max-width: 35rem;}
.section-large-container {margin-left: 4rem; margin-right: 4rem;}
}
/************************************************/
/** **/
/** HEADER **/
/** **/
/************************************************/
#headermenu {position: fixed; left: 0; right: 0; width: 100%; box-sizing: border-box; transition: all 230ms ease-in-out; z-index: 999; top: 0; border-bottom: 1px solid #e5dfcf; backdrop-filter: blur(8px); background-color: rgba(251, 249, 244, .7);}
/*#headermenu::before {content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(16, 44, 53, .6) 0%, rgba(16, 44, 53, 0) 75%); height: 15rem; pointer-events: none; z-index: -1; border-radius: 2.5rem 2.5rem 0 0; overflow: hidden;}*/
#headermenu .header-logo {height: 4rem;}
#headermenu .header-logo-scroll {display: none;}
#headermenu .header-logo-default {display: block;}
#headermenu.header-scrolled {box-shadow: var(--box-shadow);}
#headermenu.header-scrolled::before {display: none;}
#headermenu.header-scrolled .main-menu>li>a,
#headermenu.header-scrolled .header-links .header-link-item,
#headermenu.header-scrolled .main-menu .menu-item-type-custom::after {color: var(--couleur-texte);}
#headermenu.header-scrolled .logo-mark {height: 5rem;}
#headermenu.header-hidden {transform: translateY(-100%);}
#menu-principal {width: 100%; order: 1;}
#headermenu .main-menu {column-gap: 1.5rem; height: 100%;}
#headermenu .main-nav {width: 100%;}
#headermenu .main-menu>li>a {text-decoration: none; letter-spacing: .08rem; font-weight: 400; font-size: 1.5rem; padding: 1.5rem 1rem;}
#headermenu .main-menu .menu-item {display: flex; align-items: center; position: relative;}
#headermenu .main-menu>.menu-item>a::after {content: ''; display: block; background-color: var(--couleur-principale); height: .3rem; width: 0; position: absolute; left: 1.5rem; bottom: 0; transition: var(--transition); transform: translateX(-50%); left: 50%;}
#headermenu .main-menu>.menu-item.current_page_item>a::after, #headermenu .main-menu>.menu-item.current-menu-item>a::after, #headermenu .main-menu>.menu-item.current-menu-parent>a::after, #headermenu .main-menu>.menu-item.current-menu-ancestor>a::after {background-color: var(--couleur-principale-light); width: 4.5rem;}
.header-menu {padding: 1rem 2rem; position: relative; width: 100%; column-gap: 3rem; justify-content: space-between;}
.header-links {column-gap: 1.5rem;}
.header-links .header-link-item {flex-direction: column; position: relative; padding: .8rem; color: #fff; font-size: 1.5rem;}
.header-links .header-link-item span {position: absolute; bottom: -1rem; left: 50%; transform: translateX(-50%); font-size: 1.4rem; opacity: 0; transition: 230ms ease-in-out;}
.header-right-section {align-items: center; column-gap: 2rem;}
.header-right-section .language-switcher {position: relative; cursor: pointer; align-self: center; flex-direction: column;}
.language-switcher > li.lang-item {list-style: none;}
.language-switcher > li.lang-item.current-lang {display: flex; align-items: center;}
.language-switcher > li.lang-item a {display: flex; align-items: center;}
.language-switcher > li.lang-item a img {width: 1.8rem !important; height: 1.4rem !important; display: block; border-radius: 2px; box-shadow: 0 1px 4px rgba(0,0,0,.35);}
.lang-dropdown {list-style: none; margin: 0; padding: .35rem .3rem; position: fixed; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .3rem; background: var(--couleur-background); box-shadow: var(--box-shadow); border-radius: 4px; z-index: 99999; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;}
.lang-dropdown.visible {opacity: 1; visibility: visible;}
.lang-dropdown li {list-style: none; display: flex; align-items: center;}
.lang-dropdown li a {display: flex; align-items: center; padding: .2rem;}
.lang-dropdown li a img {width: 1.8rem !important; height: 1.4rem !important; border-radius: 2px;}
.bandeau-entete {height: 40rem; background-repeat: no-repeat; background-position: center; background-size: cover; display: flex; align-items: end; position: relative; z-index: 1;}
.bandeau-entete-container {margin: 0 0 2rem; flex-direction: column; position: relative; z-index: 1; padding: 0 2rem; width: 100%;}
.bandeau-entete h1 {text-shadow: #000000b0 0 0 2px; color: #fff; font-size: 2.2rem; font-weight: 900; text-transform: uppercase; letter-spacing: .3rem; text-align: left; margin: 0; }
.bandeau-entete h2 { display: block; font-weight: 500; color: #fff; letter-spacing: .1rem; margin-bottom: 1.5rem; position: relative; padding-left: 4rem; order: -1; font-size: 1.7rem;}
.bandeau-entete h2::before {content: ''; position: absolute; background-color: #fff; left: 0; top: 50%; transform: translateY(-50%); width: 3rem; height: .2rem;}
.bandeau-entete::after { content: ''; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(40,40,40,.75) 100%); position: absolute; top: 0; left: 0;}
.entete-breadcrumb, .entete-breadcrumb a {color: #fff; font-size: 1.2rem; text-transform: uppercase; margin-top: 1rem; text-decoration: none;}
.mega-menu-content {box-shadow: var(--box-shadow);}
/* --- Sous-menu desktop (#headermenu .main-menu) --- */
#headermenu .main-menu .menu-item-has-children { position: relative; }
#headermenu .main-menu .sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
min-width: 22rem;
margin: 0;
padding: .8rem;
list-style: none;
background: #fff;
border: .1rem solid var(--line, #E5DFCF);
border-radius: var(--border-radius, 1.4rem);
box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .12);
z-index: 500;
}
#headermenu .main-menu .menu-item-has-children.open > .sub-menu {
display: block;
}
#headermenu .main-menu .sub-menu li {
list-style: none;
}
#headermenu .main-menu .sub-menu li a {display: block; font-size: 1.4rem; text-decoration: none; }
#headermenu .main-menu .sub-menu li.current-menu-item > a { color: var(--couleur-principale-light);}
@media (hover: hover) {
.header-links .header-link-item:hover span {opacity: 1;}
#headermenu:hover {background: var(--couleur-background);}
#headermenu:hover .main-menu>li>a, #headermenu:hover .header-links .header-link-item #headermenu:hover .main-menu .menu-item-type-custom::after, #headermenu:hover .header-links .header-link-item {color: var(--couleur-texte);}
#headermenu:hover .header-logo-default {display: none;}
#headermenu:hover .header-logo-scroll {display: block;}
#headermenu:hover::before {display: none;}
#headermenu:hover .main-menu .menu-item-type-custom::after {color: var(--couleur-texte);}
#headermenu .main-menu>.menu-item>a:hover::after {width: 4.5rem;}
#headermenu .main-menu .sub-menu li a:hover { color: var(--couleur-principale-light);}
header .sub-menu li a:hover {font-weight: initial;}
}
@media (min-width: 768px) {
.bandeau-entete h1 {font-size: 3rem;}
.bandeau-entete h2 {font-size: 2rem;}
}
@media (min-width: 1025px) {
#menu-principal {display: flex; }
.header-menu {padding-left: 3rem; padding-right: 3rem; padding-top: 1rem; padding-bottom: 0; column-gap: 6rem;}
#headermenu .logo-header {padding-bottom: 1rem;}
}
@media (min-width: 1300px) {
.bandeau-entete h1 {font-size: 3.5rem; text-transform: uppercase; margin-bottom: 0; }
.bandeau-entete-container {max-width: 80%; margin: 0 auto 6rem;}
.bandeau-entete h2 {font-size: 2.4rem;}
#menu-principal {order: initial; width: auto; height: 100%; justify-content: flex-end; }
#headermenu .main-menu { justify-content: center; }
}
@media (min-width: 1400px) {
#headermenu .header-logo {height: 8rem;}
#headermenu .main-menu>li>a {font-size: 1.5rem; padding: 1.2rem;}
}
/************************************************/
/** **/
/** FOOTER **/
/** **/
/************************************************/
footer {background-color: var(--couleur-footer); padding: 6rem 0 0; color: #fff; position: relative; overflow: hidden; }
footer * {color: #fff;}
footer .footer-top-inner {gap: 4rem 6rem; justify-content: space-between; flex-wrap: wrap;}
footer .footer-col-logo {flex-direction: column; align-items: flex-start; width: 100%;}
footer .footer-logo-img {max-width: 25rem; height: auto; margin: 0 auto 2rem;}
footer .footer-suivez {text-transform: uppercase; color: white;}
footer .footer-social-bloc {gap: 1rem; flex-wrap: wrap; justify-content: flex-start;}
footer .footer-social {display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border: 1px solid white; border-radius: 50%; color: #fff; font-size: 1.5rem; text-decoration: none; transition: all 0.3s ease;}
footer .footer-social i{color: white;}
footer .footer-social:hover {background-color: var(--couleur-cta); border-color: var(--couleur-cta); color: #fff; transform: translateY(-2px);}
footer .footer-horaires, footer .footer-liens {flex-direction: column; width: 100%;}
footer .footer-carte-switch {margin-top: 0.5rem; flex-direction: column;}
footer .carte-img {display: none; max-width: 100%;}
footer .carte-img.active {display: block;}
footer .footer-coordonnees p strong {text-wrap: balance;}
footer .footer-coordonnees a.btn-cta {background-color: #fff; color: var(--couleur-principale); margin-top: 2rem;}
footer .footer-horaires .horaires-title {margin-top: 0;}
footer .footer-horaires .row-horaire {margin-bottom: .5rem;}
footer .footer-horaires .row-horaire .jour {font-weight: 600; width: 28%;}
footer .footer-liens ul {margin-left: 0;}
footer .footer-liens a {text-decoration: none; padding: .5rem; margin: .5rem 0; font-weight: 600;}
footer .footer-liens a:first-of-type {margin-top: 0; padding-top: 0;}
/* Leaflet - Contrôle recherche lors du déplacement */
.leaflet-search-move-ctrl {background: var(--couleur-cta); padding: 1rem 1.4rem; border-radius: 6px; box-shadow: 0 3px 10px rgba(0,0,0,0.35); font-size: 1.4rem; line-height: 1;}
.leaflet-search-move-ctrl label {display: flex; align-items: center; gap: 0.8rem; cursor: pointer; white-space: nowrap; color: #fff; font-weight: 700; letter-spacing: .04rem; text-transform: uppercase;}
.leaflet-search-move-ctrl input[type="checkbox"] {width: 1.8rem; height: 1.8rem; flex-shrink: 0; accent-color: var(--couleur-cta); cursor: pointer;}
/* Message aucun résultat */
.no-results-msg {padding: 3rem 2rem; font-size: 1.6rem; font-weight: 600; color: var(--couleur-texte); text-align: center; width: 100%; display: flex; align-items: center; justify-content: center; gap: 1rem;}
.no-results-msg i {font-size: 2rem; color: var(--couleur-cta);}
footer .footer-bottom-inner {display: flex; flex-direction: column; align-items: center; gap: 2.5rem;}
footer .footer-partenaires {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2.5rem 3.5rem;}
footer .footer-partenaires .partenaire-item {transition: opacity 0.3s ease;}
footer .footer-partenaires .partenaire-item img {max-width: 8rem; max-height: 9rem; opacity: .85; transition: all 230ms ease-in-out;}
footer .footer-copyright {display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 2rem; padding-top: 2rem; width: 100%;}
footer .footer-copyright a, footer .footer-copyright span {font-size: 1.3rem; text-decoration: none; transition: color 0.3s ease;}
footer .footer-copyright a {font-weight: 400;}
footer ul.menu {margin-top: 0;}
.footer-mobile-bottom {background-color: var(--couleur-cta); box-shadow: var(--box-shadow);}
.hamburger-box {height: 1.5rem; width: 2.5rem;}
.hamburger-box .line {background-color: #fff;}
.footer-devis-button {padding: .3rem .3rem; }
.footer-devis-button i {font-size: 2rem;}
/* Footer Loupiac — mobile first : colonnes empilées → 2 colonnes (marque
pleine largeur) à partir de 768px → 3 colonnes à partir de 1025px */
footer .footer-main {flex-direction: column; gap: 3.6rem; padding-bottom: 4rem;}
footer .footer-col {min-width: 0;}
footer .col-logo {align-items: center; margin-bottom: 1.6rem;}
footer .col-logo .infos-commune span {display: block;}
footer .col-logo .infos-commune .commune {font-family: var(--font-secondaire); font-size: 2rem; margin-top: 0; margin-bottom: .4rem; font-weight: 600; color: var(--couleur-secondaire); }
footer .col-logo .infos-commune .departement {display: block;}
footer .footer-brand p {margin: 0; line-height: 1.6;}
footer .footer-col h2, footer .footer-col h4 {margin-bottom: 1.4rem; margin-top: 0; font-weight: 600; font-size: 1.8rem; color: var(--couleur-secondaire);}
footer .footer-col.footer-horaires p {margin: .5rem 0;}
footer .footer-col a {text-decoration: none;}
footer .footer-col.footer-contact a {display: block; font-size: 1.6rem; padding: .3rem 0; margin: .5rem 0; overflow-wrap: anywhere;}
footer .footer-bottom {background-color: var(--couleur-principale-dark); padding: 2.4rem 2rem; justify-content: center; text-align: center;}
footer .footer-bottom nav ul {list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 1.8rem; margin: 0; padding: 0;}
footer .footer-bottom a {text-decoration: none; font-size: 1.3rem;}
@media (hover: hover) {
footer .footer-col a:hover, footer .footer-bottom a:hover {color: var(--couleur-secondaire);}
}
@media (min-width: 768px) {
footer .footer-main {flex-direction: row; flex-wrap: wrap; gap: 4rem;}
footer .footer-brand {width: 100%;}
footer .footer-horaires, footer .footer-contact {flex: 1 1 0;}
footer .footer-col h2, footer .footer-col h4 {font-size: 2rem; margin-bottom: 1.8rem;}
footer .footer-bottom {padding: 3rem 4rem;}
footer .footer-bottom a {font-size: 1.4rem;}
}
@media (min-width: 1025px) {
footer .footer-main {flex-wrap: nowrap; column-gap: 4rem; padding-bottom: 5rem;}
footer .footer-brand {width: auto; flex: 1.2 1 0;}
footer .footer-bottom {padding: 4rem;}
}
@media (hover: hover) {
footer .footer-coordonnees a.btn-cta:hover {color: #fff;}
}
@media (min-width: 768px) {
footer .footer-logo-img {margin: 0 0 2rem;}
}
@media (min-width: 1025px) {
footer .footer-col-logo, footer .footer-horaires, footer .footer-liens {flex: 1;}
}
@media (min-width: 1500px) {
footer .footer-top-inner {gap: 4rem 12rem;}
}
/************************************************/
/** **/
/** PAGES **/
/** **/
/************************************************/
#main-content {margin-top: 6rem;}
.entete-vie-pratique.page-hero h1 {color: var(--couleur-vie-pratique);}
.entete-vie-pratique h1.h1-mixte em { color: var(--couleur-principale);}
.entete-vie-associative.page-hero h1 {color: var(--couleur-vie-associative);}
.entete-vie-associative h1.h1-mixte em { color: var(--couleur-principale-light);}
.entete-travaux.page-hero h1 {color: var(--couleur-travaux);}
.entete-travaux h1.h1-mixte em { color: var(--couleur-principale);}
@media (min-width: 768px) {
.background-gradient {padding-top: 4rem; padding-bottom: 4rem;}
}
@media (min-width: 1025px) {
.accordeon-activites h3 {padding: 3rem 6rem; font-size: 2rem;}
.accordeon-activites .blk-acc-content {padding: 2rem 6rem;}
.texte-intro-page h2, .container-bloc-texte h2 {font-size: 2.5rem; font-weight: 700;}
h2.titre-big {font-size: 6rem; margin-bottom: 6.5rem;}
.section-formulaire-contact {padding-top: 8rem; }
.section-formulaire-contact form {padding: 5rem;}
.texte-intro-page.texte-intro-bg {padding: 5rem;}
.formulaire-reservation-visite.background-gradient {padding-top: 8rem;}
h2.titre-condensed {font-size: 2.5rem;}
#main-content {margin-top: 14rem;}
}
@media (min-width: 1200px) {
.section-margin {margin-top: 12rem; margin-bottom: 12rem; }
.forumaire-avis {padding: 5rem;}
.section-liste-docs {padding: 5rem;}
.texte-motif::after {width: 15rem; height: 15rem; position: absolute; right: -19rem; top: -5rem; padding: 7rem;}
.texte-intro-page, .container-bloc-texte {max-width: 95rem;}
}
@media (min-width: 1900px) {
.section-margin {margin-top: 9rem; margin-bottom: 9rem; }
}
/************************************************/
/** **/
/** FORMS **/
/** **/
/************************************************/
.formulaire-reservation form {background-color: var(--couleur-background); padding: 2.5rem;}
.formulaire-reservation .prestation-fields, .formulaire-reservation .forfaits-fields, .formulaire-reservation .complement-field {margin-top: 3rem;}
.formulaire-reservation .prestation-fields span[data-name="prestations"] > span, .formulaire-reservation .forfaits-fields span[data-name="forfait-scolaire"] > span {display: flex; flex-direction: column; gap: .8rem;}
.formulaire-reservation .prestation-fields br, .formulaire-reservation .forfaits-fields br {display: none;}
.form-conditions {padding: 0 3rem; font-size: 1.3rem;}
input[type="date"].field-prefix, input[type="time"].field-prefix { position: relative; padding-left: 8rem;}
input[type="date"].field-prefix::before, input[type="time"].field-prefix::before {position: absolute; left: 1.5rem; top: 50%; transform: translateY(-50%); color: #5E5E5E; pointer-events: none;}
input[type="date"].date-prefix::before { content: "Date";}
input[type="time"].arrivee-prefix::before { content: "Arrivée";}
input[type="time"].depart-prefix::before { content: "Départ";}
label.label-mobile + br {display: none;}
@media (min-width: 768px) {
.form-row .form-column .label-mobile {display: none;}
label.label-mobile {display: none !important;}
}
@media (min-width: 1025px) {
.formulaire-reservation form {background-color: var(--couleur-background); padding: 5rem 5rem 2rem;}
.form-conditions {padding: 0 5rem;}
}
/* YouTube embed */
.sr-youtube {
padding: 0;
}
.sr-youtube iframe {
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
display: block;
border: none;
border-radius: 8px;
}
/* ===== BOUTON LOUPE HEADER ===== */
.header-search-btn { background: none; border: none; cursor: pointer; padding: 0; transition: all 230ms ease-in-out; }
/* ===== POPUP RECHERCHE ===== */
.hsearch-popup { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: flex-start; justify-content: center; visibility: hidden; pointer-events: none; transition: visibility 0s .3s; }
.hsearch-popup.is-open { visibility: visible; pointer-events: auto; transition: visibility 0s 0s; }
.hsearch-overlay { position: absolute; inset: 0; background: rgba(20,16,8,.65); opacity: 0; transition: opacity .3s; cursor: pointer; }
.hsearch-popup.is-open .hsearch-overlay { opacity: 1; }
.hsearch-box { position: relative; z-index: 1; top: 50%; width: min(66rem, 94vw); background: var(--couleur-background); padding: 5rem 3rem 3rem; transform: translateY(-2rem); opacity: 0; transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .3s; }
.hsearch-popup.is-open .hsearch-box { transform: translateY(-50%); opacity: 1; }
.hsearch-close { position: absolute; top: -2.5rem; right: -2.5rem; background-color: #fff; border: none; font-size: 3rem; cursor: pointer; color: var(--couleur-texte, #333); line-height: 1; padding: .4rem .6rem; transition: color 200ms; border-radius: 50%; width: 6rem; height: 6rem; }
.hsearch-close:hover { color: var(--couleur-cta, #c00); }
.hsearch-input-wrap { display: flex; align-items: center; gap: 2rem; padding-bottom: 1rem; }
.hsearch-icon { font-size: 1.8rem; color: var(--couleur-texte, #333); flex-shrink: 0; }
.hsearch-input { flex: 1; border: none; outline: none; font-size: 2rem; background: #fff; color: var(--couleur-texte, #333); font-family: inherit; }
.hsearch-input::placeholder { color: #aaa; }
.hsearch-results { margin-top: 1.5rem; max-height: 40rem; overflow-y: auto; }
.hsearch-result-item { display: flex; flex-direction: column; padding: 1rem 0; border-bottom: 1px solid #eee; text-decoration: none; color: var(--couleur-texte, #333); transition: color 200ms; }
.hsearch-result-item:last-child { border-bottom: none; }
.hsearch-result-item:hover { color: var(--couleur-cta, #c00); }
.hsearch-result-title { font-size: 1.5rem; font-weight: 700; }
.hsearch-result-type { font-size: 1.2rem; color: #999; text-transform: uppercase; letter-spacing: .06em; margin-top: .3rem; }
.hsearch-status { font-size: 1.4rem; color: #999; padding: 1rem 0; text-align: center; }
body.hsearch-noscroll { overflow: hidden; }
.hsearch-box [type="search"] {order: -1;}
.hsearch-input-wrap i {color: var(--couleur-cta); padding: 1rem; font-size: 2.5rem; }
/* ============================================
ANIMATIONS SCROLL REVEAL
Géré par includes/js/animations.js
============================================ */
/* État initial : invisible + décalé vers le bas */
.iwego-reveal {
opacity: 0;
transform: translateY(2.4rem);
transition:
opacity .65s ease,
transform .65s ease;
transition-delay: var(--iwego-delay, 0s);
}
/* État final : visible, en place */
.iwego-reveal.iwego-revealed {
opacity: 1;
transform: none;
}
/* Variante glissement depuis la gauche */
.iwego-reveal.iwego-from-left { transform: translateX(-3rem); }
.iwego-reveal.iwego-from-left.iwego-revealed { transform: none; }
/* Variante glissement depuis la droite */
.iwego-reveal.iwego-from-right { transform: translateX(3rem); }
.iwego-reveal.iwego-from-right.iwego-revealed { transform: none; }
/* Variante zoom léger (cartes, vignettes) */
.iwego-reveal.iwego-zoom { transform: scale(.96) translateY(1.5rem); }
.iwego-reveal.iwego-zoom.iwego-revealed { transform: none; }
/* Respect des préférences système (accessibilité) */
@media (prefers-reduced-motion: reduce) {
.iwego-reveal,
.iwego-reveal.iwego-from-left,
.iwego-reveal.iwego-from-right,
.iwego-reveal.iwego-zoom {
transition: none;
opacity: 1;
transform: none;
}
}
/* =============================================================
MODALE — surcharge du thème parent
============================================================= */
/* #modal-container est juste un wrapper sans rôle visuel */
#modal-container {
display: none;
}
/* .modal est l'overlay plein écran */
.modal {
display: none;
position: fixed;
z-index: 9999;
left: 0; top: 0;
width: 100%; height: 100%;
background-color: rgba(16, 44, 53, 0.65);
overflow: auto;
padding: 2rem;
box-sizing: border-box;
}
/* jQuery fait display:block — on force flex pour centrer .modal-content */
.modal[style*="display: block"],
.modal[style*="display:block"] {
display: flex !important;
align-items: center;
justify-content: center;
}
/* Boîte de contenu centrée */
.modal-content {
position: relative;
background-color: var(--couleur-background, #fff);
width: 90%;
max-width: 680px;
padding: 4rem 3rem 3rem;
}
/* Croix de fermeture */
.modal .close {
position: absolute;
top: 1.2rem;
right: 1.6rem;
float: none;
font-size: 2.4rem;
font-weight: 400;
line-height: 1;
color: var(--couleur-texte, #1a1a1a);
opacity: .5;
cursor: pointer;
transition: opacity 150ms ease;
}
.modal .close:hover,
.modal .close:focus {
opacity: 1;
text-decoration: none;
}
@media (min-width: 768px) {
.modal-content {
padding: 5rem 5rem 4rem;
}
}
/* =============================================================
LOUPIAC — CONTAINER, TOPBAR, HEADER, BOUTON URGENCE
(adapté de PREPA/03-maquettes/accueil-v1.html)
============================================================= */
.tb-item {display: inline-flex; align-items: center; gap: .8rem;}
.tb-item svg {width: 1.4rem; height: 1.4rem; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .85; flex-shrink: 0;}
/* --- Header --- */
.site-header {background: var(--paper); border-bottom: .1rem solid var(--line); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(8px); background: rgba(251, 249, 244, .92);}
.header-inner {align-items: center; justify-content: center; padding: 1rem 0;}
.col-logo {gap: 1.5rem;}
/*footer .logo-text .commune {font-family: 'Fraunces', serif; font-size: 2.2rem; font-weight: 700; color: var(--vie-communale); line-height: 1;}*/
footer .logo-mark {height: 5rem;}
header .logo-mark {height: 5rem; width: auto; display: block;}
.logo-text .sub {font-size: 1.2rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin-top: .4rem;}
div.primary {display: none;}
div.primary ul {list-style: none; display: flex; gap: .4rem; margin: 0; padding: 0; }
div.primary li {margin: 0;}
div.primary .menu-item-link {display: block; padding: 1rem 1.4rem; font-size: 1.5rem; font-weight: 500; text-decoration: none;}
div.primary .menu-item-link.active {color: var(--vie-communale); font-weight: 600;}
.btn-urgence, .btn-urgence:visited {background: var(--vie-communale); color: var(--jaune); padding: 1rem 1.8rem; border-radius: 99.9rem; font-size: 1.4rem; font-weight: 600; display: inline-flex; align-items: center; gap: .8rem; transition: all .2s; text-decoration: none;}
.btn-urgence:hover {background: var(--vie-communale-dark); transform: translateY(-.1rem);}
.btn-urgence::before {content: ""; width: .8rem; height: .8rem; background: var(--jaune); border-radius: 50%; animation: loupiac-pulse 2s infinite;}
@keyframes loupiac-pulse {0%, 100% {opacity: 1;} 50% {opacity: .4;}}
.header-burger {display: none; background: none; border: none; cursor: pointer; padding: .8rem; color: var(--vie-communale);}
.header-burger svg {width: 2.4rem; height: 2.4rem; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;}
@media (hover: hover) {
.topbar a:hover {color: var(--jaune);}
}
/*
@media (max-width: 900px) {
div.primary {display: none;}
.header-burger {display: block;}
.topbar .infos {display: none;}
}
@media (max-width: 560px) {
.header-inner {gap: 1.2rem;}
.btn-urgence span {display: none;}
.btn-urgence::before {margin: 0;}
}*/
/* Jusqu'à 1024px, le header ne garde que le logo (non fixe, il défile avec la
page) : la navigation passe par la barre flottante .bottom-nav et son tiroir
(div.primary n'apparaît qu'à 1025px) */
@media (max-width: 1024px) {
#headermenu {position: relative; transform: none;}
#headermenu .header-inner {justify-content: center; flex-wrap: wrap; gap: 1rem 1.6rem; padding: 1rem 0;}
#headermenu .header-burger {display: none;}
#headermenu .logo-mark, #headermenu.header-scrolled .logo-mark {height: 5.5rem;}
}
@media (min-width: 1025px) {
div.primary {display: block;}
header .logo-mark {height: 8.5rem;}
.header-inner {justify-content: space-between; padding: 1.8rem 0; gap: 3.2rem;}
}
/* =============================================================
LOUPIAC — NAVIGATION MOBILE BASSE + TIROIR
============================================================= */
/* Navigation mobile (barre flottante + tiroir) : uniquement les variables de
la palette (Options générales) — couleur-principale / -dark, secondaire,
background / -dark, texte. */
.bottom-nav {position: fixed; bottom: 2rem; bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: 200; background: var(--couleur-principale); border-radius: 99.9rem; padding: .8rem; display: none; border: .1rem solid color-mix(in srgb, var(--couleur-secondaire) 25%, transparent); box-shadow: 0 1rem 3rem color-mix(in srgb, var(--couleur-principale-dark) 35%, transparent); max-width: calc(100vw - 2.4rem); transition: transform .3s;}
.bottom-nav ul {list-style: none; display: flex; gap: .4rem; align-items: center; padding: 0; margin: 0;}
.bottom-nav li {margin: 0;}
.bottom-nav a, .bottom-nav button {display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 1rem 1.4rem; color: var(--couleur-secondaire); opacity: .75; transition: all .25s; border-radius: 99.9rem; min-width: 6rem; background: none; border: none; cursor: pointer; text-decoration: none; font-family: inherit;}
.bottom-nav a.active, .bottom-nav button[aria-expanded="true"] {opacity: 1; background: var(--couleur-secondaire); color: var(--couleur-principale-dark);}
.bottom-nav a:focus-visible, .bottom-nav button:focus-visible {outline: .2rem solid var(--couleur-secondaire); outline-offset: .2rem;}
.bottom-nav svg {width: 2.2rem; height: 2.2rem; stroke-width: 1.8; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round;}
.bottom-nav .lbl {font-size: 1rem; font-weight: 600; color: inherit;}
@media (hover: hover) {
.bottom-nav a:not(.active):hover, .bottom-nav button:not([aria-expanded="true"]):hover {opacity: 1; background: color-mix(in srgb, var(--couleur-secondaire) 15%, transparent);}
}
.drawer-backdrop {position: fixed; inset: 0; background: color-mix(in srgb, var(--couleur-principale-dark) 60%, transparent); backdrop-filter: blur(6px); z-index: 150; opacity: 0; pointer-events: none; transition: opacity .3s;}
.drawer-backdrop.show {opacity: 1; pointer-events: auto;}
/* Tiroir : grande feuille (jusqu'à 92% de l'écran) avec en-tête fixe et liste
qui défile seule. dvh = hauteur réellement visible sur mobile (barre
d'adresse comprise) ; vh en repli pour les vieux navigateurs. Le bas de la
liste réserve la hauteur de la barre .bottom-nav (au-dessus du tiroir). */
.drawer {position: fixed; bottom: 0; left: 0; right: 0; z-index: 160; display: flex; flex-direction: column; min-height: 70vh; min-height: 70dvh; max-height: 92vh; max-height: 92dvh; background: var(--couleur-background); border-radius: 2.8rem 2.8rem 0 0; box-shadow: 0 -1rem 4rem color-mix(in srgb, var(--couleur-principale-dark) 25%, transparent); transform: translateY(100%); visibility: hidden; transition: transform .35s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .35s;}
.drawer.open {transform: translateY(0); visibility: visible; transition-delay: 0s;}
.drawer-head {flex-shrink: 0; padding: 1.2rem 2.4rem 0;}
.drawer-handle {width: 4.4rem; height: .4rem; background: var(--couleur-background-dark); border-radius: 99.9rem; margin: 0 auto 1.2rem;}
.drawer-head-row {align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.2rem; border-bottom: .1rem solid var(--couleur-background-dark);}
.drawer h2, .drawer h4 {font-size: 1.1rem; text-transform: uppercase; letter-spacing: .15em; color: var(--couleur-texte); opacity: .7; margin: 0; font-weight: 600; font-family: 'Inter', sans-serif;}
.drawer-close {display: flex; align-items: center; justify-content: center; width: 4.4rem; height: 4.4rem; border: none; border-radius: 50%; background: var(--couleur-background-dark); color: var(--couleur-principale); cursor: pointer; transition: var(--transition);}
.drawer-close svg {width: 2rem; height: 2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;}
.drawer-close:focus-visible {outline: .2rem solid var(--couleur-principale); outline-offset: .2rem;}
.drawer-nav {flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: .4rem 2.4rem 12rem;}
html.drawer-is-open, html.drawer-is-open body {overflow: hidden;}
@media (hover: hover) {
.drawer-close:hover {background: var(--couleur-principale); color: var(--couleur-secondaire);}
}
/* Liens du tiroir. Chaque = une ligne (lien + bouton chevron côte à
côte), le sous-menu passe en dessous sur toute la largeur. Les padding du
parent sur .sub-menu.open .menu-item sont neutralisés. */
.drawer-nav .menu {list-style: none; margin: 0; padding: 0;}
.drawer-nav .menu li {margin: 0; padding: 0;}
.drawer-nav .menu > li {display: flex; flex-wrap: wrap; align-items: center; border-bottom: .1rem solid var(--couleur-background-dark);}
.drawer-nav .menu > li > a {flex: 1; min-width: 0; display: block; padding: 1.3rem .4rem; font-size: 1.7rem; line-height: 1.3; font-family: 'Fraunces', serif; color: var(--couleur-principale); text-decoration: none;}
.drawer-nav .menu .current-menu-item > a, .drawer-nav .menu .current-menu-ancestor > a, .drawer-nav .menu .current-menu-parent > a {color: var(--couleur-principale-light); font-weight: 600;}
/* Le parent met le bouton en position: absolute (.menu-item .submenu-toggle) +
marges : on le remet dans le flux pour qu'il reste aligné sur le lien */
.drawer-nav .menu .submenu-toggle {position: static; flex-shrink: 0; align-self: center; display: flex; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; margin: 0 0 0 .8rem; padding: 0; font-size: inherit; border: none; border-radius: 50%; background: var(--couleur-background-dark); color: var(--couleur-principale); cursor: pointer; transition: var(--transition);}
.drawer-nav .menu .submenu-toggle i {margin: 0; font-size: 1.2rem; line-height: 1; transition: transform .25s ease;}
.drawer-nav .menu .submenu-toggle.open {background: var(--couleur-principale); color: var(--couleur-secondaire);}
.drawer-nav .menu .submenu-toggle.open i {transform: rotate(90deg);}
.drawer-nav .menu .submenu-toggle:focus-visible {outline: .2rem solid var(--couleur-principale); outline-offset: .2rem;}
.drawer-nav .menu .sub-menu {display: none; width: 100%; list-style: none; margin: 0 0 1.2rem .4rem; padding: 0 0 0 1.4rem; border-left: .2rem solid var(--couleur-secondaire); transform: none; opacity: 1;}
.drawer-nav .menu .sub-menu.open {display: block; margin-top: 0;}
.drawer-nav .menu .sub-menu .menu-item {padding: 0; border: none;}
.drawer-nav .menu .sub-menu a {display: block; padding: .8rem 0; font-size: 1.5rem; line-height: 1.35; color: var(--couleur-texte); text-decoration: none;}
@media (max-width: 1024px) {
.bottom-nav {display: flex;}
}
@media (max-width: 560px) {
.bottom-nav a, .bottom-nav button {padding: .4rem; min-width: 5.6rem;}
.bottom-nav .lbl {font-size: .9rem;}
}
/* Fil d'Ariane (Yoast [wpseo_breadcrumb]) */
p.breadcrumb {padding: 2.4rem 0 0; font-size: 1.3rem; color: var(--ink-soft); margin: 0 auto;}
#breadcrumbs a {color: inherit; text-decoration: none;}
#breadcrumbs a:hover {color: var(--vie-communale);}
#breadcrumbs .breadcrumb_last {color: var(--vie-communale); font-weight: 600;}
/* Annuaire des associations (archive-association.php) */
.filters {padding: 2.4rem 0; border-top: .1rem solid var(--line); border-bottom: .1rem solid var(--line); background: rgba(251, 249, 244, .95); backdrop-filter: blur(.8rem); position: sticky; top: 8.8rem; z-index: 40;}
.filter-row {display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap;}
.search-input {flex: 1; min-width: 22rem; position: relative;}
.search-input input {width: 100%; padding: 1.2rem 1.6rem 1.2rem 4.4rem; border: .1rem solid var(--line); border-radius: 99.9rem; background: #fff; font-family: 'Inter', sans-serif; font-size: 1.45rem;}
.search-input input:focus {outline: none; border-color: var(--vie-communale); box-shadow: 0 0 0 .4rem rgba(0, 68, 60, .08);}
.search-input svg {position: absolute; left: 1.6rem; top: 50%; transform: translateY(-50%); width: 1.6rem; height: 1.6rem; color: var(--ink-soft);}
.chips {display: flex; gap: .8rem; flex-wrap: wrap;}
.chip {padding: 1rem 1.6rem; border-radius: 99.9rem; font-size: 1.3rem; font-weight: 500; color: var(--ink); background: #fff; border: .1rem solid var(--line); cursor: pointer; transition: all .2s; font-family: 'Inter', sans-serif;}
.chip:hover {border-color: var(--vie-communale);}
.chip.active {background: var(--vie-communale); color: var(--jaune); border-color: var(--vie-communale);}
.chip .n {opacity: .6; margin-left: .6rem; font-weight: 400;}
.chip.active .n {opacity: .85; color: var(--jaune);}
.assos {padding: 6rem 0 8rem;}
.result-count {font-size: 1.4rem; color: var(--ink-soft); margin-bottom: 2.4rem;}
.asso-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;}
.asso-card {background: #fff; border: .1rem solid var(--line); border-radius: var(--border-radius, 1.4rem); padding: 0 0 2.6rem; overflow: hidden; transition: all .25s; display: flex; flex-direction: column;}
.asso-card:hover {border-color: var(--vie-communale); transform: translateY(-.4rem); box-shadow: 0 1.2rem 3rem rgba(0, 68, 60, .1);}
.asso-cover {aspect-ratio: 16 / 8; background: var(--mauve-vie-asso, #73264D); position: relative; display: flex; align-items: center; justify-content: center;}
.asso-cover::after {content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 40%, rgba(0, 0, 0, .15) 100%);}
.logo-a, .logo-a-img {width: 6.6rem; height: 6.6rem; background: var(--paper); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--mauve-vie-asso, #73264D); font-size: 2.6rem; font-weight: 600; z-index: 2; border: .3rem solid var(--jaune); position: relative;}
.logo-a-img {object-fit: cover;}
.asso-body {padding: 2.2rem 2.4rem 0; flex: 1;}
.asso-tag {display: inline-block; padding: .4rem 1rem; border-radius: 99.9rem; background: var(--paper-2); color: var(--vie-communale); font-size: 1.1rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 1.2rem;}
.asso-body h3 {font-size: 2.2rem; color: var(--vie-communale); margin-bottom: .8rem;}
.asso-body p {font-size: 1.4rem; color: var(--ink-soft); margin-bottom: 1.6rem; line-height: 1.6;}
.asso-contact {display: flex; flex-direction: column; gap: .8rem; border-top: .1rem solid var(--line); padding-top: 1.6rem; margin: 0 2.4rem;}
.asso-contact .item {display: flex; align-items: center; gap: 1rem; font-size: 1.3rem; color: var(--ink-soft);}
.asso-contact .item svg {width: 1.4rem; height: 1.4rem; flex-shrink: 0;}
.asso-contact .item a {color: var(--vie-communale); font-weight: 500;}
.asso-cta {padding: 0 2.4rem; margin-top: 1.8rem;}
.asso-cta a {display: flex; align-items: center; justify-content: center; gap: .8rem; padding: 1.2rem; border-radius: 99.9rem; background: var(--paper-2); color: var(--vie-communale); font-size: 1.3rem; font-weight: 600; transition: all .2s; text-decoration: none;}
.asso-cta a:hover {background: var(--vie-communale); color: var(--jaune);}
@media (max-width: 900px) {
.asso-grid {grid-template-columns: 1fr 1fr;}
.filters {top: 1.2rem;}
}
@media (max-width: 560px) {
.asso-grid {grid-template-columns: 1fr;}
}
/* Article (single.php) — mobile first */
.single-article p.breadcrumb {padding-top: 2rem;}
.article-container {max-width: 82rem; margin: 0 auto; padding: 0 2rem;}
.article-hero {padding: 3rem 0 0;}
.category-badge {display: inline-flex; align-items: center; padding: .6rem 1.4rem; border-radius: 99.9rem; background: var(--couleur-secondaire); color: var(--couleur-principale-dark); font-size: 1.15rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2rem;}
.category-badge--travaux {background: var(--couleur-travaux); color: #fff;}
.category-badge--ecole {background: var(--couleur-vie-pratique); color: #fff;}
.category-badge--vie-associative {background: var(--couleur-vie-associative); color: #fff;}
.category-badge--vie-municipale {background: var(--couleur-principale); color: #fff;}
.single-article .article-hero h1 {font-size: clamp(3rem, 7vw, 5.6rem); line-height: 1.1; color: var(--couleur-principale); margin: 0 0 2.4rem; overflow-wrap: break-word;}
.article-meta {display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem 2.4rem; padding: 1.6rem 0; border-top: var(--border); border-bottom: var(--border); font-size: 1.4rem; color: var(--couleur-principale-light);}
.article-meta .item {display: flex; align-items: center; gap: .8rem;}
.article-meta svg {width: 1.6rem; height: 1.6rem; flex-shrink: 0;}
.article-share {display: flex; gap: .8rem; width: 100%;}
.share-btn {width: 4rem; height: 4rem; border: var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: var(--transition); color: var(--couleur-principale); background: #fff; cursor: pointer; padding: 0;}
.share-btn svg {width: 1.6rem; height: 1.6rem;}
.share-btn:focus-visible {outline: .2rem solid var(--couleur-principale); outline-offset: .2rem;}
/* Image affichée en entier sur un fond flouté de la même image */
.hero-image {position: relative; aspect-ratio: 16 / 10; max-height: 64rem; border-radius: var(--border-radius, 1.4rem); overflow: hidden; margin-top: 3.2rem; background: var(--couleur-background-dark);}
.hero-image img {position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block;}
.hero-image img.hero-image-flou {position: absolute; inset: 0; z-index: 0; object-fit: cover; filter: blur(2rem); transform: scale(1.15);}
.article-body {padding: 4rem 0 5rem;}
.article-body .article-container, .article-body p, .article-body li {font-size: 1.7rem; line-height: 1.7; color: var(--couleur-texte);}
.article-body .lead, .article-body .lead p {font-family: var(--font-secondaire); font-size: 2rem; line-height: 1.5; color: var(--couleur-principale);}
.article-body .lead {margin-bottom: 3.2rem; padding-left: 2rem; border-left: .4rem solid var(--couleur-secondaire);}
.article-body .lead p:last-child {margin-bottom: 0;}
.article-body p {margin: 0 0 2rem;}
.article-body h2 {font-size: 2.6rem; line-height: 1.2; color: var(--couleur-principale); margin: 4rem 0 1.6rem;}
.article-body h3 {font-size: 2.1rem; line-height: 1.3; color: var(--couleur-principale); margin: 3.2rem 0 1.4rem;}
.article-body ul, .article-body ol {margin: 0 0 2rem; padding-left: 2.4rem;}
.article-body li {margin-bottom: .8rem;}
.article-body li::marker {color: var(--couleur-principale-light);}
.article-body a {color: var(--couleur-principale); text-decoration: underline; text-decoration-color: var(--couleur-secondaire); text-decoration-thickness: .2rem; text-underline-offset: .3rem; transition: var(--transition);}
.article-body img {max-width: 100%; height: auto; border-radius: var(--border-radius, 1.4rem);}
.article-body figure {margin: 3.2rem 0;}
.article-body figcaption {font-size: 1.3rem; color: var(--couleur-principale-light); margin-top: .8rem; text-align: center;}
.article-body blockquote {margin: 3.2rem 0; padding: 2.4rem 2.8rem; background: var(--couleur-background-dark); border-radius: var(--border-radius, 1.4rem); border-left: .4rem solid var(--couleur-principale);}
.article-body blockquote p {font-family: var(--font-secondaire); font-size: 1.9rem; margin: 0;}
.article-body .wp-block-button__link, .article-body .wp-block-file__button {background: var(--couleur-principale); color: #fff; text-decoration: none; border-radius: 99.9rem; padding: 1.2rem 2.4rem; font-weight: 600;}
/* Articles liés : cartes .actu-card du bloc actualités (CSS chargé dans functions.php) */
.related.actualites {padding: 5rem 0; background: var(--couleur-background-dark);}
.related h2 {font-size: clamp(2.6rem, 5vw, 3.6rem); color: var(--couleur-principale); margin: 0 0 3rem;}
.related-grid {display: grid; grid-template-columns: 1fr; gap: 2rem;}
@media (hover: hover) {
.share-btn:hover {background: var(--couleur-principale); color: var(--couleur-secondaire); border-color: var(--couleur-principale);}
.article-body a:hover {text-decoration-color: var(--couleur-principale);}
}
@media (min-width: 768px) {
.article-container {padding: 0 4rem;}
.article-hero {padding-top: 4rem;}
.article-share {width: auto; margin-left: auto;}
.hero-image {aspect-ratio: 16 / 9; margin-top: 4rem;}
.article-body {padding: 6rem 0;}
.article-body .article-container, .article-body p, .article-body li {font-size: 1.8rem;}
.article-body .lead, .article-body .lead p {font-size: 2.3rem;}
.article-body h2 {font-size: 3rem;}
.related.actualites {padding: 6rem 0;}
.related-grid {grid-template-columns: repeat(2, 1fr); gap: 2.4rem;}
}
@media (min-width: 1025px) {
.related.actualites {padding: 8rem 0;}
.related h2 {margin-bottom: 4rem;}
.related-grid {grid-template-columns: repeat(3, 1fr);}
}
/* Image par défaut des cartes (iwego_child_image_defaut()) : logo centré sur fond clair */
.img-defaut {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: inherit; background: var(--couleur-background-dark);}
/* Largeur ET hauteur explicites : un logo SVG sans dimensions intrinsèques reste visible */
.img-defaut img.img-defaut-logo {display: block; width: 60%; max-width: 22rem; height: 50%; max-height: 12rem; object-fit: contain; transform: none;}
/* Page formulaire de contact : classes utilitaires à appliquer sur un bloc
Colonnes natif (Colonnes > "Classe CSS additionnelle") pour reproduire la
mise en page 2 colonnes de la maquette, sans PHP dédié :
- classe "form-grid" sur le bloc Colonnes (répartition large/étroite)
- classe "sidebar" sur la colonne de droite (empilement + sticky)
- classe "map-card" sur un bloc Groupe entourant la carte OSM (carte blanche) */
.wp-block-columns.form-grid {gap: 6rem; align-items: flex-start;}
.wp-block-columns.form-grid > .wp-block-column:first-child {flex: 1.4;}
.wp-block-columns.form-grid > .wp-block-column.sidebar {flex: 1; display: flex; flex-direction: column; gap: 2rem; position: sticky; top: 10rem;}
.map-card {background: #fff; border: .1rem solid var(--line); padding: 2.4rem 2.4rem 2.8rem; border-radius: var(--border-radius, 1.4rem);}
.map-card h4 {font-size: 1.6rem; color: var(--vie-communale); margin-bottom: 1.4rem;}
@media (max-width: 900px) {
.wp-block-columns.form-grid > .wp-block-column.sidebar {position: static;}
}
/************************************************/
/** **/
/** SINGLE ASSOCIATION **/
/** **/
/************************************************/
.single-asso p.breadcrumb {padding-top: 2rem;}
/* Hero : reprend le style de l'en-tête de page (bloc-entete-page) */
.asso-hero {padding: 2rem 0 4rem;}
.asso-hero .asso-hero-columns {flex-direction: column; gap: 4rem;}
.asso-hero .asso-hero-left {flex: 1;}
.single .asso-hero h1 {font-size: clamp(3.8rem, 5vw, 6.4rem); color: var(--couleur-vie-associative); font-weight: 400; line-height: 1.1em; margin: 0 0 1.6rem; text-align: left; max-width: 80rem;}
.asso-hero h1.h1-mixte em {color: var(--couleur-principale-light); margin-bottom: 1.4rem;}
.asso-hero-badge {display: inline-block; padding: .6rem 1.4rem; border-radius: 99.9rem; background: var(--couleur-secondaire); color: var(--couleur-principale-dark); font-size: 1.2rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; margin-bottom: 2.4rem; transition: var(--transition);}
.asso-hero-intro {font-size: 1.8rem; color: var(--couleur-principale); max-width: 64rem;}
.asso-hero .asso-hero-right {width: 100%; max-width: 45rem; aspect-ratio: 1/1; position: relative; z-index: 1; align-self: center;}
.asso-hero .asso-hero-right::after {content: ''; border: .3rem solid var(--couleur-secondaire); opacity: .7; border-radius: 3rem 3rem 3rem .5rem; width: calc(100% - 3rem); aspect-ratio: 1/1; right: -1.4rem; top: -1.1rem; position: absolute; z-index: -1;}
.asso-hero .asso-hero-right img {border-radius: 3rem 3rem 3rem .5rem;}
/* Fiche événement sans image à la une : logo de la mairie centré */
.asso-hero .asso-hero-right.evt-hero-logo {display: flex; align-items: center; justify-content: center; background: var(--couleur-background-dark); border-radius: 3rem 3rem 3rem .5rem;}
.asso-hero .asso-hero-right.evt-hero-logo img.evt-logo-mairie {width: 55%; height: auto; max-height: 70%; object-fit: contain; border-radius: 0;}
/* Contenu + colonne coordonnées */
.asso-main {background-color: var(--couleur-background-dark); padding: 5rem 0;}
.asso-main-columns {display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: start;}
.asso-content {font-size: 1.7rem; color: var(--couleur-texte);}
.asso-content > *:first-child {margin-top: 0;}
.asso-content h2 {font-family: var(--font-secondaire); font-size: 2.8rem; font-weight: 400; color: var(--couleur-vie-associative); margin: 4rem 0 1.6rem;}
.asso-content h3 {font-size: 2.2rem; color: var(--couleur-principale); margin: 3rem 0 1.2rem;}
.asso-content ul, .asso-content ol {margin: 0 0 2rem 2.4rem;}
.asso-content li {margin-bottom: .8rem;}
.asso-content a {color: var(--couleur-principale); text-decoration: underline; text-decoration-color: var(--couleur-secondaire); text-decoration-thickness: .2rem; text-underline-offset: .3rem;}
.asso-content img {border-radius: 1.5rem; max-width: 100%; height: auto;}
.asso-sidebar {display: flex; flex-direction: column; gap: 1.5rem;}
.asso-side-card {background: #fff; border: var(--border); border-radius: 1.5rem; padding: 3rem; box-shadow: var(--box-shadow);}
.single .asso-side-card .asso-side-title {font-family: var(--font-secondaire); font-size: 2.2rem; font-weight: 400; color: var(--couleur-vie-associative); margin: 0 0 2.4rem; text-align: left;}
.asso-side-items {list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2rem;}
.asso-side-item {display: flex; align-items: flex-start; gap: 1.4rem;}
.asso-side-icon {flex: 0 0 auto; width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--couleur-vie-associative); color: var(--couleur-secondaire);}
.asso-side-icon svg {width: 1.8rem; height: 1.8rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}
.asso-side-text {display: flex; flex-direction: column; gap: .2rem; min-width: 0;}
.asso-side-label {font-size: 1.2rem; color: var(--couleur-principale-light); text-transform: uppercase; letter-spacing: .06em;}
.asso-side-value {font-size: 1.6rem; font-weight: 600; color: var(--couleur-texte); text-decoration: none; overflow-wrap: anywhere; transition: var(--transition);}
.asso-back {align-self: flex-start;}
/* Autres associations : reprend les cartes du bloc grille-associations */
.asso-autres {padding: 5rem 0;}
.asso-autres .section-head {flex-wrap: wrap; gap: 1rem 2rem; margin-bottom: 3.6rem;}
.asso-autres .section-head h2 {font-size: 3.6rem; font-weight: 400; margin: 0;}
.asso-autres-grid {display: grid; grid-template-columns: 1fr; gap: 2rem;}
.asso-autre-card {background: #fff; border: var(--border); flex-direction: column; border-radius: 1.5rem; overflow: hidden; transition: all .25s;}
.asso-autre-img {height: 18rem; overflow: hidden; background-color: var(--couleur-background-dark);}
.asso-autre-body {padding: 2rem;}
.asso-autre-cat {display: block; text-transform: uppercase; letter-spacing: .04em; font-size: 1.3rem; color: var(--couleur-principale-light); margin-bottom: .6rem;}
.asso-autre-body h3 {margin: 0; color: var(--couleur-vie-associative);}
@media (hover: hover) {
.asso-hero-badge:hover {background: var(--couleur-principale); color: var(--couleur-secondaire);}
a.asso-side-value:hover {color: var(--couleur-vie-associative);}
.asso-autre-card:hover {transform: translateY(-.3rem); box-shadow: var(--box-shadow);}
}
@media (min-width: 768px) {
.asso-autres-grid {grid-template-columns: repeat(2, 1fr);}
}
@media (min-width: 1025px) {
.asso-hero .asso-hero-columns {flex-direction: row; align-items: center; column-gap: 8rem;}
.asso-hero .asso-hero-right {width: 45rem; flex: 0 0 auto;}
.asso-main {padding: 8rem 0;}
.asso-main-columns {grid-template-columns: minmax(0, 1fr) 38rem; gap: 6rem;}
.asso-sidebar {position: sticky; top: 16rem;}
.asso-autres {padding: 8rem 0;}
.asso-autres-grid {grid-template-columns: repeat(3, 1fr); gap: 2.5rem;}
.asso-autre-img {height: 22rem;}
.asso-autre-body h3 {font-size: 2rem;}
}
/************************************************/
/** **/
/** SINGLE ÉVÉNEMENT **/
/** **/
/************************************************/
/** **/
/** SINGLE SERVICE **/
/** **/
/************************************************/
/* Reprend la structure de la fiche association (.asso-*). La couleur
d'accent suit la thématique (mêmes couleurs que les cartes du bloc
grille-services). */
.single-service {--accent: var(--couleur-principale, #00443C);}
.single-service--enfance-jeunesse {--accent: var(--couleur-vie-pratique, #8A6800);}
.single-service--seniors-aide-a-domicile {--accent: var(--mauve-vie-asso, #73264D);}
.single-service--equipements-locations {--accent: var(--vie-communale, #00443C);}
.single .single-service .asso-hero h1,
.single-service .asso-side-card .asso-side-title,
.single-service .asso-autre-body h3 {color: var(--couleur-principale, #00443C);}
.single-service .asso-hero h1.h1-mixte em {color: var(--accent); font-size: .45em; line-height: 1.2em; margin-bottom: 1.6rem; text-transform: uppercase; letter-spacing: .08em;}
.single-service .asso-side-icon {background: var(--accent); color: #fff;}
.single-service .asso-side-card {border-top: .4rem solid var(--accent);}
/* Tarifs */
.service-main {display: flex; flex-direction: column; gap: 4rem; min-width: 0;}
.service-tarifs {background: #fff; border: .1rem solid var(--line, #E5DFCF); border-radius: 1.5rem; padding: 3rem;}
.single .service-tarifs .service-bloc-titre {font-family: var(--font-secondaire); font-size: 2.4rem; font-weight: 400; color: var(--couleur-principale, #00443C); margin: 0 0 2rem; text-align: left;}
.service-tarifs-liste {list-style: none; margin: 0; padding: 0;}
.service-tarif {justify-content: space-between; align-items: center; gap: 2rem; padding: 1.6rem 0; border-bottom: .1rem dashed var(--line, #E5DFCF);}
.service-tarif:last-child {border-bottom: none; padding-bottom: 0;}
.service-tarif-libelle {font-size: 1.6rem; color: var(--couleur-texte, #141414);}
.service-tarif-libelle small {display: block; font-size: 1.3rem; color: var(--ink-soft, #4a4a4a); margin-top: .2rem;}
.service-tarif-prix {flex-shrink: 0; padding: .6rem 1.4rem; border-radius: 99.9rem; background: var(--couleur-background-dark, #F3EFE6); color: var(--couleur-principale, #00443C); font-family: 'Fraunces', Georgia, serif; font-size: 1.8rem; font-weight: 600; white-space: nowrap;}
.service-tarifs-note {margin: 2rem 0 0; font-size: 1.4rem; color: var(--ink-soft, #4a4a4a);}
/* Documents */
.service-documents {list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.2rem;}
.service-document {align-items: center; gap: 1.4rem; padding: 1rem; margin: 0 -1rem; border-radius: 1rem; transition: var(--transition);}
.service-document .asso-side-label {text-transform: none; letter-spacing: 0;}
/* Autres services */
.service-autre-card .asso-autre-body {display: flex; flex-direction: column; gap: 1rem; height: 100%; border-top: .4rem solid var(--accent);}
.service-autre-card .asso-autre-body p {margin: 0; font-size: 1.4rem; color: var(--ink-soft, #4a4a4a);}
.service-autre-card .service-card-more {margin-top: auto; padding-top: 1.4rem; border-top: .1rem solid var(--line, #E5DFCF); font-size: 1.3rem; font-weight: 600; color: var(--couleur-principale, #00443C);}
@media (hover: hover) {
.service-document:hover {background: var(--couleur-background-dark, #F3EFE6);}
.service-document:hover .asso-side-value {color: var(--accent);}
}
@media (max-width: 560px) {
.service-tarifs {padding: 2.2rem;}
.service-tarif {flex-direction: column; align-items: flex-start; gap: .8rem;}
}
/************************************************/
/** **/
/** ARCHIVE ACTUALITÉS **/
/** **/
/************************************************/
/* home.php : bandeau .page-hero (bloc-entete-page) et cartes .actu-card
(bloc-actualites-accueil), CSS chargés dans functions.php. Filtres :
section FILTRES ISOTOPE + includes/js/filtres-isotope.js */
.archive-actus p.breadcrumb {padding-top: 2rem;}
.archive-actus .page-hero {padding-bottom: 4rem;}
/* Le parent centre les h1 de la page blog (.blog h1) */
.blog .archive-actus .page-hero h1 {text-align: left; margin-left: 0; font-weight: 400;}
.archive-actus .archive-actus-liste {padding: 5rem 0 8rem;}
/* Grille Isotope : largeurs des cartes (.isotope-item) ci-dessous */
.archive-actus .archive-actus-grid {--gap: 2.4rem; display: flex;}
.archive-actus .actu-card {width: 100%;}
/* Cartes */
.archive-actus .actualites .actu-img {background-color: var(--couleur-principale, #00443C);}
.archive-actus .actu-img img {transition: transform .6s ease;}
.archive-actus .actu-body {gap: 1.2rem;}
.archive-actus .actu-body h3 {margin: 0; line-height: 1.25;}
.archive-actus .actu-body p {margin: 0 0 .8rem; color: var(--ink-soft, #4a4a4a);}
.archive-actus .actu-more {color: var(--couleur-principale, #00443C); padding-top: 1.4rem; border-top: .1rem solid var(--line, #E5DFCF);}
.actus-vide {padding: 3rem; text-align: center; background: #fff; border-radius: var(--border-radius, 1.4rem);}
@media (hover: hover) {
.archive-actus .actu-card:hover .actu-img img {transform: scale(1.05);}
.archive-actus .actu-card:hover h3 {color: var(--couleur-principale-light, #005751);}
}
@media (min-width: 768px) {
.archive-actus .actu-card {width: calc((100% - var(--gap)) / 2);}
}
@media (min-width: 1025px) {
.archive-actus .archive-actus-liste {padding: 6rem 0 10rem;}
.archive-actus .actu-card {width: calc((100% - 2 * var(--gap)) / 3);}
}
/************************************************/
/** **/
/** FILTRES ISOTOPE **/
/** **/
/************************************************/
/* Partagé par la page Actualités et le bloc grille de services.
Structure : .js-filtres-isotope > .filtres-pills > .filtre-pill[data-filter]
+ .isotope-grid > .isotope-gutter + .isotope-item (largeur définie par
chaque contexte, gouttière = --gap) + .isotope-vide.
Script : includes/js/filtres-isotope.js */
.filtres-pills {flex-wrap: wrap; gap: 1rem; margin-bottom: 4rem;}
.filtre-pill {display: inline-flex; align-items: center; gap: .8rem; padding: .9rem 1.2rem .9rem 2rem; border-radius: 99.9rem; background: #fff; border: .1rem solid var(--line, #E5DFCF); color: var(--couleur-principale, #00443C); font-family: inherit; font-size: 1.4rem; font-weight: 600; line-height: 1.2; cursor: pointer; transition: var(--transition);}
.filtre-pill-nb {min-width: 2.4rem; padding: .3rem .7rem; border-radius: 99.9rem; background: var(--couleur-background-dark, #F3EFE6); font-size: 1.2rem; text-align: center; transition: var(--transition);}
.filtre-pill.is-active {background: var(--couleur-principale, #00443C); border-color: var(--couleur-principale, #00443C); color: #fff;}
.filtre-pill.is-active .filtre-pill-nb {background: var(--couleur-secondaire, #FFDA66); color: var(--couleur-principale-dark, #003029);}
.filtre-pill:focus-visible {outline: .2rem solid var(--couleur-principale, #00443C); outline-offset: .3rem;}
/* Avant l'init JS, le flex-wrap donne déjà une mise en page correcte */
.isotope-grid {--gap: 2.4rem; display: flex; flex-wrap: wrap; column-gap: var(--gap); position: relative;}
.isotope-grid.is-ready {display: block;}
.isotope-gutter {position: absolute; width: var(--gap); height: 0; visibility: hidden;}
.isotope-item {margin-bottom: var(--gap);}
@media (hover: hover) {
.filtre-pill:not(.is-active):hover {background: var(--couleur-secondaire, #FFDA66); border-color: var(--couleur-secondaire, #FFDA66); color: var(--couleur-principale-dark, #003029);}
}
/*====================================*/
/*===== CARTE ÉVÉNEMENT (commune) ====*/
/*====================================*/
/* template-parts/event-card.php : accueil, agenda complet, autres événements.
Mobile first : 1 colonne, date | titre + infos ; vignette à partir de 600px ;
2 colonnes à partir de 1025px */
.event-grid {display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem;}
.event-card, .event-card:visited {gap: 1.4rem; padding: 1.4rem; align-items: center; min-width: 0; background: #fff; border: var(--border); border-radius: var(--border-radius, 1.4rem); color: var(--couleur-texte); transition: var(--transition);}
.event-card:focus-visible {outline: .3rem solid var(--couleur-principale); outline-offset: .3rem;}
.event-card .event-date {flex-shrink: 0; width: 5.8rem; padding: 1rem .6rem; border-radius: 1rem; text-align: center; display: flex; flex-direction: column; justify-content: center; background: var(--couleur-principale); color: #fff;}
.event-card .event-date .day {font-family: var(--font-secondaire); font-size: 2.4rem; font-weight: 700; line-height: 1;}
.event-card .event-date .month {font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; margin-top: .4rem; color: var(--couleur-secondaire);}
.event-card-body {flex: 1; min-width: 0;}
.event-card .event-card-titre {font-size: 1.7rem; font-weight: 600; line-height: 1.25; color: var(--couleur-principale); margin: 0 0 .6rem; overflow-wrap: anywhere;}
.event-card-meta {font-size: 1.25rem; gap: .4rem 1.2rem; flex-wrap: wrap; color: var(--couleur-principale-light);}
.event-card-meta span::before {content: "·"; margin-right: .8rem; opacity: .5;}
.event-card-meta span:first-child::before {display: none;}
/* Vignette : image entière sur fond flouté (iwego_child_vignette_floue) */
.event-card-img {display: none; position: relative; flex-shrink: 0; width: 9rem; aspect-ratio: 1 / 1; border-radius: 1rem; overflow: hidden; background-color: var(--couleur-background-dark);}
.event-card-img img {display: block; width: 100%; height: 100%;}
.event-card-img img.vignette-img {position: relative; z-index: 1; object-fit: contain;}
.event-card-img img.vignette-flou {position: absolute; inset: 0; z-index: 0; object-fit: cover; filter: blur(1.2rem); transform: scale(1.15);}
@media (hover: hover) {
.event-card:hover {transform: translateY(-.3rem); box-shadow: var(--box-shadow);}
}
@media (min-width: 600px) {
.event-card-img {display: block;}
}
@media (min-width: 768px) {
.event-grid {gap: 2rem;}
.event-card {gap: 2rem; padding: 2rem;}
.event-card .event-date {width: 7rem; padding: 1.2rem .8rem;}
.event-card .event-date .day {font-size: 2.8rem;}
.event-card .event-date .month {font-size: 1.1rem; letter-spacing: .12em;}
.event-card .event-card-titre {font-size: 1.9rem;}
.event-card-meta {font-size: 1.3rem;}
.event-card-img {width: 10rem;}
}
@media (min-width: 1025px) {
.event-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
/*====================================*/
/*= HEADER SUR SLIDER PLEINE LARGEUR =*/
/*====================================*/
/* body.has-hero-plein (iwego_child_has_hero_plein()) : la page commence par le
hero en slider pleine largeur. En haut de page, le header est posé sur le
slider : transparent, texte et logo clairs, y compris au survol (pas de
bascule de logo). Il reprend son apparence normale dès qu'il réapparaît au
scroll (.header-scrolled, functions.js). */
#headermenu .logo .logo-mark-clair {display: none;}
body.has-hero-plein #main-content {margin-top: 0;}
body.has-hero-plein #headermenu:not(.header-scrolled) {background-color: transparent; border-bottom-color: transparent; backdrop-filter: none; box-shadow: none;}
body.has-hero-plein #headermenu:not(.header-scrolled) .main-menu > li > a {color: #fff; text-shadow: 0 .1rem .6rem rgba(0, 0, 0, .3);}
body.has-hero-plein #headermenu:not(.header-scrolled) .main-menu > .menu-item > a::after {background-color: var(--couleur-secondaire);}
/* Un seul logo à la fois : logo du footer s'il existe, sinon logo passé en blanc */
body.has-hero-plein #headermenu:not(.header-scrolled) .logo:has(.logo-mark-clair) .logo-mark:not(.logo-mark-clair) {display: none;}
body.has-hero-plein #headermenu:not(.header-scrolled) .logo .logo-mark-clair {display: block;}
body.has-hero-plein #headermenu:not(.header-scrolled) .logo:not(:has(.logo-mark-clair)) .logo-mark {filter: brightness(0) invert(1);}
/* Voile sombre en haut du slider pour la lisibilité du menu */
body.has-hero-plein .hero--plein .hero-bg-slider::before {content: ''; position: absolute; top: 0; left: 0; right: 0; height: 16rem; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 48, 41, .35) 0%, rgba(0, 48, 41, 0) 100%);}
/* Jusqu'à 1024px le header n'est pas fixe : on le pose sur le slider */
@media (max-width: 1024px) {
body.has-hero-plein #headermenu {position: absolute;}
body.has-hero-plein .hero--plein .hero-inner {padding-top: 11rem;}
}
/* Lecture audio de la page (includes/js/lecture-audio.js, balisage dans footer.php) */
.lecture-audio {position: fixed; left: 2rem; bottom: 2rem; z-index: 190; display: flex; align-items: center; gap: .6rem; background: var(--couleur-principale); color: var(--couleur-secondaire); border-radius: 99.9rem; padding: .6rem; box-shadow: 0 1rem 3rem color-mix(in srgb, var(--couleur-principale-dark) 35%, transparent);}
.lecture-audio[hidden] {display: none;}
.lecture-audio button, .lecture-audio select {display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 4.4rem; min-width: 4.4rem; padding: 0 1.4rem; border: none; border-radius: 99.9rem; background: none; color: inherit; font: inherit; font-size: 1.4rem; font-weight: 600; cursor: pointer;}
.lecture-audio select {padding: 0 .8rem; background: color-mix(in srgb, var(--couleur-secondaire) 15%, transparent);}
.lecture-audio select option {color: #000;}
.lecture-audio button:hover, .lecture-audio button[aria-pressed="true"] {background: var(--couleur-secondaire); color: var(--couleur-principale-dark);}
.lecture-audio button:focus-visible, .lecture-audio select:focus-visible {outline: .2rem solid var(--couleur-secondaire); outline-offset: .2rem;}
.lecture-audio svg {width: 2rem; height: 2rem; fill: currentColor;}
.lecture-audio .lecture-audio-ctrl {display: none;}
.lecture-audio.is-active .lecture-audio-ctrl {display: flex;}
.lecture-audio.is-active .lecture-audio-lbl {display: none;}
@media (max-width: 1024px) {
/* au-dessus de la barre de navigation basse */
.lecture-audio {left: 1.2rem; bottom: calc(10rem + env(safe-area-inset-bottom, 0px));}
.lecture-audio .lecture-audio-lbl {display: none;}
}
@media print {.lecture-audio {display: none;}}
/* OneTap : mention sous le titre du panneau (cf. functions.php, retour client 2.3) */
html body nav.onetap-accessibility.onetap-plugin-onetap .onetap-site-container p.iwego-onetap-mention {margin: .6rem auto 0 !important; padding: 0 1.6rem !important; max-width: 36rem; font-size: 13px !important; line-height: 1.4 !important; color: #fff !important; opacity: .9; text-align: center !important;}
/* Titres de contenu : niveau sémantique corrigé (RGAA 9.1) en gardant la taille visuelle
d'origine. Classes utilisables dans l'éditeur (« Classe(s) CSS additionnelle(s) »). */
.wp-block-heading.taille-h3 {font-size: 2rem; font-weight: 600; margin: 2rem 0;}
.wp-block-heading.taille-h4 {font-size: 1.8rem; font-weight: 400; margin: 2.4rem 0;}
/* ==========================================================================
Accessibilité RGAA — contrastes (critère 3.2) et page de recherche
========================================================================== */
/* Couleurs d'accent assombries pour les textes : 4,5:1 minimum sur le fond crème
(or : 2,7:1 → 4,9:1 ; bleu travaux : 2,9:1 → 4,5:1). S'applique aussi aux badges
en texte blanc sur ces couleurs. */
html:root {
--couleur-vie-pratique: #8a6800 !important;
--couleur-travaux: #4a77a0 !important;
--gold-vie-pratique: #8a6800; /* utilisée par les cartes et fiches services (sinon repli #C09100) */
}
/* Titres « mixtes » placés sur fond clair : le jaune (1,3:1) devient vert foncé */
.actualites .section-head .h2-mixte,
.asso-autres .h2-mixte,
.asso-autres .section-head h2 {color: var(--couleur-principale);}
.actualites .section-head .h2-mixte em,
.asso-autres .h2-mixte em {color: var(--couleur-principale-light);}
/* Catégorie des actualités : l'opacité 0,7 faisait tomber le contraste à 4,3:1 */
body .actualites .actu-meta .actu-cat {opacity: 1;}
/* Liens dans le texte des sections sur fond vert (2,2:1 → 4,9:1) */
.container-bloc-texte-image.container-background p a:not([class*="btn"]),
.container-bloc-texte-image.container-background li a:not([class*="btn"]) {color: #fff; text-decoration: underline;}
/* Page de recherche : en-tête aligné sur la grille de résultats */
.search .archive-header {margin: 5rem auto 3rem; text-align: left;}
.search .archive-header .archive-description {margin: .8rem 0 0;}
/* Accessibilité RGAA 3.3 : contour des champs de saisie contrasté (≥ 3:1 sur fond blanc et beige) */
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 input[type="url"], .wpcf7 input[type="number"], .wpcf7 input[type="date"], .wpcf7 select, .wpcf7 textarea, .search-form input[type="search"], #header-search-popup input[type="search"], .newsletter-form input[type="email"] {border: .1rem solid #857c69 !important;}
/* Mobile : blason aligné à gauche avec le nom de la commune (au lieu d'un blason seul centré) */
#headermenu .logo {display: flex; align-items: center; gap: 1.2rem; text-decoration: none;}
#headermenu .logo-texte {display: none;}
@media (max-width: 1024px) {
#headermenu .header-inner {justify-content: flex-start;}
#headermenu .logo-texte {display: flex; flex-direction: column; line-height: 1.15; color: var(--couleur-principale);}
#headermenu .logo-texte .commune {font-family: 'Fraunces', serif; font-size: 2.4rem; font-weight: 600;}
#headermenu .logo-texte .departement {font-size: 1.3rem; opacity: .85;}
body.has-hero-plein #headermenu:not(.header-scrolled) .logo-texte {color: #fff; text-shadow: 0 .1rem .6rem rgba(0, 0, 0, .45);}
}
/* Entrée « Confort » de la barre mobile (ouvre les réglages de l'extension Iwego Accessibilité) */
.bottom-nav button.bottom-nav-confort svg {fill: currentColor; stroke: none;}
/* Fiche entreprise (single-entreprise.php) : secteur au-dessus du nom dans « Autres professionnels » */
.single-entreprise .entreprise-card-secteur {display: block; margin-bottom: .6rem; font-size: 1.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gold-vie-pratique, #8A6800);}
/* Formulaire de contact : consentement RGPD + captcha Turnstile en bas, avant le bouton */
.wpcf7 .champ-rgpd {margin: 2rem 0 0;}
.wpcf7 .champ-rgpd p {margin: 0;}
.wpcf7 .champ-rgpd .wpcf7-list-item {margin: 0;}
.wpcf7 .champ-rgpd label {display: flex; align-items: flex-start; gap: 1rem; cursor: pointer;}
.wpcf7 .champ-rgpd input[type="checkbox"] {flex-shrink: 0; margin-top: .2rem;}
.wpcf7 .champ-rgpd .wpcf7-list-item-label {font-size: 1.5rem; line-height: 1.45;}
.wpcf7 .champ-rgpd .mention-rgpd {margin: 1rem 0 0 2.8rem; font-size: 1.3rem; line-height: 1.5; color: var(--ink-soft, #4a4a4a);}
.wpcf7 .champ-rgpd .wpcf7-not-valid-tip {margin: .6rem 0 0 2.8rem;}
.wpcf7 .wpcf7-turnstile {margin: 2.4rem 0 2rem;}
/************************************************/
/** **/
/** TARTE AU CITRON **/
/** **/
/************************************************/
body #tarteaucitronRoot.tarteaucitronBeforeVisible div#tarteaucitronAlertBig.tarteaucitronAlertBigTop {
position: fixed !important;
bottom: 2em !important;
left: 1em !important;
top: auto !important;
height: 80% !important;
width: 80% !important;
max-height: 200px;
max-width: 350px;
padding: 10px 0px 0px 0px !important;
border: 1px #bcbcbc solid !important;
background-color: white !important;
border-radius: 5px !important;
box-shadow: none;
transform: none;
display: inline-flex !important;
flex-wrap: wrap;
}
#tarteaucitronAlertBig #tarteaucitronDisclaimerAlert{ color: var(--couleur-principale); width: 100%; margin-bottom: 0px !important;}
#tarteaucitronAlertBig button#tarteaucitronCloseAlert, #tarteaucitronAlertBig button#tarteaucitronPersonalize2 {
bottom: 0 !important;
align-self: flex-end !important;
font-size: 12px !important;
font-family: 'Montserrat', sans-serif !important;
width: calc(50% - 20px) !important;
height: 22px !important;
padding: 5px 10px !important;
font-weight: 600 !important;
color: black !important;
background: white !important;
border-top: 1px #bcbcbc solid !important;
border-radius:0px !important;
margin: 0px !important;
order:1;
}
.tarteaucitronAlertBigTop::after { content: ''; background: url('/wp-content/uploads/2026/10/cookie-iwego.png'); height: 70px; width: 100px; position: absolute; right: 1.1em !important; margin: 0 auto !important; background-size: contain; background-repeat: no-repeat; }
.cookie-text-fr h2 { font-family: 'Montserrat', sans-serif !important; font-weight: 800 !important; font-size: 20px !important; margin-bottom: 0em !important; }
.cookie-text-fr p { font-family: 'Montserrat', sans-serif !important; font-size: 12px !important; line-height: 17px !important; margin-bottom: 0px !important;margin-top: 20px !important; width: 300px; margin-top: 2em; }
#tarteaucitronAlertBig button#tarteaucitronPersonalize2 { width: calc(50% - 21px) !important;border-left: 1px #bcbcbc solid !important; color: var(--couleur-principale) !important; order:3 !important;}
#tarteaucitron #tarteaucitronServices .tarteaucitronTitle button, #tarteaucitronSave, #tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList .tarteaucitronCookiesListMain, #tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList, #tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesList .tarteaucitronHidden, #tarteaucitron #tarteaucitronServices .tarteaucitronMainLine, #tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronClosePanelCookie, #tarteaucitron #tarteaucitronClosePanel, #tarteaucitronInfo { background: var(--couleur-principale) !important}
div#tarteaucitronServices {box-shadow: none !important;}
.tarteaucitronSelfLink {display: none !important; }
div#tarteaucitronRoot.tarteaucitronBeforeVisible:before{display: none;}