/*
Theme Name: Ben Developer WordPress Freelance
Author: Ben
Description: Thème classique.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mon-site
*/

/* ---------------------------------------------------------------------------
   Coller ici votre CSS, ou bien le laisser dans assets/css/main.css
   (déjà mis en file d'attente dans functions.php).
   --------------------------------------------------------------------------- */

:root {
   /* Palette */
   --base-white: #FFFFFF;
   --base-black: #0A0A0A;
   --brand-blue: #2D5BD9;
   --brand-blue-dark: #1E40AF;
   --gray-50: #FAFAFA;
   --gray-100: #F3F4F6;
   --gray-200: #E5E7EB;
   --gray-500: #6B7280;
   --gray-700: #374151;

   /* Typo */
   --font-display: 'Bricolage Grotesque', 'Montserrat', system-ui, sans-serif;
   --font-body: 'Inter', system-ui, -apple-system, sans-serif;

   /* Échelle (clamp pour responsive natif) */
   --text-xs: 0.75rem;
   --text-sm: 0.875rem;
   --text-base: 1rem;
   --text-lg: 1.125rem;
   --text-xl: clamp(1.25rem, 2vw, 1.5rem);
   --text-2xl: clamp(1.8rem, 4vw, 2.5rem);
   --text-3xl: clamp(2.25rem, 5.5vw, 4rem);
   --text-display: clamp(2.5rem, 7vw, 4.5rem);

   /* Layout */
   --container-max: 100%;
   --section-padding: clamp(4rem, 8vw, 7rem);
   --grid-gap: 1.5rem;

   /* Effets */
   --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.05);
   --shadow-md: 0 4px 12px rgba(10, 10, 10, 0.08);
   --shadow-lg: 0 12px 32px rgba(10, 10, 10, 0.12);
   --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   2. RESET & BASE
   ============================================ */
*,
*::before,
*::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: 5rem;
   -webkit-text-size-adjust: 100%;
}

body {
   font-family: var(--font-body);
   font-size: var(--text-base);
   color: var(--base-black);
   background-color: var(--base-white);
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overflow-x: hidden;
}

h1,
h2,
h3 {
   font-family: var(--font-display);
   font-weight: 700;
   line-height: 1.1;
   letter-spacing: -0.02em;
}

a {
   text-decoration: none;
   color: inherit;
   transition: color var(--transition);
}

ul {
   list-style: none;
}

img {
   max-width: 100%;
   display: block;
}

/* Focus visible (accessibilité) */
a:focus-visible,
button:focus-visible,
details:focus-visible summary {
   outline: 3px solid var(--brand-blue);
   outline-offset: 3px;
   border-radius: 2px;
}

/* Skip link (a11y) */
.skip-link {
   position: absolute;
   top: -100px;
   left: 1rem;
   background: var(--base-black);
   color: var(--base-white);
   padding: 0.75rem 1.25rem;
   font-weight: 600;
   z-index: 1000;
   transition: top var(--transition);
}

.skip-link:focus {
   top: 1rem;
}

/* ============================================
   3. UTILITAIRES
   ============================================ */
.container {
   max-width: var(--container-max);
   margin: 0 auto;
   padding: 0 1.5rem;
}

@media (min-width: 768px) {
   .container {
      padding: 0 5vw;
   }
}

@media (min-width: 1200px) {
   .container {
      padding: 0 8vw;
   }
}

.section-spacing {
   padding-top: var(--section-padding);
   padding-bottom: var(--section-padding);
}

.eyebrow {
   display: inline-block;
   font-family: var(--font-body);
   font-size: var(--text-xs);
   font-weight: 600;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   color: var(--brand-blue);
   margin-bottom: 1rem;
}

.text-center {
   text-align: center;
}

/* ============================================
   4. BOUTONS (système unifié)
   ============================================ */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
   padding: 1rem 1.75rem;
   font-family: var(--font-display);
   font-weight: 700;
   font-size: var(--text-base);
   border: 2px solid transparent;
   border-radius: 0;
   cursor: pointer;
   transition: all var(--transition);
   white-space: nowrap;
}

.btn-primary {
   background-color: var(--base-black);
   color: var(--base-white);
   border-color: var(--base-black);
}

.btn-primary:hover {
   background-color: var(--brand-blue);
   border-color: var(--brand-blue);
   transform: translateY(-2px);
   box-shadow: var(--shadow-lg);
}

