/* ============================================================
   DEWI — VARIABLES (adaptées EriFaye Média)
============================================================ */
:root {
  --default-font: "Roboto", system-ui, sans-serif;
  --heading-font: "Raleway", sans-serif;
  --nav-font: "Inter", sans-serif;

  /* Couleurs globales */
  --background-color: #ffffff;
  --default-color: #444444;
  --heading-color: #1a1a2e;
  --accent-color: #e8251a;          /* Rouge EriFaye */
  --surface-color: #ffffff;
  --contrast-color: #ffffff;

  /* Nav */
  --nav-color: #e5eaee;
  --nav-hover-color: #e8251a;
  --nav-mobile-background-color: #ffffff;
  --nav-dropdown-background-color: #ffffff;
  --nav-dropdown-color: #444444;
  --nav-dropdown-hover-color: #e8251a;
}

.light-background {
  --background-color: #f1f4fa;
  --surface-color: #ffffff;
  --default-color: #444444;
  --heading-color: #1a1a2e;
}

.dark-background {
  --background-color: #080d10;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #1c2830;
  --contrast-color: #ffffff;
}

:root { scroll-behavior: smooth; }

/* ============================================================
   BASE
============================================================ */
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a { color: var(--accent-color); text-decoration: none; transition: .3s; }
a:hover { color: color-mix(in srgb, var(--accent-color), transparent 25%); }
h1,h2,h3,h4,h5,h6 { color: var(--heading-color); font-family: var(--heading-font); }

