/* ============================================================
   AMBRA — GLOW UP global (UI/UX + micro-animations)
   Règle de couleur : la VARIATION PAR PAGE se concentre sur le HERO
   (fond teinté + halo + liseré + highlight du H1). Partout ailleurs,
   on garde le DORÉ DE MARQUE pour la cohérence de la palette.
   ============================================================ */
:root{
  --gold:#CD9E5A; --gold-d:#B8862F; --ink:#0E0E10;
  --acc:#CD9E5A;                    /* accent de HERO (surchargé par page-id, cf. bas de fichier) */
  --ambra-ease:cubic-bezier(.16,.7,.3,1);
}

/* ---------- Rythme & lisibilité ---------- */
html{ scroll-behavior:smooth; }
::selection{ background:var(--gold); color:#fff; }
body{ text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; }

/* ---------- Focus visible (accessibilité) ---------- */
a:focus-visible, button:focus-visible, .elementor-button:focus-visible,
input:focus-visible{
  outline:3px solid var(--gold); outline-offset:2px; border-radius:4px;
}

/* ---------- Boutons : profondeur + survol vivant ---------- */
.elementor-button{ transition:transform .22s var(--ambra-ease), box-shadow .22s var(--ambra-ease), background-color .22s, color .22s !important; will-change:transform; }
.elementor-button:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(184,134,47,.28); }
.elementor-button:active{ transform:translateY(0); }

