/* Couleurs : variables globales du thème Astra (--ast-global-color-*), aucune variable de couleur propre au plugin.
   Tailles et polices : héritées du thème. */
/* Greenco Hero – bannière + sélecteur de chantier
   Propriétés logiques (inline/block) : s'inverse automatiquement en RTL (arabe). */
.gch-hero{
  --gch-max:1240px;
  --gch-radius:22px;
  font-family:inherit;
  /* Même mise en page dans toutes les langues : pas d'inversion en arabe. */
  direction:ltr;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#fff;
  color:var(--ast-global-color-3);
  display:flex;
  align-items:center;
  /* Pleine largeur : sort du conteneur du thème (ast-container, entrée de page, bloc de colonne…). */
  width:100vw !important;max-width:100vw !important;
  margin-inline:calc(50% - 50vw) !important;
}
body:has(.gch-hero){overflow-x:clip}
/* Paragraphes vides autour du shortcode (wpautop) : ils créent un espace blanc au-dessus / en dessous. */
p:empty:has(+ .gch-hero),.gch-hero + p:empty,.gch-hero + br{display:none}
.gch-hero *,.gch-hero *::before,.gch-hero *::after{box-sizing:border-box}

.gch-paint,.gch-hero__texture{position:absolute;inset:0;pointer-events:none}
.gch-hero__texture{
  z-index:-1;opacity:.05;
  background-image:radial-gradient(circle at 1px 1px,var(--ast-global-color-2) 1px,transparent 0);
  background-size:22px 22px;
}

/* ---- Fond animé : quatre rouleaux de peinture ---- */
.gch-paint{z-index:-3;overflow:hidden;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2%;padding-inline:1%}
.gch-paint__lane{position:relative}
.gch-paint__strip{position:absolute;inset-inline-start:0;inset-block-start:0;width:100%;height:94%;max-width:none;object-fit:fill;will-change:clip-path}
.gch-paint__roller{
  position:absolute;inset-inline-start:50%;inset-block-start:0;width:98%;height:auto;max-width:none;
  display:none;transform-origin:50% 13%;will-change:transform;
  filter:drop-shadow(0 10px 12px rgba(17,63,39,.25));
}
.gch-hero.is-painting .gch-paint__roller{display:block}

.gch-hero__inner{
  width:min(var(--gch-max), 100% - 40px);
  margin-inline:auto;
  display:grid;
  /* Une seule colonne centrée : le sélecteur. */
  grid-template-columns:minmax(0,1fr);
  gap:40px;
  justify-items:center;
  padding-block:120px 120px;
}
.gch-finder{width:100%;max-width:880px}
/* Le sélecteur apparaît quand l'animation de fond est presque terminée (classe ajoutée par le JavaScript). */
.gch-hero .gch-finder{opacity:0;transform:translateY(24px);visibility:hidden;transition:opacity .6s ease,transform .6s ease,visibility 0s linear .6s}
.gch-hero.is-revealed .gch-finder{opacity:1;transform:none;visibility:visible;transition-delay:0s}

/* Version arabe : la bannière reste en LTR, mais le texte du sélecteur s'écrit de droite à gauche. */
html:is([dir="rtl"],[lang^="ar"]) .gch-hero .gch-finder{direction:rtl}

/* ---- Boutons ----
   Liens « button ast-button » : l'apparence (couleurs, bordure, rayon, padding, police, casse,
   soulignement, survol) vient intégralement des réglages Boutons d'Astra / Astra Child.
   Rien n'est redéfini ici, sauf la variante contour (fond transparent + bordure) du bouton
   secondaire, qui garde le rayon, le padding et la police du thème. */
.gch-btn__icon{display:inline-flex;vertical-align:middle;margin-inline-end:.5em}
.gch-btn__icon svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gch-btn--ghost,.gch-btn--line{background-color:transparent;border-width:2px;border-style:solid;border-color:currentColor}
.gch-btn--ghost,.gch-btn--ghost:visited{color:var(--ast-global-color-2)}
.gch-btn--line,.gch-btn--line:visited{color:var(--ast-global-color-0)}
.gch-btn--ghost:hover,.gch-btn--ghost:focus,.gch-btn--line:hover,.gch-btn--line:focus{background-color:transparent;border-color:currentColor}
.gch-hero :focus-visible{outline:3px solid var(--ast-global-color-1);outline-offset:3px}

