/* ==========================================================================
   Services Mel'or — Styles du thème (composants + sections)
   Dépend de tokens.css. Points de rupture : mobile ≤ 767, tablette 768–1024,
   ordinateur ≥ 1025 (identiques à Elementor).
   ========================================================================== */

/* ---- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--c-dark); text-decoration: none; transition: color var(--t-btn); }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--ff-heading); color: var(--c-heading); font-weight: 400; }
p { margin: 0; }
strong, b { font-weight: 700; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 1000; padding: 8px 16px; background: var(--c-dark); color: var(--c-on-dark); }
.skip-link:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 1025px) {
  .container { max-width: var(--container); padding-inline: 0; }
}

/* ---- Typographie de rôle ------------------------------------------------- */
.t-eyebrow {           /* h5 « À propos de Services Mel'or » */
  font-family: var(--ff-heading); font-weight: var(--fw-eyebrow);
  font-size: var(--fs-eyebrow); line-height: 1; color: var(--c-heading);
}
.t-h2 {
  font-family: var(--ff-heading); font-weight: var(--fw-h2);
  font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--c-heading);
}
.t-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); }
.on-primary, .on-primary .t-eyebrow, .on-primary .t-h2, .on-primary p { color: var(--c-on-primary); }

/* ---- Boutons --------------------------------------------------------------
   .btn            : bouton plein (fond principal)
   .btn--outline   : bordure blanche, fond transparent (bandeau, épicerie)
   .btn--bordered  : plein + bordure blanche (Contact du bandeau)
   .btn--submit    : bouton d'envoi du formulaire
   Survol : fond doré + décalage de 7 px vers la droite en 0,3 s.          */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--btn-pad);
  font-family: var(--ff-heading); font-weight: var(--fw-btn);
  font-size: var(--fs-btn); line-height: var(--lh-btn); letter-spacing: var(--ls-btn);
  text-transform: uppercase; white-space: nowrap;
  color: var(--c-on-primary); background: var(--c-primary);
  border: 0 none; border-radius: var(--btn-radius);
  cursor: pointer;
  transition: all var(--t-btn);
}
.btn:hover, .btn:focus-visible, .btn.is-hover {
  color: var(--c-on-accent); background: var(--btn-bg-hover);
  transform: translateX(var(--btn-shift));
}
.btn--bordered { border: 1px solid #FFFFFF; }
.btn--outline { background: rgba(202, 167, 90, 0); border: 1px solid #FFFFFF; }

.btn--submit {
  width: 100%; height: var(--submit-h); padding: var(--submit-pad);
  font-family: var(--ff-body); font-weight: 400; font-size: var(--fs-field); line-height: 1;
  letter-spacing: normal; text-transform: capitalize;
  border-radius: var(--submit-radius);
}
.btn--submit:hover, .btn--submit.is-hover { transform: none; }

/* ---- En-tête -------------------------------------------------------------- */
.site-header { position: static; height: var(--header-h); background: var(--c-bg); }
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.site-logo {
  display: flex; align-items: center; justify-content: center;
  width: 180px; height: 90px; padding: 0 15px; background: var(--c-primary);
}
.site-logo img { width: 150px; height: auto; }
.site-header__right { display: flex; align-items: center; }
.main-nav__list { display: flex; align-items: center; }
.main-nav__list a {
  display: block; padding: 0 15px;
  font-family: var(--ff-heading); font-size: var(--fs-nav); line-height: var(--lh-nav);
  color: var(--c-nav); transition: color var(--t-btn);
}
.main-nav__list a:hover, .main-nav__list a.is-hover { color: var(--c-primary); }
.site-header__cta { margin-left: 21px; }
.menu-toggle {
  display: none; width: 38px; height: 38px; margin-left: 20px; padding: 0;
  align-items: center; justify-content: center;
  background: var(--c-primary); color: #FFFFFF; border: 0; cursor: pointer;
}
.menu-toggle svg { width: 22px; height: 22px; }

@media (max-width: 1024px) {
  .site-header .container { max-width: none; padding-inline: 20px; }
  .main-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .site-header__cta { margin-left: 0; }
  .site-logo { width: 182px; height: 80px; padding: 0 16px; }
}
@media (max-width: 767px) {
  .site-logo { width: 122px; height: 40px; padding: 0 21px; }
  .site-logo img { width: 80px; }
}

/* Menu mobile : panneau latéral droit */
.mobile-menu { position: fixed; inset: 0; z-index: 900; visibility: hidden; pointer-events: none; }
.mobile-menu__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: calc(100% - 78px); max-width: 312px;
  padding: 46px 46px 40px 45px; background: #FFFFFF; overflow-y: auto;
  box-shadow: -2px 0 6px rgba(0, 0, 0, 0.35);
  transform: translateX(100%); transition: transform 0.4s ease;
}
.mobile-menu__close {
  position: absolute; top: 0; left: 0; width: 40px; height: 41px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-accent-deep); color: #FFFFFF; border: 0; cursor: pointer;
}
.mobile-menu__close svg { width: 22px; height: 22px; }
.mobile-menu__list a {
  display: block; padding: 15px 0;
  font-family: var(--ff-body); font-size: 16px; line-height: 27.2px; color: var(--c-primary);
  border-bottom: 1px solid var(--c-border-soft);
}
.mobile-menu__list li:last-child a { border-bottom: 0; }
.mobile-menu.is-open { visibility: visible; pointer-events: auto; }
.mobile-menu.is-open .mobile-menu__panel { transform: none; }

