/*
Theme Name: Vitrine Paysagiste
Template: horizon-base
Version: 1.0.0
Description: Démonstration MT Horizon nº1 — paysagiste indépendant (offres Suite et Gestion en version solo). Thème enfant de « Horizon Base ». Le parent fournit les fonctionnalités, le SEO et le design système, et reste mis à jour. Ne change JAMAIS la ligne « Template: horizon-base ».
Author: MT Horizon
Text Domain: artisan-vitrine
*/

/* Les styles de la page d'accueil vivent dans front-page.php.
   Ce fichier ne sert qu'aux surcharges globales du thème enfant. */

/* ══════════════════════════════════════════════════════════════
 * CHARTE DU SITE
 * Le thème parent est bâti sur deux couleurs sources. En les
 * redéfinissant ici, tout suit d'un coup : navigation, pied de page,
 * animation de changement de page, barre collante, et le contrat
 * --mth-* que lisent le module de réservation et l'espace pro.
 * ══════════════════════════════════════════════════════════════ */
:root{
	--navy:        #0F2318;   /* vert nuit : fonds sombres et overlay de transition */
	--navy-mid:    #173624;   /* vert profond : dégradés et surfaces */
	--amber:       #3E8C55;   /* accent : boutons, liens, focus */
	--amber-light: #7FB069;   /* accent clair : survols et icônes */
	--amber-deep:  #24512F;   /* accent profond : états presses */
	--white:       #FBF8F1;   /* blanc cassé, ton pierre */

	/* Le contrat lu par le module de réservation et l'espace client :
	   l'accent découle déjà de --amber, on aligne le reste sur la charte. */
	--mth-text:      #1A2B21;
	--mth-text-soft: #3D4F43;
	--mth-muted:     #5C6B62;
	--mth-line:      #DDD5C4;
	--mth-surface-2: #FAF7F0;
	--encre-pg:      #1A2B21;
	--creme:         #FAF7F0;

	/* Reprises de la charte de la page, exposées globalement : l'en-tête et le
	   pied de page vivent hors de la page d'accueil et en ont besoin aussi. */
	--fonce:         #173624;
	--vert:          #2F6B45;
	--vert-clair:    #7FB069;
	--lime:          #A8C686;
	--soleil:        #E9C287;
	--gris:          #5C6B62;
	--ligne:         #DDD5C4;
	--titre:         'Fraunces', Georgia, serif;
	--texte:         'Inter', system-ui, -apple-system, sans-serif;
	--ease:          cubic-bezier(.16,1,.3,1);
}

/* ── Module de réservation et espace client ──
   Le plugin garde sa coque claire. On accorde seulement ce qui se voit :
   la typographie des titres et les rayons, pour rester dans le ton du site. */