/* ---- Carte du sélecteur ---- */
.gch-finder{
  background:var(--ast-global-color-5);
  color:var(--ast-global-color-2);
  border-radius:var(--gch-radius);
  padding:28px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.45);
}
.gch-finder__head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-block-end:0px}
.gch-finder__title{margin:0;color:var(--ast-global-color-2);font-family:inherit}
h2.gch-finder__title{margin-bottom:5px !important}
.gch-finder .gch-finder__reset[hidden]{display:none !important}
.gch-finder__question{margin:0 0 14px}
.gch-finder__step{animation:gch-step .28s ease}
@keyframes gch-step{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.gch-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gch-choice{
  display:flex;align-items:center;gap:12px;text-align:start;
  width:100%;padding:14px;cursor:pointer;
  background:var(--ast-global-color-4);color:var(--ast-global-color-2);
  border:1.5px solid transparent;border-radius:12px;
  font:inherit;font-weight:600;line-height:1.3;
  transition:border-color .15s,background-color .15s;
}
.gch-choice:hover,.gch-choice:focus-visible{border-color:var(--ast-global-color-0);background:var(--ast-global-color-5)}
.gch-choice__ico{
  flex:none;width:40px;height:40px;border-radius:10px;
  background:var(--ast-global-color-5);color:var(--ast-global-color-0);
  display:grid;place-items:center;
}
.gch-choice__ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gch-choice__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.gch-choice__hint{font-weight:400;font-size:.85em;line-height:1.35;color:var(--ast-global-color-3)}

/* ---- Résultat ---- */
.gch-result{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;align-items:center}
/* Vignette produit : mêmes règles que .ast-child-mega-product-thumb (Astra Child). */
.gch-result__pack{
  display:block;width:150px;height:150px;overflow:hidden;
  border-radius:8px;background:rgba(0,0,0,.04);
  color:inherit;text-decoration:none;
}
.gch-result__pack img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .3s ease}
a.gch-result__pack:hover img{transform:scale(1.05)}
.gch-result__pack svg{width:100%;height:100%;padding:20%;color:var(--ast-global-color-0)}
.gch-result__name{margin:0 0 4px;color:var(--ast-global-color-0);font-family:inherit}
.gch-result__short{margin:0 0 12px;color:var(--ast-global-color-3)}
.gch-result__short>:first-child{margin-top:0}
.gch-result__short>:last-child{margin-bottom:0}
.gch-result__benefits{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:6px;font-size:.95em}
.gch-result__benefits li{display:flex;gap:8px;margin:0}
.gch-result__benefits li::before{content:"";flex:none;width:7px;height:7px;margin-block-start:.5em;border-radius:50%;background:var(--ast-global-color-1)}
.gch-result__also{
  margin:16px 0 0;padding-block-start:14px;border-block-start:1px dashed var(--ast-global-color-6);
  font-size:.95em;color:var(--ast-global-color-3);
}
.gch-result__also a,.gch-result__also strong{color:var(--ast-global-color-0);font-weight:600}

/* ---- Responsive ---- */
@media (max-width:1024px){
  .gch-hero__inner{padding-block:72px 84px}
}
@media (max-width:767px){
  .gch-finder{padding:20px}
  .gch-paint{gap:1.5%;padding-inline:.5%}
  .gch-choices{grid-template-columns:minmax(0,1fr)}
  .gch-result{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .gch-finder__step{animation:none}
  .gch-btn,.gch-choice{transition:none}
  .gch-paint__roller{display:none !important}
  .gch-hero .gch-finder{opacity:1;transform:none;visibility:visible;transition:none}
  .gch-paint__strip{clip-path:none !important}
}