/* Retour en haut (apparaît après défilement) */
.to-top {
  position: fixed; right: 29px; bottom: 149px; z-index: 800;
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  background: var(--c-dark); color: var(--c-on-dark); border: 0; cursor: pointer;
  opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;
}
.to-top svg { width: 16px; height: 16px; }
.to-top.is-visible { opacity: 1; visibility: visible; }

/* ---- Section générique ---------------------------------------------------- */
.section { position: relative; padding-block: var(--section-pad); }
.section--primary { background: var(--c-primary); }
.section-head .t-eyebrow { margin-bottom: 20px; }
.section-head .t-h2 { margin-bottom: 0; }
.richtext p + p { margin-top: 26px; }

/* ---- 2. Bandeau avec diaporama ------------------------------------------- */
.hero {
  position: relative; height: 900px; padding: 24px 0 192px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-on-image); text-align: center;
}
.hero__slides, .hero__slide, .hero__overlay { position: absolute; inset: 0; }
.hero__slide { overflow: hidden; }
.hero__slide img { width: 100%; height: 100%; max-width: none; object-fit: cover; transform-origin: center; }
.hero__slide--2 { opacity: 0; animation: hero-fade calc(var(--slide-duration) * 2) linear infinite; }
.hero__slide--1 img { animation: hero-kb-1 calc(var(--slide-duration) * 2) linear infinite; }
.hero__slide--2 img { animation: hero-kb-2 calc(var(--slide-duration) * 2) linear infinite; }
.hero__overlay { background: var(--overlay-hero); }
.hero__content { position: relative; z-index: 1; width: 100%; max-width: 760px; padding-inline: var(--gutter); }
.hero__title {
  font-weight: var(--fw-h1); font-size: var(--fs-h1); line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1); color: var(--c-on-image);
  margin: 0 auto 39px; max-width: 660px;
}
.hero__lead { font-size: var(--fs-lead); line-height: var(--lh-lead); margin-bottom: 45px; }
.hero__lead strong { font-weight: 700; }
.hero__actions { display: flex; justify-content: center; gap: 20px; }

/* 2 images · 5 s chacune · fondu 0,5 s · Ken Burns (zoom avant) */
@keyframes hero-fade { 0%, 50% { opacity: 0; } 55%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hero-kb-1 { 0% { transform: scale(1); } 55% { transform: scale(1.08); } 56%, 100% { transform: scale(1); } }
@keyframes hero-kb-2 { 0%, 50% { transform: scale(1); } 100% { transform: scale(1.08); } }

/* Tablette : le titre est masqué visuellement sur le site actuel (réglage Elementor) ;
   il reste lisible par les lecteurs d'écran et les moteurs de recherche. */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero__title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hero__content { max-width: 670px; }
}
@media (max-width: 1024px) { .hero { padding-bottom: 201px; } }
@media (max-width: 767px) {
  .hero { text-align: left; }
  .hero__content { padding-inline: 16px; }
  .hero__title { font-size: 34px; letter-spacing: -1px; line-height: 1.1; margin: 0 0 40px; max-width: none; }
  .hero__lead { margin-bottom: 46px; }
  .hero__actions { flex-direction: column; gap: 17px; }
  .hero__actions .btn { width: 100%; }
}