/* PHP-email-form states */
.php-email-form .error-message  { display:none; background:#df1529; color:#fff; text-align:left; padding:15px; margin-bottom:24px; font-weight:600; }
.php-email-form .sent-message   { display:none; color:#fff; background:#059652; text-align:center; padding:15px; margin-bottom:24px; font-weight:600; }
.php-email-form .loading        { display:none; background:var(--surface-color); text-align:center; padding:15px; margin-bottom:24px; }
.php-email-form .loading:before { content:""; display:inline-block; border-radius:50%; width:24px; height:24px; margin:0 10px -6px 0; border:3px solid var(--accent-color); border-top-color:var(--surface-color); animation:loading-spin 1s linear infinite; }
@keyframes loading-spin { to { transform:rotate(360deg); } }

/* Altcha widget — personnalisation */
altcha-widget { --altcha-border-radius:6px; --altcha-color-border:color-mix(in srgb,var(--default-color),transparent 75%); --altcha-color-border-focus:var(--accent-color); --altcha-color-base:var(--surface-color); --altcha-color-text:var(--default-color); --altcha-color-text-secondary:color-mix(in srgb,var(--default-color),transparent 45%); --altcha-color-brand:var(--accent-color); display:block; width:100%; }
altcha-widget.altcha-error { --altcha-color-border:var(--accent-color); }

/* ============================================================
   HEADER
============================================================ */
.header {
  --background-color: rgba(0,0,0,0);
  --default-color: #ffffff;
  --heading-color: #ffffff;
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 20px 0;
  transition: background-color .5s, box-shadow .5s, border-color .5s, backdrop-filter .5s;
  z-index: 997;
}
.header .logo h1 { font-size: 28px; margin: 0; font-weight: 800; color: var(--heading-color); font-family: var(--heading-font); text-transform: uppercase; letter-spacing: 1px; }
.header .logo h1 span { color: var(--accent-color); }
.header .logo p { margin: 0; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.5); font-family: var(--nav-font); }
.header .cta-btn, .header .cta-btn:focus { color: var(--contrast-color); font-size: 13px; padding: 7px 25px; margin: 0 0 0 30px; border-radius: 4px; transition: .3s; text-transform: uppercase; border: 2px solid var(--contrast-color); font-family: var(--nav-font); font-weight: 600; letter-spacing: 1px; }
.header .cta-btn:hover { color: var(--contrast-color); background: var(--accent-color); border-color: var(--accent-color); }

.scrolled .header {
  box-shadow: 0 0 18px rgba(0,0,0,.25);
  border-bottom: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  --background-color: rgba(8,13,16,.75);
}

/* ============================================================
   NAVIGATION
============================================================ */
/* Navmenu — voir responsive.css */

/* ============================================================
   FOOTER
============================================================ */
.footer { color:var(--default-color); background-color:var(--background-color); font-size:14px; }
.footer .footer-top { padding-top:50px; border-top:1px solid color-mix(in srgb, var(--default-color), transparent 90%); }
.footer .footer-about .logo { line-height:1; margin-bottom:25px; }
.footer .footer-about .logo span { font-size:24px; font-weight:800; letter-spacing:1px; font-family:var(--heading-font); color:#fff; }
.footer .footer-about .logo span em { color:var(--accent-color); font-style:normal; }
.footer .footer-about p { font-size:14px; font-family:var(--heading-font); color:rgba(255,255,255,.6); }
.footer .social-links a { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; border:1px solid color-mix(in srgb, var(--default-color), transparent 50%); font-size:16px; color:color-mix(in srgb, var(--default-color), transparent 30%); margin-right:10px; transition:.3s; }
.footer .social-links a:hover { color:var(--accent-color); border-color:var(--accent-color); }
.footer h4 { font-size:16px; font-weight:bold; padding-bottom:12px; color:#fff; }
.footer .footer-links ul { list-style:none; padding:0; margin:0; }
.footer .footer-links ul i { padding-right:3px; font-size:13px; line-height:0; color:var(--accent-color); }
.footer .footer-links ul li { padding:10px 0; display:flex; align-items:center; }
.footer .footer-links ul li:first-child { padding-top:0; }
.footer .footer-links ul a { color:color-mix(in srgb, var(--default-color), transparent 30%); line-height:1; }
.footer .footer-links ul a:hover { color:var(--accent-color); }
.footer .footer-contact p { margin-bottom:5px; color:rgba(255,255,255,.6); }
.footer .copyright { padding:25px 0; border-top:1px solid color-mix(in srgb, var(--default-color), transparent 90%); }
.footer .copyright p { margin-bottom:0; }
.footer .credits { margin-top:6px; font-size:13px; }

/* ============================================================
   PRELOADER & SCROLL TOP
============================================================ */
#preloader { position:fixed; inset:0; z-index:999999; overflow:hidden; background:#080d10; transition:all .6s ease-out; }
#preloader:before { content:""; position:fixed; top:calc(50% - 30px); left:calc(50% - 30px); border:6px solid transparent; border-color:var(--accent-color) transparent var(--accent-color) transparent; border-radius:50%; width:60px; height:60px; animation:animate-preloader 1.5s linear infinite; }
@keyframes animate-preloader { to { transform:rotate(360deg); } }

.scroll-top { position:fixed; visibility:hidden; opacity:0; right:15px; bottom:15px; z-index:99999; background-color:var(--accent-color); width:40px; height:40px; border-radius:4px; transition:all .4s; color:#fff; display:flex; align-items:center; justify-content:center; }
.scroll-top i { font-size:24px; }
.scroll-top:hover { background-color:color-mix(in srgb, var(--accent-color), transparent 20%); color:#fff; }
.scroll-top.active { visibility:visible; opacity:1; }

/* AOS delays mobile — voir responsive.css */

/* ============================================================
   SECTIONS GLOBALS
============================================================ */
section, .section { color:var(--default-color); background-color:var(--background-color); padding:60px 0; overflow:clip; }

.section-title { padding-bottom:60px; position:relative; }
.section-title h2 { font-size:14px; font-weight:500; padding:0; line-height:1px; margin:0; letter-spacing:1.5px; text-transform:uppercase; color:color-mix(in srgb, var(--default-color), transparent 50%); position:relative; }
.section-title h2::after { content:""; width:120px; height:1px; display:inline-block; background:var(--accent-color); margin:4px 10px; }
.section-title p { color:var(--heading-color); margin:0; font-size:36px; font-weight:800; text-transform:uppercase; font-family:var(--heading-font); }
/* section-title mobile — voir responsive.css */

/* ============================================================
   HERO
============================================================ */
.hero { width:100%; min-height:100vh; position:relative; padding:80px 0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hero-diagonal-bg { position:absolute; inset:0; background:linear-gradient(135deg, #080d10 0%, #0f1923 40%, #1a0505 100%); z-index:0; }
.hero-team-bg { position:absolute; inset:0; background:url('../img/section_heros/TeamTV-section-hero.webp') no-repeat center bottom / cover; opacity:.18; mix-blend-mode:luminosity; z-index:1; pointer-events:none; }
#heroParticles { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; display:block; }
/* heroParticles mobile — voir responsive.css */
.hero-dot { color:var(--accent-color); }
.hero-streak { position:absolute; width:1px; height:180%; background:linear-gradient(to bottom, transparent 0%, rgba(255,255,255,.06) 40%, rgba(255,255,255,.03) 60%, transparent 100%); transform:rotate(-28deg); z-index:2; }
.hero-streak:nth-child(2) { left:18%; }
.hero-streak:nth-child(3) { left:36%; width:2px; opacity:.4; }
.hero-streak:nth-child(4) { left:54%; }
.hero-streak:nth-child(5) { left:72%; width:2px; opacity:.3; }
.hero-streak:nth-child(6) { left:88%; }
.hero .container { position:relative; z-index:3; }
.hero h2 { margin:0; font-size:58px; font-weight:900; text-transform:uppercase; letter-spacing:2px; }
.hero h2 span { color:var(--accent-color); }
.hero p { color:color-mix(in srgb, var(--default-color), transparent 20%); margin:15px 0 0 0; font-size:20px; font-weight:300; max-width:580px; }
.hero .btn-get-started { background:var(--accent-color); color:var(--contrast-color); font-weight:600; font-size:14px; letter-spacing:1.5px; display:inline-block; padding:12px 36px; border-radius:4px; transition:.3s; text-transform:uppercase; font-family:var(--nav-font); }
.hero .btn-get-started:hover { background:color-mix(in srgb, var(--accent-color), transparent 15%); transform:translateY(-2px); box-shadow:0 8px 24px rgba(232,37,26,.35); }
.hero .btn-outline-hero { font-size:14px; font-weight:600; letter-spacing:1.5px; display:inline-block; padding:12px 36px; border-radius:4px; transition:.3s; text-transform:uppercase; font-family:var(--nav-font); border:2px solid rgba(255,255,255,.3); color:#fff; }
.hero .btn-outline-hero:hover { border-color:#fff; background:rgba(255,255,255,.08); color:#fff; }
.hero-badge { display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:50px; padding:.3rem 1rem; font-family:var(--nav-font); font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:1.25rem; }
.hero-badge span { background:var(--accent-color); color:#fff; border-radius:50px; padding:.12rem .55rem; font-size:.68rem; }
.hero-stats { border-top:1px solid rgba(255,255,255,.1); margin-top:3rem; padding-top:2rem; }
.hero-stat-val { font-family:var(--heading-font); font-size:clamp(2rem,4vw,3rem); font-weight:900; color:#fff; line-height:1; }
.hero-stat-val span { color:var(--accent-color); }
.hero-stat-label { font-family:var(--nav-font); font-size:.7rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-top:.25rem; }
.hero-stat-sep { width:1px; height:40px; background:rgba(255,255,255,.1); }
/* Hero mobile — voir responsive.css */

/* ============================================================
   PARTENAIRES — Carrousel marquee
============================================================ */
.partenaires-section { padding:60px 0; background:#eef0f3; }
.partenaires-section .section-title h2 { color:color-mix(in srgb,#555,transparent 20%); }
.partenaires-section .section-title p { color:#1a1a2e; }
.partners-marquee-wrap { overflow:hidden; width:100%; -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%); mask-image:linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%); }
.partners-track { display:flex; gap:64px; align-items:center; width:max-content; will-change:transform; }
.partners-track img { height:52px; width:auto; max-width:140px; object-fit:contain; filter:grayscale(1) brightness(.65); opacity:.65; transition:filter .35s,opacity .35s,transform .25s; cursor:pointer; flex-shrink:0; }
.partners-track img:hover { filter:grayscale(0) brightness(1); opacity:1; transform:scale(1.08); }

/* ============================================================
   ABOUT
============================================================ */
.about h3 { font-weight:700; font-size:28px; margin-bottom:20px; }
.about .content ul { list-style:none; padding:0; }
.about .content ul li { padding:0 0 12px 30px; position:relative; }
.about .content ul i { position:absolute; font-size:20px; left:0; top:-3px; color:var(--accent-color); }

/* ============================================================
   STATS
============================================================ */
.stats .stats-item { background-color:var(--surface-color); box-shadow:0 0 30px rgba(0,0,0,.1); padding:30px; }
.stats .stats-item i { color:var(--accent-color); font-size:42px; line-height:0; margin-right:20px; }
.stats .stats-item span { color:var(--heading-color); font-size:36px; display:block; font-weight:700; font-family:var(--heading-font); }
.stats .stats-item p { padding:0; margin:0; font-family:var(--heading-font); font-size:16px; }

/* ============================================================
   SERVICES (Nos Chaînes)
============================================================ */
.services .img { border-radius:8px; overflow:hidden; }
.services .img img { transition:.6s; width:100%; height:220px; object-fit:cover; }
.services .img img.logo-chaine { object-fit:contain; background:#ffffff; padding:10px; height:200px; }
.services .details { background:var(--surface-color); padding:50px 30px; margin:-60px 30px 0 30px; transition:all ease-in-out .3s; position:relative; text-align:center; border-radius:8px; box-shadow:0 0 25px rgba(0,0,0,.12); }
.services .details .icon { margin:0; width:72px; height:72px; background:var(--accent-color); color:var(--contrast-color); border:6px solid var(--contrast-color); border-radius:50px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; font-size:28px; transition:ease-in-out .3s; position:absolute; top:-36px; left:calc(50% - 36px); }
.services .details h3 { font-weight:700; margin:10px 0 15px; font-size:22px; transition:ease-in-out .3s; }
.services .details p { color:color-mix(in srgb, var(--default-color), transparent 15%); line-height:24px; font-size:14px; margin-bottom:0; }
.services .service-item:hover .details h3 { color:var(--accent-color); }
.services .service-item:hover .details .icon { background:var(--surface-color); border:2px solid var(--accent-color); }
.services .service-item:hover .details .icon i { color:var(--accent-color); }
.services .service-item:hover .img img { transform:scale(1.05); }
.services .service-item:hover .img img.logo-chaine { transform:scale(1.12); }

/* Channel stats pills */
.channel-pills { margin-top:1rem; display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; }
.channel-pill { display:inline-flex; align-items:center; gap:.3rem; background:color-mix(in srgb, var(--accent-color), transparent 90%); border:1px solid color-mix(in srgb, var(--accent-color), transparent 75%); border-radius:50px; padding:.25rem .7rem; font-size:.7rem; font-weight:600; color:var(--default-color); font-family:var(--nav-font); letter-spacing:.05em; }
.channel-pill i { color:var(--accent-color); font-size:.75rem; }

/* ============================================================
   FEATURES (Vision & Mission)
============================================================ */
.features .nav-tabs { border:0; }
.features .nav-link { background-color:var(--surface-color); color:var(--heading-color); border:1px solid color-mix(in srgb, var(--default-color), transparent 85%); padding:15px 20px; transition:.3s; border-radius:0; display:flex; align-items:center; justify-content:center; cursor:pointer; height:100%; }
.features .nav-link i { padding-right:15px; font-size:42px; }
.features .nav-link h4 { font-size:16px; font-weight:600; margin:0; }
.features .nav-link:hover { color:var(--accent-color); border-color:var(--accent-color); }
.features .nav-link.active { background:var(--accent-color); color:var(--contrast-color); border-color:var(--accent-color); }
.features .nav-link.active h4 { color:var(--contrast-color); }
.features .tab-content { margin-top:30px; }
.features .tab-pane h3 { font-weight:700; font-size:26px; }
.features .tab-pane ul { list-style:none; padding:0; }
.features .tab-pane ul li { padding-bottom:10px; }
.features .tab-pane ul i { font-size:20px; padding-right:4px; color:var(--accent-color); }
/* Features nav-link mobile — voir responsive.css */

/* ============================================================
   SERVICES-2 (Stratégie)
============================================================ */
.services-2 .service-item { background-color:var(--surface-color); padding:30px; border:1px solid color-mix(in srgb, var(--default-color), transparent 85%); transition:.3s; }
.services-2 .service-item .icon { font-size:36px; line-height:0; margin-right:30px; color:var(--accent-color); }
.services-2 .service-item .title { font-weight:700; margin-bottom:15px; font-size:18px; }
.services-2 .service-item .title a { color:var(--heading-color); }
.services-2 .service-item .description { line-height:24px; font-size:14px; margin:0; }
.services-2 .service-item:hover { border-color:var(--accent-color); }
.services-2 .service-item:hover .title a { color:var(--accent-color); }

/* ============================================================
   PRICING (Packs de Communication)
============================================================ */
.pricing .pricing-item { background-color:var(--surface-color); box-shadow:0 3px 20px rgba(0,0,0,.08); padding:40px 30px; position:relative; border-radius:8px; border:1px solid color-mix(in srgb, var(--default-color), transparent 90%); transition:.3s; height:100%; }
.pricing .pricing-item h3 { font-weight:700; font-size:22px; margin-bottom:5px; color:var(--heading-color); }
.pricing .pricing-item .icon { margin:30px auto 20px; width:70px; height:70px; background:var(--accent-color); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:.3s; }
.pricing .pricing-item .icon i { color:#fff; font-size:28px; line-height:0; }
.pricing .pricing-item h4 { font-size:42px; color:var(--heading-color); font-weight:700; font-family:var(--heading-font); margin-bottom:0; }
.pricing .pricing-item h4 sup { font-size:24px; position:relative; top:-15px; font-weight:600; }
.pricing .pricing-item h4 span { color:color-mix(in srgb, var(--default-color), transparent 40%); font-size:16px; font-weight:400; }
.pricing .pricing-item ul { padding:20px 0; list-style:none; text-align:left; line-height:20px; }
.pricing .pricing-item ul li { padding:10px 0; border-bottom:1px dashed color-mix(in srgb, var(--default-color), transparent 85%); }
.pricing .pricing-item ul i { color:var(--accent-color); font-size:24px; padding-right:4px; }
.pricing .pricing-item ul .na { color:color-mix(in srgb, var(--default-color), transparent 50%); text-decoration:line-through; }
.pricing .pricing-item ul .na i, .pricing .pricing-item ul .na span { color:color-mix(in srgb, var(--default-color), transparent 50%); }
.pricing .btn-buy { background:var(--accent-color); color:#fff; display:inline-block; padding:12px 36px; border-radius:4px; transition:.3s; font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:1px; font-family:var(--nav-font); }
.pricing .btn-buy:hover { background:color-mix(in srgb, var(--accent-color), transparent 15%); transform:translateY(-2px); }
.pricing .featured { border:2px solid var(--accent-color); }
.pricing .featured .icon { background:var(--accent-color); }
.pricing .featured-badge { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--accent-color); color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; padding:.3rem 1.2rem; border-radius:50px; white-space:nowrap; font-family:var(--nav-font); }
.pricing .pack-or { border-color:rgba(201,164,50,.5); }
.pricing .pack-or .icon { background:linear-gradient(135deg,#c9a432,#e8c84a); }
.pricing .pack-or h4 { color:#c9a432; }
.pricing .pack-diamond { border-color:rgba(142,202,230,.5); }
.pricing .pack-diamond .icon { background:linear-gradient(135deg,#5aafcf,#8ecae6); }
.pricing .pack-diamond h4 { color:#5aafcf; }
.pricing .pack-diamond .btn-buy { background:#5aafcf; }
.pricing .pack-diamond .btn-buy:hover { background:#4a9dbf; }

/* ============================================================
   TEAM (Management)
============================================================ */
.team .member { position:relative; }
.team .member .pic { overflow:hidden; margin-bottom:80px; border-radius:8px; }
.team .member .pic img { width:100%; height:440px; object-fit:cover; object-position:top center; transition:.5s; }
.team .member .member-info { background-color:var(--surface-color); box-shadow:0 2px 20px rgba(0,0,0,.1); position:absolute; bottom:-80px; left:20px; right:20px; padding:20px 15px; transition:.5s; border-radius:0 0 8px 8px; }
.team .member h4 { font-weight:700; margin-bottom:10px; font-size:18px; position:relative; padding-bottom:10px; }
.team .member h4::after { content:""; position:absolute; display:block; width:50px; height:1px; background:var(--accent-color); bottom:0; left:0; }
.team .member span { font-style:italic; display:block; font-size:13px; color:var(--accent-color); margin-bottom:8px; }
.team .member p { font-size:13px; color:color-mix(in srgb, var(--default-color), transparent 30%); margin:0; }
.team .member .social { position:absolute; right:15px; bottom:15px; }
.team .member .social a { transition:color .3s; color:color-mix(in srgb, var(--default-color), transparent 70%); font-size:16px; margin:0 2px; }
.team .member .social a:hover { color:var(--accent-color); }
/* Avatar placeholder */
.team .member .avatar-placeholder { width:100%; height:340px; background:linear-gradient(135deg, var(--surface-color) 0%, color-mix(in srgb, var(--surface-color), black 30%) 100%); display:flex; align-items:center; justify-content:center; border-radius:8px; overflow:hidden; position:relative; }
.team .member .avatar-placeholder::after { content:''; position:absolute; bottom:0; left:0; right:0; height:50%; background:linear-gradient(to top, var(--surface-color), transparent); }
.team .member .avatar-initials { font-family:var(--heading-font); font-size:4rem; font-weight:900; color:rgba(255,255,255,.07); letter-spacing:4px; }
.team .member .avatar-name-overlay { position:absolute; bottom:1rem; left:1.5rem; font-family:var(--heading-font); font-size:1.5rem; font-weight:800; color:#fff; letter-spacing:2px; text-transform:uppercase; z-index:1; }

/* ===== PORTFOLIO ===== */
#portfolio { background-color:#0a0a0a; }
.pf-btn { background:transparent; border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.55); padding:8px 24px; border-radius:30px; font-size:12px; font-weight:700; letter-spacing:1px; cursor:pointer; transition:all .3s; text-transform:uppercase; }
.pf-btn:hover, .pf-btn.active { background:var(--accent-color); border-color:var(--accent-color); color:#fff; }
.pf-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
/* pf-grid responsive — voir responsive.css */
.pf-card { position:relative; overflow:hidden; border-radius:8px; cursor:pointer; background:#000; height:260px; }
.pf-card.pf-hidden { display:none; }
.pf-blur { position:absolute; inset:-10px; background-size:cover; background-position:center; filter:blur(18px) brightness(.45); transform:scale(1.08); transition:filter .4s; }
.pf-card img { position:relative; z-index:1; width:100%; height:100%; object-fit:contain; display:block; transition:transform .4s ease; }
.pf-overlay { position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0); transition:background .3s; }
.pf-overlay i { font-size:28px; color:#fff; opacity:0; transform:scale(.7); transition:all .3s; }
.pf-card:hover .pf-overlay { background:rgba(0,0,0,.35); }
.pf-card:hover .pf-overlay i { opacity:1; transform:scale(1); }
.pf-card:hover .pf-blur { filter:blur(22px) brightness(.3); }
.pf-card:hover img { transform:scale(1.04); }
/* Load more */
.pf-load-wrap { text-align:center; margin-top:32px; }
.pf-load-btn { background:transparent; border:1px solid rgba(255,255,255,.25); color:rgba(255,255,255,.7); padding:12px 36px; border-radius:30px; font-size:13px; font-weight:700; letter-spacing:1px; cursor:pointer; transition:all .3s; text-transform:uppercase; }
.pf-load-btn:hover { background:var(--accent-color); border-color:var(--accent-color); color:#fff; }
/* Lightbox triple slider */
.pf-lightbox { position:fixed; inset:0; z-index:9999; background:#000; visibility:hidden; opacity:0; transition:opacity .4s, visibility .4s; overflow:hidden; }
.pf-lightbox.pf-open { visibility:visible; opacity:1; }
.pf-lb-glob-bg { position:absolute; inset:-20px; background-size:cover; background-position:center; filter:blur(50px) brightness(.2); transform:scale(1.1); transition:background-image .6s; z-index:0; }
/* Slots */
.pf-lb-slider { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:1; }
.pf-slot { position:absolute; width:60vw; max-width:820px; height:82vh; border-radius:12px; overflow:hidden; background:#000; transition:transform .58s cubic-bezier(.22,1,.36,1), opacity .58s, filter .58s; }
.pf-slot .pf-slot-bg { position:absolute; inset:-10px; background-size:cover; background-position:center; filter:blur(20px) brightness(.35); transform:scale(1.1); }
.pf-slot img { position:relative; z-index:1; width:100%; height:100%; object-fit:contain; display:block; }
.pf-slot-curr  { transform:translateX(0) scale(1); opacity:1; filter:none; z-index:2; }
.pf-slot-prev  { transform:translateX(-75%) scale(0.75); opacity:0.52; filter:brightness(.5) blur(1px); z-index:1; cursor:pointer; }
.pf-slot-next  { transform:translateX( 75%) scale(0.75); opacity:0.52; filter:brightness(.5) blur(1px); z-index:1; cursor:pointer; }
.pf-slot-out-l { transform:translateX(-130%) scale(0.55); opacity:0; filter:blur(6px); z-index:0; }
.pf-slot-out-r { transform:translateX( 130%) scale(0.55); opacity:0; filter:blur(6px); z-index:0; }
/* pf-slot mobile — voir responsive.css */
/* UI buttons */
.pf-lb-close { position:absolute; top:20px; right:24px; z-index:5; background:rgba(255,255,255,.1); border:none; color:#fff; width:44px; height:44px; border-radius:50%; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; backdrop-filter:blur(6px); }
.pf-lb-close:hover { background:var(--accent-color); }
.pf-lb-nav { position:absolute; z-index:5; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.1); border:none; color:#fff; width:54px; height:54px; border-radius:50%; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; backdrop-filter:blur(6px); }
.pf-lb-nav:hover { background:var(--accent-color); }
.pf-lb-prev { left:16px; }
.pf-lb-next { right:16px; }
.pf-lb-counter { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:5; color:rgba(255,255,255,.6); font-size:13px; font-weight:600; letter-spacing:1px; background:rgba(0,0,0,.35); padding:4px 16px; border-radius:20px; backdrop-filter:blur(6px); white-space:nowrap; }

/* ============================================================
   CONTACT
============================================================ */
.contact .info-item { background-color:var(--surface-color); box-shadow:0 0 20px rgba(0,0,0,.1); padding:24px 0 30px; }
.contact .info-item i { font-size:24px; color:var(--accent-color); width:56px; height:56px; display:flex; justify-content:center; align-items:center; border-radius:50%; border:2px dotted color-mix(in srgb, var(--accent-color), transparent 40%); transition:all .3s ease-in-out; }
.contact .info-item h3 { font-size:18px; font-weight:700; margin:10px 0; }
.contact .info-item p { padding:0; margin-bottom:0; font-size:14px; }
.contact .info-item a { color:var(--default-color); }
.contact .info-item a:hover { color:var(--accent-color); }
.contact .php-email-form { background-color:var(--surface-color); box-shadow:0 0 20px rgba(0,0,0,.1); height:100%; padding:30px; }
.contact .php-email-form input[type=text], .contact .php-email-form input[type=email], .contact .php-email-form select, .contact .php-email-form textarea { font-size:14px; padding:10px 15px; box-shadow:none; border-radius:0; color:var(--default-color); background-color:var(--surface-color); border-color:color-mix(in srgb, var(--default-color), transparent 80%); }
.contact .php-email-form input:focus, .contact .php-email-form select:focus, .contact .php-email-form textarea:focus { border-color:var(--accent-color); box-shadow:none; }
.contact .php-email-form input::placeholder, .contact .php-email-form textarea::placeholder { color:color-mix(in srgb, var(--default-color), transparent 70%); }
.contact .php-email-form button[type=submit] { color:var(--contrast-color); background:var(--accent-color); border:0; padding:12px 36px; transition:.4s; border-radius:50px; font-weight:600; letter-spacing:1px; text-transform:uppercase; font-size:14px; font-family:var(--nav-font); }
.contact .php-email-form button[type=submit]:hover { background:color-mix(in srgb, var(--accent-color), transparent 15%); }
/* Contact form small — voir responsive.css */

/* Couleurs accent Bootstrap Icons dans les stats */
.color-blue { color:#0dcaf0; }
.color-orange { color:#fd7e14; }
.color-green { color:#198754; }
.color-pink { color:#e8251a; }