/**
 * EOCHE Overrides : Performance, A11Y, Contrast, Fluid Typography
 * v1.0.0
 */

/* ═══════════════════════════════════
   0. COMPONENT STYLES (extracted from inline)
   ═══════════════════════════════════ */
.social-proof-notif {
  position: fixed;
  bottom: 24px;
  left: 24px;
  background: rgba(24, 24, 27, 0.95);
  border: 1px solid rgba(253, 58, 37, 0.3);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: var(--layer-toast, 1000);
  transform: translateX(-120%);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  max-width: 340px;
}

.social-proof-notif.show {
  transform: translateX(0);
}

.social-proof-notif .notif-dot {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  animation: pulse-dot 2s infinite;
  flex-shrink: 0;
}

@keyframes pulse-dot {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.availability-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(253, 58, 37, 0.1);
  border: 1px solid rgba(253, 58, 37, 0.3);
  border-radius: 100px;
  padding: 6px 16px;
  font-size: 13px;
  color: #C92715; /* 2026-08-14 : #FD3A25 tenait ~3,1:1 sur fond clair, sous le seuil AA */
  font-weight: 600;
  margin-top: 16px;
}

.availability-badge .pulse {
  width: 6px;
  height: 6px;
  background: #FD3A25;
  border-radius: 50%;
  animation: pulse-dot 1.5s infinite;
}

.price-anchor {
  text-decoration: line-through;
  color: #71717a;
  margin-right: 8px;
  font-size: 0.7em;
}

.form-steps {
  display: none;
}

.form-steps.active {
  display: block;
}

.step-indicator {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.step-indicator .step {
  flex: 1;
  height: 3px;
  background: #3f3f46;
  border-radius: 4px;
  transition: background 0.3s;
}

.step-indicator .step.active {
  background: #FD3A25;
}

@media (max-width: 768px) {
  .social-proof-notif {
    bottom: 12px;
    left: 12px;
    right: 12px;
    max-width: none;
  }
}

/* ═══════════════════════════════════
   1. Z-INDEX TOKENS (Layer System)
   ═══════════════════════════════════ */
:root {
  --layer-base: 1;
  --layer-content: 5;
  --layer-nav: 50;
  --layer-sticky: 100;
  --layer-overlay: 500;
  --layer-modal: 800;
  --layer-toast: 1000;
}

.position-relative.z-5 {
  z-index: var(--layer-content) !important;
}

.tf-header {
  z-index: var(--layer-nav) !important;
}

.social-proof-notif {
  z-index: var(--layer-toast) !important;
}

#goTop {
  z-index: var(--layer-overlay) !important;
}

.offcanvas-menu {
  z-index: var(--layer-modal) !important;
}

.offcanvas {
  z-index: var(--layer-modal) !important;
}

/* ═══════════════════════════════════
   2. CONTRAST & READABILITY (OLED-safe)
   ═══════════════════════════════════ */
:root {
  --text-primary: #F5F5F5;
  /* was #FFFFFF : no pure white on OLED */
  --text-secondary: #D1D1D6;
  /* was #A1A1AA : bumped for 4.5:1 ratio */
  --text-body: #E4E4E7;
  /* body text : comfortable on dark bg */
}

/* Apply to dark sections */
.box-black,
.box-black .text-white,
.box-black h1,
.box-black h2,
.box-black h3,
.box-black h4,
.box-black h5,
.box-black h6 {
  color: var(--text-primary);
}

.box-black .text-neutral-400,
.box-black .text-secondary,
.box-black .text-body-1,
.box-black p {
  color: var(--text-secondary);
}

.social-proof-notif .notif-text {
  color: var(--text-secondary);
}

.social-proof-notif .notif-text strong {
  color: var(--text-primary);
}

/* ═══════════════════════════════════
   3. FLUID TYPOGRAPHY (kill CLS)
   ═══════════════════════════════════ */
.text-display-2 {
  font-size: clamp(2.25rem, 5vw + 1rem, 6rem) !important;
  line-height: 1.08;
}

.heading-title {
  font-size: clamp(1.75rem, 4vw + 0.5rem, 3.5rem) !important;
  line-height: 1.15;
}

h4.heading {
  font-size: clamp(1.25rem, 2.5vw + 0.5rem, 2.25rem) !important;
}

/* Fluid section spacing */
.flat-spacing {
  padding-top: clamp(48px, 8vw, 120px) !important;
  padding-bottom: clamp(48px, 8vw, 120px) !important;
}

/* ═══════════════════════════════════
   4. MOBILE PERFORMANCE
   ═══════════════════════════════════ */