/* ---- 3. À propos ---------------------------------------------------------- */
.about { padding-top: 145px; padding-bottom: 24px; min-height: 900px; }
.about__grid { display: grid; grid-template-columns: 533px minmax(0, 1fr); column-gap: 110px; align-items: start; }
.about__media img { width: 100%; height: auto; }
.about__text { padding-top: 9px; }
.about__text .t-h2 { max-width: 530px; }
.about__text .t-h2 { margin-top: 20px; }
.about__text .richtext { margin-top: 41px; }
.about__text .richtext p + p { margin-top: 45px; }
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 86px; }
.feature { display: flex; gap: 20px; align-items: flex-start; }
.feature__icon {
  flex: none; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;
  background: var(--c-primary); color: var(--c-accent);
}
.feature__icon svg { width: 32px; height: 32px; }
.feature__title {
  font-family: var(--ff-heading); font-weight: var(--fw-feature);
  font-size: var(--fs-feature); line-height: var(--lh-feature); color: var(--c-heading);
  margin: 1px 0 10px;
}
@media (max-width: 1024px) {
  .about { padding-top: 70px; padding-bottom: 69px; min-height: 0; }
  .about__grid { grid-template-columns: 1fr; }
  .about__media { width: 80%; }
  .about__text { padding-top: 0; margin-top: 30px; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 49px; margin-top: 76px; }
}
@media (max-width: 767px) {
  .about { padding-top: 41px; padding-bottom: 41px; }
  .about__media { width: 100%; }
  .about__text { margin-top: 30px; }
  .features { grid-template-columns: 1fr; row-gap: 49px; margin-top: 46px; }
}

/* ---- 4. Des services sur place (4 colonnes sur photo) --------------------- */
.onsite { padding: 0; }
.onsite__head { padding: 120px 0 131px; text-align: center; }
.rating { display: flex; justify-content: center; gap: 12px; margin-bottom: 21px; color: var(--c-rating); }
.rating svg { width: 12px; height: 12px; }
.onsite__head .t-h2 { margin-bottom: 9px; }
.onsite__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.onsite-col {
  position: relative; height: 491px; padding: 160px 24px 40px; overflow: hidden;
  background: #FFFFFF;
}
.onsite-col__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.onsite-col::after { content: ""; position: absolute; inset: 0; background: var(--overlay-columns); }
.onsite-col__inner { position: relative; z-index: 1; }
.onsite-col .t-h2 { color: var(--c-on-image); }
.onsite-col p { margin-top: 40px; font-size: var(--fs-col); line-height: var(--lh-col); color: var(--c-on-image); }
@media (max-width: 1024px) {
  .onsite__head { padding: 69px 115px 32px; }
  .onsite__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .onsite-col { height: 300px; padding: 66px 20px 20px; }
}
@media (max-width: 767px) {
  .onsite__head { padding: 40px 16px 49px; text-align: left; }
  .rating { justify-content: flex-start; }
  .onsite__cols { grid-template-columns: 1fr; }
  .onsite-col { height: 300px; padding: 67px 16px 20px; }
}

/* ---- Grilles de cartes (conciergerie, travaux, activités) ---------------- */
.cards-section { padding-top: 164px; padding-bottom: 327px; }
#petits-travaux { padding-bottom: 344px; }
#conciergerie { padding-bottom: 343px; }
.cards-section .richtext { margin-top: 40px; }
.richtext--narrow { max-width: 830px; }
.activities { padding-bottom: 185px; }
.cards-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap);
  margin-top: 52px; align-items: stretch; grid-auto-rows: 1fr; /* rangées de même hauteur */
}
@media (max-width: 1024px) {
  .cards-section, #petits-travaux, #conciergerie { padding-top: 70px; padding-bottom: 44px; }
  #activites { padding-bottom: 55px; }
  .activities .service-card { padding-bottom: 37px !important; }
  .service-card { padding-left: 20px !important; padding-right: 20px !important; }
  .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .cards-section, #petits-travaux, #conciergerie { padding-top: 41px; padding-bottom: 44px; }
  .cards-grid--centered { grid-auto-rows: auto; }
  .cards-section .cards-grid:not(.cards-grid--centered) { margin-top: 38px; }
  #petits-travaux .service-card { padding-bottom: 10px; }
  #activites { padding-bottom: 75px; }
  #conciergerie { padding-bottom: 64px; }
  #activites .service-card { padding-bottom: 21px !important; }
  .cards-grid { grid-template-columns: 1fr; }
}

