/* ---------------------------------------------------------------------------
   Mate aux jardins — site vitrine

   Direction « fiche artisan » : le téléphone et les garanties passent avant
   tout le reste, le contenu est dense et factuel. La photographie, quand elle
   existe, sert de fond au hero.
   Pas de grille de cartes bordées : les prestations sont des lignes, les
   réalisations des photographies, les actualités une liste.
   --------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
    margin: 0 0 var(--space-4);
    text-wrap: balance;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); letter-spacing: 0; }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: -9999px;
    padding: var(--space-2) var(--space-4);
    background: var(--color-ink);
    color: var(--color-ink-contrast);
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); z-index: 20; }

/* ===========================================================================
   En-tête
   =========================================================================== */

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--space-4);
}

.site-logo { display: inline-flex; align-items: center; text-decoration: none; }
.site-logo img { height: 4rem; width: auto; }
.site-logo__text { font-size: var(--text-lg); font-weight: 700; letter-spacing: var(--tracking-display); }

.site-nav ul {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav a {
    display: inline-block;
    padding-block: var(--space-2);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color var(--transition);
}
.site-nav a:hover { border-bottom-color: var(--color-accent); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--color-text); }

.site-nav__phone {
    font-weight: 600;
    white-space: nowrap;
}

.nav-toggle { display: none; }

@media (max-width: 52rem) {
    .site-header { flex-wrap: wrap; }

    .nav-toggle {
        display: grid;
        place-items: center;
        width: 2.75rem; height: 2.75rem;
        background: none;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        cursor: pointer;
    }
    .nav-toggle__bar,
    .nav-toggle__bar::before,
    .nav-toggle__bar::after {
        display: block;
        width: 20px; height: 2px;
        background: currentColor;
        content: "";
    }
    .nav-toggle__bar::before { transform: translateY(-6px); }
    .nav-toggle__bar::after { transform: translateY(4px); }

    .site-nav { display: none; flex-basis: 100%; }
    .site-nav.is-open { display: block; }
    .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
    .site-nav li { border-top: 1px solid var(--color-border); }
    .site-nav a { padding-block: var(--space-3); border-bottom: none; }
}

/* ===========================================================================
   Hero — direction « fiche artisan »

   Sans photographie, c'est le feuillage dessiné (bin/make-foliage.php) qui
   donne sa matière au bandeau. Le téléphone reste l'élément principal :
   la carte blanche est le seul élément de la page à porter une élévation.
   =========================================================================== */

.hero-c {
    position: relative;
    overflow: hidden;
    background: var(--color-ink) center / cover no-repeat;
    color: var(--color-ink-contrast);
    isolation: isolate;
}

/* Voile : utile seulement quand une photo a été chargée. */
.hero-c--photo::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgb(24 41 29 / 0.82);
    content: "";
}

.hero-c__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr minmax(0, 21rem);
    gap: var(--space-12);
    align-items: center;
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--space-16) var(--space-4) calc(var(--space-24) + var(--space-8));
}

.hero-c__place {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding-left: var(--space-4);
    border-left: 3px solid var(--color-accent);
    color: rgb(255 255 255 / 0.72);
    font-size: var(--text-sm);
}