.btn-outline {
   background-color: transparent;
   color: var(--base-black);
   border-color: var(--base-black);
}

.btn-outline:hover {
   background-color: var(--base-black);
   color: var(--base-white);
   transform: translateY(-2px);
}

.btn-on-dark {
   background-color: var(--base-white);
   color: var(--brand-blue);
   border-color: var(--base-white);
}

.btn-on-dark:hover {
   background-color: transparent;
   color: var(--base-white);
   transform: translateY(-2px);
}

.btn-ghost-on-dark {
   background-color: transparent;
   color: var(--base-white);
   border-color: rgba(255, 255, 255, 0.4);
}

.btn-ghost-on-dark:hover {
   background-color: var(--base-white);
   color: var(--brand-blue);
   border-color: var(--base-white);
}

.btn-full {
   width: 100%;
}

/* ============================================
   5. NAVIGATION (sticky + mobile burger)
   ============================================ */
.site-header {
   position: sticky;
   top: 0;
   z-index: 100;
   padding: 1.25rem 0;
   background-color: rgba(255, 255, 255, 0.85);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--gray-100);
}

.nav-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.logo {
   font-family: var(--font-display);
   font-size: var(--text-xl);
   font-weight: 800;
   letter-spacing: -0.02em;
}

.logo span {
   color: var(--brand-blue);
}

.nav-links {
   display: flex;
   gap: 2rem;
   align-items: center;
   font-family: var(--font-display);
   font-weight: 600;
   font-size: 0.95rem;
}

.nav-links a {
   position: relative;
   padding: 0.25rem 0;
}

.nav-links a::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 2px;
   background: var(--brand-blue);
   transform: scaleX(0);
   transform-origin: right;
   transition: transform var(--transition);
}

.nav-links a:hover::after {
   transform: scaleX(1);
   transform-origin: left;
}

.nav-cta {
   background: var(--base-black);
   color: var(--base-white);
   padding: 0.6rem 1.25rem;
}

.nav-cta:hover {
   background: var(--brand-blue);
}

.nav-cta::after {
   display: none !important;
}

/* Burger */
.menu-toggle {
   display: none;
   background: none;
   border: none;
   cursor: pointer;
   padding: 0.5rem;
   width: 44px;
   height: 44px;
   position: relative;
}

.menu-toggle span {
   display: block;
   width: 24px;
   height: 2px;
   background: var(--base-black);
   margin: 5px auto;
   transition: all var(--transition);
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
   transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
   opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
   transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 900px) {
   .menu-toggle {
      display: block;
   }

   .nav-links {
      position: fixed;
      inset: 5rem 0 0 0;
      flex-direction: column;
      background: var(--base-white);
      padding: 3rem 2rem;
      gap: 2rem;
      font-size: 1.25rem;
      transform: translateX(100%);
      transition: transform var(--transition);
      border-top: 1px solid var(--gray-100);
   }

   .nav-links.is-open {
      transform: translateX(0);
   }
}

/* ============================================
   6. HERO
   ============================================ */
.hero {
   position: relative;
   padding-top: clamp(3rem, 6vw, 5rem);
   padding-bottom: clamp(3rem, 6vw, 5rem);
   overflow: hidden;
}

/* Texture subtile en arrière-plan */
.hero::before {
   content: '';
   position: absolute;
   inset: 0;
   background-image:
      radial-gradient(circle at 20% 30%, rgba(45, 91, 217, 0.06) 0%, transparent 50%),
      radial-gradient(circle at 80% 70%, rgba(45, 91, 217, 0.04) 0%, transparent 50%);
   pointer-events: none;
}

.hero-grid {
   display: grid;
   grid-template-columns: 1.3fr 0.7fr;
   gap: 3rem;
   align-items: center;
   position: relative;
}

.hero-content {
   animation: fadeUp 0.8s var(--transition) backwards;
}

.hero h1 {
   font-size: var(--text-display);
   margin-bottom: 1.5rem;
}

.hero h1 .accent {
   color: var(--brand-blue);
   position: relative;
   display: inline-block;
}

.hero-lede {
   font-size: var(--text-lg);
   margin-bottom: 2rem;
   max-width: 56ch;
   color: var(--gray-700);
}

.hero-ctas {
   display: flex;
   gap: 1rem;
   flex-wrap: wrap;
   margin-bottom: 1.5rem;
}

.reassurance {
   font-size: var(--text-sm);
   color: var(--gray-500);
   font-weight: 500;
}

