/* =====================================================================
   CINEMA UPGRADES — enrichit le menu et le hero des pages internes
   sans casser le style existant. Chargé après style.css principal.

   Couleurs Alliance : noir #0a0a0f / champagne #D4B45C / accent orange #F37A1F
   ===================================================================== */

/* ── 1. MENU — glassmorphism + sticky animé ──────────────────────── */
.ag-nav{
    transition: background .35s ease, backdrop-filter .35s ease, padding .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.16,1,.3,1) !important;
    will-change: background, backdrop-filter, padding, transform;
}
/* Auto-hide nav + burger au scroll vers le bas (style Apple) */
body.ag-nav-hidden .ag-nav{ transform: translateY(-100%) !important; }
body.ag-nav-hidden .ag-fsm-toggle{ transform: translateX(-50%) translateY(calc(-100% - 100px)) !important; }
/* Reset au hover/menu ouvert */
body.ag-fsm-open .ag-nav,
body.ag-fsm-open .ag-fsm-toggle{ transform: none !important; }
/* MENU CLASSIQUE remplacé par le menu fullscreen burger.
   Layout centré : LOGO GROS au top centre + burger centré juste en dessous. */
.ag-nav__list{ display: none !important; }
.ag-nav__cta-wrap, .ag-nav__cta, .ag-nav .ag-btn-gold{ display: none !important; }
.ag-nav__burger{ display: none !important; }
.ag-nav__inner{
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
/* Logo plus gros + centré */
.ag-nav__logo{
    margin: 0 auto !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
}
.ag-nav__logo-img{
    height: 64px !important;
    width: auto !important;
}
.ag-nav__logo-text{
    font-size: 1.5rem !important;
    letter-spacing: 6px !important;
    margin-top: 2px !important;
}
/* Quand scrollé, on compacte un peu */
.ag-nav.scrolled .ag-nav__logo-img{ height: 44px !important; }
.ag-nav.scrolled .ag-nav__logo-text{ font-size: 1.1rem !important; letter-spacing: 4px !important; }
/* BURGER repositionné CENTRÉ sous le logo (au lieu de top-right) */
.ag-fsm-toggle{
    position: fixed !important;
    top: auto !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    top: 96px !important;
    z-index: 100001 !important;
}
.ag-fsm-toggle:hover{ transform: translateX(-50%) scale(1.06) !important; }
.ag-nav.scrolled ~ .ag-fsm-toggle,
body.scrolled-nav .ag-fsm-toggle{ top: 72px !important; }
/* Adapte ag-nav pour laisser de la place au burger en dessous */
.ag-nav{ padding-bottom: 70px !important; }
.ag-nav.scrolled{ padding-bottom: 56px !important; }

@media (max-width: 768px){
    .ag-nav__logo-img{ height: 48px !important; }
    .ag-nav__logo-text{ font-size: 1.1rem !important; letter-spacing: 4px !important; }
    .ag-fsm-toggle{ top: 76px !important; width: 48px !important; height: 48px !important; }
    .ag-nav{ padding-bottom: 56px !important; }
}
/* État initial (haut de page) : très transparent + backdrop-blur subtil
   ⚠️ le thème toggle .scrolled DIRECTEMENT sur .ag-nav (cf main.js) */
.ag-nav:not(.scrolled){
    background: linear-gradient(180deg, rgba(10,10,15,.55) 0%, rgba(10,10,15,.2) 70%, transparent 100%) !important;
    backdrop-filter: blur(10px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
    box-shadow: none !important;
}
/* État scrollé : noir solide + blur + ombre champagne */
.ag-nav.scrolled{
    background: rgba(10,10,15,.92) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    box-shadow: 0 4px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(212,180,92,.1) !important;
}

/* Logo : micro-glow champagne */
.ag-nav__logo{ position:relative; transition: transform .3s ease; }
.ag-nav__logo:hover{ transform: translateY(-1px); }
.ag-nav__logo-img{ transition: filter .3s ease; }
.ag-nav__logo:hover .ag-nav__logo-img{ filter: drop-shadow(0 0 12px rgba(212,180,92,.5)); }
.ag-nav__logo-text{ transition: color .3s ease; }
.ag-nav__logo:hover .ag-nav__logo-text{ color:#D4B45C !important; }

/* Items menu : underline animé champagne sous chaque lien */
.ag-nav__list > li > a{ position:relative; transition: color .25s ease; }
.ag-nav__list > li > a::after{
    content:''; position:absolute; left:50%; bottom:0; width:0; height:2px;
    background: linear-gradient(90deg, transparent, #D4B45C, transparent);
    transition: width .35s cubic-bezier(.16,1,.3,1), left .35s cubic-bezier(.16,1,.3,1);
}
.ag-nav__list > li:hover > a::after,
.ag-nav__list > li.current-menu-item > a::after{
    width:100%; left:0;
}
.ag-nav__list > li:hover > a{ color:#D4B45C !important; }

/* Pulse pill "GRATUIT" plus vibrant */
.ag-nav__pulse-pill{
    animation: agPulsePill 2.2s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(34,197,94,.5);
}
@keyframes agPulsePill {
    0%,100%{ transform:scale(1); box-shadow:0 0 12px rgba(34,197,94,.5); }
    50%   { transform:scale(1.08); box-shadow:0 0 22px rgba(34,197,94,.85); }
}

/* Mega menu : slide-down élégant + backdrop-blur */
.ag-mega{
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    background: rgba(10,10,15,.95) !important;
    border-top: 1px solid rgba(212,180,92,.15);
    box-shadow: 0 24px 50px rgba(0,0,0,.5);
}

/* ── 2. HERO PAGES INTERNES — photo background ciné + titre élégant ── */
/* Cible uniquement les .ag-hero des pages NON-accueil (min-height:60vh
   les distingue du hero d'accueil qui est plus haut) */
body:not(.home) main > .ag-hero,
body:not(.home) .ag-hero[style*="60vh"]{
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}
/* Background photo via ::before — chaque page peut override avec --hero-photo */
body:not(.home) main > .ag-hero::before,
body:not(.home) .ag-hero[style*="60vh"]::before{
    content:'';
    position: absolute; inset:0;
    background-image: var(--hero-photo, url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&q=85'));
    background-size: cover;
    background-position: center;
    filter: brightness(.45) contrast(1.05) saturate(.9);
    transform: scale(1.06);
    transition: transform 8s ease-out, opacity .8s ease;
    z-index: -2;
    animation: agHeroZoom 18s ease-out infinite alternate;
}
@keyframes agHeroZoom {
    from { transform: scale(1.06); }
    to   { transform: scale(1.14); }
}
/* Vignette gradient pour profondeur + lisibilité */
body:not(.home) main > .ag-hero::after,
body:not(.home) .ag-hero[style*="60vh"]::after{
    content:'';
    position: absolute; inset:0;
    background:
        radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(0,0,0,.45) 100%),
        linear-gradient(180deg, rgba(10,10,15,.4) 0%, rgba(10,10,15,.1) 40%, rgba(10,10,15,.7) 100%);
    z-index: -1;
}

/* Tag pill : champagne avec glow */
body:not(.home) .ag-hero .ag-tag{
    display: inline-flex; align-items: center; gap:8px;
    padding: 8px 18px;
    background: rgba(212,180,92,.12);
    border: 1px solid rgba(212,180,92,.4);
    border-radius: 999px;
    color: #D4B45C !important;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    box-shadow: 0 0 24px rgba(212,180,92,.18);
    margin-bottom: 24px;
    animation: agTagFloat 4s ease-in-out infinite alternate;
}
@keyframes agTagFloat { from{transform:translateY(0)} to{transform:translateY(-3px)} }
body:not(.home) .ag-hero .ag-tag::before{
    content:'';
    width:6px; height:6px;
    background:#D4B45C;
    border-radius:50%;
    box-shadow: 0 0 8px #D4B45C;
    animation: agTagBlink 1.5s ease-in-out infinite;
}
@keyframes agTagBlink {
    0%,100%{ opacity:.4; transform:scale(.85); }
    50%   { opacity:1;  transform:scale(1.15); }
}

/* Titre H1 : serif élégant style Apple */
body:not(.home) .ag-hero .ag-hero__title{
    font-family: Georgia, 'Playfair Display', 'Times New Roman', serif !important;
    font-size: clamp(2.4rem, 6.5vw, 5.5rem) !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.025em !important;
    color: #fff !important;
    text-shadow: 0 4px 32px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.4);
    margin: 0 0 24px !important;
    max-width: 14ch;
}
body:not(.home) .ag-hero .ag-hero__title em{
    color: #D4B45C !important;
    font-style: italic;
    background: linear-gradient(135deg, #D4B45C 0%, #F37A1F 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    filter: drop-shadow(0 2px 12px rgba(212,180,92,.4));
}
body:not(.home) .ag-hero .ag-line{ display:block; }

/* Sous-titre */
body:not(.home) .ag-hero .ag-hero__sub{
    font-size: clamp(1rem, 1.4vw, 1.25rem) !important;
    color: rgba(255,255,255,.82) !important;
    line-height: 1.7 !important;
    max-width: 620px;
    margin: 0 auto !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.5);
}

/* Hero content : animation fade-in slide-up à l'entrée */
body:not(.home) .ag-hero .ag-hero__content{
    position: relative;
    z-index: 2;
    padding: 0 24px;
    animation: agHeroIn 1.2s cubic-bezier(.16,1,.3,1) both;
}
@keyframes agHeroIn {
    from{ opacity:0; transform:translateY(40px); }
    to  { opacity:1; transform:translateY(0); }
}

/* Indicateur scroll en bas du hero */
body:not(.home) .ag-hero::before{ pointer-events:none; }
body:not(.home) main > .ag-hero{ padding-bottom: 60px; }

/* ── Pages internes SANS hero (blog/articles, archives, recherche, pages
   qui commencent direct par .ag-section) : la 1re section doit passer SOUS
   le nav fixe (logo centre + burger a top:96px = ~155px de haut), sinon
   le titre est masque par le menu. ────────────────────────────────────── */
body:not(.home) main > .ag-section:first-child,
body.blog main > .ag-section:first-child,
body.archive main > .ag-section:first-child,
body.search main > .ag-section:first-child{
	padding-top: 200px !important;
}
@media (max-width: 768px){
	body:not(.home) main > .ag-section:first-child,
	body.blog main > .ag-section:first-child,
	body.archive main > .ag-section:first-child,
	body.search main > .ag-section:first-child{
		padding-top: 150px !important;
	}
}
@media (max-width: 480px){
	body:not(.home) main > .ag-section:first-child,
	body.blog main > .ag-section:first-child,
	body.archive main > .ag-section:first-child,
	body.search main > .ag-section:first-child{
		padding-top: 135px !important;
	}
}

/* Variables CSS par slug de page — overridables si tu veux changer l'image */
body.page-services .ag-hero{ --hero-photo: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920&q=85'); }
body.page-realisations .ag-hero{ --hero-photo: url('https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=1920&q=85'); }
body.page-apropos .ag-hero,
body.page-fondateur .ag-hero{ --hero-photo: url('https://images.unsplash.com/photo-1521737711867-e3b97375f902?w=1920&q=85'); }
body.page-rdv .ag-hero,
body.page-contact .ag-hero{ --hero-photo: url('https://images.unsplash.com/photo-1423666639041-f56000c27a9a?w=1920&q=85'); }
body.page-templates .ag-hero,
body[class*="wordpress-"] .ag-hero{ --hero-photo: url('https://images.unsplash.com/photo-1551434678-e076c223a692?w=1920&q=85'); }
body.page-blog .ag-hero,
body.blog .ag-hero{ --hero-photo: url('https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=1920&q=85'); }

/* Responsive */
@media (max-width: 768px){
    body:not(.home) .ag-hero .ag-hero__title{ font-size: clamp(2rem, 9vw, 3.2rem) !important; }
}
@media (prefers-reduced-motion: reduce){
    body:not(.home) .ag-hero::before{ animation:none; transform:none; }
    .ag-nav__pulse-pill, body:not(.home) .ag-hero .ag-tag, body:not(.home) .ag-hero .ag-tag::before{ animation:none; }
    body:not(.home) .ag-hero .ag-hero__content{ animation:none; }
}

/* =====================================================================
   D. CURSOR CUSTOM
   ===================================================================== */
html.ag-has-custom-cursor,
html.ag-has-custom-cursor body{ cursor:none; }
html.ag-has-custom-cursor a,
html.ag-has-custom-cursor button,
html.ag-has-custom-cursor input,
html.ag-has-custom-cursor textarea,
html.ag-has-custom-cursor [role=button]{ cursor:none !important; }

.ag-cursor{
    position:fixed; top:0; left:0;
    width:36px; height:36px;
    border:2px solid #D4B45C;
    border-radius:50%;
    pointer-events:none;
    z-index:2147483647;
    box-shadow: 0 0 12px rgba(212,180,92,.5), inset 0 0 8px rgba(212,180,92,.2);
    transition: width .25s cubic-bezier(.16,1,.3,1), height .25s cubic-bezier(.16,1,.3,1),
                background .25s ease, border-color .25s ease, opacity .25s ease;
    /* mix-blend-mode désactivé : rendait le cursor invisible sur fond noir */
    will-change: transform;
}
.ag-cursor-dot{
    position:fixed; top:0; left:0;
    width:6px; height:6px;
    background:#F37A1F;
    border-radius:50%;
    pointer-events:none;
    z-index:2147483647;
    box-shadow: 0 0 8px #F37A1F;
    /* mix-blend-mode désactivé : rendait le cursor invisible sur fond noir */
    will-change: transform;
}
.ag-cursor.is-hover{
    width:64px; height:64px;
    border-color: rgba(243,122,31,.9);
    background: rgba(243,122,31,.08);
    transform: translate3d(var(--cx,0), var(--cy,0), 0) scale(1);
}
.ag-cursor.is-hover ~ .ag-cursor-dot{ opacity:0; }

/* Quand le scroll-fx prend le focus, on désactive le mix-blend-mode pour visibilité */
.ag-fx-fixed .ag-cursor,
.ag-fx-fixed .ag-cursor-dot{ mix-blend-mode: normal; }

/* =====================================================================
   F. TEXT REVEAL SPLIT-WORDS
   ===================================================================== */
.ag-rv-mask{
    display:inline-block;
    overflow:hidden;
    vertical-align: bottom;
    line-height: 1.05;
}
.ag-rv-word{
    display:inline-block;
    transform: translate3d(0, 110%, 0) rotateZ(8deg);
    transition: transform .9s cubic-bezier(.16,1,.3,1), opacity .9s ease;
    opacity:0;
    will-change: transform, opacity;
}
.ag-rv-word.is-in{
    transform: translate3d(0,0,0) rotateZ(0);
    opacity:1;
}

/* =====================================================================
   C. CARDS TILT 3D — préparation (le JS applique le transform)
   ===================================================================== */
.ag-card, .ag-service-card, .ag-domaine-card,
.ag-realisation-card, .ag-team-card{
    transform-style: preserve-3d;
    will-change: transform;
}
/* Glow subtil au tilt (via shadow qui suit la souris en CSS pure pas possible
   sans JS, on met juste un boost de shadow général) */
.ag-card:hover, .ag-service-card:hover, .ag-domaine-card:hover,
.ag-realisation-card:hover, .ag-team-card:hover{
    box-shadow: 0 32px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(212,180,92,.2) !important;
}

/* =====================================================================
   MAGNETIC BUTTONS — préparation (le JS applique le translate)
   ===================================================================== */
.ag-btn-gold, .ag-btn-outline, [data-magnetic]{
    will-change: transform;
    display: inline-block;
}

/* Désactive cursor custom sur touch */
@media (hover: none) and (pointer: coarse){
    html.ag-has-custom-cursor,
    html.ag-has-custom-cursor body,
    html.ag-has-custom-cursor *{ cursor: auto !important; }
    .ag-cursor, .ag-cursor-dot{ display:none !important; }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
    .ag-rv-word{ opacity:1 !important; transform:none !important; }
    .ag-cursor, .ag-cursor-dot{ display:none !important; }
    html.ag-has-custom-cursor, html.ag-has-custom-cursor body, html.ag-has-custom-cursor *{ cursor:auto !important; }
}

/* =====================================================================
   SECTIONS ENRICHIES — toutes les pages (cards / process / faq / form)
   ===================================================================== */

/* CARDS LISTING : image zoom + gradient overlay au hover */
.ag-card img, .ag-service-card img, .ag-realisation-card img,
.ag-team-card__img img, .ag-mk-card__photo img{
    transition: transform .9s cubic-bezier(.16,1,.3,1), filter .5s ease;
    will-change: transform;
}
.ag-card:hover img, .ag-service-card:hover img, .ag-realisation-card:hover img,
.ag-team-card:hover .ag-team-card__img img,
.ag-mk-card:hover .ag-mk-card__photo img{
    transform: scale(1.08);
    filter: brightness(1.05) contrast(1.02);
}
.ag-card, .ag-service-card, .ag-realisation-card, .ag-team-card, .ag-mk-card{
    overflow: hidden;
    position: relative;
}

/* PROCESS STEPS : timeline + num qui glow au reveal */
.ag-pstep{ transition: transform .4s cubic-bezier(.16,1,.3,1); }
.ag-pstep__num{
    transition: transform .35s ease, color .35s ease, text-shadow .35s ease;
    will-change: transform;
}
.ag-pstep.is-revealed .ag-pstep__num{
    color: #D4B45C !important;
    text-shadow: 0 0 30px rgba(212,180,92,.55), 0 0 60px rgba(212,180,92,.25);
    transform: scale(1.08);
}
.ag-pstep.is-revealed .ag-pstep__title{
    background: linear-gradient(90deg, #D4B45C 0%, #F37A1F 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
@media (min-width: 900px){
    .ag-process__grid{ position: relative; }
    .ag-process__grid::before{
        content:''; position:absolute;
        top:5%; bottom:5%; left:50%;
        width:2px;
        background: linear-gradient(180deg, transparent 0%, rgba(212,180,92,.4) 50%, transparent 100%);
        transform: translateX(-1px);
        pointer-events: none; z-index: 0;
    }
}

/* STATS COUNT-UP */
.ag-metric__value, .ag-client__stat-value, .ag-gain-card__value, [data-count]{
    font-variant-numeric: tabular-nums;
    display: inline-block;
}
.ag-metric{ transition: transform .4s cubic-bezier(.16,1,.3,1); }
.ag-metric:hover{ transform: translateY(-4px); }

/* FAQ : icône qui rotate + slide ouverture */
.ag-faq__list details, .ag-faq-item{
    transition: background .25s ease, border-color .25s ease;
    border-radius: 10px;
}
.ag-faq__list details[open], .ag-faq-item[open]{
    background: rgba(212,180,92,.04);
    border-color: rgba(212,180,92,.25) !important;
}
.ag-faq__list details[open] summary, .ag-faq-item[open] .ag-faq-q{
    color: #D4B45C;
}
.ag-faq-icon{ transition: transform .35s cubic-bezier(.16,1,.3,1), background .25s ease; }
.ag-faq__list details[open] .ag-faq-icon,
.ag-faq-item[open] .ag-faq-icon{
    transform: rotate(45deg);
    background: rgba(212,180,92,.15) !important;
}

/* FORM CONTACT : floating labels Material-style */
.ag-form__group{ position: relative; margin-bottom: 24px; }
.ag-form__group input, .ag-form__group textarea, .ag-form__group select{
    width: 100%;
    padding: 22px 18px 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(212,180,92,.2);
    border-radius: 8px;
    color: #fff;
    font-size: 1rem;
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
    outline: none;
}
.ag-form__group input:focus, .ag-form__group textarea:focus, .ag-form__group select:focus{
    border-color: #D4B45C;
    background: rgba(212,180,92,.05);
    box-shadow: 0 0 0 3px rgba(212,180,92,.15);
}
.ag-form__group label{
    position: absolute;
    top: 18px; left: 18px;
    color: rgba(255,255,255,.5);
    font-size: 1rem;
    pointer-events: none;
    transition: top .2s ease, font-size .2s ease, color .2s ease;
}
.ag-form__group input:focus + label,
.ag-form__group textarea:focus + label,
.ag-form__group input:not(:placeholder-shown) + label,
.ag-form__group textarea:not(:placeholder-shown) + label{
    top: 6px;
    font-size: .72rem;
    color: #D4B45C;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
}

/* SECTION REVEAL au scroll */
.ag-revealed{ animation: agSectionIn .9s cubic-bezier(.16,1,.3,1) both; }
@keyframes agSectionIn{
    from{ opacity: 0; transform: translateY(40px); }
    to  { opacity: 1; transform: translateY(0); }
}

/* BOUTONS : shine effect au hover */
.ag-btn-gold, .ag-btn-outline{ position: relative; overflow: hidden; }
.ag-btn-gold::after, .ag-btn-outline::after{
    content:''; position:absolute;
    top:-50%; left:-100%;
    width: 40%; height: 200%;
    background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.25) 50%, transparent 100%);
    transform: rotate(-15deg);
    transition: left .9s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}
.ag-btn-gold:hover::after, .ag-btn-outline:hover::after{ left: 130%; }

/* TEAM CARDS : badge ville style passport */
.ag-team-card__city, .ag-mk-card__location{
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 10px;
    background: rgba(212,180,92,.1);
    border: 1px solid rgba(212,180,92,.3);
    border-radius: 999px;
    color: #D4B45C !important;
    font-size: .72rem !important;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 700;
}

/* HERO ACCUEIL : badge ping */
body.home .ag-hero__dot{
    animation: agHeroDotPulse 1.8s ease-in-out infinite;
}
@keyframes agHeroDotPulse{
    0%,100%{ box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
    50%   { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
}

@media (prefers-reduced-motion: reduce){
    .ag-revealed, .ag-pstep__num, .ag-pstep__title,
    .ag-btn-gold::after, .ag-btn-outline::after,
    body.home .ag-hero__dot{
        animation: none !important; transition: none !important;
    }
}

/* =====================================================================
   RÉALISATIONS — refonte stylée case-study cards
   ===================================================================== */
.ag-reals__grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 28px;
    margin-top: 50px;
}
.ag-rcard{
    position: relative;
    background: linear-gradient(180deg, #14141c 0%, #0a0a0f 100%);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(212,180,92,.12);
    transition: transform .5s cubic-bezier(.16,1,.3,1), border-color .35s ease, box-shadow .35s ease;
    isolation: isolate;
}
.ag-rcard::before{
    /* Halo champagne qui suit le hover via gradient */
    content:''; position:absolute; inset:-1px;
    background: linear-gradient(135deg, transparent 0%, rgba(212,180,92,.3) 50%, transparent 100%);
    border-radius: 20px;
    opacity: 0;
    transition: opacity .5s ease;
    z-index: -1;
}
.ag-rcard:hover{
    transform: translateY(-8px);
    border-color: rgba(212,180,92,.4);
    box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 60px rgba(212,180,92,.15);
}
.ag-rcard:hover::before{ opacity:1; }

.ag-rcard__img{
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #0a0a0f;
}
.ag-rcard__img img{
    width:100%; height:100%; object-fit: cover;
    transition: transform 1.2s cubic-bezier(.16,1,.3,1), filter .5s ease;
}
.ag-rcard:hover .ag-rcard__img img{
    transform: scale(1.1);
    filter: brightness(1.1) saturate(1.1);
}
.ag-rcard__img::after{
    content:''; position:absolute; inset:0;
    background: linear-gradient(180deg, transparent 40%, rgba(10,10,15,.95) 100%);
    pointer-events: none;
}
.ag-rcard__placeholder{
    position: absolute; inset:0;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; padding: 24px;
    background:
        radial-gradient(circle at 30% 30%, rgba(212,180,92,.15) 0%, transparent 50%),
        radial-gradient(circle at 70% 70%, rgba(243,122,31,.1) 0%, transparent 50%),
        linear-gradient(135deg, #1a1a2e 0%, #0a0a0f 100%);
}
.ag-rcard__placeholder-title{
    font-family: Georgia, serif;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    color: #D4B45C;
    letter-spacing: -0.01em;
}
.ag-rcard__placeholder-tags{
    font-size: .75rem; letter-spacing: 2px; text-transform: uppercase;
    color: rgba(255,255,255,.5); margin-top: 8px;
}

.ag-rcard__body{
    padding: 28px 28px 32px;
    position: relative;
}
.ag-rcard__tags{
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 14px;
}
.ag-rcard__tag{
    display: inline-block;
    padding: 4px 10px;
    background: rgba(212,180,92,.08);
    border: 1px solid rgba(212,180,92,.2);
    border-radius: 999px;
    color: #D4B45C;
    font-size: .7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
}
.ag-rcard__title{
    font-family: Georgia, 'Playfair Display', serif !important;
    font-size: clamp(1.4rem, 2.2vw, 1.9rem) !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 0 12px !important;
    line-height: 1.2 !important;
}
.ag-rcard__text{
    color: rgba(255,255,255,.7);
    font-size: .95rem;
    line-height: 1.65;
    margin: 0 0 20px;
}
.ag-rcard__stats{
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 14px 0;
    margin: 0 0 20px;
    border-top: 1px solid rgba(212,180,92,.1);
    border-bottom: 1px solid rgba(212,180,92,.1);
}
.ag-rcard__stat{
    flex: 1; min-width: 90px;
    text-align: center;
    padding: 4px 0;
    color: #D4B45C;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-shadow: 0 0 12px rgba(212,180,92,.3);
}
.ag-rcard__link{
    display: inline-flex; align-items: center; gap: 8px;
    color: #D4B45C;
    text-decoration: none;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: gap .3s ease, color .3s ease;
}
.ag-rcard__link:hover{ gap: 14px; color: #F37A1F; text-decoration: none; }

/* =====================================================================
   ÉQUIPE — Cards holographiques futuristes
   ===================================================================== */
.ag-team__grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 50px;
    perspective: 1500px;
}
.ag-team-card{
    position: relative;
    background:
        linear-gradient(180deg, rgba(20,20,28,.8) 0%, rgba(10,10,15,.95) 100%);
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(212,180,92,.15);
    transition: transform .55s cubic-bezier(.16,1,.3,1), border-color .35s ease, box-shadow .35s ease;
    isolation: isolate;
    backdrop-filter: blur(20px);
    transform-style: preserve-3d;
}
/* Aura holographique animée derrière */
.ag-team-card::before{
    content:''; position:absolute;
    top:-50%; left:-50%; width:200%; height:200%;
    background:
        conic-gradient(from 0deg at 50% 50%,
            transparent 0deg,
            rgba(212,180,92,.15) 90deg,
            rgba(243,122,31,.2) 180deg,
            rgba(212,180,92,.15) 270deg,
            transparent 360deg);
    animation: agTeamHolo 8s linear infinite;
    opacity: 0;
    transition: opacity .6s ease;
    z-index: -1;
}
@keyframes agTeamHolo {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.ag-team-card:hover::before{ opacity:1; }
.ag-team-card::after{
    /* Voile sombre intérieur qui révèle le halo */
    content:''; position:absolute; inset:1px;
    background: linear-gradient(180deg, rgba(20,20,28,.92) 0%, rgba(10,10,15,.98) 100%);
    border-radius: 17px;
    z-index: -1;
}
.ag-team-card:hover{
    transform: translateY(-10px);
    border-color: rgba(212,180,92,.6);
    box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 50px rgba(212,180,92,.2);
}

.ag-team-card__img{
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
}
.ag-team-card__img img{
    width:100%; height:100%; object-fit: cover;
    transition: transform 1s cubic-bezier(.16,1,.3,1), filter .5s ease;
    filter: grayscale(40%) contrast(1.05);
}
.ag-team-card:hover .ag-team-card__img img{
    transform: scale(1.08);
    filter: grayscale(0%) contrast(1.1) saturate(1.15);
}
.ag-team-card__placeholder{
    position: absolute; inset:0;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(circle at 30% 30%, rgba(212,180,92,.18) 0%, transparent 50%),
        linear-gradient(135deg, #1a1a2e 0%, #0a0a0f 100%);
    font-family: Georgia, serif;
    font-size: 6rem;
    font-weight: 700;
    color: #D4B45C;
    text-shadow: 0 0 40px rgba(212,180,92,.5);
}
.ag-team-card__img::after{
    /* Scan-line holographique au hover */
    content:''; position:absolute; left:0; right:0; height:2px;
    top: -10%;
    background: linear-gradient(90deg, transparent 0%, rgba(212,180,92,.8) 50%, transparent 100%);
    box-shadow: 0 0 20px rgba(212,180,92,.6);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}
.ag-team-card:hover .ag-team-card__img::after{
    opacity: 1;
    animation: agTeamScan 2s linear infinite;
}
@keyframes agTeamScan {
    from { top: -10%; }
    to   { top: 110%; }
}

.ag-team-card__body{
    padding: 24px 24px 28px;
    position: relative;
}
.ag-team-card__name{
    font-family: Georgia, 'Playfair Display', serif !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 0 6px !important;
}
.ag-team-card__role{
    display: block;
    color: #D4B45C !important;
    font-size: .82rem !important;
    letter-spacing: 2px !important;
    text-transform: uppercase;
    font-weight: 700 !important;
    margin-bottom: 12px;
}
.ag-team-card__desc{
    color: rgba(255,255,255,.7) !important;
    font-size: .9rem !important;
    line-height: 1.7 !important;
    margin: 14px 0 0 !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height .55s cubic-bezier(.16,1,.3,1), opacity .35s ease;
    opacity: 0;
}
.ag-team-card:hover .ag-team-card__desc{
    max-height: 400px;
    opacity: 1;
}
.ag-team-card__link{
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 16px;
    color: #D4B45C !important;
    font-size: .8rem !important;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: gap .3s ease;
}
.ag-team-card__link:hover{ gap: 12px; color: #F37A1F !important; text-decoration: none; }

@media (prefers-reduced-motion: reduce){
    .ag-team-card::before, .ag-team-card__img::after{
        animation: none !important; opacity:0 !important;
    }
    .ag-team-card__desc{ max-height: 400px !important; opacity: 1 !important; }
}

/* =====================================================================
   SVG ICÔNES SERVICES — remplace emojis pour look pro
   ===================================================================== */
.ag-scard__icon--svg{
	width: 56px; height: 56px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(212,180,92,.12) 0%, rgba(243,122,31,.08) 100%);
	border: 1px solid rgba(212,180,92,.25);
	color: #D4B45C;
	margin-bottom: 18px;
	transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .35s ease, box-shadow .35s ease;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.ag-scard__icon--svg svg{ width: 28px; height: 28px; }
.ag-scard:hover .ag-scard__icon--svg{
	transform: rotate(-4deg) scale(1.08);
	border-color: rgba(212,180,92,.6);
	box-shadow: 0 8px 24px rgba(212,180,92,.25), inset 0 1px 0 rgba(255,255,255,.1);
	color: #F37A1F;
}

/* =====================================================================
   BACK-TO-TOP refondu — bouton circulaire avec progress ring scroll
   ===================================================================== */
.ag-totop{
	position: fixed; bottom: 30px; right: 30px;
	z-index: 9990;
	width: 56px; height: 56px;
	background: linear-gradient(135deg, rgba(20,20,28,.85) 0%, rgba(10,10,15,.95) 100%) !important;
	border: 1.5px solid rgba(212,180,92,.4) !important;
	border-radius: 50% !important;
	color: #D4B45C !important;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px) scale(.9);
	transition: opacity .4s ease, visibility .4s ease, transform .4s cubic-bezier(.16,1,.3,1), border-color .3s ease, box-shadow .3s ease;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	display: flex; align-items: center; justify-content: center;
	font-size: 0 !important; /* hide original ↑ text */
	box-shadow: 0 8px 30px rgba(0,0,0,.35);
	overflow: visible;
}
.ag-totop.visible{
	opacity: 1; visibility: visible;
	transform: translateY(0) scale(1);
}
.ag-totop:hover{
	border-color: #D4B45C !important;
	box-shadow: 0 12px 40px rgba(212,180,92,.4), 0 0 30px rgba(212,180,92,.3);
	transform: translateY(-3px) scale(1.05);
}
/* Conic ring qui se trace selon scroll */
.ag-totop::before{
	content: '';
	position: absolute; inset: -3px;
	border-radius: 50%;
	background: conic-gradient(from -90deg, #D4B45C 0%, #F37A1F var(--scroll, 0%), transparent var(--scroll, 0%));
	mask: radial-gradient(circle, transparent 27px, #000 28.5px);
	-webkit-mask: radial-gradient(circle, transparent 27px, #000 28.5px);
	transition: opacity .3s ease;
	opacity: .9;
}
/* Arrow SVG en pseudo-element */
.ag-totop::after{
	content: '';
	width: 18px; height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 4l-7 7h4v9h6v-9h4z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 4l-7 7h4v9h6v-9h4z'/%3E%3C/svg%3E") center/contain no-repeat;
	transition: transform .3s ease;
	z-index: 2;
}
.ag-totop:hover::after{ transform: translateY(-2px); }

/* =====================================================================
   FALLBACK : tilt 3D sur cartes était parfois "saccadé" — désactivation
   conditionnelle si le device est slow (chrome battery saver, mobile…)
   ===================================================================== */
@media (max-width: 1280px), (hover: none){
	.ag-card, .ag-service-card, .ag-domaine-card,
	.ag-realisation-card, .ag-team-card, .ag-mk-card,
	.ag-scard{
		transform: none !important;
	}
}