.hero-c__title {
    margin: 0 0 var(--space-4);
    max-width: 17ch;
    font-size: clamp(2.25rem, 5.2vw, 3.6rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
}

.hero-c__lead {
    margin: 0;
    max-width: 44ch;
    color: rgb(255 255 255 / 0.82);
    font-size: var(--text-lg);
}

.hero-c__call {
    padding: var(--space-6);
    background: var(--color-bg);
    color: var(--color-text);
    border-top: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
    box-shadow: 0 18px 40px rgb(0 0 0 / 0.22);
    text-align: center;
}
.hero-c__callLabel {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-wrap: balance;
}
.hero-c__callNote {
    margin: var(--space-3) 0 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.hero-c__phone {
    display: block;
    margin-bottom: var(--space-4);
    font-size: clamp(1.7rem, 3.6vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    text-decoration: none;
    white-space: nowrap;
}
.hero-c__phone:hover { color: var(--color-success); }

@media (max-width: 52rem) {
    .hero-c__inner { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* --- Feuillage décoratif ------------------------------------------------- */

/* Image de fond plutôt qu'inline : le SVG est mis en cache une fois au lieu
   de repartir dans le HTML de chaque page (voir bin/make-foliage.php). */
.hero-c::before,
.site-footer::before {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 1;
    background: url("../img/foliage.svg") center bottom / cover no-repeat;
    pointer-events: none;
    content: "";
}

.hero-c::before { bottom: -1px; height: 13.5rem; }
.hero-c--photo::before { opacity: 0.55; }

.site-footer::before {
    top: -1px;
    height: 7rem;
    opacity: 0.55;
    transform: scaleY(-1);
}

/* --- Bandeau de garanties ------------------------------------------------ */

.fact-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: var(--space-8) var(--space-6);
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--space-12) var(--space-4);
    list-style: none;
    border-bottom: 1px solid var(--color-border);
}

.fact {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--space-4);
    align-items: center;
}
.fact .service-icon { grid-row: 1 / 3; width: 2.9rem; height: 2.9rem; }
.fact__value {
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.fact__label {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.4;
}
.fact:first-child .fact__value { color: var(--color-success); font-size: var(--text-xl); }

/* ===========================================================================
   Sections
   =========================================================================== */

.section {
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--space-16) var(--space-4);
}

.section--narrow > * { max-width: var(--container-narrow); }
.home-intro > * { max-width: none; }

/* Chapô de l'accueil : deux colonnes de texte plutôt qu'une demi-page vide.
   Chaque paragraphe reste entier dans sa colonne. */
.home-intro { padding-bottom: var(--space-8); }
.home-intro .prose {
    max-width: none;
    columns: 2;
    column-gap: var(--space-16);
    font-size: var(--text-lg);
}
.home-intro .prose p { break-inside: avoid; margin: 0; }
.home-intro .prose p + p { margin-top: var(--space-4); }

@media (max-width: 52rem) {
    .home-intro .prose { columns: 1; font-size: var(--text-base); }
}

/* Deux sections blanches qui se suivent ne doivent pas cumuler leurs marges. */
.section + .section { padding-top: var(--space-8); }

.band {
    background: var(--color-surface);
}
.band > .band__inner {
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--space-16) var(--space-4);
}

.section__title { margin-bottom: var(--space-8); }

/* Un titre de section et sa mise au point, côte à côte : la largeur est
   occupée, et la précision se lit avant la liste plutôt qu'à chaque ligne. */
.section__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    gap: var(--space-8);
    align-items: end;
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-4);
    border-bottom: 2px solid var(--color-text);
}
.section__note { margin: 0; color: var(--color-text-muted); }
.section__note a { font-weight: 600; }

@media (max-width: 52rem) {
    .section__head { grid-template-columns: 1fr; gap: var(--space-3); align-items: start; }
}
.section__title--tight { margin-bottom: 0; }
.section__more { margin-top: var(--space-8); }
.section__more a { font-weight: 600; }

.breadcrumb {
    max-width: var(--container);
    margin: var(--space-6) auto 0;
    padding-inline: var(--space-4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.breadcrumb a { color: inherit; }
.breadcrumb a::after { content: "/"; margin-left: var(--space-3); color: var(--color-border); }
.breadcrumb span { color: var(--color-text); }

.page-header { margin-bottom: var(--space-12); }
.page-header__lead {
    max-width: 58ch;
    font-size: var(--text-lg);
    color: var(--color-text-muted);
}
.page-header__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin: 0 0 var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.page-hero {
    width: 100%;
    max-height: 32rem;
    object-fit: cover;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-12);
}

.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-12); font-size: var(--text-xl); }
.prose ul, .prose ol { padding-left: var(--space-6); }
.prose li + li { margin-top: var(--space-2); }