.reassurance span {
   display: inline-block;
   margin-right: 1rem;
}

.hero-image {
   display: flex;
   justify-content: center;
   align-items: center;
   animation: fadeUp 0.8s 0.15s var(--transition) backwards;
}

.pixel-cat {
   width: 100%;
   max-width: 360px;
   height: auto;
   image-rendering: pixelated;
}

@keyframes fadeUp {
   from {
      opacity: 0;
      transform: translateY(20px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@media (max-width: 900px) {
   .hero-grid {
      grid-template-columns: 1fr;
      text-align: center;
      gap: 2rem;
   }

   .hero-ctas {
      justify-content: center;
   }

   .hero-lede {
      margin-left: auto;
      margin-right: auto;
   }

   .pixel-cat {
      max-width: 240px;
   }
}

/* ============================================
   7. MARQUEE (corrigé : 1 piste dupliquée)
   ============================================ */
.marquee {
   background-color: var(--brand-blue);
   color: var(--base-white);
   padding: 1.25rem 0;
   overflow: hidden;
   font-family: var(--font-display);
   font-weight: 700;
   font-size: var(--text-lg);
}

.marquee-track {
   display: flex;
   gap: 3rem;
   white-space: nowrap;
   animation: scroll 40s linear infinite;
   width: max-content;
}

.marquee-item {
   display: inline-flex;
   align-items: center;
   gap: 3rem;
}

.marquee-item::after {
   content: '✦';
   color: rgba(255, 255, 255, 0.6);
   margin-left: 3rem;
}

@keyframes scroll {
   from {
      transform: translateX(0);
   }

   to {
      transform: translateX(calc(-50% - 1.5rem));
   }
}

@media (prefers-reduced-motion: reduce) {
   .marquee-track {
      animation: none;
   }
}

/* ============================================
   8. SERVICES
   ============================================ */
.services-header {
   max-width: 700px;
   margin: 0 auto 4rem auto;
   text-align: center;
}

.services-header h2 {
   font-size: var(--text-3xl);
   margin-bottom: 1rem;
}

.services-header p {
   font-size: var(--text-lg);
   color: var(--gray-700);
}

.services-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: var(--grid-gap);
}

.service-card {
   background: var(--base-white);
   border: 2px solid var(--base-black);
   padding: 2.5rem 2rem;
   position: relative;
   transition: all var(--transition);
}

.service-card:hover {
   transform: translate(-4px, -4px);
   box-shadow: 8px 8px 0 var(--brand-blue);
}

.service-card-number {
   font-family: var(--font-display);
   font-size: var(--text-sm);
   font-weight: 700;
   color: var(--brand-blue);
   margin-bottom: 0.75rem;
   letter-spacing: 0.1em;
}

.service-card h3 {
   font-size: var(--text-xl);
   margin-bottom: 1rem;
}

.service-card p {
   margin-bottom: 1.25rem;
   color: var(--gray-700);
}

.service-card ul {
   margin-bottom: 1.5rem;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
}

.service-card li {
   position: relative;
   padding-left: 1.5rem;
   font-size: 0.95rem;
}

.service-card li::before {
   content: '→';
   position: absolute;
   left: 0;
   color: var(--brand-blue);
   font-weight: 700;
}

.service-card .card-link {
   font-family: var(--font-display);
   font-weight: 700;
   color: var(--base-black);
   border-bottom: 2px solid var(--base-black);
   padding-bottom: 2px;
   transition: all var(--transition);
}

.service-card .card-link:hover {
   color: var(--brand-blue);
   border-color: var(--brand-blue);
}

/* ============================================
   9. À PROPOS (bleu)
   ============================================ */
.hello-section {
   background-color: var(--brand-blue);
   color: var(--base-white);
   position: relative;
   overflow: hidden;
}

.hello-section::before {
   content: '';
   position: absolute;
   top: -50px;
   right: -50px;
   width: 300px;
   height: 300px;
   background: rgba(255, 255, 255, 0.04);
   border-radius: 50%;
   pointer-events: none;
}

.hello-container {
   display: grid;
   grid-template-columns: 300px 1fr;
   gap: 4rem;
   align-items: center;
   position: relative;
}

.hello-profile {
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.profile-img {
   width: 100%;
   aspect-ratio: 1/1;
   border-radius: 50%;
   object-fit: cover;
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));
   border: 3px solid rgba(255, 255, 255, 0.2);
   /* Fallback visuel si pas d'image */
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-display);
   font-size: 4rem;
   font-weight: 800;
   color: var(--base-white);
}

