/* =========================================================================
   Arth'Paysage — Feuille de style personnalisée
   -------------------------------------------------------------------------
   Polish visuel (BATCH 5). Styles organisés par sections.
   Les variables de couleurs / polices / espacements proviennent de
   style.css (:root, --arth-*) et de theme.json (--wp--preset--*).

   Sommaire :
     1.  RESET + GLOBAL
     2.  HEADER (sticky, logo, navigation)
     3.  HERO
     4.  BANDEAU AVIS
     5.  CARROUSEL RÉALISATIONS
     6.  QUI SOMMES-NOUS (stats)
     7.  GRILLE SERVICES
     8.  BANDEAU CRÉDIT D'IMPÔT
     9.  FORMULAIRE DE CONTACT
     10. RÉALISATION (single) + GALERIE
     11. PIED DE PAGE
     12. RESPONSIVE
   ========================================================================= */


/* =========================================================================
   1. RESET + GLOBAL
   ========================================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    line-height: 1.6;
    color: var(--wp--preset--color--gris-texte);
    /* Fond de page neutre doux (ni blanc cru, ni trop vert) : sert de toile de
       fond aux sections « panneaux » blancs qui flottent dessus (voir BATCH 9.4). */
    background-color: #ebeee6;
    font-family: var(--wp--preset--font-family--inter);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Transition douce sur tous les liens. */
a {
    color: var(--wp--preset--color--vert-700);
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover,
a:focus {
    color: var(--wp--preset--color--vert-900);
}

/* Cible de focus accessible (WCAG AA). */
:focus-visible {
    outline: 2px solid var(--wp--preset--color--vert-400);
    outline-offset: 2px;
}

/* Titres : Playfair Display, vert profond, échelle progressive. */
h1,
h2,
h3,
h4 {
    font-family: var(--wp--preset--font-family--playfair-display);
    color: var(--wp--preset--color--vert-900);
    line-height: 1.2;
}

/* Titre de section standard (H2). */
.wp-block-heading.has-playfair-display-font-family {
    font-family: var(--wp--preset--font-family--playfair-display);
}

h2.wp-block-heading {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    margin-bottom: 0.5em;
}

/* Conteneur centré (largeur de contenu du thème). */
.arth-container,
.wp-block-group.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: 1200px;
}

/* Rythme vertical : marge entre sections de premier niveau. */
main > .wp-block-group,
main > .wp-block-cover,
main > .wp-block-columns {
    padding-block: clamp(48px, 7vw, 80px);
}


/* =========================================================================
   2. HEADER (sticky, logo, navigation)
   ========================================================================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
    transition: padding 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

/* État réduit appliqué par main.js au défilement. */
.site-header.is-scrolled {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.10);
}

/* Logo = emblème (image) + nom « Arth'Paysage ». Disposition en ligne.
   Sélecteur renforcé (.arth-logo.wp-block-group) pour primer sur le gap de
   mise en page flex généré par Gutenberg. */
.site-header .arth-logo.wp-block-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.arth-logo__mark {
    margin: 0;
    line-height: 0;
}

.arth-logo__mark img,
.arth-logo .custom-logo {
    display: block;
    height: 56px;
    width: auto;
}

.arth-logo__text {
    margin: 0;
    line-height: 1;
}

.arth-logo__text a {
    font-family: var(--wp--preset--font-family--playfair-display);
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    font-weight: 700;
    color: #129138; /* même vert que l'arbre du logo */
    letter-spacing: 0.2px;
}

.arth-logo__text a:hover {
    color: #0e7a2e;
}

/* Logo un peu plus compact sur mobile. */
@media (max-width: 782px) {
    .arth-logo__mark img,
    .arth-logo .custom-logo {
        height: 46px;
    }
    .arth-logo__text a {
        font-size: 1.2rem;
    }
}

/* Bloc de droite : navigation + téléphone + CTA. */
.main-navigation {
    gap: clamp(12px, 2vw, 28px);
    align-items: center;
}

/* Liens de navigation. */
.site-header .wp-block-navigation a {
    color: var(--wp--preset--color--vert-900);
    font-weight: 500;
}

.site-header .wp-block-navigation a:hover {
    color: var(--wp--preset--color--vert-700);
}

/* Téléphone dans l'en-tête. */
.arth-header-tel {
    margin: 0;
    font-weight: 600;
    white-space: nowrap;
}

.arth-header-tel a {
    color: var(--wp--preset--color--vert-700);
}


/* =========================================================================
   3. HERO
   ========================================================================= */
.arth-hero {
    /* Repli CSS : si le bloc Cover ne charge pas son image, le fond reste
       une photo (puis le vert profond en dernier recours). */
    background-color: var(--wp--preset--color--vert-950);
    background-image: url("https://images.unsplash.com/photo-1500382017468-9049fed747ef?auto=format&fit=crop&w=1920&q=80");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* L'image de fond du bloc Cover doit bien couvrir tout le conteneur. */
.arth-hero .wp-block-cover__image-background {
    object-fit: cover;
}

/* Badge crédit d'impôt. */
.arth-hero-badge {
    display: inline-block;
    margin: 0 auto 1rem;
    padding: 8px 18px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* Titre hero. */
.arth-hero h1 {
    margin-bottom: 0.4em;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.arth-hero .has-large-font-size {
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.30);
}

/* Boutons du hero : espacement + transitions. */
.arth-hero .wp-block-button__link {
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.arth-hero .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* Bouton secondaire (contour) lisible sur l'image. */
.arth-hero .is-style-outline .wp-block-button__link {
    border: 2px solid var(--wp--preset--color--blanc);
}

.arth-hero .is-style-outline .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--blanc);
    color: var(--wp--preset--color--vert-900);
}


/* =========================================================================
   4. BANDEAU AVIS GOOGLE (dynamique — Places API)
   ========================================================================= */
.arth-avis__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem);
}