/* ===========================================================================
   Prestations — des lignes, pas des cartes

   Deux colonnes : l'intitulé tient la colonne de gauche, la description
   occupe la droite. La ligne traverse toute la largeur au lieu de laisser
   la moitié de la page vide.
   =========================================================================== */

.service-list { border-top: 1px solid var(--color-border); }

.service-row {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-8);
    padding-block: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}
.service-row:has(.service-row__media) {
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr) minmax(0, 13rem);
}

.service-row__title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    font-size: var(--text-lg);
    letter-spacing: var(--tracking-display);
}
.service-row__title a {
    text-decoration: none;
    background-image: linear-gradient(var(--color-accent), var(--color-accent));
    background-size: 0% 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--transition);
}
.service-row:hover .service-row__title a { background-size: 100% 2px; }

/* Pictogramme au trait : il tient la place de la photo tant qu'il n'y en a pas. */
.service-icon {
    flex: none;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0.45rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-success);
    background: var(--color-accent-soft);
    transition: background-color var(--transition), border-color var(--transition);
}
.service-row:hover .service-icon {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-contrast);
}

.service-row__body { display: grid; gap: var(--space-2); }
.service-row__text { margin: 0; color: var(--color-text-muted); max-width: 62ch; }
.service-row__price { margin: 0; font-weight: 600; }

/* On signale l'exception, pas la règle. */
.service-row__note {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-style: italic;
}

.service-row__media {
    aspect-ratio: 3 / 2;
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
}

@media (max-width: 52rem) {
    .service-row,
    .service-row:has(.service-row__media) {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    .service-row__media { order: -1; }
}

/* ===========================================================================
   Réalisations — la photo est le composant
   =========================================================================== */

.work-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    gap: var(--space-8) var(--space-6);
}

.work { margin: 0; }
.work a { text-decoration: none; display: block; }