/* ---------- Cartes (services / avis / études de cas / offres) : lift au survol ---------- */
.ambra-card{ transition:transform .28s var(--ambra-ease), box-shadow .28s var(--ambra-ease), border-color .28s !important; }
.ambra-card:hover{ transform:translateY(-6px); box-shadow:0 22px 48px rgba(30,25,10,.14) !important; border-color:color-mix(in srgb, var(--gold) 45%, #ECE6DA) !important; }
.ambra-card-dark:hover{ box-shadow:0 26px 60px rgba(14,14,16,.4) !important; border-color:transparent !important; }

/* ---------- Icon-box : cercle doré qui respire (couleur de marque, cohérence) ---------- */
.elementor-widget-icon-box .elementor-icon{
  transition:transform .3s var(--ambra-ease), box-shadow .3s var(--ambra-ease) !important;
  box-shadow:0 8px 22px rgba(205,158,90,.28); }
.elementor-widget-icon-box:hover .elementor-icon{ transform:translateY(-4px) rotate(-4deg) scale(1.06); }

/* ---------- Compteurs : chiffres tabulaires, doré, présence ---------- */
.elementor-counter-number-wrapper{ font-variant-numeric:tabular-nums; letter-spacing:-.01em; }

/* ---------- Pastilles de maillage : effets sur le BOUTON arrondi (jamais sur le wrapper carré) ---------- */
.ambra-pill{ background:transparent !important; border:none !important; box-shadow:none !important; }
.ambra-pill .elementor-button{ transition:transform .2s var(--ambra-ease), box-shadow .2s var(--ambra-ease), background-color .2s, color .2s, border-color .2s !important; }
.ambra-pill .elementor-button:hover{ transform:translateY(-2px); background-color:var(--gold) !important; border-color:var(--gold) !important; color:#fff !important; box-shadow:0 10px 22px rgba(205,158,90,.3); }
.ambra-pill .elementor-button:hover svg, .ambra-pill .elementor-button:hover path{ fill:#fff !important; color:#fff !important; }
.ambra-pill .elementor-button:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; border-radius:999px; }

/* ---------- Conteneurs flex : hug/cercle fiables (Elementor n'applique pas width en JSON brut) ---------- */
.ambra-price{ width:-moz-max-content !important; width:max-content !important; max-width:100% !important; flex:0 0 auto !important; align-self:flex-start !important; }
.ambra-ico{ flex:0 0 52px !important; width:52px !important; height:52px !important; border-radius:50% !important; align-self:flex-start; }
.ambra-ico .elementor-widget-icon, .ambra-ico .elementor-icon{ line-height:1; }

/* ---------- Logos clients : mur de pastilles blanches, propre et lisible ---------- */
.ambra-logos-row{ row-gap:22px !important; }
.ambra-logo{ width:172px !important; max-width:44vw; background:#fff !important;
  border:1px solid #ECE6DA; border-radius:12px; padding:18px 20px !important;
  box-shadow:0 6px 18px rgba(30,25,10,.05); transition:box-shadow .3s var(--ambra-ease), transform .3s var(--ambra-ease), border-color .3s; }
.ambra-logo img{ width:100%; height:auto; opacity:1; transition:transform .3s var(--ambra-ease); }
.ambra-logo:hover{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(30,25,10,.12); border-color:color-mix(in srgb, var(--gold) 42%, #ECE6DA); }
.ambra-logo:hover img{ transform:scale(1.04); }

/* ---------- Liens de contenu : souligné animé doré ---------- */
.elementor-widget-text-editor a:not(.elementor-button){
  background-image:linear-gradient(var(--gold),var(--gold)); background-size:0% 2px; background-repeat:no-repeat;
  background-position:0 100%; transition:background-size .25s var(--ambra-ease); text-decoration:none; padding-bottom:1px; }
.elementor-widget-text-editor a:not(.elementor-button):hover{ background-size:100% 2px; }

/* ============================================================
   HERO — porteur de la couleur de page (variation Gefigram, mais ciblée)
   ============================================================ */
.ambra-dark{ position:relative; overflow:hidden; border-bottom:3px solid color-mix(in srgb, var(--acc) 72%, transparent); }
.ambra-dark::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(120% 85% at 84% 8%, color-mix(in srgb, var(--acc) 32%, transparent), transparent 58%),
    linear-gradient(135deg, transparent 52%, color-mix(in srgb, var(--acc) 15%, transparent)); }
.ambra-dark > .e-con-inner{ position:relative; z-index:1; }
/* highlight du H1 = couleur de page (uniquement dans le hero) */
.ambra-dark .elementor-widget-heading h1 span[style*="color"]{ color:var(--acc) !important; }
/* les bandeaux sombres non-hero (CTA doré, etc.) n'ont pas .ambra-dark -> pas de teinte */

/* ---------- Galeries (portfolio) : grille à la charte, zoom + lift au survol ---------- */
.elementor-image-gallery .gallery-item{ overflow:hidden; border-radius:10px; margin-bottom:10px !important;
  transition:transform .3s var(--ambra-ease), box-shadow .3s var(--ambra-ease); }
.elementor-image-gallery .gallery-item:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(30,25,10,.15); z-index:2; }
.elementor-image-gallery .gallery-item img{ border-radius:10px !important; display:block; width:100%;
  transition:transform .5s var(--ambra-ease); }
.elementor-image-gallery .gallery-item:hover img{ transform:scale(1.06); }
.elementor-image-gallery .gallery-icon{ overflow:hidden; border-radius:10px; }

/* ---------- Pages légales : contenu lisible, à la charte ---------- */
.ambra-legal .elementor-widget-text-editor{ color:#3A3A42; font-size:16px; line-height:1.75; }
.ambra-legal p{ margin:0 0 1em; }
.ambra-legal ol, .ambra-legal ul{ margin:0 0 1.2em; padding-left:1.4em; }
.ambra-legal li{ margin:.35em 0; }
.ambra-legal strong{ color:#0E0E10; display:inline-block; margin-top:.4em; }
.ambra-legal a{ color:var(--gold-d); }

/* ============================================================
   MICRO-ANIMATIONS (révélations au scroll) — sûres sans JS
   .fx-reveal n'est posé QUE par ambra-fx.js -> si JS absent, tout reste visible.
   ============================================================ */
html.fx-on .fx-reveal{ opacity:0; transform:translateY(30px); transition:opacity .7s var(--ambra-ease), transform .7s var(--ambra-ease); will-change:opacity,transform; }
html.fx-on .fx-reveal.fx-in{ opacity:1; transform:none; }
/* cascade sur les cartes d'une même rangée */
html.fx-on .ambra-card.fx-reveal{ transform:translateY(34px) scale(.985); }
html.fx-on .ambra-card.fx-in{ transform:none; }
/* parallax léger du visuel de hero (piloté par JS via --py) */
html.fx-on .ambra-dark .elementor-widget-image{ will-change:transform; transform:translateY(var(--py,0)); }
@media (prefers-reduced-motion: reduce){
  html.fx-on .fx-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  html.fx-on .ambra-dark .elementor-widget-image{ transform:none !important; }
  html{ scroll-behavior:auto; }
  .elementor-button:hover,.ambra-card:hover,.ambra-pill:hover,.elementor-widget-icon-box:hover .elementor-icon{ transform:none !important; }
}

/* ============================================================
   ACCENT DE HERO PAR PAGE (offres / services) — palette maîtrisée
   Seul --acc change ; il n'agit QUE dans le hero (.ambra-dark) + highlight H1.
   ============================================================ */
.page-id-4064{ --acc:#2F8F6B; } /* Référencement + IA — émeraude */
.page-id-5358{ --acc:#3B6FB5; } /* Google Ads — bleu */
.page-id-5359{ --acc:#7A5CC0; } /* Automatisation & IA — violet */
.page-id-5356{ --acc:#2E8C8C; } /* Refonte — teal */
.page-id-5357{ --acc:#5B7A8C; } /* Maintenance — ardoise */
.page-id-5360{ --acc:#3E9E5E; } /* Ambra Croissance — vert */
.page-id-5361{ --acc:#D08A3E; } /* Pack Lancement — ambre */
.page-id-34{   --acc:#C0894A; } /* Site vitrine — or chaud */
.page-id-4366{ --acc:#B5487A; } /* Site e-commerce — framboise */
.page-id-4026{ --acc:#4E63C0; } /* Site sur-mesure — indigo */
.page-id-4072{ --acc:#C0453E; } /* Création vidéo — cramoisi */
.page-id-4123{ --acc:#8E5A8C; } /* Shooting photos — prune */
.page-id-4101{ --acc:#2C87A8; } /* Visite virtuelle — cyan */
.page-id-4136{ --acc:#B5613A; } /* Print — terracotta */
.page-id-4452{ --acc:#B14E9E; } /* Illustrations — magenta */

/* ---------- Captures réalisations (cadre navigateur brandé) ---------- */
.ambra-real-shot img{ display:block; width:100%; height:auto; box-shadow:0 8px 22px rgba(20,16,6,.12); }
.ambra-card:hover .ambra-real-shot img{ box-shadow:0 14px 30px rgba(20,16,6,.18); }

/* ---------- Encadré auteur (EEAT) en bas des articles ---------- */
.ambra-author-box{ display:flex; gap:22px; align-items:flex-start; margin:2.6em 0 .5em; padding:26px 28px;
  background:#FAF6EE; border:1px solid #ECE6DA; border-radius:14px; box-shadow:0 8px 22px rgba(30,25,10,.05); }
.ambra-author-ava img{ width:96px; height:96px; border-radius:50%; display:block; object-fit:cover; object-position:center; aspect-ratio:1/1; }
.ambra-author-eyebrow{ font-size:12px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:#B8862F; }
.ambra-author-txt h3{ margin:.25em 0 .1em !important; font-size:1.4rem; }
.ambra-author-txt h3::before{ display:none !important; }
.ambra-author-txt h3 a{ color:#0E0E10; text-decoration:none; }
.ambra-author-role{ color:#B8862F; font-weight:600; margin:0 0 .6em; font-size:.95rem; }
.ambra-author-box p{ color:#54595F; margin:0 0 .6em; }
.ambra-author-link{ font-weight:700; color:#B8862F; text-decoration:none; }
.ambra-author-link:hover{ text-decoration:underline; }
@media(max-width:600px){ .ambra-author-box{ flex-direction:column; align-items:center; text-align:center; } }

/* ---------- Footer direction A ---------- */
.ambra-footer .elementor-icon-list-item a{ color:#9A9AA4; transition:color .2s, padding-left .2s var(--ambra-ease); }
.ambra-footer .elementor-icon-list-item a:hover{ color:var(--gold); padding-left:4px; }
.ambra-footer a{ text-decoration:none; }
.ambra-footer p a:hover{ color:var(--gold) !important; }

/* ---------- Fil d'ariane (bande fine sombre entre header et hero) ---------- */
.ambra-crumbs{ background:#0E0E10; padding:14px 0 2px; margin-bottom:-1px; }
.ambra-crumbs .rank-math-breadcrumb{ max-width:1140px; margin:0 auto; padding:0 20px; }
.ambra-crumbs .rank-math-breadcrumb p{ margin:0; font-size:12.5px; letter-spacing:.3px; color:rgba(255,255,255,.5); }
.ambra-crumbs a{ color:rgba(255,255,255,.68); text-decoration:none; transition:color .2s; }
.ambra-crumbs a:hover{ color:var(--gold, #CD9E5A); }
.ambra-crumbs .separator{ opacity:.45; margin:0 6px; }
.ambra-crumbs .last{ color:rgba(255,255,255,.5); }
@media(max-width:920px){ .ambra-crumbs{ display:none; } }

/* ---------- Grilles galerie & réalisations print : vignettes uniformisées ---------- */
.page-id-18 .elementor-image-gallery .gallery-item,
.page-id-4149 .elementor-image-gallery .gallery-item{ padding:10px !important; }
.page-id-18 .elementor-image-gallery .gallery-item img,
.page-id-4149 .elementor-image-gallery .gallery-item img{
  width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; border:none !important;
  box-shadow:0 6px 16px rgba(20,16,6,.10);
  transition:transform .25s var(--ambra-ease, ease-out), box-shadow .25s;
}
.page-id-18 .elementor-image-gallery .gallery-item a:hover img,
.page-id-4149 .elementor-image-gallery .gallery-item a:hover img{
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(20,16,6,.18), 0 0 0 2px var(--gold, #CD9E5A);
}
@media (prefers-reduced-motion: reduce){
  .page-id-18 .elementor-image-gallery .gallery-item img,
  .page-id-4149 .elementor-image-gallery .gallery-item img{ transition:none; }
  .page-id-18 .elementor-image-gallery .gallery-item a:hover img,
  .page-id-4149 .elementor-image-gallery .gallery-item a:hover img{ transform:none; }
}

/* ---------- Titres hero : équilibrage des lignes (évite les mots orphelins type "et" seul) ---------- */
.ambra-dark .elementor-widget-heading h1,
.ambra-dark .elementor-widget-heading h2{ text-wrap:balance; word-break:keep-all; overflow-wrap:normal; hyphens:none; }
/* H1 hero responsive : les titres longs (ex. villes composées) rétrécissent au lieu de déborder */
.ambra-dark .elementor-widget-heading h1{ font-size:clamp(2.1rem, 3.4vw, 3.6rem) !important; line-height:1.08 !important; }