.hello-content h2 {
   font-size: var(--text-3xl);
   margin-bottom: 1.5rem;
}

.hello-content p {
   font-size: var(--text-lg);
   margin-bottom: 1.25rem;
   opacity: 0.95;
}

.hello-meta {
   margin-top: 2rem;
   font-size: var(--text-sm);
   opacity: 0.85;
   display: inline-flex;
   align-items: center;
   gap: 0.75rem;
   padding: 0.5rem 1rem;
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.2);
}

@media (max-width: 900px) {
   .hello-container {
      grid-template-columns: 1fr;
      text-align: center;
      gap: 2rem;
   }

   .hello-profile {
      max-width: 260px;
      margin: 0 auto;
   }

   .hello-meta {
      margin-left: auto;
      margin-right: auto;
   }
}

/* ============================================
   10. OFFRES (cards au lieu de table → mobile-safe)
   ============================================ */
.offres-section h2 {
   font-size: var(--text-3xl);
   text-align: center;
   margin-bottom: 1rem;
}

.offres-section .lede {
   text-align: center;
   max-width: 700px;
   margin: 0 auto 3.5rem auto;
   font-size: var(--text-lg);
   color: var(--gray-700);
}

.pricing-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: 1rem;
   margin-bottom: 2rem;
}

.pricing-card {
   background: var(--base-white);
   border: 2px solid var(--gray-200);
   padding: 2rem 1.5rem;
   transition: all var(--transition);
   position: relative;
}

.pricing-card:hover {
   border-color: var(--base-black);
   transform: translateY(-4px);
}

.pricing-card.featured {
   border-color: var(--brand-blue);
   background: var(--gray-50);
}

.pricing-card.featured::before {
   content: 'POPULAIRE';
   position: absolute;
   top: -12px;
   left: 50%;
   transform: translateX(-50%);
   background: var(--brand-blue);
   color: var(--base-white);
   font-family: var(--font-display);
   font-size: var(--text-xs);
   font-weight: 700;
   letter-spacing: 0.1em;
   padding: 0.3rem 0.75rem;
}

.pricing-emoji {
   font-size: 2rem;
   margin-bottom: 0.5rem;
}

.pricing-name {
   font-family: var(--font-display);
   font-size: var(--text-lg);
   font-weight: 700;
   margin-bottom: 0.5rem;
}

.pricing-price {
   font-family: var(--font-display);
   font-size: 2rem;
   font-weight: 800;
   color: var(--brand-blue);
   margin-bottom: 0.75rem;
   letter-spacing: -0.02em;
}

.pricing-target {
   font-size: var(--text-sm);
   color: var(--gray-700);
}

.pricing-footnote {
   text-align: center;
   font-size: var(--text-sm);
   color: var(--gray-500);
   margin-bottom: 2rem;
}

/* ============================================
   11. FAQ
   ============================================ */
.faq h2 {
   font-size: var(--text-2xl);
   text-align: center;
   margin-bottom: 1rem;
}

.faq>p {
   text-align: center;
   max-width: 700px;
   margin: 0 auto 3rem auto;
   color: var(--gray-700);
}

.faq-list {
   max-width: 800px;
   margin: 0 auto;
}

.faq-item {
   border-bottom: 1px solid var(--gray-200);
   padding: 1.5rem 0;
   transition: padding var(--transition);
}

.faq-item[open] {
   padding-bottom: 2rem;
}

.faq-item summary {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 1rem;
   cursor: pointer;
   list-style: none;
}

.faq-item summary::-webkit-details-marker {
   display: none;
}

.faq-item summary h3 {
   font-family: var(--font-display);
   font-size: var(--text-lg);
   font-weight: 600;
   letter-spacing: -0.01em;
   margin: 0;
   transition: color var(--transition);
}

.faq-item summary:hover h3 {
   color: var(--brand-blue);
}

.faq-icon {
   font-size: 1.5rem;
   font-weight: 700;
   color: var(--brand-blue);
   flex-shrink: 0;
   transition: transform var(--transition);
   line-height: 1;
}

.faq-item[open] .faq-icon {
   transform: rotate(45deg);
}

.faq-item p {
   margin-top: 1rem;
   color: var(--gray-700);
   line-height: 1.7;
}