.work__image {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.work__title {
    margin: var(--space-3) 0 var(--space-1);
    font-size: var(--text-lg);
    font-weight: 600;
    letter-spacing: 0;
}
.work a:hover .work__title { text-decoration: underline; text-underline-offset: 3px; }

.work__meta { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }

/* Galerie d'une réalisation */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: var(--space-4);
    margin-top: var(--space-12);
}
.gallery__item { margin: 0; }
.gallery__item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-md);
}
.gallery__item figcaption {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ===========================================================================
   Actualités — une liste, pas une grille
   =========================================================================== */

.news { display: grid; }

.news__item {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: var(--space-6);
    padding-block: var(--space-6);
    border-top: 1px solid var(--color-border);
}
.news__item:last-child { border-bottom: 1px solid var(--color-border); }

.news__date { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }
.news__title { margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: 600; letter-spacing: 0; }
.news__title a { text-decoration: none; }
.news__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.news__text { margin: 0; color: var(--color-text-muted); max-width: 64ch; }

@media (max-width: 40rem) {
    .news__item { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* ===========================================================================
   Crédit d'impôt — l'argument commercial le plus fort du site
   =========================================================================== */

.band--accent { background: var(--color-accent-soft); }

.tax-banner {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-8);
}

.tax-banner__figure {
    margin: 0;
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    line-height: 0.85;
    letter-spacing: -0.04em;
    color: var(--color-success);
}

.tax-banner__title { margin: 0 0 var(--space-2); font-size: var(--text-xl); }
.tax-banner__text { margin: 0 0 var(--space-3); max-width: 52ch; }
.tax-banner a { font-weight: 600; }

@media (max-width: 40rem) {
    .tax-banner { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* Encart sur la fiche d'une prestation éligible */
.tax-note {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-6);
    margin-bottom: var(--space-12);
    padding: var(--space-6);
    background: var(--color-accent-soft);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-sm);
}
.tax-note p { margin: 0; }
.tax-note__figure {
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--color-success);
}

/* Pastille discrète dans la liste des prestations */
.tax-badge {
    display: inline-block;
    padding: 0.1rem var(--space-3);
    border-radius: 999px;
    background: var(--color-accent-soft);
    color: var(--color-success);
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
}

/* ===========================================================================
   Zone d'intervention
   =========================================================================== */

.zone {
    display: grid;
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
    gap: var(--space-16);
    align-items: start;
}
.zone__intro { display: grid; gap: var(--space-4); justify-items: start; }
.zone__radius {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: var(--tracking-display);
    line-height: 1.1;
}
.zone__lead { margin: 0; color: var(--color-text-muted); }

/* Les communes remplissent la droite en colonnes, comme un index. */
.zone__towns {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 3;
    column-gap: var(--space-8);
}
.zone__towns li {
    break-inside: avoid;
    padding-block: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

@media (max-width: 64rem) {
    .zone { grid-template-columns: 1fr; gap: var(--space-8); }
    .zone__towns { columns: 2; }
}
@media (max-width: 40rem) {
    .zone__towns { columns: 1; }
}

/* ===========================================================================
   Boutons
   =========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: var(--space-3) var(--space-6);
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.btn--primary {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-contrast);
}
.btn--primary:hover { background: #8cc75a; border-color: #8cc75a; }

.btn--ghost {
    border-color: var(--color-border);
    background: transparent;
    color: var(--color-text);
}
.btn--ghost:hover { border-color: var(--color-text); }

/* Sur le voile sombre du hero */
.btn--onink {
    border-color: rgb(255 255 255 / 0.6);
    background: transparent;
    color: var(--color-ink-contrast);
}
.btn--onink:hover { background: rgb(255 255 255 / 0.12); border-color: #fff; }

/* ===========================================================================
   Formulaires
   =========================================================================== */

.form { display: grid; gap: var(--space-4); max-width: 36rem; margin-top: var(--space-8); }

.field { display: grid; gap: var(--space-2); }
.field label { font-weight: 600; }

.field input,
.field textarea,
.field select {
    width: 100%;
    min-height: 3rem;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: inherit;
    font: inherit;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--color-text); }

.field--invalid input,
.field--invalid textarea { border-color: var(--color-danger); }

.field__error { margin: 0; color: var(--color-danger); font-size: var(--text-sm); }
.field__hint { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }

.form__trap { position: absolute; left: -9999px; }

/* Le bouton garde sa largeur propre plutôt que de s'étirer sur la grille. */
.form > .btn { justify-self: start; }

/* ===========================================================================
   Contact
   =========================================================================== */

.page-header--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    gap: var(--space-12);
    align-items: start;
}
@media (max-width: 52rem) {
    .page-header--split { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* Carte d'appel, même traitement que dans le hero : le seul relief de la page. */
.call-card {
    padding: var(--space-6);
    background: var(--color-ink);
    color: var(--color-ink-contrast);
    border-top: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
}
.call-card p { margin: 0; }
.call-card__label { color: rgb(255 255 255 / 0.6); font-size: var(--text-sm); }
.call-card__phone {
    display: block;
    margin-block: var(--space-2);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
    white-space: nowrap;
}
.call-card__alt a { color: rgb(255 255 255 / 0.85); }
.call-card__zone {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid rgb(255 255 255 / 0.18);
    color: rgb(255 255 255 / 0.7);
    font-size: var(--text-sm);
}

/* Les trois étapes : c'est une vraie séquence, la numérotation a un sens. */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--space-8);
    margin: 0 0 var(--space-16);
    padding: var(--space-8) 0 0;
    list-style: none;
    border-top: 2px solid var(--color-text);
}
.step__number {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-bottom: var(--space-3);
    border-radius: 999px;
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    font-weight: 700;
}
.step__title { margin: 0 0 var(--space-2); font-size: var(--text-lg); letter-spacing: 0; }
.step__text { margin: 0; color: var(--color-text-muted); }

.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    gap: var(--space-12);
    align-items: start;
}
@media (max-width: 64rem) {
    .contact-layout { grid-template-columns: 1fr; gap: var(--space-8); }
}