/* Carte de service : icône, titre, description, tarif */
.service-card {
  display: flex; flex-direction: column;
  padding: 24px 24px 24px; background: #FFFFFF; box-shadow: var(--shadow-card);
  transition: var(--t-card);
}
.service-card:hover, .service-card.is-hover { transform: translateY(-5px); box-shadow: var(--shadow-strong); }
.service-card__icon { width: 100px; height: 100px; margin-left: -1px; }
.service-card__icon img { width: 100px; height: 100px; transition: transform 0.3s; }
.service-card__title {
  font-family: var(--ff-heading); font-weight: var(--fw-card-title);
  font-size: var(--fs-card-title); line-height: var(--lh-card-title); color: var(--c-heading);
  margin: 27px 0 9px;
}
.service-card__desc { font-size: 16px; line-height: 27.2px; color: var(--c-text); }
.service-card__price {
  margin-top: auto; padding-top: 20px;
  font-family: var(--ff-heading); font-weight: 300; font-size: var(--fs-price); line-height: 1;
  color: var(--c-heading);
}
.service-card--activity .service-card__price { padding-left: 10px; }
/* Variante haute (petits travaux, activités) : titre collé à l'icône, tarif en bas */
.cards-grid:not(.cards-grid--centered) { margin-top: 46px; }
.cards-grid:not(.cards-grid--centered) .service-card { padding-bottom: 25px; }
.activities .service-card { padding-bottom: 45px !important; }
.cards-grid:not(.cards-grid--centered) .service-card__title { margin-top: 14px; }
.cards-grid--centered { margin-top: 49px; }
/* Variante conciergerie : titre, texte et tarif centrés verticalement sous l'icône */
.service-card__content { flex: 1; display: flex; flex-direction: column; }
.service-card__content .service-card__body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.service-card__content .service-card__price { margin-top: 0; padding-top: 20px; }
.cards-grid--centered .service-card__title { margin-top: 20px; }
.cards-grid--centered .service-card__body { padding-bottom: 0; }

/* ---- 6. Épicerie + bloc horaires ------------------------------------------ */
.grocery { padding: 74px 0 24px; min-height: 827px; }
.grocery__grid { display: grid; grid-template-columns: 600px minmax(0, 1fr); align-items: start; }
.grocery__text { padding: 10px 10px 0; color: var(--c-on-primary); }
.grocery__text .t-h2 { margin-top: 20px; }
.grocery__text .richtext { margin-top: 40px; }
.grocery__text .richtext p + ul { margin-top: 15px; }
.grocery__text .richtext ul + p { margin-top: 21px; }
.grocery__text .richtext p + p.spaced { margin-top: 26px; }
.grocery__text .btn { margin-top: 46px; }
.grocery__aside { padding-left: 30px; }
.grocery__aside > img { width: 100%; height: 427px; object-fit: cover; }
.hours-card {
  margin-top: 21px; padding: 24px 24px 23px; background: #FFFFFF; box-shadow: var(--shadow-soft);
}
.hours-card__title {
  font-family: var(--ff-heading); font-weight: var(--fw-card-title);
  font-size: var(--fs-card-title); line-height: var(--lh-card-title); color: var(--c-heading);
  margin-bottom: 10px;
}
.hours-card p { color: var(--c-text); }
@media (max-width: 1024px) {
  .grocery { padding-top: 70px; padding-bottom: 65px; min-height: 0; }
  .grocery__grid { grid-template-columns: 1fr; }
  .grocery__aside { order: -1; padding-left: 0; }
  .grocery__aside > img { height: auto; aspect-ratio: 728 / 546; }
  .hours-card { width: fit-content; margin-top: 19px; padding: 20px; }
  .grocery__text { padding: 33px 0 0; }
}
@media (max-width: 767px) {
  .grocery { padding-top: 42px; padding-bottom: 37px; }
  .hours-card { width: auto; margin-top: 20px; padding: 16px 16px 18px; }
  .grocery__text .btn { width: 100%; margin-top: 46px; }
}

/* ---- 8. Activités (fond principal) --------------------------------------- */
.activities .richtext p + p { margin-top: 26px; }
.activities .richtext p + ul { margin-top: 15px; }
.activities .richtext ul + p { margin-top: 21px; }