/* ============================================
   12. RDV (Contact) — sortie du footer
   ============================================ */
.rdv-section {
   background-color: var(--base-black);
   color: var(--base-white);
   position: relative;
   overflow: hidden;
}

.rdv-section::before {
   content: '';
   position: absolute;
   inset: 0;
   background-image:
      radial-gradient(circle at 10% 20%, rgba(45, 91, 217, 0.25) 0%, transparent 40%),
      radial-gradient(circle at 90% 80%, rgba(45, 91, 217, 0.15) 0%, transparent 40%);
   pointer-events: none;
}

.rdv-container {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 4rem;
   align-items: center;
   position: relative;
}

.rdv-content h2 {
   font-size: var(--text-3xl);
   margin-bottom: 1.5rem;
}

.rdv-content>p {
   font-size: var(--text-lg);
   margin-bottom: 1.5rem;
   opacity: 0.9;
}

.rdv-content strong {
   display: block;
   margin-bottom: 0.75rem;
   font-family: var(--font-display);
}

.rdv-content ul {
   margin-bottom: 2rem;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
}

.rdv-content li {
   position: relative;
   padding-left: 1.75rem;
   opacity: 0.95;
}

.rdv-content li::before {
   content: '✓';
   position: absolute;
   left: 0;
   color: var(--brand-blue);
   font-weight: 700;
}

.rdv-meta {
   font-size: var(--text-sm);
   opacity: 0.7;
}

.rdv-widget {
   background-color: var(--base-white);
   min-height: 600px;
   color: var(--base-black);
}

.calendly-inline-widget {
   min-width: 320px;
   height: 600px;
   width: 100%;
}

@media (max-width: 900px) {
   .rdv-container {
      grid-template-columns: 1fr;
      gap: 2.5rem;
   }
}

/* ============================================
   13. FOOTER
   ============================================ */
.site-footer {
   background-color: var(--gray-50);
   color: var(--base-black);
   padding: 4rem 0 2rem 0;
   border-top: 1px solid var(--gray-200);
}

.footer-grid {
   display: grid;
   grid-template-columns: 1.5fr 1fr 1fr 1fr;
   gap: 3rem;
   margin-bottom: 3rem;
}

.footer-tagline {
   color: var(--gray-700);
   margin-top: 1rem;
   max-width: 280px;
}

.footer-col h4 {
   font-family: var(--font-display);
   font-size: var(--text-sm);
   font-weight: 700;
   margin-bottom: 1rem;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   color: var(--gray-500);
}

.footer-col ul {
   display: flex;
   flex-direction: column;
   gap: 0.6rem;
}

.footer-col a {
   color: var(--gray-700);
}

.footer-col a:hover {
   color: var(--brand-blue);
}

.footer-social {
   display: flex;
   gap: 0.75rem;
   margin-top: 0.5rem;
}

.footer-social a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   border: 1px solid var(--gray-200);
   font-size: var(--text-sm);
   transition: all var(--transition);
}

.footer-social a:hover {
   background: var(--base-black);
   color: var(--base-white);
   border-color: var(--base-black);
}

.footer-bottom {
   text-align: center;
   font-size: var(--text-sm);
   padding-top: 2rem;
   border-top: 1px solid var(--gray-200);
   color: var(--gray-500);
}

@media (max-width: 768px) {
   .footer-grid {
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
   }
}

@media (max-width: 480px) {
   .footer-grid {
      grid-template-columns: 1fr;
   }
}

/* ============================================
   14. NOTIFICATION FORMULAIRE DE CONTACT
   ============================================ */
.contact-notice {
   display: flex;
   align-items: flex-start;
   gap: 1rem;
   padding: 1.25rem 1.5rem;
   margin: 0;
   font-family: var(--font-display);
   font-size: var(--text-base);
   font-weight: 500;
   border-left: 4px solid transparent;
   animation: fadeUp 0.5s var(--transition) backwards;
}

.contact-notice--success {
   background: #f0fdf4;
   border-color: #22c55e;
   color: #14532d;
}

.contact-notice--error {
   background: #fff7ed;
   border-color: #f97316;
   color: #7c2d12;
}

.contact-notice--error a {
   color: #ea580c;
   font-weight: 700;
   text-decoration: underline;
}

.contact-notice__icon {
   font-size: 1.5rem;
   flex-shrink: 0;
   line-height: 1.4;
}

.contact-notice strong {
   display: block;
   margin-bottom: 0.2rem;
}