/* Colonne « note globale ». */
.arth-avis__score {
    flex: 1 1 200px;
    max-width: 280px;
    text-align: center;
}

.arth-avis__brand {
    margin: 0;
    font-weight: 600;
    color: var(--wp--preset--color--gris-texte, #2C2C2A);
}

.arth-avis__rating {
    margin: 4px 0 0;
    font-family: var(--wp--preset--font-family--playfair-display, "Playfair Display", serif);
    font-size: clamp(2.4rem, 6vw, 3.4rem);
    line-height: 1;
    color: var(--wp--preset--color--vert-700, #27500A);
}

.arth-avis__rating span {
    font-size: 0.4em;
    color: var(--wp--preset--color--gris-muted, #5F5E5A);
}

.arth-avis__stars {
    margin: 6px 0 0;
    font-size: 1.35rem;
    letter-spacing: 2px;
    color: #F5A623; /* Or plus contrasté que --or pour les étoiles. */
}

.arth-avis__count {
    margin: 4px 0 12px;
    font-size: 0.9rem;
    color: var(--wp--preset--color--gris-muted, #5F5E5A);
}

.arth-avis__link {
    display: inline-block;
    font-weight: 600;
    color: var(--wp--preset--color--vert-700, #27500A);
}

/* Colonne « cartes d'avis ». */
.arth-avis__cards {
    flex: 2 1 380px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.arth-avis__card {
    margin: 0;
    padding: var(--wp--preset--spacing--50, 24px);
    background: var(--wp--preset--color--blanc, #fff);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.arth-avis__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
}

.arth-avis__card-stars {
    margin: 0 0 10px;
    color: #F5A623;
    letter-spacing: 1px;
}

.arth-avis__card-text {
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    font-style: normal;
    color: var(--wp--preset--color--gris-texte, #2C2C2A);
    /* Limite l'avis à quelques lignes pour garder des cartes homogènes. */
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.arth-avis__card-author {
    font-size: 0.88rem;
    color: var(--wp--preset--color--gris-muted, #5F5E5A);
}

.arth-avis__card-time {
    margin-left: 6px;
}

/* Repli neutre (API non configurée) : aucun faux avis. */
.arth-avis__fallback {
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
}

.arth-avis__fallback-title {
    margin: 6px 0 10px;
    font-family: var(--wp--preset--font-family--playfair-display, "Playfair Display", serif);
    color: var(--wp--preset--color--vert-900, #173404);
}

.arth-avis__fallback-text {
    color: var(--wp--preset--color--gris-muted, #5F5E5A);
}

.arth-avis__admin-note {
    margin-top: 18px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #FFF6E5;
    color: #7A5B12;
    font-size: 0.85rem;
}


/* =========================================================================
   5. CARROUSEL RÉALISATIONS
   ========================================================================= */
.arth-realisations {
    overflow: hidden;
}

/* Carrousel des réalisations liées, en tête des pages service. */
.arth-service-slider {
    max-width: 1100px;
    margin-inline: auto;
    margin-top: clamp(16px, 2.5vw, 28px);
}

/* Slider « une photo à la fois » (même format qu'une grande image). */
.arth-photos-swiper {
    position: relative;
    padding-bottom: 44px; /* bande pour les points de pagination */
}
.arth-photos-swiper .swiper-slide {
    height: auto;
}
.arth-photo-slide {
    position: relative;
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
}
.arth-photo-slide a {
    display: block;
}
.arth-photo-slide img {
    display: block;
    width: 100%;
    height: clamp(260px, 34vw, 440px);
    object-fit: cover;
}
/* Titre du chantier en surimpression, bas de l'image. */
.arth-photo-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 36px 18px 14px;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    text-align: left;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
}
/* Flèches sur les côtés de la photo. */
.arth-photos-swiper .swiper-prev,
.arth-photos-swiper .swiper-next {
    position: absolute;
    top: 46%;
    transform: translateY(-50%);
    z-index: 6;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--wp--preset--color--vert-700);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.arth-photos-swiper .swiper-prev { left: 14px; }
.arth-photos-swiper .swiper-next { right: 14px; }
.arth-photos-swiper .swiper-prev:hover,
.arth-photos-swiper .swiper-next:hover {
    background: #fff;
    color: var(--wp--preset--color--vert-900);
}
/* Points de pagination dans la bande sous la photo. */
.arth-photos-swiper .swiper-pagination {
    position: absolute;
    bottom: 12px;
    text-align: center;
}
.arth-photos-swiper .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    background: var(--wp--preset--color--vert-200);
    opacity: 1;
    transition: background 0.2s ease, transform 0.2s ease;
}
.arth-photos-swiper .swiper-pagination-bullet-active {
    background: var(--wp--preset--color--vert-700);
    transform: scale(1.15);
}

/* Le conteneur Swiper a besoin d'un peu d'espace pour la navigation. */
.realisations-swiper {
    position: relative;
    padding: 8px 0 48px;
}

/* Aligner les slides en hauteur automatique (évite le grand vide blanc). */
.realisations-swiper .swiper-wrapper {
    align-items: stretch;
}

.realisations-swiper .swiper-slide {
    height: auto;
}

/* Carte de réalisation. */
.arth-real-slide {
    margin: 0;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--wp--preset--color--vert-200);
    border-radius: 12px;
    background: var(--wp--preset--color--blanc);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.arth-real-slide:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.14);
}

.arth-real-slide a {
    display: block;
    position: relative;
    overflow: hidden;
}

.arth-real-slide img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.arth-real-slide:hover img {
    transform: scale(1.05);
}

/* Label catégorie : badge vert en overlay, coin bas-gauche de l'image. */
.arth-real-label {
    position: absolute;
    left: 12px;
    bottom: 12px;
    margin: 0;
    padding: 5px 14px;
    border-radius: 999px;
    background: var(--wp--preset--color--vert-700);
    color: var(--wp--preset--color--blanc);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* Pagination : points verts arrondis, remontés. */
.realisations-swiper .swiper-pagination {
    position: absolute;
    bottom: 12px;
}

.realisations-swiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: var(--wp--preset--color--vert-200);
    opacity: 1;
    transition: background 0.2s ease, transform 0.2s ease;
}

.realisations-swiper .swiper-pagination-bullet-active {
    background: var(--wp--preset--color--vert-700);
    transform: scale(1.2);
}

/* Boutons de navigation : cercles verts cohérents. */
.realisations-swiper .swiper-prev,
.realisations-swiper .swiper-next {
    position: absolute;
    top: calc(50% - 40px);
    z-index: 5;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--wp--preset--color--vert-700);
    color: var(--wp--preset--color--blanc);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    transition: background 0.2s ease, transform 0.2s ease;
}

.realisations-swiper .swiper-prev:hover,
.realisations-swiper .swiper-next:hover {
    background: var(--wp--preset--color--vert-900);
    transform: scale(1.08);
}

.realisations-swiper .swiper-prev {
    left: 4px;
}

.realisations-swiper .swiper-next {
    right: 4px;
}


/* =========================================================================
   6. QUI SOMMES-NOUS (stats)
   ========================================================================= */
.arth-about .wp-block-image img {
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

/* Chaque statistique présentée comme une carte crème. */
.arth-stats .wp-block-column {
    background: var(--wp--preset--color--vert-50);
    border-radius: 12px;
    padding: 28px 18px;
    text-align: center;
}

.arth-stats .wp-block-heading {
    margin: 0 0 4px;
    font-family: var(--wp--preset--font-family--playfair-display);
    color: var(--wp--preset--color--vert-700);
    font-size: clamp(2rem, 4vw, 2.8rem);
    line-height: 1;
}

.arth-stats p {
    margin: 0;
    color: var(--wp--preset--color--gris-muted);
    font-weight: 500;
}


/* =========================================================================
   7. GRILLE SERVICES
   ========================================================================= */
.arth-service-card {
    position: relative; /* ancre le lien étiré .arth-card-link */
    height: 100%;
    border: 1px solid var(--wp--preset--color--vert-100);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Toute la carte est cliquable : lien invisible qui recouvre la carte.
   Les éléments visibles (titre, texte, « En savoir plus ») restent sous le
   lien ; un clic n'importe où sur la carte suit donc le même lien. */
.arth-service-card .arth-card-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 12px;
    text-decoration: none;
}
.arth-service-card .arth-card-link:focus-visible {
    outline: 3px solid var(--wp--preset--color--vert-700);
    outline-offset: 3px;
}
/* Curseur « main » sur toute la carte pour signaler qu'elle est cliquable. */
.arth-service-card { cursor: pointer; }

.arth-service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.12);
    border-color: var(--wp--preset--color--vert-300);
}

/* Cercle d'icône : centré, vire au vert plus soutenu au survol. */
.arth-service-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}

.arth-service-icon__circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: var(--wp--preset--color--vert-50);
    color: var(--wp--preset--color--vert-700);
    transition: background 0.2s ease, transform 0.2s ease;
}

.arth-service-card:hover .arth-service-icon__circle {
    background: var(--wp--preset--color--vert-200);
    transform: scale(1.05);
}

/* Lien « En savoir plus → ». */
.arth-service-card a {
    font-weight: 600;
    color: var(--wp--preset--color--vert-700);
}

.arth-service-card a:hover {
    color: var(--wp--preset--color--vert-900);
}


/* =========================================================================
   8. BANDEAU CRÉDIT D'IMPÔT
   ========================================================================= */
.arth-credit-impot {
    /* Repli : fond vert profond garanti même si une classe manque. */
    background-color: var(--wp--preset--color--vert-900);
    color: var(--wp--preset--color--vert-50);
    text-align: center;
}

.arth-credit-impot h2 {
    color: var(--wp--preset--color--blanc);
}

/* Badges de certification : bien visibles sur fond sombre. */
.arth-certifs {
    margin-block: 28px;
}

.arth-certif-badge {
    display: inline-block;
    transition: transform 0.2s ease;
}

.arth-certif-badge:hover {
    transform: translateY(-2px);
}

.arth-credit-impot .wp-block-button__link {
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.arth-credit-impot .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}


/* =========================================================================
   9. FORMULAIRE DE CONTACT
   ========================================================================= */
.arth-form {
    margin-top: 24px;
}

.arth-form__row {
    margin-bottom: 18px;
}

.arth-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--wp--preset--color--vert-900);
}

.arth-form input,
.arth-form select,
.arth-form textarea {
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    color: var(--wp--preset--color--gris-texte);
    background: var(--wp--preset--color--blanc);
    border: 1px solid var(--wp--preset--color--vert-200);
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.arth-form input:focus,
.arth-form select:focus,
.arth-form textarea:focus {
    outline: none;
    border-color: var(--wp--preset--color--vert-700);
    box-shadow: 0 0 0 3px rgba(39, 80, 10, 0.15);
}

/* Ne PAS signaler les champs requis en rouge au chargement : on neutralise
   :invalid, et on n'affiche l'erreur qu'après interaction (:user-invalid). */
.arth-form input:invalid,
.arth-form select:invalid,
.arth-form textarea:invalid {
    box-shadow: none;
    border-color: var(--wp--preset--color--vert-200);
}

.arth-form input:user-invalid,
.arth-form select:user-invalid,
.arth-form textarea:user-invalid {
    border-color: #d63638;
    box-shadow: 0 0 0 3px rgba(214, 54, 56, 0.12);
}

.arth-form textarea {
    resize: vertical;
    min-height: 130px;
}

/* Bouton d'envoi : CTA vert arrondi, cohérent avec les autres. */
.arth-form__submit {
    display: inline-block;
    padding: 14px 30px;
    font: inherit;
    font-weight: 600;
    color: var(--wp--preset--color--blanc);
    background: var(--wp--preset--color--vert-700);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.arth-form__submit:hover {
    background: var(--wp--preset--color--vert-900);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.arth-form__note {
    margin-top: 8px;
    color: var(--wp--preset--color--gris-muted);
}

/* Honeypot anti-spam : retiré du flux visuel sans display:none (certains bots
   ignorent les champs display:none/hidden ; celui-ci reste "présent"). */
.arth-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Message de confirmation / d'erreur après soumission (PRG). */
.arth-form__feedback {
    margin: 0 0 20px;
    padding: 14px 18px;
    border-radius: 8px;
    border-left: 4px solid transparent;
    font-weight: 500;
}

.arth-form__feedback--ok {
    background: var(--wp--preset--color--vert-50, #EAF3DE);
    border-left-color: var(--wp--preset--color--vert-600, #3B6D11);
    color: var(--wp--preset--color--vert-800, #1F4406);
}

.arth-form__feedback--error {
    background: #FDECEA;
    border-left-color: #B3261E;
    color: #7A1B16;
}


/* =========================================================================
   10. RÉALISATION (single) + GALERIE
   ========================================================================= */
.arth-realisation-meta {
    gap: 32px;
    color: var(--wp--preset--color--gris-muted);
}

.arth-galerie img {
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: zoom-in;
}

.arth-galerie a:hover img {
    transform: scale(1.02);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}


/* =========================================================================
   11. PIED DE PAGE
   ========================================================================= */
.site-footer a {
    color: var(--wp--preset--color--vert-50);
}

.site-footer a:hover {
    color: var(--wp--preset--color--blanc);
    text-decoration: underline;
}

.site-footer .wp-block-heading {
    color: var(--wp--preset--color--blanc);
}

/* Réseaux sociaux du pied de page. */
.arth-social__link {
    transition: transform 0.2s ease;
}

.arth-social__link:hover {
    transform: translateY(-2px);
}


/* =========================================================================
   12. RESPONSIVE
   ========================================================================= */
@media (max-width: 781px) {
    /* En-tête : passer logo/menu en colonne lisible. */
    .site-header > .wp-block-group > .wp-block-group {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    /* Carrousel : masquer les flèches sur très petits écrans (swipe tactile). */
    .realisations-swiper .swiper-prev,
    .realisations-swiper .swiper-next {
        display: none;
    }

    /* Réduire la hauteur du hero sur mobile. */
    .arth-hero {
        min-height: 60vh !important;
    }

    /* Stats empilées : un peu d'air entre les cartes. */
    .arth-stats .wp-block-column {
        margin-bottom: 12px;
    }
}

@media (max-width: 600px) {
    .arth-real-slide img {
        height: 200px;
    }

    .arth-hero-badge {
        font-size: 0.8rem;
    }
}


/* =========================================================================
   13. ARCHIVE & SINGLE SERVICES (BATCH 6.2)
   ========================================================================= */

/* --- Cartes de la grille des services (archive-service) --- */
.arth-services-query .arth-service-card {
    background: var(--wp--preset--color--vert-50);
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.arth-services-query .arth-service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.arth-services-query .arth-service-card .wp-block-post-featured-image {
    margin: 0;
}

.arth-services-query .arth-service-card .wp-block-post-featured-image img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.arth-services-query .arth-service-card:hover .wp-block-post-featured-image img {
    transform: scale(1.05);
}

.arth-services-query .arth-service-card .wp-block-post-title {
    font-family: var(--wp--preset--font-family--playfair-display);
    font-size: 1.5rem;
    color: var(--wp--preset--color--vert-900);
    margin: 0 0 12px;
}

.arth-services-query .arth-service-card .wp-block-post-title a {
    color: inherit;
    text-decoration: none;
}

.arth-services-query .arth-service-card .wp-block-read-more {
    display: inline-block;
    margin-top: 8px;
    font-weight: 600;
    color: var(--wp--preset--color--vert-700);
    text-decoration: none;
}

.arth-services-query .arth-service-card .wp-block-read-more:hover {
    color: var(--wp--preset--color--vert-900);
}

/* --- Fil d'Ariane (single-service) --- */
.arth-breadcrumb a {
    color: var(--wp--preset--color--vert-50);
    text-decoration: none;
}

.arth-breadcrumb a:hover {
    color: var(--wp--preset--color--or);
    text-decoration: underline;
}

/* --- Grille de réalisations liées (shortcode [arth_realisations_by_service]) --- */
.arth-realisations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 28px;
}

.arth-realisation-card {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    min-height: 220px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.arth-realisation-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

.arth-realisation-card__img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

.arth-realisation-card:hover .arth-realisation-card__img {
    transform: scale(1.06);
}

.arth-realisation-card__title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 14px 16px;
    color: #fff;
    font-weight: 600;
    background: linear-gradient(to top, rgba(14, 33, 2, 0.85), rgba(14, 33, 2, 0));
}

/* --- Indicateur de champ requis : jamais rouge au chargement (BUG 6) --- */
.arth-form input:required:placeholder-shown,
.arth-form textarea:required:placeholder-shown {
    border-color: var(--wp--preset--color--vert-200);
    box-shadow: none;
}

.arth-form input:required:not(:placeholder-shown):invalid,
.arth-form textarea:required:not(:placeholder-shown):invalid {
    border-color: #d63638;
}

@media (max-width: 781px) {
    .arth-services-query .arth-service-card .wp-block-post-featured-image img {
        height: 200px;
    }
    .arth-realisations-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .arth-realisations-grid {
        grid-template-columns: 1fr;
    }
}


/* =========================================================================
   14. BLOC GALERIE — Style Arth'Paysage (réalisations multi-photos)
   ========================================================================= */

/* Galerie sur les pages single de réalisation / service. */
.single-realisation .wp-block-gallery,
.single-service .wp-block-gallery,
.single-realisation .wp-block-post-content .wp-block-gallery {
    margin: 40px 0;
    gap: 16px;
}

.single-realisation .wp-block-gallery .wp-block-image img,
.single-service .wp-block-gallery .wp-block-image img {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    object-fit: cover;
    width: 100%;
}

.single-realisation .wp-block-gallery .wp-block-image:hover img,
.single-service .wp-block-gallery .wp-block-image:hover img {
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* Légende sous chaque photo. */
.single-realisation .wp-block-gallery figcaption,
.single-service .wp-block-gallery figcaption {
    font-family: var(--wp--preset--font-family--inter, "Inter", sans-serif);
    font-size: 0.875rem;
    color: var(--wp--preset--color--gris-muted, #6b7280);
    font-style: italic;
    margin-top: 8px;
    text-align: center;
}

/* Curseur zoom (lightbox natif WP 6.4+). */
.single-realisation .wp-block-image a,
.single-service .wp-block-image a {
    cursor: zoom-in;
}

@media (max-width: 781px) {
    .single-realisation .wp-block-gallery,
    .single-service .wp-block-gallery {
        gap: 12px;
        margin: 24px 0;
    }

    .single-realisation .wp-block-gallery .wp-block-image img,
    .single-service .wp-block-gallery .wp-block-image img {
        border-radius: 6px;
    }
}

/* =====================================================================
   Slider « avant / après » (comparateur d'images) — [arth_avant_apres]
   ===================================================================== */
.arth-ba {
    --pos: 50%;
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 2rem auto;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14);
    touch-action: none;
    user-select: none;
    cursor: ew-resize;
    background: var(--wp--preset--color--vert-50, #f2f6ec);
}

/* Photo « après » = base (définit la hauteur du bloc). */
.arth-ba__apres {
    display: block;
    width: 100%;
    height: auto;
}

/* Photo « avant » = calque au-dessus, rognée jusqu'à la poignée. */
.arth-ba__avant {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.arth-ba img {
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

/* Étiquettes Avant / Après. */
.arth-ba__label {
    position: absolute;
    top: 12px;
    padding: 4px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #fff;
    background: rgba(20, 40, 10, 0.72);
    border-radius: 999px;
    pointer-events: none;
    z-index: 3;
}
.arth-ba__label--avant { left: 12px; }
.arth-ba__label--apres { right: 12px; }

/* Poignée verticale + bouton central. */
.arth-ba__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--pos);
    width: 3px;
    margin-left: -1.5px;
    background: #fff;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    z-index: 2;
}
.arth-ba__grip {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 42px;
    height: 42px;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
/* Deux chevrons ‹ › dans le bouton. */
.arth-ba__grip::before,
.arth-ba__grip::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 8px;
    height: 8px;
    border: 2px solid var(--wp--preset--color--vert-700, #27500a);
    border-width: 2px 2px 0 0;
}
.arth-ba__grip::before {
    left: 9px;
    transform: translateY(-50%) rotate(-135deg);
}
.arth-ba__grip::after {
    right: 9px;
    transform: translateY(-50%) rotate(45deg);
}

/* Input range natif : invisible mais focusable (clavier + lecteurs d'écran). */
.arth-ba__range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    z-index: 4;
}
.arth-ba__range:focus-visible + .arth-ba__handle .arth-ba__grip {
    outline: 3px solid var(--wp--preset--color--or, #fac775);
    outline-offset: 2px;
}

/* =====================================================================
   ACCUEIL « façon plaquette » — hero lockup, slider avant/après,
   bandeau téléphone, CTA final. (BATCH 9)
   ===================================================================== */

/* --- Hero lockup (bandeau partagé en haut de toutes les pages) ------- */
/* Bandeau « en-tête » Arth'Paysage, présent en haut de chaque page.
   - Fond vert un peu plus soutenu que vert-50 (« foncer légèrement »).
   - Compacté pour n'occuper qu'environ un tiers de la hauteur d'écran
     (emblème + mot-symbole + baseline plus petits, padding réduit). */
.arth-hero2 {
    text-align: center;
    background: #e4ecd4; /* vert tendre, un cran plus foncé que vert-50 */
    padding-block: clamp(18px, 3vw, 30px);
}
.arth-hero2__mark {
    margin: 0 auto 0 !important; /* emblème surélevé, léger espace sous l'emblème */
}
.arth-hero2__mark img {
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.14));
    width: 108px !important; /* emblème réduit (bandeau plus compact) */
    height: auto;
}

/* Mot-symbole : « ARTH' » en noir, « PAYSAGE » dans le vert du logo.
   Police Inter (auto-hébergée). Prime sur le Playfair global. */
.arth-wordmark {
    font-family: var(--wp--preset--font-family--inter), "Inter", Arial, sans-serif;
    font-weight: 700;
    letter-spacing: -1px;
    font-size: clamp(1.9rem, 5.6vw, 3.1rem); /* réduit pour un bandeau plus compact */
    line-height: 0.95;
    margin: 6px 0 0; /* petit espace entre l'emblème et le titre */
}
.arth-wordmark__a { color: #171717; }
.arth-wordmark__p { color: #129138; }

/* Baseline « Élagueur & Paysagiste… » avec filets latéraux. */
.arth-baseline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0.65em 0 0;
    color: var(--wp--preset--color--vert-700);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: clamp(0.72rem, 2vw, 1.05rem);
}
.arth-baseline::before,
.arth-baseline::after {
    content: "";
    height: 2px;
    width: min(84px, 11vw);
    background: var(--wp--preset--color--vert-700);
    opacity: 0.8;
}
.arth-hero2__intro {
    max-width: 580px;
    margin: 0.7em auto 0;
    font-size: 0.98rem;
    color: #3a4232;
}
@media (max-width: 480px) {
    .arth-baseline::before,
    .arth-baseline::after { width: 26px; }
}

/* Visuel « photo avant le texte » : bannière d'intro sur les pages prestations
   et image mise en avant en haut des pages service / réalisation. Cadrage
   homogène (ratio maîtrisé, coins arrondis). */
.arth-page-visuel img,
.wp-block-post-featured-image.alignwide img {
    width: 100%;
    max-height: 430px;
    object-fit: cover;
    border-radius: 14px;
}
@media (max-width: 782px) {
    .arth-page-visuel img,
    .wp-block-post-featured-image.alignwide img {
        max-height: 300px;
    }
}

/* --- Avant / après STATIQUE (photos côte à côte, sans slider) -------- */
.arth-bapairs {
    max-width: 980px;
    margin-inline: auto;
    margin-top: clamp(24px, 3vw, 40px);
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 4vw, 46px);
}
.arth-bapair {
    margin: 0;
}
/* Les deux photos côte à côte (avant | après). */
.arth-bapair__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.arth-bapair__ph {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
}
.arth-bapair__ph img {
    display: block;
    width: 100%;
    height: clamp(240px, 32vw, 360px); /* cadrage homogène avant/après, adaptatif */
    object-fit: cover;
    object-position: center;
}
/* Étiquette « Avant » / « Après » posée dans un coin de la photo. */
.arth-bapair__tag {
    position: absolute;
    top: 12px;
    z-index: 2;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}
.arth-bapair__tag--avant {
    left: 12px;
    background: rgba(38, 45, 32, 0.82);
}
.arth-bapair__tag--apres {
    right: 12px;
    background: var(--wp--preset--color--vert-700);
}
/* Légende du chantier sous la paire. */
.arth-bapair__cap {
    text-align: center;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.arth-bapair__cap strong {
    color: var(--wp--preset--color--vert-900);
    font-size: 1.05rem;
}
.arth-bapair__cap span {
    color: var(--wp--preset--color--gris-muted, #66735a);
    font-size: 0.9rem;
}
/* Sur mobile : une photo APRÈS l'autre (avant en haut, après en dessous). */
@media (max-width: 640px) {
    .arth-bapair__grid {
        grid-template-columns: 1fr;
    }
    .arth-bapair__ph img {
        height: 260px;
    }
}

/* --- Slider avant / après (Swiper) ---------------------------------- */
.arth-basec .arth-ba-swiper {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
    padding-bottom: 56px; /* bande de contrôles (flèches + puces) sous la légende */
}

/* Variante « paires côte à côte » (avant | après) dans le carrousel :
   conteneur transparent — seules les photos portent l'ombre — et on garde
   la bande de contrôles (flèches + points) sous la légende. */
.arth-basec .arth-bapair-swiper {
    max-width: 1000px;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    /* Un seul chantier visible à la fois : les slides voisines sont masquées
       (elles disparaissent / réapparaissent au changement de projet). On garde
       un petit débord vertical pour ne pas rogner l'ombre des photos. */
    overflow: hidden;
    padding: 6px 0 60px;
}
.arth-basec .arth-bapair-swiper .arth-bapair {
    margin: 0;
}

/* Le comparateur remplit la slide (on neutralise ses marges/arrondis propres). */
.arth-ba-swiper .arth-ba {
    max-width: none;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}
.arth-ba-cap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 14px;
    background: #fff;
}
.arth-ba-cap strong { color: var(--wp--preset--color--vert-900); }
.arth-ba-cap span { color: var(--wp--preset--color--gris-muted, #66735a); font-size: 0.85rem; }

/* Flèches — placées dans la bande de contrôles SOUS l'image (elles ne
   chevauchent donc plus la poignée du comparateur). */
.arth-ba-swiper .swiper-prev,
.arth-ba-swiper .swiper-next {
    position: absolute;
    top: auto;
    bottom: 10px;
    transform: none;
    z-index: 6;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: var(--wp--preset--color--vert-50);
    color: var(--wp--preset--color--vert-700);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.arth-ba-swiper .swiper-prev:hover,
.arth-ba-swiper .swiper-next:hover {
    background: var(--wp--preset--color--vert-200);
    color: var(--wp--preset--color--vert-900);
}
.arth-ba-swiper .swiper-prev { left: 14px; }
.arth-ba-swiper .swiper-next { right: 14px; }

/* Puces de pagination, centrées dans la même bande de contrôles. */
.arth-ba-swiper .swiper-pagination {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 23px;
    z-index: 6;
    display: flex;
    gap: 8px;
    justify-content: center;
}
.arth-ba-swiper .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    background: var(--wp--preset--color--vert-200, #cdd7bf);
    opacity: 1;
    border-radius: 50%;
    transition: width 0.25s ease, background 0.25s ease;
}
.arth-ba-swiper .swiper-pagination-bullet-active {
    background: var(--wp--preset--color--vert-700);
    width: 22px;
    border-radius: 6px;
}

/* --- Bandeau téléphone (pastille) ----------------------------------- */
.arth-telcta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    max-width: 820px;
    margin-inline: auto;
    padding: 18px 30px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--wp--preset--color--vert-900), var(--wp--preset--color--vert-700));
    box-shadow: 0 10px 26px rgba(39, 80, 10, 0.28);
}
.arth-telcta > * { margin: 0; }
.arth-telcta__q {
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.arth-telcta__num a {
    color: #fff;
    font-weight: 800;
    font-size: clamp(1.4rem, 4vw, 2rem);
    letter-spacing: 1px;
}
.arth-telcta__num a:hover { color: var(--wp--preset--color--or); }

/* --- CTA final ------------------------------------------------------ */
.arth-finalcta { text-align: center; }
.arth-finalcta .is-style-outline .wp-block-button__link {
    border: 2px solid var(--wp--preset--color--vert-700);
}
.arth-finalcta .is-style-outline .wp-block-button__link:hover {
    background: var(--wp--preset--color--vert-700);
    color: #fff;
}

/* =====================================================================
   POLISH DESIGN (BATCH 9.1) — signature or, nav, boutons, cartes.
   Or (#FAC775) réservé aux micro-accents. Tout local (RGPD).
   ===================================================================== */

/* Respiration verticale un peu plus généreuse entre sections. */
main > .wp-block-group,
main > .wp-block-cover,
main > .wp-block-columns {
    padding-block: clamp(56px, 8vw, 96px);
}

/* Filet « signature » or centré sous chaque titre de section (Playfair centré). */
h2.wp-block-heading.has-text-align-center.has-playfair-display-font-family {
    position: relative;
}
h2.wp-block-heading.has-text-align-center.has-playfair-display-font-family::after {
    content: "";
    display: block;
    width: 56px;
    height: 3px;
    border-radius: 3px;
    background: var(--wp--preset--color--or, #FAC775);
    margin: 16px auto 0;
}

/* Header translucide + léger flou, ancré au défilement. */
.site-header {
    background: rgba(255, 255, 255, 0.9) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #eef2e6;
}

/* Soulignement or animé sous les liens de navigation. */
.site-header .wp-block-navigation a {
    position: relative;
}
.site-header .wp-block-navigation a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    height: 2px;
    width: 0;
    background: var(--wp--preset--color--or, #FAC775);
    transition: width 0.22s ease;
}
.site-header .wp-block-navigation a:hover::after,
.site-header .wp-block-navigation a[aria-current]::after {
    width: 100%;
}

/* Boutons : relief léger au survol + focus or (accessibilité). */
.wp-block-button__link {
    transition: transform 0.18s ease, box-shadow 0.18s ease,
        background-color 0.18s ease, color 0.18s ease;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(18, 145, 56, 0.28);
}
.wp-block-button__link:focus-visible {
    outline: 2px solid var(--wp--preset--color--or, #FAC775);
    outline-offset: 2px;
}

/* Cartes prestations : ombre plus douce + le picto se remplit de vert au survol. */
.arth-service-card {
    box-shadow: 0 1px 2px rgba(37, 43, 32, 0.04), 0 4px 12px rgba(37, 43, 32, 0.06);
}
.arth-service-card:hover {
    box-shadow: 0 8px 22px rgba(37, 43, 32, 0.12);
}
.arth-service-card:hover .arth-service-icon__circle {
    background: #129138;
    color: #fff;
    transform: scale(1.05);
}

/* Bandeau téléphone : coins un peu plus généreux. */
.arth-telcta {
    border-radius: 22px;
}

/* =====================================================================
   BATCH 9.2 — Copie flyer : avant/après en paysage + gages de confiance.
   Canvas clair cohérent (les fonds vert-50 de section ont été retirés
   des patterns ; seule la section avis conserve une bande douce).
   ===================================================================== */

/* --- Slider avant/après : format paysage 16:10 (photos rectangulaires) --- */
.arth-basec .arth-ba {
    aspect-ratio: 16 / 10;
}
.arth-basec .arth-ba__apres {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Rangée de gages de confiance -------------------------------------- */
.arth-badges {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    border-top: 1px solid var(--wp--preset--color--vert-100, #e4ebd7);
    border-bottom: 1px solid var(--wp--preset--color--vert-100, #e4ebd7);
    padding: 26px 0;
}
.arth-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 0 6px;
    border-right: 1px solid var(--wp--preset--color--vert-100, #e4ebd7);
}
.arth-badge:last-child {
    border-right: none;
}
.arth-badge__ic {
    color: var(--wp--preset--color--vert-700);
    line-height: 0;
}
.arth-badge__t {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1.35;
    text-transform: uppercase;
    color: var(--wp--preset--color--gris-texte, #252b20);
}
.arth-badge__t small {
    display: block;
    font-weight: 500;
    color: var(--wp--preset--color--gris-muted, #66735a);
    text-transform: none;
    letter-spacing: 0;
}
.arth-badge__stars {
    color: var(--wp--preset--color--vert-700);
    letter-spacing: 1px;
}
@media (max-width: 820px) {
    .arth-badges {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px 8px;
    }
    .arth-badge:nth-child(3) {
        border-right: none;
    }
}
@media (max-width: 520px) {
    .arth-badges {
        grid-template-columns: repeat(2, 1fr);
    }
    .arth-badge:nth-child(2) {
        border-right: none;
    }
}

/* =====================================================================
   BATCH 9.3 — Contact en 2 colonnes (garanties à gauche, formulaire à droite).
   ===================================================================== */
.arth-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 5vw, 56px);
    align-items: start;
    text-align: left;
    margin-top: clamp(24px, 4vw, 40px);
}
.arth-contact-grid .arth-form-wrap {
    max-width: none;
    margin: 0;
}
@media (max-width: 820px) {
    .arth-contact-grid {
        grid-template-columns: 1fr;
    }
}

.arth-guarantees__title {
    margin: 0 0 10px;
    color: var(--wp--preset--color--vert-900);
    font-family: var(--wp--preset--font-family--playfair-display);
    font-size: 1.5rem;
}
.arth-guarantees__intro {
    margin: 0 0 6px;
}
.arth-guarantees__list {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
}
.arth-guarantees__list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 13px;
    color: var(--wp--preset--color--gris-texte, #252b20);
}
.arth-guarantees__list li::before {
    content: "✓";
    position: absolute;
    left: 4px;
    top: 0;
    color: var(--wp--preset--color--vert-700);
    font-weight: 700;
}

/* Photo « Qui sommes-nous » : un peu plus petite (proportions conservées). */
.arth-about .wp-block-image {
    max-width: 400px;
    margin-inline: auto;
}

/* En-tête : nom + baseline empilés à droite de l'emblème (toutes pages). */
.site-header .arth-logo__names.wp-block-group {
    display: flex;
    flex-direction: column;
    gap: 1px;
    align-items: flex-start;
    margin: 0;
}
.arth-logo__baseline {
    margin: 0;
    font-family: var(--wp--preset--font-family--inter);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--wp--preset--color--vert-700);
    line-height: 1.15;
    white-space: nowrap;
}
/* Baseline masquée sur petits écrans (évite l'encombrement de l'en-tête). */
@media (max-width: 640px) {
    .arth-logo__baseline {
        display: none;
    }
}

/* =====================================================================
   BATCH 9.4 — Sections en « panneaux » blancs flottants (relief / ombre).
   Le fond de page est neutre (body), chaque grande section devient une
   carte blanche arrondie avec ombre douce → effet 3D léger, moins plat.
   ===================================================================== */
.arth-about,
.arth-services,
.arth-badges-sec,
.arth-avis,
.arth-finalcta {
    background-color: #ffffff !important; /* prime sur les anciennes teintes vert-50 */
    max-width: 1160px;
    margin-inline: auto;
    margin-block: clamp(22px, 3.2vw, 38px);
    border-radius: 20px;
    box-shadow: 0 12px 34px rgba(37, 43, 32, 0.09), 0 2px 6px rgba(37, 43, 32, 0.05);
    padding: clamp(34px, 5vw, 60px) clamp(20px, 4vw, 52px);
}

/* Le slider avant/après est déjà une carte : on l'espace juste un peu. */
.arth-basec {
    margin-block: clamp(22px, 3.2vw, 38px);
}

/* Les cartes de prestations ressortent sur le panneau blanc : léger fond teinté. */
.arth-service-card {
    background-color: var(--wp--preset--color--vert-50) !important;
    border-color: var(--wp--preset--color--vert-100);
}

/* Petit relief au survol des panneaux de contenu (hors CTA/avis figés). */
.arth-about,
.arth-services {
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.arth-about:hover,
.arth-services:hover {
    box-shadow: 0 18px 44px rgba(37, 43, 32, 0.12), 0 3px 8px rgba(37, 43, 32, 0.06);
}

/* Pastille téléphone : un peu plus d'espace autour dans le nouveau rythme. */
.arth-telcta {
    margin-block: clamp(10px, 2vw, 20px);
}