/* ---- 9. Locations : mosaïque ---------------------------------------------- */
.rentals { padding-top: 164px; padding-bottom: 347px; }
.rentals .richtext { margin-top: 40px; max-width: 830px; }
.rentals-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap-rentals);
  margin-top: 46px; align-items: start;
}
.rentals-grid__col { display: flex; flex-direction: column; gap: var(--grid-gap-rentals); min-width: 0; }
.rental-card { padding: 24px 24px 32px; background: #FFFFFF; box-shadow: var(--shadow-card); transition: var(--t-card); }
.rental-card:hover, .rental-card.is-hover { box-shadow: var(--shadow-strong); }
.rental-card__media { overflow: hidden; }
.rental-card__media img { width: 100%; height: auto; transition: all 0.4s; }
.rental-card:hover .rental-card__media img, .rental-card.is-hover .rental-card__media img { transform: scale(1.05); }
.rental-card__title {
  font-family: var(--ff-heading); font-weight: var(--fw-card-title);
  font-size: var(--fs-card-title); line-height: var(--lh-card-title); color: var(--c-heading);
  margin: 14px 0 0;
}
.rental-card .btn { margin: 41px 0 0 10px; }
@media (max-width: 1024px) {
  .rentals { padding-top: 70px; padding-bottom: 64px; }
  .rentals-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .rentals { padding-top: 41px; padding-bottom: 43px; }
  .rental-card { padding: 17px 17px 17px; }
  .rentals-grid { grid-template-columns: 1fr; }
  .rental-card .btn { display: flex; margin-left: 10px; margin-right: 10px; }
}

/* ---- 10. Contact ---------------------------------------------------------- */
.contact { padding: 0; }
.contact__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 986px; }
.contact__media { position: relative; }
.contact__media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.contact__body { padding: 50px 50px 49px; }
.contact__body .richtext { margin-top: 40px; }
.contact__body .richtext p + p { margin-top: 26px; }
.contact__media img { object-position: 0% 50%; }
@media (max-width: 1024px) {
  .contact__grid { min-height: 1089px; }
  .contact__media img { object-position: 50% 50%; }
  .contact__body { padding: 50px 20px 50px; }
}
@media (max-width: 767px) {
  .contact__grid { grid-template-columns: 1fr; min-height: 0; }
  .contact__media { height: 250px; }
  .contact__media img { object-position: 50% 50%; }
  .contact__body { padding: 50px 20px 75px; }
  .contact__body .richtext { margin-top: 21px; }
}

