/* ============================================================
   ACERDC — Thème : typographie, en-tête, pied de page, animations
   Chargé après style.css. Ne modifie pas la feuille d'origine.
   ============================================================ */

:root{
  --font-titre: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-texte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --transition: .32s cubic-bezier(.22,.61,.36,1);
  --ombre-douce: 0 10px 30px rgba(6,20,95,.08);
  --ombre-forte: 0 24px 60px rgba(6,20,95,.18);
}

/* ============================================================
   1. TYPOGRAPHIE
   ============================================================ */
body{
  font-family: var(--font-texte);
  font-size: 1.02rem;
  line-height: 1.72;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,h2,h3,h4,h5,.brand,.eyebrow,.btn,.stat strong{ font-family: var(--font-titre); }

h1,h2,h3{ letter-spacing:-.02em; word-spacing:.06em; line-height:1.14; }

/* Tailles fluides : s'adaptent sans rupture entre mobile et écran large */
.hero h1        { font-size: clamp(1.95rem, 6vw, 3.7rem); font-weight: 800; word-spacing:.08em; }
.page-hero h1   { font-size: clamp(1.85rem, 5vw, 3rem);      font-weight: 800; }
.section-title h2, .content h2, .feature h2 { font-size: clamp(1.5rem, 3.1vw, 2.3rem); font-weight: 800; }
h3              { font-size: clamp(1.12rem, 1.9vw, 1.38rem); font-weight: 700; }

.hero p, .page-hero p{ font-size: clamp(1rem, 1.5vw, 1.14rem); line-height:1.7; opacity:.95; }
.section-title p    { font-size: clamp(.98rem, 1.4vw, 1.08rem); }

.eyebrow{ letter-spacing:.14em; font-weight:800; font-size:.76rem; text-transform:uppercase; }

p{ max-width: 72ch; }
.muted{ color: var(--muted); }

/* Chiffres alignés dans les statistiques */
.stat strong, .hero-stats strong{ font-variant-numeric: tabular-nums; }

/* ============================================================
   2. EN-TÊTE — logo à gauche, ACERDC au centre, menu à droite
   ============================================================ */
.site-header .nav{ position: relative; }

.brand{ font-family: var(--font-titre); font-weight: 800; letter-spacing:-.02em; }
.brand img{ transition: transform var(--transition); }
.brand:hover img{ transform: scale(1.06) rotate(-3deg); }

/* Soulignement animé des liens du menu */
.menu a{ position: relative; transition: color var(--transition), background var(--transition); }
.menu a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:5px; height:2px;
  background: var(--gold); border-radius:2px;
  transform: scaleX(0); transform-origin: center; transition: transform var(--transition);
}
.menu a:hover::after, .menu a.active::after{ transform: scaleX(1); }

/* ============================================================
   3. BOUTONS
   ============================================================ */