.as-booking,.as-space{
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.as-booking .as-step__title,
.as-space h1, .as-space h2, .as-space h3{
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 700;
	letter-spacing: -0.015em;
}
.as-booking .as-choice{ border-radius: 14px; }
.as-booking .as-choice:hover{ border-color: var(--mth-accent); }

/* ══════════════════════════════════════════════════════════════
 * MODULE DE RÉSERVATION — habillage « carnet »
 * Le plugin garde son code et son fonctionnement en étapes.
 * Les sélecteurs sont préfixés par body : le CSS du plugin est chargé
 * après celui du thème, et gagnerait à spécificité égale.
 * Ici uniquement l'écriture : traits francs, aucun rayon, champs
 * soulignés, colonne étroite, et la couleur réservée au choix actif.
 * ══════════════════════════════════════════════════════════════ */
body .as-booking{
	max-width: 420px;          /* colonne étroite, même sur grand écran */
	/* aligné à gauche, sur le titre et le texte qui le précèdent : centré, il
	   démarrait 85px plus loin qu'eux et cassait l'aplomb de la colonne */
	margin-inline: 0;
	background: var(--creme, #FAF7F0);
	border: 1px solid var(--encre-pg, #1A2B21);
	border-radius: 0;
	position: relative;
	padding: 26px 22px 24px 30px;
	box-shadow: none;
}
/* la bande verte du carnet */
body .as-booking::before{
	content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
	background: var(--mth-accent);
}

/* fil d'étapes : discret, en haut, sans pastilles rondes */
body .as-booking .as-progress{
	display: flex; gap: 0; margin: 0 0 6px; padding: 0 0 12px;
	border-bottom: 2px solid var(--encre-pg, #1A2B21);
	background: none;
}
body .as-booking .as-progress__item{
	flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
	align-items: center; gap: 6px; text-align: center;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--mth-muted); background: none; padding: 0;
}
body .as-booking .as-progress__dot{
	position: relative; box-sizing: border-box;
	width: auto; height: 22px; min-width: 22px; min-height: 22px; border-radius: 0;
	border: 1px solid var(--mth-line); background: none; color: var(--mth-muted);
	font-family: inherit; font-size: 0.64rem; font-weight: 700;
	display: grid; place-items: center; padding: 2px 5px; box-shadow: none;
}
body .as-booking .as-progress__item.is-active{ color: var(--mth-text); }
body .as-booking .as-progress__item.is-active .as-progress__dot{
	background: var(--mth-accent); border-color: var(--mth-accent); color: #fff;
}
/* le trait de liaison est cale a 17px, hauteur qui correspondait aux pastilles
   rondes d'origine. Nos pastilles font 22px : leur centre est a 11px. */
body .as-booking .as-progress__item::before{ top: 11px; }

/* Etape validee : le module masque le chiffre et affiche un ✓ en ::after. En grille,
   les deux occupaient deux lignes et la pastille doublait de hauteur. On superpose. */
body .as-booking .as-progress__item.is-done .as-progress__dot::after{
	position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.72rem;
}
/* la colonne est etroite : on n'affiche que le libelle de l'etape en cours,
   les autres restent en flux (opacite 0) pour que rien ne saute d'une etape a l'autre */
body .as-booking .as-progress__label{
	font: inherit; font-size: 0.55rem; line-height: 1.15; letter-spacing: 0.03em;
	max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: clip;
	opacity: 0; transition: opacity 0.25s;
}
body .as-booking .as-progress__item.is-active .as-progress__label{ opacity: 1; }

/* titres d'étape */
body .as-booking .as-step__title{
	font-family: 'Fraunces', Georgia, serif; font-weight: 700;
	font-size: 1.08rem; letter-spacing: -0.015em; margin-bottom: 4px;
}
body .as-booking .as-step__hint{ font-size: 0.84rem; color: var(--mth-muted); margin-bottom: 16px; }

/* choix : cartouches à angles droits, pleine largeur */
/* colonne etroite : une seule carte par ligne, sinon le libelle et la duree s'ecrasent.
   Le module pagine les choix : la grille reelle est .as-cpage, pas .as-choices. */
body .as-booking .as-choices{ display: grid; grid-template-columns: 1fr; gap: 7px; }
body .as-booking .as-cpage{ grid-template-columns: 1fr; gap: 7px; align-content: start; }
body .as-booking .as-choice{
	border-radius: 0; border: 1px solid var(--encre-pg, #1A2B21);
	background: #fff; box-shadow: none;
	/* droite : place pour la pastille de selection du plugin ; gauche : pour sa barre de couleur */
	padding: 13px 42px 14px 17px;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	text-align: left; min-width: 0;
	transition: background 0.2s, color 0.2s;
}
body .as-booking .as-choices .as-choice__label{ min-width: 0; }
body .as-booking .as-choices .as-choice__meta{ white-space: nowrap; flex: none; }

/* Le module passe les choix en colonne sous 560px avec une regle plus specifique
   que la notre : on la reprend ici pour garder le trait "carnet" (aligne a gauche,
   duree sous le libelle) et surtout reserver la place de la pastille de selection. */
body .as-booking .as-choices:not(.as-choices--ranged) .as-choice{
	display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
	gap: 3px; padding: 12px 42px 13px 17px; text-align: left;
}
body .as-booking .as-choices:not(.as-choices--ranged) .as-choice__label{
	font-size: 0.9rem; line-height: 1.25;
}
body .as-booking .as-choices:not(.as-choices--ranged) .as-choice__meta{
	font-size: 0.72rem; letter-spacing: 0.02em;
}

/* Pas de bascule en ligne : elle se declenchait sur la largeur de la FENETRE,
   alors que le module vit dans une colonne de 420px au plus. Les trois elements
   (libelle, description, duree) restent donc empiles a toutes les largeurs. */
body .as-booking .as-choices:not(.as-choices--ranged) .as-choice__desc{
	font-size: 0.8rem; line-height: 1.4; color: var(--mth-muted); margin: 1px 0 2px;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
}
body .as-booking .as-choice.is-selected .as-choice__desc,
body .as-booking .as-choice[aria-pressed="true"] .as-choice__desc{
	color: rgba(255,255,255,0.72);
}
body .as-booking .as-choice:hover{ background: var(--mth-accent-soft); }
body .as-booking .as-choice.is-selected,
body .as-booking .as-choice[aria-pressed="true"]{
	background: var(--encre-pg, #1A2B21); border-color: var(--encre-pg, #1A2B21); color: #fff;
}
body .as-booking .as-choice__label{ font-weight: 600; font-size: 0.94rem; }
body .as-booking .as-choice__meta{
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.78rem; color: var(--mth-muted); border-radius: 0;
}
/* le module donne au libelle sa propre couleur (--as-ink) : le blanc pose sur le
   bouton ne descend pas jusqu'a lui, et il disparaissait sur le fond sombre. */
body .as-booking .as-choice.is-selected .as-choice__label,
body .as-booking .as-choice[aria-pressed="true"] .as-choice__label{ color: #fff; }
body .as-booking .as-choice.is-selected .as-choice__meta,
body .as-booking .as-choice[aria-pressed="true"] .as-choice__meta{
	color: rgba(255,255,255,0.82); background: rgba(255,255,255,0.12);
}

/* adresse : champ souligné plutôt qu'encadré */
/* l'interligne du corps de texte (1,75) rendait les champs hauts de 50px : on
   revient a un interligne de champ de saisie */
body .as-booking .as-geo__input,
body .as-booking .as-booking__field input,
body .as-booking .as-booking__field textarea,
body .as-booking .as-booking__field select{
	border: 0; border-bottom: 1px solid var(--encre-pg, #1A2B21); border-radius: 0;
	background: transparent; padding: 9px 0; font-size: 0.96rem; line-height: 1.35;
	box-shadow: none;
}
body .as-booking .as-booking__field > span{ line-height: 1.3; margin-bottom: 4px; }
body .as-booking .as-booking__field textarea{
	border: 1px solid var(--mth-line); padding: 10px 12px;
}
body .as-booking .as-geo__input:focus,
body .as-booking .as-booking__field input:focus{
	outline: none; border-bottom-width: 2px; border-color: var(--mth-accent); box-shadow: none;
}
body .as-booking .as-geo__status{ font-size: 0.8rem; color: var(--mth-muted); }

/* créneaux : pastilles carrées qui se replient */
/* .as-slots enveloppe le bandeau de jours ET la grille de creneaux : le passer en
   flex empechait la grille de prendre toute la largeur, d'ou une seule colonne.
   Le module dispose deja les creneaux en grille, on ne touche qu'a leur apparence. */
body .as-booking .as-slots__grid{ width: 100%; }
/* Le module masque la barre de defilement du bandeau de jours : au doigt cela
   fonctionne, mais a la souris il devient impossible d'atteindre les jours
   suivants. On la reaffiche, fine et dans la charte. */
/* « auto » et non « thin » : des que scrollbar-width vaut thin, Chrome ignore le
   style de barre ci-dessous et la barre redevient flottante, donc invisible au repos. */
body .as-booking .as-slots__strip{ scrollbar-width: auto; padding-bottom: 8px; }
body .as-booking .as-slots__strip::-webkit-scrollbar{
	display: block; height: 8px; -webkit-appearance: none;
}
body .as-booking .as-slots__strip::-webkit-scrollbar-track{ background: var(--mth-line); }
body .as-booking .as-slots__strip::-webkit-scrollbar-thumb{ background: var(--mth-accent); }
body .as-booking .as-slots__strip .as-day-chip{ flex: 0 0 auto; }
/* dernier bloc encore arrondi du module */
body .as-booking .as-slots__reco-banner{
	border-radius: 0; border-left: 3px solid var(--mth-accent);
}
body .as-booking .as-slots button,
body .as-booking .as-slots .as-slot{
	border-radius: 0; border: 1px solid var(--encre-pg, #1A2B21); background: #fff;
	font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; font-size: 0.84rem;
	padding: 10px 13px; box-shadow: none;
}
body .as-booking .as-slots button:hover{ background: var(--mth-accent-soft); }
body .as-booking .as-slots button.is-selected,
body .as-booking .as-slots button[aria-pressed="true"]{
	background: var(--mth-accent); border-color: var(--mth-accent); color: #fff;
}
body .as-booking .as-slots button:disabled{ opacity: 0.35; text-decoration: line-through; }

/* séparateurs en pointillés entre les blocs, comme dans un carnet */
/* Les champs sont disposes par le module en grille deux colonnes : un separateur
   « entre voisins » decalait la colonne de droite d'un cran. Il ne reste qu'entre
   les rangees, et la colonne du carnet est trop etroite pour deux champs de front. */
body .as-booking .as-booking__row{ grid-template-columns: 1fr; gap: 0; }
body .as-booking .as-booking__row + .as-booking__row{
	border-top: 1px dashed var(--mth-line); padding-top: 16px; margin-top: 16px;
}
body .as-booking .as-booking__row .as-booking__field + .as-booking__field{ margin-top: 14px; }

/* récapitulatif et boutons */
body .as-booking .as-recap,
body .as-booking .as-tunnel-recap{
	border-radius: 0; border: 0; border-top: 2px solid var(--encre-pg, #1A2B21);
	background: none; padding: 16px 0 0; margin-top: 18px;
}
/* le rappel du choix arrive juste sous le fil d'etapes, qui a deja son trait :
   un second trait a 50px du premier faisait doublon */
body .as-booking .as-tunnel-recap{ border-top: 0; padding-top: 4px; margin-top: 10px; }
body .as-booking .as-tunnel-recap__item{
	font-size: 0.86rem; border-radius: 0; border-color: var(--mth-line);
}
/* le tableau du recapitulatif est un bloc a part (.as-recap__list) : il gardait
   les angles arrondis du module au milieu d'un habillage a angles droits */
body .as-booking .as-recap__list{
	border-radius: 0; border-color: var(--mth-line); background: var(--mth-surface-2);
}
body .as-booking .as-recap__row{ border-bottom-color: var(--mth-line); }
body .as-booking .as-step__nav{ display: flex; align-items: stretch; gap: 9px; margin-top: 18px; }
/* la colonne est etroite : un padding horizontal genereux ne laissait plus la place
   au libelle, qui partait sur trois ou quatre lignes */
body .as-booking .as-btn{
	border-radius: 0; box-shadow: none; font-weight: 700;
	padding: 13px 14px; font-size: 0.9rem; line-height: 1.25;
}
/* deux boutons cote a cote dans 220px : le libelle partait sur trois lignes.
   On les empile, action principale au-dessus (column-reverse car le retour vient
   en premier dans le HTML du module). */
/* Idem pour la navigation : deux boutons cote a cote dans 220px coupaient le
   libelle en trois lignes, quelle que soit la taille de l'ecran. */
body .as-booking .as-step__nav{ flex-direction: column-reverse; gap: 8px; }
body .as-booking .as-step__nav .as-btn{ width: 100%; flex: none; }
body .as-booking .as-btn--next,
body .as-booking .as-btn--confirm{ background: var(--mth-accent); color: #fff; border: 0; flex: 1; }
body .as-booking .as-btn--next:hover,
body .as-booking .as-btn--confirm:hover{ background: var(--mth-accent-deep); }
body .as-booking .as-btn--next.is-locked{ opacity: 0.4; }
body .as-booking .as-btn--ghost{
	background: transparent; border: 1px solid var(--encre-pg, #1A2B21); color: var(--mth-text);
}
body .as-booking .as-map{ border-radius: 0; border: 1px solid var(--mth-line); }
body .as-booking .as-consent{ font-size: 0.82rem; color: var(--mth-muted); }

/* sur téléphone la carte hôte reprend 32 px de largeur utile */
@media (max-width: 900px){
	body .pg-bloc{ padding: 22px 16px; }
	body .as-booking{ padding: 20px 14px 20px 22px; }
}


/* ============================================================
   BARRE DE NAVIGATION
   Ces regles vivaient dans front-page.php, donc uniquement sur l'accueil.
   Elles sont ici pour valoir sur toutes les pages du site. Le script qui
   revele le fond au defilement est dans js/nav.js.
   ============================================================ */

/* ── Barre du thème parent, habillée en îlot centré, sur tout le site ──
   On ne duplique pas la navigation : on redessine celle du parent, qui porte
   déjà le menu, le téléphone et l'accès à l'espace pro. Sur téléphone, le parent
   transforme cette même barre en panneau latéral : on le laisse faire et on se
   contente de le rhabiller plus bas.
   Ni « transform » ni « backdrop-filter » sur la barre elle-même : ces deux
   propriétés créeraient un référentiel pour les descendants en position fixed,
   et le panneau du menu mobile du parent sortirait de l'écran. Le fond et le
   flou vivent donc sur un pseudo-élément, qui n'est pas un ancêtre. */
/* repli : si le script ne se charge pas, la barre reste lisible sur fond clair */
body.nav-fond-clair .site-nav{--p:1}

@media(min-width:1025px){
  /* Le parent pose un fond pleine largeur des qu'on a defile (.site-nav.scrolled).
     Nos regles ne portent qu'une classe, elles perdaient donc contre lui et une
     bande sombre entourait l'ilot. On le neutralise ici, sur grands ecrans
     seulement : en dessous, la barre est pleine largeur et ce fond sert. */
  .site-nav.scrolled{
    background:none; box-shadow:none;
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  .site-nav{position:fixed;top:16px;left:0;right:0;margin-inline:auto;transform:none;z-index:50;
    width:fit-content;max-width:calc(100% - 28px);height:auto;
    display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 12px;
    background:none;border:0;box-shadow:none;
    --enc:color-mix(in srgb,#1A2B21 calc(var(--p,0) * 100%),#FFFFFF)}
  /* Pas de nom de site dans la barre : seuls les liens restent, centrés. */
  .nav-logo{display:none}
  .site-nav::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:100px;
    background:rgba(250,247,240,calc(var(--p,0) * .9));
    backdrop-filter:blur(calc(var(--p,0) * 20px)) saturate(calc(1 + var(--p,0) * .3));
    -webkit-backdrop-filter:blur(calc(var(--p,0) * 20px));
    border:1px solid rgba(255,255,255,calc(var(--p,0) * .7));
    box-shadow:0 16px 40px -20px rgba(15,35,24,calc(var(--p,0) * .55));
    transition:background .3s ease,box-shadow .3s ease}
  .site-nav.scrolled::before{box-shadow:0 16px 40px -20px rgba(15,35,24,.55)}
  .nav-logo{font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:1.02rem;color:var(--enc);
    text-shadow:0 1px 10px rgba(0,0,0,calc(.5 * (1 - var(--p,0))))}
  .nav-logo__img{height:30px}
  .nav-links{gap:2px;background:none;box-shadow:none;border:0;flex-wrap:nowrap;
    align-items:center;justify-content:center;margin:0}
  .nav-links a{color:var(--enc);font-size:.92rem;font-weight:500;padding:9px 14px;border-radius:100px;white-space:nowrap;
    text-shadow:0 1px 10px rgba(0,0,0,calc(.5 * (1 - var(--p,0))));transition:background .3s ease}
  .nav-links a:hover{background:rgba(47,107,69,calc(.06 + var(--p,0) * .06));color:var(--enc)}
  .nav-links .nav-cta{background:color-mix(in srgb,#2F6B45 calc(var(--p,0) * 100%),#FAF7F0);
    color:color-mix(in srgb,#FFFFFF calc(var(--p,0) * 100%),#1B2E17);
    padding:11px 19px;font-weight:700;text-shadow:none;white-space:nowrap}
  .nav-links .nav-cta:hover{transform:translateY(-2px)}
  .nav-burger{border:1px solid rgba(255,255,255,calc(.45 - var(--p,0) * .2));
    background:rgba(255,255,255,calc(.14 + var(--p,0) * .86));border-radius:50%;width:40px;height:40px}
  .nav-burger span{background:var(--enc)}
}

/* ── Panneau de navigation sur téléphone ──
   Voile en fondu (le parent le bascule en display, d'où l'à-coup),
   rangées pleine largeur, actions détachées en pied. */
@media(max-width:1024px){
  .site-nav{padding:8px 8px 8px 16px;gap:4px}
  .nav-overlay{display:block!important;opacity:0;pointer-events:none;
    background:rgba(8,20,13,.55);backdrop-filter:blur(3px);
    transition:opacity .38s var(--ease)}
  .nav-overlay.is-open{opacity:1;pointer-events:auto}

  .site-nav .nav-links{background:var(--fonce);padding:0;gap:0;
    box-shadow:-14px 0 50px rgba(0,0,0,.5);border:0}
  .site-nav .nav-links::before{content:"Menu";display:block;
    padding:26px 22px 16px;font-family:var(--titre);font-weight:700;font-size:1.1rem;color:#fff;
    border-bottom:1px solid rgba(255,255,255,.1)}
  .site-nav .nav-links li{width:100%}
  .site-nav .nav-links li a{display:flex;align-items:center;justify-content:space-between;
    width:100%;padding:19px 22px;font-size:1.02rem;font-weight:500;color:rgba(255,255,255,.92);
    border-bottom:1px solid rgba(255,255,255,.06);border-radius:0;background:none}
  .site-nav .nav-links li a::after{content:"›";color:var(--lime);font-size:1.3rem;opacity:.6}
  .site-nav .nav-links li a:active{background:rgba(255,255,255,.07)}
  .nav-espace-sep{display:none}
  /* les deux actions quittent la liste pour le pied du panneau */
  .site-nav .nav-links li:has(.nav-cta){margin-top:auto;padding:14px 18px 0}
  .site-nav .nav-links li:has(.nav-login),
  .site-nav .nav-links li:has(.nav-espace){padding:10px 18px 22px}
  .site-nav .nav-links li:has(.nav-cta) a,
  .site-nav .nav-links li:has(.nav-login) a,
  .site-nav .nav-links li:has(.nav-espace) a{justify-content:center;border-bottom:0;
    padding:15px;font-weight:700;border-radius:0}
  .site-nav .nav-links li:has(.nav-cta) a::after,
  .site-nav .nav-links li:has(.nav-login) a::after,
  .site-nav .nav-links li:has(.nav-espace) a::after{display:none}
  .site-nav .nav-links .nav-cta{background:var(--vert-clair)!important;color:#12281A!important}
  .site-nav .nav-links .nav-login,
  .site-nav .nav-links .nav-espace{background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.2);color:#fff!important}
}