.form-panel {
    padding: var(--space-8);
    background: var(--color-surface);
    border-radius: var(--radius-md);
}
.form-panel__title { margin: 0 0 var(--space-4); font-size: var(--text-xl); }
.form-panel .form { max-width: none; margin-top: var(--space-6); }
.form-panel .field input,
.form-panel .field textarea { background: var(--color-bg); }

/* Deux champs courts par ligne plutôt qu'une longue colonne. */
.form__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    align-items: start;
    gap: var(--space-4);
}

.contact-aside {
    display: grid;
    justify-items: start;
    gap: var(--space-3);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
}
.contact-aside h2 { margin: 0; font-size: var(--text-lg); }
.contact-aside p { margin: 0; color: var(--color-text-muted); }
.contact-aside a { font-weight: 600; color: var(--color-text); }
.contact-aside .service-icon { width: 2.9rem; height: 2.9rem; }

/* ===========================================================================
   Divers
   =========================================================================== */

.flash-stack {
    max-width: var(--container);
    margin: var(--space-6) auto 0;
    padding-inline: var(--space-4);
    display: grid;
    gap: var(--space-2);
}
.flash {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-left: 4px solid var(--color-border);
    background: var(--color-surface);
}
.flash--success { border-left-color: var(--color-success); }
.flash--error { border-left-color: var(--color-danger); background: #fbeceb; }

.empty { color: var(--color-text-muted); }

/* Une section vide est une invitation, pas un trou. */
.empty-state {
    display: grid;
    justify-items: start;
    gap: var(--space-4);
    max-width: 44ch;
    padding: var(--space-8);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.empty-state svg { width: 2.5rem; height: 2.5rem; color: var(--color-success); }
.empty-state p { margin: 0; color: var(--color-text-muted); }
.cta-inline { margin-top: var(--space-12); }

.link-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.link-list a { font-weight: 600; }

.pagination { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-12); }
.pagination a {
    min-width: 3rem; min-height: 3rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
}
.pagination a[aria-current="page"] {
    background: var(--color-text);
    border-color: var(--color-text);
    color: var(--color-ink-contrast);
}

.error-page__code { margin: 0; font-size: var(--text-2xl); color: var(--color-text-muted); }

/* ===========================================================================
   Pied de page

   Le feuillage du hero revient ici en haut de bandeau : la page s'ouvre et se
   ferme sur le même motif. Quatre colonnes, libellés discrets, valeurs lisibles.
   =========================================================================== */

.site-footer {
    position: relative;
    overflow: hidden;
    /* Pas de marge haute : le bandeau sombre fait lui-même la séparation,
       et son feuillage occupe déjà le haut. */
    padding: var(--space-24) var(--space-4) var(--space-8);
    background: var(--color-ink);
    color: var(--color-ink-contrast);
}
.site-footer a { color: inherit; }

.site-footer__inner {
    position: relative;
    z-index: 2;
    max-width: var(--container);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
}
.site-footer p { margin: 0 0 var(--space-2); }

.site-footer__name {
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: var(--tracking-display);
}
.site-footer__baseline { color: rgb(255 255 255 / 0.7); max-width: 24ch; }

.site-footer__label {
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid rgb(255 255 255 / 0.18);
    color: rgb(255 255 255 / 0.55);
    font-size: var(--text-sm);
}

.site-footer__phone a {
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
    white-space: nowrap;
}
.site-footer__phone a:hover { color: var(--color-accent); }

.site-footer__col p:not(.site-footer__label) { color: rgb(255 255 255 / 0.78); }
.site-footer__col a:hover { color: var(--color-accent); }

.site-footer__nav { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.site-footer__nav a { text-decoration: none; color: rgb(255 255 255 / 0.78); }
.site-footer__nav a:hover { color: var(--color-accent); }

.site-footer__social { display: flex; gap: var(--space-4); margin-top: var(--space-4); }

.site-footer__legal {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    margin: var(--space-8) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid rgb(255 255 255 / 0.18);
    color: rgb(255 255 255 / 0.55);
    font-size: var(--text-sm);
}

@media (max-width: 64rem) {
    .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
    .site-footer__inner { grid-template-columns: 1fr; }
}