.btn{
  position: relative; overflow: hidden;
  font-weight: 800; letter-spacing:-.01em;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.btn:hover{ transform: translateY(-2px); box-shadow: var(--ombre-forte); }
.btn:active{ transform: translateY(0); }

/* Reflet qui traverse le bouton au survol */
.btn::before{
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform: skewX(-18deg); transition: left .65s ease;
}
.btn:hover::before{ left:140%; }

/* ============================================================
   4. CARTES ET IMAGES
   ============================================================ */
.card, .content, .pay-method, .contact-card{
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover{ transform: translateY(-5px); box-shadow: var(--ombre-forte); }

.card .icon{ transition: transform var(--transition); }
.card:hover .icon{ transform: scale(1.14) translateY(-2px); }

.media-card, .cover-img{ overflow: hidden; }
.media-card img, .cover-img img, .gallery img{
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.media-card:hover img, .cover-img:hover img, .gallery a:hover img{ transform: scale(1.06); }

/* ============================================================
   5. APPARITION AU DÉFILEMENT
   ============================================================ */
 /* Sans JavaScript le contenu s'affiche normalement : l'animation
    n'est activée que si le marqueur « js » est posé. */
.reveal{ opacity: 1; transform: none; }
html.js .reveal{
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
html.js .reveal.show{ opacity: 1; transform: none; }

/* Décalage progressif : les cartes d'une même rangée arrivent l'une après l'autre */
html.js .grid-3 .reveal:nth-child(2), html.js .grid-2 .reveal:nth-child(2){ transition-delay: .1s; }
html.js .grid-3 .reveal:nth-child(3){ transition-delay: .2s; }
html.js .grid-3 .reveal:nth-child(4){ transition-delay: .3s; }

/* Entrée de la bannière au chargement */
@keyframes acerdcMonte{ from{ opacity:0; transform: translateY(24px); } to{ opacity:1; transform:none; } }
.hero-card > *{ animation: acerdcMonte .8s cubic-bezier(.22,.61,.36,1) both; }
.hero-card > *:nth-child(1){ animation-delay:.05s; }
.hero-card > *:nth-child(2){ animation-delay:.16s; }
.hero-card > *:nth-child(3){ animation-delay:.27s; }
.hero-card > *:nth-child(4){ animation-delay:.38s; }
.hero-card > *:nth-child(5){ animation-delay:.49s; }

/* ============================================================
   6. PIED DE PAGE
   ============================================================ */
.site-footer{
  background:
    radial-gradient(1100px 420px at 12% -12%, rgba(255,213,0,.11), transparent 62%),
    linear-gradient(175deg, #08174d 0%, #030b36 45%, #020829 100%);
  background-color:#030b36;
  padding: 64px 0 0;
  margin-top: 84px;
  position: relative;
}
/* Liseré doré en haut du pied de page */
.site-footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--gold), var(--gold2), var(--blue2), var(--gold));
}

.footer-grid{ grid-template-columns: 1.5fr 1fr 1fr 1.15fr; gap: 40px; }
@media (max-width: 1024px){ .footer-grid{ grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 620px){ .footer-grid{ grid-template-columns: 1fr; gap: 28px; } }

.site-footer strong{
  font-family: var(--font-titre);
  display:block; margin-bottom:14px;
  font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; position:relative; padding-bottom:12px;
}
.site-footer strong::after{
  content:""; position:absolute; left:0; bottom:0; width:34px; height:2px;
  background: var(--gold); border-radius:2px;
  transition: width var(--transition);
}
.site-footer > .container > .footer-grid > div:hover strong::after{ width:56px; }

.site-footer p{ color: rgba(255,255,255,.7); font-size:.96rem; max-width:38ch; }

.site-footer a{
  color: rgba(255,255,255,.74);
  margin: 0; padding: 7px 0 7px 0;
  font-size:.95rem;
  position: relative;
  transition: color var(--transition), padding-left var(--transition);
}
.site-footer a::before{
  content:"›"; position:absolute; left:0; opacity:0;
  color: var(--gold); font-weight:800;
  transition: opacity var(--transition), transform var(--transition);
  transform: translateX(-6px);
}
.site-footer a:hover{ color:#fff; padding-left:16px; }
.site-footer a:hover::before{ opacity:1; transform: translateX(0); }

.footer-logo{ gap:14px; margin-bottom:16px; align-items:center; }
.footer-logo img{
  width:60px; height:60px; padding:6px; object-fit:contain;
  background:#fff; border-radius:16px;
  box-shadow: 0 10px 26px rgba(0,0,0,.32);
  transition: transform var(--transition);
}
.footer-logo:hover img{ transform: rotate(-4deg) scale(1.05); }
.footer-logo strong{
  margin:0; padding:0; font-size:1.22rem; letter-spacing:-.02em; text-transform:none;
}
.footer-logo strong::after{ display:none; }

/* Barre de bas de page */
.footer-bottom{
  margin-top:52px; padding:20px 0 24px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:12px 24px;
  align-items:center; justify-content:space-between;
  color: rgba(255,255,255,.6); font-size:.88rem;
}
.footer-bottom a{ display:inline-block; padding:0; }
.footer-bottom a:hover{ padding-left:0; }
.footer-bottom a::before{ display:none; }
.footer-bottom .footer-liens{ display:flex; gap:20px; flex-wrap:wrap; }

/* Bloc de contact du pied de page */
.footer-contact-item{
  display:flex; align-items:center; gap:12px;
  padding:9px 0; color:rgba(255,255,255,.74);
  transition: color var(--transition);
}
.footer-contact-item:hover{ color:#fff; }
.footer-contact-item span[aria-hidden]{
  width:34px; height:34px; flex:0 0 34px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.08); border-radius:11px;
  transition: background var(--transition), transform var(--transition);
}
.footer-contact-item:hover span[aria-hidden]{ background:var(--gold); transform:scale(1.08); }
.footer-contact-item::before{ display:none; }
.footer-contact-item:hover{ padding-left:0; }

/* ============================================================
   7. FORMULAIRES
   ============================================================ */
input, select, textarea{
  font-family: var(--font-texte);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--blue2);
  box-shadow: 0 0 0 4px rgba(10,44,141,.12);
}

/* Message de confirmation qui apparaît en douceur */
.pro-alert{ animation: acerdcMonte .5s cubic-bezier(.22,.61,.36,1) both; }

/* En-tête : ombre portée au défilement */
.site-header{ transition: box-shadow var(--transition), background var(--transition); }
.site-header.scrolled{ box-shadow: 0 6px 28px rgba(6,20,95,.10); background: rgba(255,255,255,.97); }