@media (max-width: 1024px) {

  /* Kill heavy animations on mobile/tablet for TBT; GSAP also skips effectFade at <=1024px. */
  .effectFade,
  .fadeUp,
  .fadeRotateX {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  /* Tighter mobile spacing */
  .flat-spacing {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .mb-80,
  .mb-70,
  .mb-64,
  .mb-48 {
    margin-bottom: 24px !important;
  }

  /* Prevent horizontal overflow / CLS */
  body,
  html {
    overflow-x: hidden !important;
  }

  .container {
    padding-left: 5vw !important;
    padding-right: 5vw !important;
  }
}

/* ═══════════════════════════════════
   5. LAZY-LOADED IMAGE PLACEHOLDER
   ═══════════════════════════════════ */
img[loading="lazy"] {
  min-height: 40px;
}

/* ═══════════════════════════════════
   6. FORM ACCESSIBILITY FOCUS STATES
   ═══════════════════════════════════ */
select:focus,
input:focus,
textarea:focus {
  outline: 2px solid #FD3A25;
  outline-offset: 2px;
}

.tf-btn:focus-visible,
.tf-btn-2:focus-visible {
  outline: 2px solid #FD3A25;
  outline-offset: 4px;
}

/* Success state (form) */
.form-success-state {
  animation: fadeInSuccess 0.5s ease-out;
}

@keyframes fadeInSuccess {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

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

/* ═══════════════════════════════════
   7. PRICING SWITCH STATE
   ═══════════════════════════════════ */
.maintenance-line {
  transition: opacity 0.3s ease, max-height 0.3s ease;
}

.maintenance-line.hidden {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* ═══════════════════════════════════
   8. TEXT-GRADIENT FIX (invisible on light bg)
   ═══════════════════════════════════ */
/* The template's text-gradient-3 uses a dark-to-transparent gradient
   that becomes invisible on light backgrounds, especially mobile */
.text-gradient-3 {
  -webkit-text-fill-color: initial !important;
  color: #18181b !important;
}

/* On dark sections (box-black), restore white */
.box-black .text-gradient-3 {
  color: var(--text-primary, #F5F5F5) !important;
}

/* ═══════════════════════════════════
   8b. GOOGLE REVIEW LINK (anchored proof)
   ═══════════════════════════════════ */
.review-google-link {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.review-google-link:hover,
.review-google-link:focus-visible {
  opacity: 0.88;
}

.review-google-link__arrow {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  color: #a1a1aa;
  font-size: 14px;
  font-weight: 700;
  transition: transform 0.25s ease, color 0.25s ease;
}

.review-google-link:hover .review-google-link__arrow,
.review-google-link:focus-visible .review-google-link__arrow {
  color: #FD3A25;
  transform: translate(2px, -2px);
}

.review-google-link:focus-visible {
  outline: 2px solid #FD3A25;
  outline-offset: 4px;
  border-radius: 8px;
}

/* ═══════════════════════════════════
   9. CONTACT SECTION CONTRAST
   ═══════════════════════════════════ */
.section-contact .contact-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.section-contact .contact-left h2,
.section-contact .contact-left .heading-title,
.section-contact .contact-left p,
.section-contact .contact-left .text-body-1,
.section-contact .heading-sub {
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* ═══════════════════════════════════
   10. MOBILE-SPECIFIC POLISHING
   ═══════════════════════════════════ */
@media (max-width: 767px) {

  /* Force text-gradient visible on mobile */
  .text-gradient-3 {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #18181b !important;
  }

  .box-black .text-gradient-3 {
    -webkit-text-fill-color: #F5F5F5 !important;
  }

  /* Word wrap safety */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .heading-title,
  .text-display-2 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }

  /* Availability badge responsive */
  .availability-badge {
    padding: 4px 12px;
  }

  /* Contact section mobile fix */
  .section-contact .contact-left {
    padding: 24px 16px !important;
  }

  /* Features emoji size on mobile */
  .features-item span[aria-hidden="true"] {
    font-size: 24px !important;
  }

  /* Portfolio carousel compact */
  .section-featured-works .featured-works-item .image img {
    aspect-ratio: 16/10;
    object-fit: cover;
  }
}

/* ═══════════════════════════════════
   11. BENEFITS ICONS FALLBACK
   ═══════════════════════════════════ */
/* When icomoon font fails, hide broken icon-* elements */
.benefits-progress-item .icon,
.benefits-step-inner .icon {
  font-size: 0;
  width: 16px;
  height: 16px;
}

.benefits-progress-item .icon::before,
.benefits-step-inner .icon::before {
  content: "✓";
  font-family: system-ui, sans-serif;
  font-size: 14px;
}

/* Process cards 3D icons */
.process-card>.custom-icon-3d {
  width: 90px;
  height: 90px;
  object-fit: contain;
  margin-bottom: 24px;
  background-color: transparent !important;
}

/* Expertise section 3D icons */
.custom-icon-expertise {
  width: 65px !important;
  height: 65px !important;
  object-fit: contain;
  margin-bottom: 20px;
  display: block;
  background-color: transparent !important;
  background: transparent !important;
  border: none !important;
  filter: drop-shadow(0 6px 15px rgba(0, 0, 0, 0.15));
  transition: transform 0.3s ease;
}

.features-item:hover .custom-icon-expertise {
  transform: translateY(-6px) scale(1.1);
}

/* Fix process card bot alignment */
.process-card .bot {
  flex-wrap: nowrap !important;
  /* Empêche le passage à la ligne */
  justify-content: space-between !important;
}

.process-card .bot .time {
  white-space: nowrap !important;
  /* Empêche le texte de se couper */
  padding: 6px 12px !important;
  /* Un peu plus compact pour tenir sur PC/Mobile */
  font-size: 11px !important;
}

/* Mobile: shrink the oversized 01/04 number so it stays inside the card */
@media (max-width: 767px) {
  .process-card .bot {
    overflow: hidden !important;
  }

  .process-card .bot .number {
    font-size: 48px !important;
    line-height: 48px !important;
  }
}

/* Inline 3D icons for benefits progress */
.custom-icon-inline {
  width: 20px;
  height: 20px;
  object-fit: contain;
  background-color: transparent !important;
  display: inline-block;
  margin-right: 8px;
  /* Espace entre l'icône et le texte */
}

.benefits-progress-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100%;
}

.benefits-progress-item .progress-text {
  width: 160px !important;
  min-width: 160px !important;
  height: 40px !important;
  /* Même hauteur que la barre de gauche */
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 12px !important;
  /* Retrait du padding vertical pour laisser faire la hauteur fixe */
  flex-shrink: 0 !important;
}

.benefits-progress-item .progress-line {
  height: 40px !important;
  flex-grow: 1 !important;
  margin-right: 15px !important;
  max-width: calc(100% - 175px) !important;
}

/* Adaptation mobile */
@media (max-width: 767px) {
  .benefits-progress-item .progress-text {
    width: 140px !important;
    min-width: 140px !important;
    height: 36px !important;
    /* Hauteur réduite sur mobile */
    font-size: 13px !important;
  }

  .benefits-progress-item .progress-line {
    height: 36px !important;
    max-width: calc(100% - 150px) !important;
  }
}

/* ═══════════════════════════════════
   11b. NAVIGATION BUTTONS POLISHING (Fix Visibility on Hover)
   ═══════════════════════════════════ */
/* Style global et forcé pour TOUTES les flèches de navigation Swiper (Précédent / Suivant) */
.group-btn-slider .nav-prev-swiper,
.group-btn-slider .nav-next-swiper,
.nav-prev-swiper,
.nav-next-swiper {
  width: 50px !important;
  height: 50px !important;
  border: 1px solid #3f3f46 !important; /* Bordure neutre sombre */
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.3s ease, border-color 0.3s ease !important;
  cursor: pointer !important;
  background-color: transparent !important;
  position: relative !important;
  z-index: 50 !important;
}

/* État survolé : Passage immédiat à l'orange brand (#FD3A25) */
.group-btn-slider .nav-prev-swiper:hover,
.group-btn-slider .nav-next-swiper:hover,
.nav-prev-swiper:hover,
.nav-next-swiper:hover {
  background-color: #FD3A25 !important;
  border-color: #FD3A25 !important;
}

/* L'icône (span, flèche texte, i) */
.nav-prev-swiper span,
.nav-next-swiper span,
.nav-prev-swiper i,
.nav-next-swiper i,
.nav-prev-swiper .icon,
.nav-next-swiper .icon {
  color: #D1D1D6 !important; /* Gris clair au repos */
  font-size: 22px !important;
  line-height: 1 !important;
  z-index: 60 !important;
  position: relative !important;
  transition: color 0.3s ease !important;
}

/* Icône BLANCHE au survol pour un contraste maximal sur fond orange */
.nav-prev-swiper:hover span,
.nav-next-swiper:hover span,
.nav-prev-swiper:hover i,
.nav-next-swiper:hover i {
  color: #ffffff !important;
}

/* Nettoyage des effets de masque du thème qui bloquent la visibilité */
.nav-prev-swiper::before,
.nav-next-swiper::before,
.nav-prev-swiper::after,
.nav-next-swiper::after {
  display: none !important;
}

/* Nav arrows fallback structure */
.nav-prev-swiper .icon,
.nav-next-swiper .icon {
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-prev-swiper .icon::before {
  content: "←" !important;
  font-size: 20px;
  color: var(--white-64);
  transition: all 0.3s ease;
}

.nav-next-swiper .icon::before {
  content: "→" !important;
  font-size: 20px;
  color: var(--white-64);
  transition: all 0.3s ease;
}

/* Go-to-top fallback */
#goTop .icon {
  font-size: 0;
}

#goTop .icon::before {
  content: "↑";
  font-family: system-ui;
  font-size: 18px;
}

/* ═══════════════════════════════════
   12. SNEAKY SERVICES NESTED ACCORDION
   ═══════════════════════════════════ */
.service-point-btn {
  background: var(--neutral-900);
  border: 1px solid var(--neutral-800);
  border-radius: 12px;
  padding: 12px 20px;
  font-size: 15px;
  color: var(--white);
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.service-point-btn:hover,
.service-point-btn:focus {
  background: var(--neutral-800);
  border-color: var(--neutral-700);
}

.service-point-btn[aria-expanded="true"] {
  border-color: var(--brand);
  background: rgba(253, 58, 37, 0.05);
}

.service-point-btn[aria-expanded="true"] .btn-icon {
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}

.service-point-btn .btn-icon {
  transition: transform 0.3s ease;
}

.service-point-desc {
  padding: 14px 20px 4px 20px;
  border-left: 2px solid var(--brand);
  margin-left: 12px;
  margin-top: 8px;
  background: linear-gradient(90deg, rgba(253, 58, 37, 0.03) 0%, transparent 100%);
  border-radius: 0 8px 8px 0;
}

/* ═══════════════════════════════════
   13. FIX BIG TEXT MOBILE RESPONSIVE
   ═══════════════════════════════════ */
@media (max-width: 767px) {
  .section-about-us .col-left .sub {
    width: auto !important;
    max-width: 95%;
    border-radius: 16px !important;
    font-size: 12px;
    padding: 8px 16px !important;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
  }
}

/* ═══════════════════════════════════
   14. FEATURED WORKS CAROUSEL TWEAKS
   ═══════════════════════════════════ */
.section-featured-works .featured-works-item .image img {
  width: 100%;
  aspect-ratio: 16 / 10 !important; /* Format plus panoramique pour réduire la hauteur sur PC */
  object-fit: cover;
  object-position: top center;
}

/* ═══════════════════════════════════
   16. ABOUT SECTION : Styles minimaux
   Le HTML est identique à l'original : seuls quelques ajustements visuels.
   ═══════════════════════════════════ */

/* Titre grand et impactant */
.section-about-us .heading-title {
  font-size: clamp(2.5rem, 5.5vw, 5rem) !important;
  line-height: 1.08 !important;
}

/* Correction radicale de l'alignement horizontal : La hauteur est dictée par la droite */
.section-about-us .col-left {
  background-color: #161618 !important; 
  background-image: radial-gradient(circle at top center, #27272a 0%, #161618 70%) !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  border-radius: 32px;
  overflow: hidden;
  position: relative !important; /* Pour le positionnement absolu de l'image */
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 40px !important; /* Ajustement du padding interne */
}

.section-about-us .col-left .z-5 {
  position: relative !important;
  z-index: 10 !important; /* Toujours au-dessus de l'image */
}

.section-about-us .col-left img {
  background-color: transparent !important;
  background-image: none !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  z-index: 1 !important;
  object-fit: contain;
  object-position: bottom;
  pointer-events: none; /* Ne gêne pas les clics sur le bouton */
}

/* Forcer l'étirement des colonnes */
@media (min-width: 1200px) {
  .section-about-us .row {
    display: flex !important;
    align-items: stretch !important; 
  }

  .section-about-us .col-xxl-7 { width: 58.333333% !important; }
  .section-about-us .col-xxl-5 { 
    width: 41.666667% !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .section-about-us .review-box {
    margin-bottom: 24px !important;
  }

  .section-about-us .testimonial-box {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    margin-bottom: 0 !important;
  }
}

/* Counter 4.9/5 : même style que 120+ dans l'original */
.review-box .counter.text-neutral-200 {
  font-size: clamp(4rem, 9vw, 7rem) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #52525b !important; /* 2026-08-14 : #d4d4d8 sur fond clair etait a 1,34:1 */
}

/* ═══════════════════════════════════
   17. TEAM SECTION : Equal Height Cards (Desktop)
   Le JS d'animation du thème injecte un wrapper .overflow-hidden
   entre la colonne et le .team-item, ce qui casse la chaîne flex.
   On cible ce wrapper pour restaurer la propagation de hauteur.
   ═══════════════════════════════════ */
@media (min-width: 992px) {
  .box-black .section-team .row > [class*="col-"] > .overflow-hidden {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
  }

  .box-black .section-team .row > [class*="col-"] > .overflow-hidden > .team-item {
    flex: 1 1 auto;
  }
}

/* ═══════════════════════════════════
   18. STATISTIC SLIDER : Prevent "sem." text clipping
   Le texte géant déborde du conteneur à droite.
   ═══════════════════════════════════ */
.section-statistic .statistic-slider {
  max-width: 600px;
}

@media (max-width: 767px) {
  .section-statistic .statistic-slider {
    max-width: none;
  }

  .box-black .section-statistic .swiper .statistic-number .prefix {
    font-size: 20vw;
  }

  /* Ensure the slider controls sit above Swiper's touch overlay */
  .section-statistic .swiper .group-slider {
    position: relative;
    z-index: 100;
  }

  /* Hide navigation arrows on mobile, leaving just the timer/swipe to do the work */
  .section-statistic .group-btn-slider {
    display: none !important;
  }
}

/* ═══════════════════════════════════
   19. CONTACT SECTION : Alignment
   ═══════════════════════════════════ */
.section-contact .heading-section .heading-sub {
  text-align: center;
}

.section-contact .row {
  align-items: center;
}

/* ═══════════════════════════════════
   20. PRICING SECTION : 3-Column Layout Fix
   Le thème d'origine est conçu pour 2 colonnes.
   Ces overrides adaptent la section à 3 colonnes
   avec le toggle mensuel/one-shot.
   ═══════════════════════════════════ */

/* Force le heading (prix + bouton) en vertical au lieu de horizontal */
.section-pricing .pricing-item .heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* Hauteur min sur le header pour aligner les 3 cartes */
.section-pricing .pricing-item .top {
  min-height: 52px;
  flex-wrap: wrap;
}

/* Badge "Populaire" sur la carte mise en avant */
.pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #EA2B16 0%, #FF3B26 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 24px;
  border-radius: 99px;
  white-space: nowrap;
  z-index: 10;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Contour lumineux complet autour de la carte "Populaire" */
.section-pricing .pricing-item.style-black {
  border: 1.5px solid rgba(253, 58, 37, 0.5);
  box-shadow:
    0 0 0 1px rgba(253, 58, 37, 0.15),
    0 0 30px -5px rgba(253, 58, 37, 0.2),
    0px -8px 0px 0px #2E2E2E inset,
    0px 4px 0px 0px rgba(255, 255, 255, 0.3019607843) inset,
    0px 7.77px 2.21px 0px rgba(0, 0, 0, 0.0588235294),
    0px 3px 3px 0px rgba(0, 0, 0, 0.1019607843);
}

/* (Bloc modal deplace dans pack-modal.css le 2026-07-26 - source unique multi-pages) */

/* Prix adapté pour 3 colonnes : plus petit que le 72px d'origine */
.section-pricing .pricing-item .heading .price-number {
  font-size: 48px;
  line-height: 1.1;
}

/* "Devis gratuit" : même taille que les prix, pas le 72px géant */
.section-pricing .pricing-item .heading .pricing-custom {
  font-size: 48px;
  line-height: 1.1;
}

/* Engagement note : intégrée proprement dans le flow */
.section-pricing .engagement-line {
  font-size: 13px !important;
  color: #a1a1aa !important;
  margin-top: 0 !important;
  margin-bottom: 4px;
}

/* Bouton pleine largeur */
.section-pricing .pricing-item .tf-btn {
  width: 100%;
  text-align: center;
}

/* Contenu (features) en vertical au lieu de 50/50 */
.section-pricing .pricing-item .content {
  flex-direction: column;
}

.section-pricing .pricing-item .content > * {
  width: 100%;
}

/* Prix barré (anchor) */
.section-pricing .price-anchor {
  font-size: 0.55em;
}

/* Style-black: engagement note en couleur adaptée */
.section-pricing .pricing-item.style-black .engagement-line {
  color: #71717a !important;
}

/* ── Responsive: tablettes (2 colonnes puis 1) ── */
@media (max-width: 991px) {
  .section-pricing .pricing-item .heading .price-number,
  .section-pricing .pricing-item .heading .pricing-custom {
    font-size: 40px;
  }
}

@media (max-width: 767px) {
  .section-pricing .pricing-item .heading .price-number,
  .section-pricing .pricing-item .heading .pricing-custom {
    font-size: 36px;
    line-height: 1.15;
  }
}

/* ═══════════════════════════════════
   22. METHODOLOGY SLIDER : Mobile Dots (hide arrows, show pagination)
   ═══════════════════════════════════ */

/* Desktop: hide the mobile dots pagination */
.process-dots-mobile {
  display: none !important;
}

/* Mobile: hide arrows, show dots */
@media (max-width: 991px) {
  /* Hide the desktop arrows container in the methodology section */
  .section-process .process-heading .group-btn-slider {
    display: none !important;
  }

  /* Show pagination dots */
  .process-dots-mobile {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    padding: 0;
    position: relative;
    width: 100%;
  }

  /* Each bullet */
  .process-dots-mobile .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #d4d4d8;
    opacity: 0.35;
    border-radius: 50%;
    transition: all 0.3s ease;
    cursor: pointer;
    margin: 0 !important; /* Override Swiper defaults, gap handles spacing */
  }

  /* Active bullet : brand color, slightly larger pill shape */
  .process-dots-mobile .swiper-pagination-bullet-active {
    opacity: 1;
    background: #FD3A25;
    width: 24px;
    border-radius: 100px;
  }
}

/* ═══════════════════════════════════
   23. EXPERTISE SECTION : Mobile Compact Grid (2 cols)
   Replaces the full-width stacked cards with a tight 2-col grid.
   Desktop is NOT touched.
   ═══════════════════════════════════ */
@media (max-width: 767px) {
  /* Turn the column wrapper into a 2-col grid */
  .section-features .features-wrap {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    flex-direction: unset !important;
  }

  /* Each column loses its own grid and becomes flat */
  .section-features .features-col {
    display: contents !important;
  }

  /* Hide the center logo on mobile (already done by theme, reinforced) */
  .section-features .features-center {
    display: none !important;
  }

  /* Compact card style */
  .section-features .features-item {
    padding: 16px !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px;
  }

  /* Smaller icon */
  .section-features .features-item .custom-icon-expertise {
    width: 40px !important;
    height: 40px !important;
    margin-bottom: 4px !important;
  }

  /* Compact title */
  .section-features .features-item .title {
    font-size: 13px !important;
    line-height: 1.25 !important;
    margin-bottom: 0 !important;
  }

  /* Hide the description paragraph to save space */
  .section-features .features-item p {
    display: none !important;
  }
}

/* Portfolio showcase - scoped homepage portfolio */
.section-portfolio-showcase {
  background: #EDECEC;
  color: #09090B;
  overflow: hidden;
}

.section-portfolio-showcase .portfolio-showcase__head {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.75fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: end;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.section-portfolio-showcase .heading-section {
  max-width: 760px;
}

.section-portfolio-showcase .heading-title {
  letter-spacing: 0;
}

.portfolio-showcase__intro {
  max-width: 680px;
  margin: 0;
  color: #52525B;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.7;
}

.portfolio-showcase__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 28px);
  align-items: stretch;
}

/* Curated home grid : Puff featured (row 1, colspan 2) + 2 prototypes (row 2) */
.portfolio-showcase__grid--curated {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.8vw, 32px);
}

.portfolio-card--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  border-color: rgba(253, 58, 37, 0.28);
  box-shadow:
    0 30px 80px rgba(9, 9, 11, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 0 1px rgba(253, 58, 37, 0.10);
}

.portfolio-card--featured .portfolio-card__media {
  aspect-ratio: auto;
  height: 100%;
  min-height: 320px;
}

.portfolio-card--featured .portfolio-card__media img {
  object-position: center;
}

.portfolio-card--featured .portfolio-card__body {
  padding: clamp(28px, 3.6vw, 44px);
  gap: 18px;
}

.portfolio-card--featured h3 {
  font-size: clamp(28px, 2.8vw, 38px);
}

.portfolio-card--featured .portfolio-card__badge--real {
  background: linear-gradient(135deg, #FD3A25 0%, #c92715 100%);
  border-color: rgba(253, 58, 37, 0.5);
  box-shadow: 0 10px 24px -8px rgba(253, 58, 37, 0.55);
}

@media (max-width: 991px) {
  .portfolio-card--featured {
    grid-template-columns: 1fr;
  }
  .portfolio-card--featured .portfolio-card__media {
    min-height: auto;
    aspect-ratio: 16 / 10;
  }
}

/* Card preview assets : richer than generic charts, scoped to homepage proofs */
.portfolio-card__asset {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-card:hover .portfolio-card__asset,
.portfolio-card:focus-within .portfolio-card__asset {
  transform: scale(1.035);
}

.portfolio-card--shopify {
  border-color: rgba(149, 191, 71, 0.18);
}

.portfolio-card--leadops {
  border-color: rgba(96, 165, 250, 0.16);
}

/* Discreet badges (less shouty than before) */
.portfolio-card .portfolio-card__badge:not(.portfolio-card__badge--real):not(.portfolio-card__badge--concept):not(.portfolio-card__badge--lab) {
  background: rgba(9, 9, 11, 0.55);
  border-color: rgba(255, 255, 255, 0.10);
  color: #E4E4E7;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Section CTA bottom : 2 boutons cohérents avec homepage */
.portfolio-showcase__cta {
  margin-top: clamp(28px, 3.4vw, 40px);
}

.portfolio-showcase__cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: 0 0 auto;
}

@media (max-width: 767px) {
  .portfolio-showcase__cta-actions {
    width: 100%;
  }
  .portfolio-showcase__cta-actions .tf-btn,
  .portfolio-showcase__cta-actions .tf-btn-2 {
    flex: 1 1 auto;
  }
}

.portfolio-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  color: #F4F4F5;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 32%),
    linear-gradient(180deg, #18181B 0%, #09090B 100%);
  border: 1px solid rgba(9, 9, 11, 0.12);
  border-radius: 32px;
  box-shadow: 0 26px 70px rgba(9, 9, 11, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  isolation: isolate;
}

.portfolio-card__media {
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #050505;
  text-decoration: none;
}

.portfolio-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.portfolio-card:hover .portfolio-card__media img,
.portfolio-card:focus-within .portfolio-card__media img {
  transform: scale(1.035);
}

.section-hero .content-wrap .bot-btns {
  flex-wrap: wrap;
}

.portfolio-card__badge {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 32px);
  min-height: 32px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 99px;
  color: #F5F5F5;
  background: rgba(9, 9, 11, 0.68);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.portfolio-card__badge--concept {
  color: #09090B;
  background: #F5F5F5;
  border-color: rgba(255, 255, 255, 0.72);
}

.portfolio-card__badge--real {
  background: rgba(253, 58, 37, 0.92);
  border-color: rgba(253, 58, 37, 0.42);
}

.portfolio-card__badge--lab {
  color: #09090B;
  background: #F5F5F5;
  border-color: rgba(255, 255, 255, 0.72);
}

.portfolio-card__placeholder {
  display: grid;
  height: 100%;
  min-height: 100%;
  place-items: center;
  padding: 26px;
  background:
    linear-gradient(135deg, rgba(253, 58, 37, 0.14), rgba(255, 255, 255, 0.02)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 18px);
}

.portfolio-card__placeholder span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(180px, 70%);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  color: rgba(255, 255, 255, 0.76);
  background: rgba(9, 9, 11, 0.42);
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.portfolio-card:hover .portfolio-card__placeholder span,
.portfolio-card:focus-within .portfolio-card__placeholder span {
  border-color: rgba(253, 58, 37, 0.45);
  color: #FFFFFF;
  transform: translateY(-2px);
}

.portfolio-card__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 16px;
  padding: clamp(24px, 3vw, 34px);
}

.portfolio-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #A1A1AA;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.portfolio-card__meta span[aria-hidden="true"] {
  width: 28px;
  height: 1px;
  background: rgba(253, 58, 37, 0.68);
}

.portfolio-card h3,
.portfolio-card h4 {
  margin: 0;
  color: #FAFAFA;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 700;
  line-height: 1.12;
}

.portfolio-card h4 {
  letter-spacing: 0;
}

.portfolio-card p {
  margin: 0;
  color: #D4D4D8;
  font-size: 16px;
  line-height: 1.65;
}

.portfolio-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 2px 0 0;
  list-style: none;
}

.portfolio-card__tags li {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 99px;
  color: #D4D4D8;
  background: rgba(255, 255, 255, 0.045);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.portfolio-card__footer {
  display: flex;
  align-items: center;
  margin-top: auto;
  padding-top: 12px;
}

.portfolio-card__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #F5F5F5;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
}

.portfolio-card__link span {
  color: #FD3A25;
  transition: transform 0.25s ease;
}

.portfolio-card__link:hover,
.portfolio-card__link:focus-visible {
  color: #FFFFFF;
}

.portfolio-card__link:hover span,
.portfolio-card__link:focus-visible span {
  transform: translate(2px, -2px);
}

.portfolio-showcase__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(22px, 3vw, 32px);
  padding: clamp(22px, 3vw, 30px);
  border-radius: 28px;
  color: #F4F4F5;
  background:
    radial-gradient(circle at 8% 0%, rgba(253, 58, 37, 0.16), transparent 34%),
    linear-gradient(180deg, #18181B 0%, #09090B 100%);
  border: 1px solid rgba(9, 9, 11, 0.12);
  box-shadow: 0 22px 60px rgba(9, 9, 11, 0.16);
}

.portfolio-showcase__cta p {
  max-width: 680px;
  margin: 0;
  color: #E4E4E7;
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.6;
}

.portfolio-showcase__button {
  flex: 0 0 auto;
  white-space: normal;
  text-align: center;
}

.section-portfolio-showcase a:focus-visible {
  outline: 2px solid #FD3A25;
  outline-offset: 4px;
  box-shadow: 0 0 0 6px rgba(253, 58, 37, 0.16);
}

@media (max-width: 991px) {
  .section-portfolio-showcase .portfolio-showcase__head,
  .portfolio-showcase__grid {
    grid-template-columns: 1fr;
  }

  .portfolio-showcase__intro {
    max-width: 100%;
  }

}

@media (max-width: 767px) {
  .portfolio-card,
  .portfolio-showcase__cta {
    border-radius: 24px;
  }

  .portfolio-card__media {
    aspect-ratio: 4 / 3;
  }

  .portfolio-showcase__cta {
    align-items: flex-start;
    flex-direction: column;
  }

  .portfolio-showcase__button {
    width: 100%;
  }
}

/* Lot 7 UI tightening: homepage header, hero and curated proof bridge */
.tf-header.header2 .header-inner {
  max-width: min(1088px, calc(100vw - 48px));
  gap: clamp(14px, 2vw, 28px);
  padding: 10px 10px 10px 28px;
}

.tf-header.header2 .nav-menu-main {
  gap: clamp(12px, 1.35vw, 20px);
}

.tf-header.header2 .item-link {
  white-space: nowrap;
}

.section-hero .content-wrap .title {
  margin-bottom: clamp(18px, 2.4vw, 28px);
}

.section-hero .content-wrap .title .title2 {
  align-items: center;
  gap: clamp(12px, 2vw, 20px) !important;
}

.section-hero .content-wrap .text {
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
}

.section-portfolio-showcase .portfolio-showcase__head {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.58fr);
  gap: clamp(22px, 4vw, 56px);
  margin-bottom: clamp(28px, 4vw, 44px);
}

.portfolio-showcase__grid--curated {
  grid-template-columns: minmax(0, 1.04fr) minmax(360px, 0.96fr);
  gap: clamp(20px, 2.6vw, 32px);
}

.portfolio-card--featured {
  grid-column: auto;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  grid-template-columns: unset;
}

@media (min-width: 992px) {
  .portfolio-showcase__grid--curated > .overflow-hidden {
    display: flex;
    min-width: 0;
    min-height: 100%;
  }

  .portfolio-showcase__grid--curated > .overflow-hidden:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .portfolio-showcase__grid--curated > .overflow-hidden:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  .portfolio-showcase__grid--curated > .overflow-hidden:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }

  .portfolio-showcase__grid--curated > .overflow-hidden > .portfolio-card {
    width: 100%;
    height: 100%;
  }

  .portfolio-card--featured {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .portfolio-card--shopify {
    grid-column: 2;
    grid-row: 1;
  }

  .portfolio-card--leadops {
    grid-column: 2;
    grid-row: 2;
  }
}

.portfolio-card--featured .portfolio-card__media {
  flex: 1 1 auto;
  height: auto;
  min-height: 360px;
  aspect-ratio: 16 / 11;
}

.portfolio-card--featured .portfolio-card__body {
  flex: 1;
}

.portfolio-card--shopify .portfolio-card__media,
.portfolio-card--leadops .portfolio-card__media {
  aspect-ratio: 16 / 10;
  min-height: 248px;
}

.portfolio-card--shopify .portfolio-card__body,
.portfolio-card--leadops .portfolio-card__body {
  gap: 13px;
  padding: clamp(22px, 2.5vw, 30px);
}

@media (max-width: 991px) {
  .tf-header.header2 .header-inner {
    max-width: min(807px, calc(100vw - 28px));
  }

  .section-portfolio-showcase .portfolio-showcase__head,
  .portfolio-showcase__grid--curated {
    grid-template-columns: 1fr;
  }

  .portfolio-card--featured {
    grid-row: auto;
  }

  .portfolio-card--featured .portfolio-card__media {
    min-height: auto;
    aspect-ratio: 16 / 10;
  }

  .portfolio-card--shopify .portfolio-card__media,
  .portfolio-card--leadops .portfolio-card__media {
    min-height: auto;
  }
}

@media (max-width: 767px) {
  .section-hero .content-wrap .title-icon {
    transform: scale(0.78);
    transform-origin: center top;
    height: 116px;
  }

  .section-portfolio-showcase .portfolio-showcase__head {
    gap: 18px;
  }

  .portfolio-card--shopify .portfolio-card__asset,
  .portfolio-card--leadops .portfolio-card__asset {
    transform: scale(1.08);
  }

  .portfolio-card--shopify:hover .portfolio-card__asset,
  .portfolio-card--shopify:focus-within .portfolio-card__asset,
  .portfolio-card--leadops:hover .portfolio-card__asset,
  .portfolio-card--leadops:focus-within .portfolio-card__asset {
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-card__media img,
  .portfolio-card__link span,
  .portfolio-card__placeholder span {
    transition: none;
  }

  .portfolio-card:hover .portfolio-card__media img,
  .portfolio-card:focus-within .portfolio-card__media img,
  .portfolio-card__link:hover span,
  .portfolio-card__link:focus-visible span,
  .portfolio-card:hover .portfolio-card__placeholder span,
  .portfolio-card:focus-within .portfolio-card__placeholder span {
    transform: none;
  }
}

/* ═══════════════════════════════════
   PRICING V2 : Toggle mensuel/unique + feature lists
   (section #tarifs : réutilise .pricing-item du thème)
   ═══════════════════════════════════ */
.pricing-toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.pricing-toggle-label {
  font-weight: 600;
  font-size: 15px;
  color: var(--neutral-900);
}

.pricing-toggle-hint {
  font-weight: 400;
  font-size: 13px;
  color: var(--secondary);
}

.pricing-toggle {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
}

.pricing-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.pricing-toggle-slider {
  position: absolute;
  inset: 0;
  background-color: var(--neutral-300);
  border-radius: 99px;
  transition: background-color 0.25s ease;
}

.pricing-toggle-slider::before {
  content: "";
  position: absolute;
  height: 22px;
  width: 22px;
  left: 3px;
  top: 3px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.25s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.pricing-toggle input:checked + .pricing-toggle-slider {
  background: linear-gradient(180deg, #EA2B16 0%, #FF3B26 100%);
}

.pricing-toggle input:checked + .pricing-toggle-slider::before {
  transform: translateX(24px);
}

.pricing-toggle input:focus-visible + .pricing-toggle-slider {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* "à partir de" au-dessus du prix */
.section-pricing .price-from {
  font-size: 13px;
}

/* Liste de features des cartes tarifs */
.pricing-feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.pricing-feature-list li {
  position: relative;
  padding-left: 26px;
  font-size: 16px;
  line-height: 1.5;
  color: #52525B; /* 2026-08-14 : var(--secondary) #71717A tenait ~4,2:1 sur les fonds clairs */
}

.pricing-item.style-black .pricing-feature-list li {
  color: var(--neutral-300);
}

.pricing-feature-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: #22c55e;
  font-weight: 700;
}

/* ═══════════════════════════════════
   ASSISTANT IA : widget de chat (chatbot.js)
   Bulle à gauche du bouton goTop (right:20px, 38px de large)
   ═══════════════════════════════════ */
.eoche-chat-launcher {
  position: fixed;
  bottom: 40px;
  right: 92px;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(180deg, #EA2B16 0%, #FF3B26 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9990;
  box-shadow: 0 8px 24px rgba(253, 58, 37, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.eoche-chat-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(253, 58, 37, 0.45), 0 4px 8px rgba(0, 0, 0, 0.25);
}

.eoche-chat-panel {
  position: fixed;
  bottom: 104px;
  right: 20px;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 520px;
  max-height: calc(100vh - 140px);
  background: linear-gradient(180deg, #18181b 0%, #0f0f11 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  z-index: 9991;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.98);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.eoche-chat-panel--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.eoche-chat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.eoche-chat-title {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}

.eoche-chat-sub {
  color: #a1a1aa;
  font-size: 13px;
  line-height: 1.5;
  margin-top: 2px;
}

.eoche-chat-sub a {
  color: #e4e4e7;
  text-decoration: none;
  font-weight: 600;
}

.eoche-chat-close {
  background: none;
  border: none;
  color: #71717a;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -10px -12px -10px 0; /* cible 44px sans grossir l'en-tete */
  flex-shrink: 0;
}

.eoche-chat-close:hover { color: #fff; }

.eoche-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
}

.eoche-chat-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 16px;
  line-height: 1.55;
  word-wrap: break-word;
}

.eoche-chat-msg--bot {
  align-self: flex-start;
  background: #26262b;
  color: #e4e4e7;
  border-bottom-left-radius: 4px;
}

.eoche-chat-msg--bot a { color: #ff6b5b; font-weight: 600; }

.eoche-chat-msg--user {
  align-self: flex-end;
  background: linear-gradient(180deg, #EA2B16 0%, #FF3B26 100%);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.eoche-chat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-self: flex-start;
}

.eoche-chat-action {
  background: transparent;
  border: 1px solid rgba(255, 107, 91, 0.5);
  color: #ff8a7d;
  border-radius: 99px;
  padding: 12px 16px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.eoche-chat-action:hover {
  background: rgba(253, 58, 37, 0.12);
  color: #fff;
}

.eoche-chat-inputrow {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* form input[type=text] du theme est plus specifique : on verrouille. */
.eoche-chat .eoche-chat-input,
.eoche-chat form input.eoche-chat-input[type="text"] {
  flex: 1;
  background: #111114 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
  padding: 12px !important;
  font-size: 16px; /* 2026-08-14 : sous 16px, Safari iOS zoome la page au focus */
  outline: none;
}

.eoche-chat .eoche-chat-input::placeholder {
  color: #8f8f9d !important;
  -webkit-text-fill-color: #8f8f9d !important;
  opacity: 1;
}

.eoche-chat .eoche-chat-input:focus { border-color: rgba(253, 58, 37, 0.6) !important; }

.eoche-chat-send {
  background: linear-gradient(180deg, #EA2B16 0%, #FF3B26 100%);
  border: none;
  color: #fff;
  border-radius: 10px;
  padding: 12px 18px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.eoche-chat-send:disabled { opacity: 0.5; cursor: default; }

.eoche-chat-footer {
  padding: 8px 14px 10px;
  font-size: 11px;
  color: #a1a1aa; /* 2026-08-14 : #52525b sur fond noir etait sous le seuil */
  text-align: center;
}

.eoche-chat-typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  height: 12px;
}

.eoche-chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #71717a;
  animation: eoche-chat-blink 1.2s infinite both;
}

.eoche-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.eoche-chat-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes eoche-chat-blink {
  0%, 80%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}

@media (max-width: 575px) {
  .eoche-chat-launcher { bottom: 96px; right: 20px; }
  .eoche-chat-panel {
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    bottom: 160px;
    height: 480px;
    max-height: calc(100vh - 190px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .eoche-chat-panel { transition: opacity 0.2s ease; transform: none; }
  .eoche-chat-typing span { animation: none; opacity: 0.6; }
}

/* ═══════════════════════════════════
   TARIFS : correctifs espacement (retour UX Baptiste 2026-07-04)
   1. Le toggle n'avait aucune marge basse (badge « LE PLUS DEMANDÉ » par-dessus).
   2. « à partir de » chevauchait le prix (line-height 72px du thème sur texte réduit).
   ═══════════════════════════════════ */
.pricing-toggle-wrap {
  margin-bottom: 56px !important;
}

.section-pricing .price-from {
  margin-bottom: 2px;
}

.section-pricing .price-number.pricing-custom {
  line-height: 1.15;
  display: inline-block;
}

/* Bande automatisation : respiration verticale entre libellé, prix et bouton */
.section-pricing .pricing-item .price-from + .price-number {
  margin-top: 2px;
}

/* ═══════════════════════════════════
   RETOURS UX 2 : 2026-07-04 soir
   ═══════════════════════════════════ */

/* 1. Titre « Studio web indépendant, basé à Vitré » : le dégradé du thème
   tombait à alpha 0 → la 2e ligne était invisible. Plancher à 40 % d'opacité. */
.section-about-us .heading-title {
  background-image: linear-gradient(360deg, rgba(41, 44, 46, 0.42) 0%, rgb(41, 44, 46) 100%) !important;
}

/* 2. Bloc « Découvrir nos réalisations » : plus compact verticalement */
.portfolio-showcase__head {
  margin-bottom: 8px;
}

.portfolio-showcase__head .heading-section {
  margin-bottom: 12px;
}

.portfolio-showcase__head .heading-title {
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.15;
}

.portfolio-showcase__intro {
  margin-bottom: 0;
}

/* 3. Cartes tarifs : reserver la ligne « (Création seule) » pour que
   les 3 boutons et les 3 listes soient exactement à la même hauteur */
.section-pricing .pricing-item .heading .price-per {
  display: block;
  min-height: 26px;
}

/* ═══════════════════════════════════
   SECTION RÉALISATIONS : version compacte (retour Baptiste)
   3 colonnes égales au lieu de la carte vedette double hauteur,
   médias à ratio fixe au lieu de height:100%.
   ═══════════════════════════════════ */
@media (min-width: 992px) {
  .portfolio-showcase__grid--curated {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .portfolio-showcase__grid--curated > article,
  .portfolio-showcase__grid--curated > .overflow-hidden {
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

.portfolio-showcase__grid--curated .portfolio-card__media {
  aspect-ratio: 16 / 10 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden;
}

.portfolio-showcase__grid--curated .portfolio-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Alignement parfait des 3 cartes réalisations :
   même padding partout (la carte ex-vedette gardait 44px),
   2 lignes réservées pour le titre, 3 pour la description,
   tags et lien épinglés en bas. */
.portfolio-showcase__grid--curated .portfolio-card {
  display: flex;
  flex-direction: column;
}

.portfolio-showcase__grid--curated .portfolio-card__body {
  padding: 30px !important;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.portfolio-showcase__grid--curated .portfolio-card__body h3 {
  min-height: 2.5em;
}

.portfolio-showcase__grid--curated .portfolio-card__body > p {
  min-height: 5em;
  margin-bottom: 0;
}

.portfolio-showcase__grid--curated .portfolio-card__tags {
  margin-top: auto;
  padding-top: 18px;
}

.portfolio-showcase__grid--curated .portfolio-card__footer {
  margin-top: 18px;
}

/* Typo uniforme entre les 3 cartes (l'ex-vedette avait meta/titre plus grands) */
.portfolio-showcase__grid--curated .portfolio-card__meta {
  font-size: 13px;
  margin-bottom: 14px;
}

.portfolio-showcase__grid--curated .portfolio-card__body h3 {
  font-size: 26px;
  line-height: 1.25;
}

.portfolio-showcase__grid--curated .portfolio-card__body > p {
  font-size: 15px;
  line-height: 1.6;
}

/* Gap flex uniforme (l'ex-vedette avait 18px vs 13px) */
.portfolio-showcase__grid--curated .portfolio-card__body {
  gap: 13px !important;
}

/* ==== Hero LCP (audit 2026-07-05) ==========================================
   styles.css met .effectFade a opacity:0 jusqu'a l'init GSAP : sur une page
   lourde, le hero restait invisible/pale plusieurs secondes. Fallback CSS
   scope au hero uniquement : revelation en fondu immediate, sans dependre
   du JS. L'animation CSS (fill forwards) garde la main sur les styles
   inline poses ensuite par GSAP -> pas de double animation ni de flash.
   Les autres sections conservent l'animation GSAP d'origine. */
.section-hero .effectFade {
  animation: eocheHeroReveal 0.7s ease forwards;
}
.section-hero .sub.effectFade { animation-delay: 0.05s; }
.section-hero h1.effectFade { animation-delay: 0.15s; }
.section-hero .text.effectFade { animation-delay: 0.3s; }
.section-hero .bot-btns.effectFade { animation-delay: 0.45s; }
.section-hero .availability-badge.effectFade { animation-delay: 0.6s; }
@keyframes eocheHeroReveal {
  to { opacity: 1; visibility: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .section-hero .effectFade { animation-duration: 0.01s; animation-delay: 0s; }
}


/* ═══════════════════════════════════════════════════════════════
   REFONTE 2026-07-26 : reveal maison, zero animation mobile,
   compaction verticale. Remplace GSAP/ScrollTrigger.
   ═══════════════════════════════════════════════════════════════ */

/* Reveal : par defaut RIEN n'est cache (annule styles.css:2914 .effectFade{opacity:0}).
   Sans JS, sans IO, sur mobile, en reduced-motion : tout est visible. */
.effectFade { opacity: 1; }

/* Desktop avec JS : on cache puis on revele au defilement (classe .in-view posee
   par reveal.v2.js). Aucun wrapper injecte : h-100/flex-grow des cartes intacts. */
@media (min-width: 1025px) {
  .js-reveal .effectFade {
    transition: opacity .8s cubic-bezier(0.22, 1, 0.36, 1),
                transform .8s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .js-reveal .effectFade:not(.in-view) { opacity: 0; }
  .js-reveal .effectFade.fadeUp:not(.in-view) { transform: translateY(50px); }
  /* 2026-07-26 : PLUS AUCUNE INCLINAISON 3D (l'ancien perspective+rotateX(45deg)
     donnait un effet "generique Star Wars" refuse par Baptiste). Les titres
     arrivent desormais en simple fondu, sans deformation. */
  .js-reveal .effectFade.fadeRotateX:not(.in-view) { transform: none; }
  .js-reveal .effectFade.in-view { opacity: 1; transform: none; }

  /* HERO : reveal.v2.js l'ignore volontairement, donc ses elements ne recoivent
     JAMAIS .in-view -> les regles :not(.in-view) ci-dessus restaient collees en
     permanence (titre + boutons couches a 45 deg, sous-titre/paragraphe/badge
     decales de 50px). On neutralise ici, avec une specificite superieure : le
     hero s'affiche net, droit, a sa place, sans aucune transformation. */
  .js-reveal .section-hero .effectFade,
  .js-reveal .section-hero .effectFade.fadeUp:not(.in-view),
  .js-reveal .section-hero .effectFade.fadeRotateX:not(.in-view) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── ZERO ANIMATION SUR MOBILE (demande explicite : vitesse avant tout).
   Duree 0 = l'etat final s'applique instantanement (les keyframes "forwards"
   du hero, du modal et des pages secondaires restent donc VISIBLES).
   animation:none reserve aux boucles infinies. ── */
@media (max-width: 1024px) {
  *, *::before, *::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .pulse { animation: none !important; }
  /* 2026-08-14 : l'indicateur d'attente du chat doit continuer a clignoter
     pendant les 30 s que peut durer une reponse, sinon le chat parait fige. */
  .eoche-chat-typing span { animation: eoche-chat-blink 1.2s infinite both !important; }
  * { will-change: auto !important; }
  #goTop { display: none !important; }

  /* Compaction verticale complementaire */
  .flat-spacing { padding-top: 32px !important; padding-bottom: 32px !important; }
  .mb-80, .mb-70, .mb-64, .mb-48 { margin-bottom: 20px !important; }
  .mb-40, .mb-32 { margin-bottom: 16px !important; }
  .section-pricing [style*="margin-top: 32px"] { margin-top: 16px !important; }
}

/* ── PC : respect de prefers-reduced-motion (meme regime que mobile) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .pulse,
  .eoche-chat-typing span { animation: none !important; }
  .js-reveal .effectFade { opacity: 1 !important; transform: none !important; }
}


/* ═══════════════════════════════════════════════════════════════
   2026-07-26 (v5) : ACCORDEON SERVICES : FONDU SIMPLE
   Baptiste pas convaincu par le glissement, meme fluidifie (v4).
   Version sobre et sure : PLUS AUCUN MOUVEMENT du fond noir.
   La carte passe du blanc au noir par un simple fondu (opacity),
   la seule propriete d'animation garantie sans saccade avec ombres,
   degrade et coins arrondis. Rien ne bouge, rien ne se deforme.
   Sur mobile : durees a 0 (regle globale plus haut) = bascule nette.
   ═══════════════════════════════════════════════════════════════ */

/* Le fond noir est toujours en place (plus de glissement bottom:110%),
   il est simplement invisible tant que la carte est fermee. */
.accordion-faq_item .accordion-action::before {
  bottom: 0 !important;      /* annule le bottom:110% du theme dans TOUS les etats */
  transform: none;
  opacity: 1;
  transition: opacity 0.25s ease;
}
.accordion-faq_item .accordion-action.collapsed::before {
  opacity: 0;
}

/* Titre : la taille change d'un coup (pas d'animation de font-size,
   trop couteuse), seule la couleur fond au meme rythme que le fond. */
.accordion-faq_item .accordion-title {
  transition: color 0.25s ease;
}

/* Limite la zone a repeindre a la carte elle-meme (gain mobile). */
.accordion-faq_item {
  contain: paint;
}


/* ═══════════════════════════════════════════════════════════════
   2026-08-14 (v6) : CORRECTIFS DE L'AUDIT UX MOBILE
   Referentiel : docs/AUDIT-UX-MOBILE-2026-08-14.md
   ═══════════════════════════════════════════════════════════════ */

/* Retour visuel au tap : un bouton muet sous le doigt parait casse.
   Changement d'etat instantane (les durees mobiles sont a 0s), pas une animation. */
.tf-btn:active,
.tf-btn-2:active,
.eoche-chat-launcher:active,
.eoche-chat-send:active,
.eoche-chat-action:active,
.eoche-chat-close:active,
.accordion-action:active,
.mb-menu-link:active,
.portfolio-card__link:active,
.accordion-button:active {
  filter: brightness(0.82);
}

/* Focus clavier visible sur tous les liens (styles.css:352 supprimait
   l'outline sans remplacement). Invisible au doigt et a la souris. */
a:focus-visible {
  outline: 2px solid #FD3A25 !important;
  outline-offset: 3px;
}

/* Bouton FERMER du menu plein ecran : la cible faisait 68x16 px,
   seule sortie d'un calque qui couvre tout l'ecran. C'est desormais un
   vrai <button> : on annule les styles natifs et on agrandit la cible
   sans decaler la mise en page (marges negatives compensatoires). */
.offcanvas-menu .btn-mobile-menu {
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  min-height: 48px;
  min-width: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 12px 16px;
  margin: -12px -16px;
  cursor: pointer;
}

/* Pied du menu plein ecran : e-mail et LinkedIn faisaient 16 px de haut. */
.offcanvas-menu .canvas_foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Page courante dans le menu mobile */
.nav-ul-mb a[aria-current="page"],
.nav-ul-mb a[aria-current="page"] .text {
  color: #FD3A25;
}

/* Etiquettes rouges des sections (TARIFS, AVIS...) : #FD3A25 tenait ~3,9:1
   sur la pastille claire. Le .style-1 des sections noires reste inchange
   (rouge sur #09090B : 5,5:1, conforme). */
.heading-section .heading-sub:not(.style-1) {
  color: #C92715;
}

/* Fond du hero : background-attachment fixed force un repaint a chaque
   defilement mobile et bugue sur iOS. Le fond defile avec la page. */
@media (max-width: 1024px) {
  .section-hero .hero-image,
  .section-page-title {
    background-attachment: scroll !important;
  }
}

@media (max-width: 767px) {
  /* Section Services : le texte de lecture mobile etait en 14 px */
  .section-services .text-body-3 {
    font-size: 16px !important;
    line-height: 24px !important;
  }

  /* Questions de la FAQ : cible tactile minimale */
  .accordion-button {
    min-height: 44px;
  }

  /* Liens du pied de page : cibles de 24 px de haut, portees a 44 px
     sans changer la densite visuelle (marges compensatoires). */
  footer a.fw-semibold {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: -10px;
    margin-bottom: -10px;
  }
}

/* Le titre Base a Vitre est passe de h5 a h2 pour la hierarchie des titres
   (audit 14/08) : on fige son rendu a l identique de l ancien h5. */
.section-about-us .col-left .title {
  font-size: 32px;
  line-height: 40px;
}
@media (max-width: 767px) {
  .section-about-us .col-left .title {
    font-size: 22px;
    line-height: 28px;
  }
}