/* Formulaire */
.form { margin-top: 46px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 24px; }
.form__field { min-width: 0; }
.form__field--full { grid-column: 1 / -1; }
.form__label {
  display: block; margin-bottom: 5px;
  font-weight: 600; font-size: 16px; line-height: 27.2px; color: var(--c-text);
}
.form__input, .form__select, .form__textarea {
  display: block; width: 100%; min-height: var(--field-h); padding: var(--field-pad);
  font-family: var(--ff-body); font-size: var(--fs-field); line-height: 1.4; color: var(--c-text);
  background: #FFFFFF; border: var(--field-border); border-radius: 0; outline: 0;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.form__input::placeholder, .form__textarea::placeholder { color: #7A7A7A; opacity: 1; }
.form__input:focus, .form__select:focus, .form__textarea:focus { box-shadow: inset 0 0 0 1px var(--c-field-border); }
.form__select {
  height: 40px; min-height: 0; padding: 0 40px 0 14px; color: #000000;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, #000 50%), linear-gradient(135deg, #000 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.form__textarea { height: 96px; padding: 10px 14px; resize: vertical; }
.form__radios { display: grid; row-gap: 0; margin-top: -20px !important; margin-bottom: -6px !important; }
.form__radio, .form__check { display: flex; align-items: center; gap: 11px; font-weight: 600; font-size: 16px; line-height: 27.2px; color: var(--c-text); cursor: pointer; }
.form__radio input { margin: 0 0 0 1px; width: 13px; height: 13px; accent-color: var(--c-primary); }
.form__check { display: block; }
.form__check input { margin: 0 9px 0 0; width: 13px; height: 13px; vertical-align: 1px; accent-color: var(--c-primary); }
.form__error { display: none; margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--c-error); }
.form__field.is-invalid .form__input, .form__field.is-invalid .form__select, .form__field.is-invalid .form__textarea { border-color: var(--c-error); }
.form__field.is-invalid .form__error { display: block; }
.form__actions { grid-column: 1 / -1; margin-top: -19px; }
.form__message {
  grid-column: 1 / -1; display: none; padding: 12px 16px; font-size: 15px; line-height: 1.5;
}
.form__message--success { color: var(--c-dark); background: color-mix(in srgb, var(--c-primary) 10%, #fff); border-left: 0; }
.form__message--error { color: var(--c-error); background: #FDF0F0; }
.form.is-sent .form__message--success, .form.has-errors .form__message--error { display: block; }
@media (max-width: 767px) {
  .form { grid-template-columns: 1fr; margin-top: 25px; }
}

/* ---- 11. Pied de page ----------------------------------------------------- */
.site-footer { background: var(--c-primary); color: var(--c-on-primary); border-top: 8px solid var(--c-band); }
.site-footer a { color: var(--c-on-primary); }
.site-footer a:hover { color: var(--c-accent); }
.footer-top { display: grid; grid-template-columns: 240px 1fr 240px; padding-top: 50px; }
.footer-block__title { font-family: var(--ff-heading); font-weight: 300; font-size: var(--fs-footer-title); line-height: 1; color: var(--c-on-primary); margin-bottom: 17px; }
.footer-block p, .footer-block a { display: block; font-size: 16px; line-height: 27.2px; color: var(--c-on-primary); }
.footer-block--address { border-right: 1px solid #FFFFFF; padding-right: 30px; }
.footer-block--contact { grid-column: 3; border-left: 1px solid #FFFFFF; text-align: right; }
.footer-rule { height: 1px; margin: 48px 20px 0; background: #FFFFFF; }
.footer-legal { display: flex; justify-content: center; margin-top: 20px; }
.footer-legal ul { display: flex; gap: 30px; padding-top: 15px; border-top: 1px solid #FFFFFF; padding-inline: 15px; }
.footer-legal a { font-size: 16px; line-height: 27.2px; }
.footer-copy { padding: 35px 0 20px; text-align: center; font-size: 16px; line-height: 27.2px; }
@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 205px 1fr 205px; }
  .footer-rule { margin-inline: 20px; }
}
@media (max-width: 767px) {
  .footer-top { grid-template-columns: 1fr; row-gap: 40px; padding-inline: 20px; }
  .footer-block, .footer-block--address { border-right: 0; border-left: 1px solid #FFFFFF; padding-left: 20px; padding-right: 0; text-align: left; }
  .footer-block--contact { grid-column: auto; text-align: left; }
  .footer-rule { margin: 47px 20px 0; }
  .footer-legal ul { gap: 12px; padding-inline: 0; padding-top: 4px; }
  .footer-copy { padding-top: 31px; }
}

/* ---- Pages légales -------------------------------------------------------- */
.page-banner {
  position: relative; height: 336px; padding-top: 151px; text-align: center;
  background: var(--c-primary); color: var(--c-on-primary);
}
.page-banner::before { content: ""; position: absolute; inset: 0; background: var(--overlay-banner); }
.page-banner__inner { position: relative; }
.page-banner__title {
  display: inline-block; padding-bottom: 0; border-bottom: 1px solid var(--c-accent-deep);
  font-weight: 300; font-size: 60px; line-height: 69px; letter-spacing: 0; color: var(--c-on-primary);
}
.breadcrumb { display: flex; justify-content: center; gap: 20px; margin-top: 7px; font-size: 16px; line-height: 27.2px; }
.breadcrumb a, .breadcrumb span { color: var(--c-on-primary); }
.legal { padding: 50px 0 88px; }
.legal--privacy { padding-top: 48px; }
.legal .container { max-width: var(--container-legal); padding-inline: 0; }
.legal h1 { font-weight: 300; font-size: 64px; line-height: 70.4px; letter-spacing: -4px; margin-bottom: 101px; }
.legal h2 { font-weight: 300; font-size: var(--fs-legal-h2); line-height: 1.1; }
.legal em { font-style: italic; }
.legal a { color: var(--c-dark); }
.legal a:hover { color: var(--c-primary); }
/* Mentions légales (bloc texte) */
.legal--mentions p { margin: 0 0 26px; }
.legal--mentions ul { margin: 0; }
.legal--mentions h2 { margin: 20px 0 40px; }
.legal--mentions p + h2 { margin-top: 46px; }
/* Politique de confidentialité (contenu de l'éditeur) */
.legal--privacy .container { padding-inline: 10px; }
.legal--privacy p, .legal--privacy ul { margin: 0; }
.legal--privacy h2 { margin: 0 0 20px; }
.legal--privacy p + p, .legal--privacy p + ul, .legal--privacy .spaced { margin-top: 26px; }
.legal--privacy .light { font-weight: 300; }
.legal--privacy p + h2 { margin-top: 25px; }
.legal--privacy ul + h2 { margin-top: 0; }
.legal--privacy ul.gap-after { margin-bottom: 2px; }
@media (max-width: 1024px) {
  .legal .container { padding-inline: 40px; }
  .legal--privacy .container { padding-inline: 50px; }
  .legal h1 { margin-bottom: 93px; }
}
@media (max-width: 767px) {
  .page-banner { height: 408px; padding-top: 63px; }
  .page-banner .container { padding-inline: 0; }
  .page-banner__title { display: block; }
  .legal h1 { margin-bottom: 85px; }
}

/* ---- Apparitions au défilement (activées par site.js) --------------------- */
.js [data-anim] { opacity: 0; }
.js [data-anim].is-inview { animation-duration: var(--anim-duration); animation-fill-mode: both; }
.js [data-anim="fadeInUp"].is-inview { animation-name: fadeInUp; }
.js [data-anim="fadeIn"].is-inview { animation-name: fadeIn; }
.js [data-anim="scaleIn"].is-inview { animation-name: scaleIn; }
.js [data-anim="fadeInLeft"].is-inview { animation-name: fadeInLeft; }
.js [data-anim="fadeInRight"].is-inview { animation-name: fadeInRight; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInRight { from { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }

/* ---- Moins d'animations : tout le mouvement est coupé --------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-anim] { opacity: 1; }
  .hero__slide--2 { opacity: 0; }
  .btn:hover, .btn.is-hover { transform: none; }
}
.legal--continued { padding-top: 0; }

/* ---- Page 404 ------------------------------------------------------------- */
.btn--ghost { color: var(--c-primary); background: transparent; border: 1px solid var(--c-primary); }
.btn--ghost:hover, .btn--ghost:focus-visible, .btn--ghost.is-hover { color: var(--c-on-accent); border-color: var(--btn-bg-hover); }
.error-404 { padding: 110px 0 130px; text-align: center; }
.error-404 .t-eyebrow { margin-bottom: 20px; }
.error-404 p { max-width: 560px; margin: 26px auto 0; }
.error-404__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-top: 46px; }
@media (max-width: 767px) {
  .error-404 { padding: 60px 0 80px; text-align: left; }
  .error-404 p { margin-left: 0; }
  .error-404__actions { flex-direction: column; gap: 17px; }
  .error-404__actions .btn { width: 100%; }
}

/* ==========================================================================
   Corrections après comparaison au pixel avec le site d'origine (thème WordPress)
   ========================================================================== */
/* L'en-tête se superpose au haut de la première section (bandeau, diaporama),
   comme sur le site d'origine : la section commence à y = 0 sous la barre de 90 px. */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 50; }
/* Le bandeau passe sous l'en-tête : son contenu garde sa position d'origine. */
.hero { padding-top: 204px; }
@media (max-width: 767px) { .page-banner { padding-top: 153px; } }
/* Voile du bandeau d'origine : dégradé couleur principale → noir, opacité 0,4. */
.hero__overlay { background: linear-gradient(var(--c-primary) 0%, #000 100%); opacity: 0.4; }
@media (min-width: 1025px) { .hero { padding-top: 192px; } }
/* Marges latérales fluides du site d'origine (16,3 px à 390, 20,2 px à 768). */
@media (max-width: 1024px) {
  :root { --gutter: calc(12.31px + 1.0245vw); }
  .container { padding-inline: var(--gutter); }
  .cards-section > .container, .rentals > .container { padding-inline: calc(var(--gutter) + 1px); }
  .service-card { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
}
/* Cartes de conciergerie : rembourrage fluide et rangées de même hauteur, comme à l'origine. */
@media (max-width: 1024px) {
  .cards-grid--centered .service-card { padding-top: var(--gutter); padding-bottom: var(--gutter); }
}
@media (max-width: 767px) {
  .cards-grid--centered { grid-auto-rows: 1fr; }
}
/* Petits travaux et activités : même construction que l'original (rembourrage fluide, tarif en bas). */
@media (max-width: 1024px) {
  .cards-grid:not(.cards-grid--centered) .service-card { padding-top: var(--gutter) !important; padding-bottom: var(--gutter) !important; }
  .cards-grid:not(.cards-grid--centered) .service-card__title { margin-bottom: 10px; }
}
@media (max-width: 1024px) {
  #activites .service-card { padding-bottom: calc(var(--gutter) + 10px) !important; }
  .activities .service-card__price { padding-top: 30px; }
}
/* Cartes de location : bouton bordé (38 px) et rembourrage fluide, comme à l'origine. */
.rental-card .btn { border: 1px solid var(--c-primary); }
@media (max-width: 1024px) {
  .rental-card { padding: var(--gutter) var(--gutter) calc(var(--gutter) + 8px); }
  .rental-card .btn { margin-top: 40px; }
}
/* Espacements des sections à cartes : bas = haut, comme à l'origine (cartes désormais exactes). */
.cards-grid--centered { margin-top: 46px; }
@media (max-width: 1024px) {
  .cards-section, #petits-travaux, #conciergerie, #activites, .rentals { padding-bottom: 70px; }
  .rental-card .btn { margin-top: 39px; }
}
@media (max-width: 767px) {
  .cards-section, #petits-travaux, #conciergerie, #activites, .rentals { padding-bottom: 41px; }
  .cards-section .cards-grid:not(.cards-grid--centered) { margin-top: 46px; }
}
.cards-grid--centered .service-card { padding-bottom: calc(24px + 1px); }
@media (max-width: 1024px) { .cards-grid--centered .service-card { padding-bottom: calc(var(--gutter) + 1px); } }
@media (min-width: 1025px) { .rental-card .btn { margin-top: 40px; } }
/* À propos, tablette : titre sur toute la largeur, atouts en colonnes de 249 px espacées de 50 px. */
@media (min-width: 768px) and (max-width: 1024px) {
  .about__text .t-h2 { max-width: none; }
  .features { column-gap: 50px; }
}
/* Conciergerie : icône, texte et tarif répartis comme à l'origine (écart de base 20 px, espace libre autour de chaque bloc). */
.cards-grid--centered .service-card { gap: 20px; justify-content: space-around; }
.cards-grid--centered .service-card__content { display: contents; }
.cards-grid--centered .service-card__content .service-card__body { flex: 0 0 auto; display: block; }
.cards-grid--centered .service-card__title { margin: 0 0 10px; }
.cards-grid--centered .service-card__content .service-card__price { padding-top: 0; margin-top: 0; }
.cards-grid--centered .service-card { padding-bottom: 24px; }
@media (max-width: 1024px) { .cards-grid--centered .service-card { padding-bottom: var(--gutter); } }
.service-card__icon { margin-left: 0; }
@media (min-width: 1025px) {
  .activities .service-card__price { padding-top: 32px; }
  #activites .service-card { padding-bottom: 33px !important; }
}
/* « Des services sur place » : paragraphe d'introduction (17 px, graisse 300, interligne 1,7). */
.onsite__head p { font-size: 17px; font-weight: 300; line-height: 1.7; max-width: 974px; margin: 0 auto 26px; }
.onsite__head { padding-bottom: 103px; }
@media (min-width: 768px) and (max-width: 1024px) {
  .onsite__head { padding-left: 0; padding-right: 0; padding-bottom: 2px; }
  .onsite__head .t-h2 { max-width: 619px; margin-left: auto; margin-right: auto; }
  .onsite__head p { max-width: 509px; }
}
@media (max-width: 767px) {
  .onsite__head { padding-left: var(--gutter); padding-right: var(--gutter); padding-bottom: 18px; }
}
@media (min-width: 768px) and (max-width: 1024px) { .onsite__head { padding-bottom: 5px; } }
@media (max-width: 767px) {
  .grocery { padding-top: 41px; }
  .grocery__text { padding-top: 29px; }
}
/* Pages légales : titre décalé de 10 px et marges de 41 px (mobile, tablette), comme à l'origine. */
.legal--mentions h1 { padding-left: 10px; }
@media (max-width: 1024px) { .legal--mentions .container { padding-inline: 41px; } }
/* Politique de confidentialité : 26 px entre un paragraphe et le titre suivant, et marge finale. */
.legal--privacy p + h2 { margin-top: 26px; }
.legal--privacy .legal__content > p:last-child { margin-bottom: 26px; }
.legal--privacy { padding-bottom: 51px; }
@media (max-width: 767px) { .legal--privacy { padding-bottom: 51px; } }
/* Pied de page : coordonnées 2 px plus haut ; en mobile, marges et liens légaux comme à l'origine. */
.footer-block__title { margin-bottom: 15px; }
@media (max-width: 767px) {
  .footer-top.container { padding-inline: 20px; }
  .footer-legal ul { padding-inline: 0 12px; }
  .footer-rule { margin-top: 46px; }
}
.footer-copy { padding-top: 37px; }
@media (max-width: 767px) { .footer-rule { margin-top: 48px; } .footer-copy { padding-top: 31px; } }
@media (max-width: 1024px) { .legal--mentions { padding-bottom: 82px; } }
@media (max-width: 767px) { .legal--mentions { padding-bottom: 75px; } .page-banner { padding-top: 151px; } }
@media (max-width: 1024px) { .legal--privacy .container { padding-inline: 51px; } }