/*
Theme Name: MyTheme Child
Theme URI: https://tonsite.fr
Description: Thème enfant GeneratePress
Author: CodePac 
Author URI: https://tonsite.fr
Template: generatepress
Version: 1.0
*/
:root {
    --primary-color: #3e8fffe0;
    --text-color: #f0ede8;
    --bg-color: #0B0B0F;
    --nightblue: #000510;
    --void-dark: #0E100F;
    --void-blue: #000510;
    --void-accent: #00d4ff;
    /* Vitesse */
    --marquee-duration: 40s;
    /* Taille */
    --card-width: 380px;
    --card-height: 240px;
    --card-radius: 16px;
    /* Espacement */
    --card-gap: 24px;
    /* Couleur de fond */
    --section-bg: #0b0b0f;
    /* Couleur daccent */
    --accent: #3e8fffe0;
    /* Opacité dufiltre */
    
    /*a proposs */
    --ap-bg:      #0b0b0f;
    --ap-accent:  #3e8ffee0;
    --ap-accent-r: 62, 143, 254;
    --ap-text:    #f0ede8;
    --ap-muted:   rgba(240, 237, 232, 0.45);
    --ap-border:  rgba(255, 255, 255, 0.07);

    /* mes services*/
    --s-bg:       #0b0b0f;
    --s-accent:   #3e8ffee0;
    --s-accent-r: 62, 143, 254;
    --s-text:     #f0ede8;
    --s-muted:    rgba(240, 237, 232, 0.42);
    --s-border:   rgba(255, 255, 255, 0.07);

    /*temoignages*/
    --t-card-bg:     #13131a;
    --t-card-border: rgba(255,255,255,0.06);
    --t-muted:       rgba(240,237,232,0.45);
    --t-accent:      #3e8fffe0;
    --t-text:        #f0ede8;
    --t-star-empty:  rgba(201,169,110,0.2);
    --t-radius:      14px;
    --t-col-gap:     1.5rem;
  } 
body {
  overflow-x: hidden !important;
  background-color: var(--bg-color) !important;
}
#void-matrix {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background:
    linear-gradient(to bottom, transparent 0%, rgba(14, 16, 15, 0.4) 70%, rgba(14, 16, 15, 0.8) 100%),
    radial-gradient(ellipse at 20% 20%, rgba(0, 5, 16, 0.9) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(14, 16, 15, 0.95) 0%, transparent 50%),
    linear-gradient(135deg, var(--void-dark) 0%, var(--void-blue) 50%, var(--void-dark) 100%);
  overflow: hidden;
  perspective: 1000px;
}
#void-matrix::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background-image: 
    linear-gradient(rgba(0, 212, 255, 0.08) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.08) 1.5px, transparent 1.5px);
  background-size: 100px 100px;
  transform: rotateX(60deg) translateZ(-400px);
  animation: gridScroll 20s linear infinite;
  will-change: transform;
}
@keyframes gridScroll {
  0% {
    transform: rotateX(60deg) translateZ(-400px) translateY(0);
  }
  100% {
    transform: rotateX(60deg) translateZ(-400px) translateY(100px);
  }
}
#void-matrix::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  top: 20%;
  left: 15%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(0, 212, 255, 0.15) 0%, rgba(0, 100, 200, 0.08) 40%, transparent 70%);
  border: 1px solid rgba(0, 212, 255, 0.15);
  box-shadow: 
    inset 0 0 60px rgba(0, 212, 255, 0.2),
    0 0 100px rgba(0, 212, 255, 0.15);
  animation: sphere3D 30s ease-in-out infinite;
  transform-style: preserve-3d;
  will-change: transform;
}
@keyframes sphere3D {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  33% {
    transform: translate3d(100px, -80px, 150px) rotateX(120deg) rotateY(120deg) rotateZ(45deg);
  }
  66% {
    transform: translate3d(-60px, 100px, -80px) rotateX(240deg) rotateY(240deg) rotateZ(90deg);
  }
}
#void-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
#void-matrix::before,
#void-matrix::after {
  backface-visibility: hidden;
  transform: translateZ(0);
}
@media (hover: none) and (pointer: coarse) {
  #void-matrix {
    perspective: none;
  }
  #void-matrix::after {
    width: 250px;
    height: 250px;
    box-shadow:
      inset 0 0 40px rgba(0, 212, 255, 0.15),
      0 0 60px rgba(0, 212, 255, 0.1);
  }
  #void-matrix::before {
    position: absolute;
    width: 75px;
    height: 75px;
    top: 50%;
    left: 50%;
    margin: -37px 0 0 -37px;
    border-radius: 72% 28% 58% 42% / 35% 65% 38% 62%;
    background:
      radial-gradient(circle at 30% 25%,
        rgba(255, 255, 255, 0.32) 0%,
        rgba(240, 237, 232, 0.18) 18%,
        transparent 45%),
      radial-gradient(circle at 50% 55%,
        rgba(0, 212, 255, 0.15) 0%,
        rgba(0, 100, 200, 0.08) 52%,
        transparent 88%);
    box-shadow:
      inset 0 1px 2px rgba(255, 255, 255, 0.3),
      inset 0 0 24px rgba(0, 212, 255, 0.2),
      0 0 38px rgba(0, 212, 255, 0.15);
    will-change: transform, opacity;
    animation:
      blobSatelliteMorph 34s linear -17s infinite,
      blobBreath 7s ease-in-out -2s infinite;
    pointer-events: none;
  }
  .pearl-variant {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 75px;
    height: 75px;
    margin: -37px 0 0 -37px;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    border-radius: 65% 35% 48% 52% / 38% 62% 35% 65%;
    background: radial-gradient(circle at 32% 26%,
      rgba(255, 255, 255, 0.48) 0%,
      rgba(240, 237, 232, 0.4) 32%,
      rgba(240, 237, 232, 0.07) 75%,
      transparent 95%);
    box-shadow: 0 0 38px rgba(240, 237, 232, 0.21);
    animation:
      blobSatelliteMorph 34s linear -17s infinite,
      pearlFadeAlternate 34s ease-in-out -17s infinite;
  }
}
@keyframes pearlFadeAlternate {
  0%, 100% { opacity: 0;    }  /* TOP */
  25%      { opacity: 0.22; }  /* RIGHT */
  50%      { opacity: 0.55; }  /* BOTTOM */
  75%      { opacity: 0.22; }  /* LEFT */
}
@media (prefers-reduced-motion: reduce) {
  #void-matrix::before,
  #void-matrix::after {
    animation: none !important;
  }
  .pearl-variant { display: none; }
}
@keyframes blobSatelliteMorph {
  0%   { transform: translate(0,      -35vh) rotate(0deg)    scale(1.18, 0.82) skew(-4deg,  0deg); }
  8%   { transform: translate(15vw,   -32vh) rotate(-30deg)  scale(1.12, 0.88) skew(-3deg, -2deg); }
  16%  { transform: translate(27vw,   -22vh) rotate(-60deg)  scale(1.02, 0.98) skew(-1deg, -3deg); }
  25%  { transform: translate(35vw,    0)    rotate(-90deg)  scale(0.82, 1.18) skew( 0deg, -4deg); }
  33%  { transform: translate(30vw,    18vh) rotate(-120deg) scale(0.92, 1.08) skew( 2deg, -3deg); }
  41%  { transform: translate(18vw,    30vh) rotate(-150deg) scale(1.05, 0.95) skew( 3deg, -1deg); }
  50%  { transform: translate(0,       35vh) rotate(-180deg) scale(1.18, 0.82) skew( 4deg,  0deg); }
  58%  { transform: translate(-18vw,   30vh) rotate(-210deg) scale(1.08, 0.92) skew( 3deg,  2deg); }
  66%  { transform: translate(-30vw,   18vh) rotate(-240deg) scale(0.95, 1.05) skew( 1deg,  3deg); }
  75%  { transform: translate(-35vw,   0)    rotate(-270deg) scale(0.82, 1.18) skew( 0deg,  4deg); }
  83%  { transform: translate(-27vw,  -22vh) rotate(-300deg) scale(0.98, 1.02) skew(-2deg,  3deg); }
  91%  { transform: translate(-15vw,  -32vh) rotate(-330deg) scale(0.88, 1.12) skew(-3deg,  2deg); }
  100% { transform: translate(0,      -35vh) rotate(-360deg) scale(1.18, 0.82) skew(-4deg,  0deg); }
}
@keyframes blobBreath {
  0%, 100% { opacity: 0.78; }
  23%      { opacity: 0.96; }
  47%      { opacity: 0.85; }
  68%      { opacity: 1;    }
  84%      { opacity: 0.92; }
}

h2 {
  margin-bottom: 4rem !important;
}
h2::after {
  content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: var(--text-color);
    margin-top: 20px;
}
@media (min-width:768px) {
  h2::after {
    display: none;
}
}

p {
  font-weight: 300 !important;
}
h3 {
  font-weight: 300;
}
h2 {
  font-weight: 300 !important;
}
@media (max-width:768px) {
  .site-header {
    padding: 0 !important;
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  padding: 2rem 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.site-header img {
  background-color: var(--text-color);
  border-radius: 0.5rem;
}
.inside-navigation {
  background-color: #0f0f16;
  border-radius: 14px;
}
.sub-menu ul {
  padding: 0.5rem;
  border-radius: 14px;
}
.sub-menu li {
  position: relative;
  background-color: var(--bg-color); 
  padding: 0.25rem 0;
  overflow: hidden;
  transition:
    background-color 0.3s ease,
    transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.sub-menu li::after, .inside-navigation li::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 12px;
  right: 12px;
  height: 1px;
  background: rgba(62, 143, 255, 0.55);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 1px;
}
.sub-menu li:hover {
  transform: translateX(3px);
}

.sub-menu li:hover::after, .inside-navigation li:hover::after {
  transform: scaleX(1);
}
.inside-article,.site-main {
    margin: 0 !important;
    padding-top: 0 !important;
}
.homebanner img {
    opacity: 0.7;
}
.bannercontent {
  text-align: center;
    
}
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ap-bg);
  background: var(--ap-accent);
  padding: 0.85rem 1.7rem;
  border-radius: 100px;
  flex-shrink: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}
.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 36px rgba(var(--ap-accent-r), 0.28);
  opacity: 0.9;
}
.btn-cta-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}
.btn-cta:hover .btn-cta-arrow {
  transform: translateX(4px);
}
#btn-cta-banner {
  margin-top: 2rem;
}
.section-title, .apropos-title {
  font-size: clamp(2rem, 3vw, 3.2rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ap-text);
  letter-spacing: -0.03em;
  margin: 0;
}
.section-title em {
  font-style: italic;
  color: var(--accent);
}
.apropos-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--ap-accent);
}

/*a proposs */ 
.apropos-teaser {
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-top: 40px;
}
.apropos-teaser-inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4rem 6rem;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 2.5rem;
  position: relative;
}

.apropos-teaser-inner::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: 1px;
  height: 55%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(var(--ap-accent-r), 0.35) 30%,
    rgba(var(--ap-accent-r), 0.35) 70%,
    transparent
  );
} 
.apropos-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ap-accent);
  margin-bottom: 1.6rem;
}
.apropos-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--ap-accent);
  opacity: 0.6;
  flex-shrink: 0;
}
.apropos-left {
  position: relative;
}
.apropos-left::after {
  content: '01';
  position: absolute;
  top: -1.5rem;
  right: 0;
  font-size: 7rem;
  font-weight: 700;
  color: rgba(var(--ap-accent-r), 0.04);
  line-height: 1;
  letter-spacing: -0.05em;
  pointer-events: none;
  user-select: none;
}
.apropos-right {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.apropos-text {
  font-size: 0.97rem;
  line-height: 1.85;
  color: var(--ap-muted);
}
.apropos-text strong {
  color: rgba(240, 237, 232, 0.75);
  font-weight: 600;
}
.apropos-sep {
  width: 100%;
  height: 1px;
  background: var(--ap-border);
}
.apropos-cta-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.apropos-note {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(240, 237, 232, 0.2);
}
.apropos-reveal {
  opacity: 0;
  translate: 0 20px;
  transition: opacity 0.65s ease, translate 0.65s cubic-bezier(0.23, 1, 0.32, 1);
}
.apropos-reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}
@media (max-width: 992px) {
  .apropos-teaser-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-left: 1.5rem;
  }
 
  .apropos-teaser::before { display: none; }
}
@media (max-width: 768px) {
  
  .apropos-teaser-inner::before { display: none; }
 
  .apropos-teaser { padding: 0; }
 
  .apropos-teaser-inner { padding-left: 0; gap: 2rem; }
 
  .apropos-cta-wrap { flex-direction: column; align-items: flex-start; }
 
  .apropos-left::after { font-size: 5rem; }

  .apropos-cta-wrap {
    margin: auto;
    margin-bottom: 4rem;    
  }
 .apropos-note {
  margin-left: 55px;
 }
}
@media (prefers-reduced-motion: reduce) {
  .apropos-reveal { transition: none; opacity: 1; translate: 0; }
  .btn-cta    { transition: none; }
}
/*services*/
.srv-section {
  padding: 0;
  position: relative;
  overflow: hidden;
}
.srv-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.srv-item {
  position: relative;
  border-top: 1px solid var(--s-border);
  cursor: default;
  transition: background 0.4s ease;
}
.srv-item:last-child {
  border-bottom: 1px solid var(--s-border);
}
.srv-item:hover {
  background: rgba(var(--s-accent-r), 0.03);
}
.srv-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--s-accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.srv-item:hover::before {
  transform: scaleY(1);
}
.srv-item-inner {
  display: grid;
  grid-template-columns: 5rem 1fr auto;
  align-items: start;
  gap: 0 3rem;
  padding: 2.4rem 5vw 2.4rem calc(5vw + 2px);
  transition: padding 0.35s ease;
}
.srv-item:hover .srv-item-inner {
  padding-left: calc(5vw + 1.8rem);
}
.srv-num {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(var(--s-accent-r), 0.4);
  padding-top: 0.45rem;
  transition: color 0.3s ease;
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.srv-item:hover .srv-num {
  color: var(--s-accent);
}
.srv-name {
  font-size: clamp(1.3rem, 2.8vw, 2.1rem);
  font-weight: 300;
  color: var(--s-text);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0 0 0.9rem;
  transition: color 0.3s ease;
}
 
.srv-item:hover .srv-name {
  color: var(--primary-color);
}
.srv-details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.45s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.35s ease;
}
.srv-item:hover .srv-details,
.srv-item.is-open .srv-details {
  max-height: 120px;
  opacity: 1;
}
.srv-details li {
  font-size: 0.82rem;
  color: var(--s-muted);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  line-height: 1.5;
}
.srv-details li::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--s-accent);
  opacity: 0.7;
  flex-shrink: 0;
}
.srv-tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(var(--s-accent-r), 0.5);
  background: rgba(var(--s-accent-r), 0.07);
  border: 1px solid rgba(var(--s-accent-r), 0.15);
  border-radius: 100px;
  padding: 0.35rem 0.9rem;
  white-space: nowrap;
  margin-top: 0.3rem;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  align-self: flex-start;
}
.srv-item:hover .srv-tag {
  background: rgba(var(--s-accent-r), 0.14);
  color: var(--s-accent);
  border-color: rgba(var(--s-accent-r), 0.3);
}
.srv-item-ghost {
  position: absolute;
  right: 4vw;
  top: 50%;
  translate: 0 -50%;
  font-size: clamp(5rem, 10vw, 9rem);
  font-weight: 700;
  color: rgba(var(--s-accent-r), 0.025);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.05em;
  transition: color 0.4s ease;
  z-index: 0;
}
.srv-item:hover .srv-item-ghost {
  color: rgba(var(--s-accent-r), 0.055);
}
.srv-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 3rem 5vw 0;
  flex-wrap: wrap;
}
.srv-footer-note {
  font-size: 0.8rem;
  color: var(--s-muted);
  max-width: 380px;
  line-height: 1.7;
}
.srv-footer-note strong {
  color: rgba(240, 237, 232, 0.7);
  font-weight: 600;
}
.srv-reveal {
  opacity: 0;
  translate: 0 18px;
  transition:
    opacity 0.6s ease,
    translate 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
 
.srv-reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}
.srv-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--s-accent);
  margin-top: 1rem;
  opacity: 0;
  translate: 0 4px;
  transition: opacity 0.3s ease, translate 0.3s ease, gap 0.3s ease;
  pointer-events: none;
}
.srv-item:hover .srv-link,
.srv-item.is-open .srv-link {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}
.srv-link:hover {
  gap: 0.7rem;
}
@media (max-width: 990px) {
  .srv-item-inner {
    grid-template-columns: 3.5rem 1fr;
    gap: 0 1.5rem;
  }
 
  .srv-tag { display: none; }
  .srv-item-ghost { display: none; }
}
@media (max-width: 768px) {
  .srv-section { padding: 0rem 0 64px; }
 
  .srv-item-inner {
    grid-template-columns: 2.8rem 1fr;
    gap: 0 1rem;
    padding: 1.8rem 5vw 1.8rem calc(5vw + 2px);
  }
 
  .srv-item:hover .srv-item-inner {
    padding-left: calc(5vw + 1rem);
  }
 
  .srv-name { font-size: 1.2rem; }
 
  .srv-item:hover .srv-details,
  .srv-item.is-open .srv-details {
    max-height: 200px;
  }
 
  .srv-footer { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .srv-reveal { transition: none; opacity: 1; translate: 0; }
  .srv-item::before,
  .srv-details,
  .srv-item-inner,
  .btn-cta { transition: none; }
}

/*PROJETS*/
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 0 auto;
}
.section-header h2::after {
  content: none;
}
.section-eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
  opacity: 0.9;
}
.header-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--text-color);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 169, 110, 0.5);
  padding-bottom: 0.25rem;
  white-space: nowrap;
  transition: color 0.3s ease, border-color 0.3s ease;
  flex-shrink: 0;
  align-self: flex-end;
  margin-bottom: 1rem;
}
.header-cta:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.header-cta::after {
  content: '→';
  transition: transform 0.3s ease;
}
.header-cta:hover::after {
  transform: translateX(4px);
}
.projects-marquee {
  overflow: hidden;
  cursor: grab;
  margin-top: 2rem;
   
}
.projects-marquee:hover .projects-track {
  animation-play-state: running;
}
.projects-track {
  display: flex;
  gap: var(--card-gap);
  width: max-content;
  animation: marquee-scroll var(--marquee-duration) linear infinite;
  will-change: transform;
}
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.project-item {
  position: relative;
  display: block;
  width: var(--card-width);
  height: var(--card-height);
  flex-shrink: 0;
  border-radius: var(--card-radius);
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
}
.project-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--card-radius);
  transform: scale(1);
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.project-item:hover img {
  transform: scale(1.07);
  opacity: 0.7;
}
.project-item::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--card-radius);
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.1) 55%,
    rgba(0, 0, 0, 0) 100%
  );
  opacity: 0.6;
  transition: opacity 0.5s ease;
}
.project-item:hover::before {
  opacity: 1;
}
.project-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 1.2rem 1.4rem; 
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-color );
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
}
.project-item:hover .project-title {
  opacity: 1;
  transform: translateY(0);
}
.project-title::before {
  content: '';
  display: block;
  width: 75px;
  height: 1px;
  background: var(--accent);
  margin-bottom: 0.5rem;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease-in-out 0.2s;
}
.project-item:hover .project-title::before {
  transform: scaleX(1);
}
a.project-item::after {
  content: '↗ Voir';
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-color);
  background: var(--nightblue);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);
  padding: 0.35rem 0.7rem;
  border-radius: 100px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
a.project-item:hover::after {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 768px) {
  :root {
    --card-width: 250px;
    --card-height: 150px;
    --card-gap: 16px;
    --marquee-duration: 28s;
  }
  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .header-cta {
    align-self: flex-start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .projects-track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--card-gap);
  }
}

/*FAQ*/
.faq-item {
  position: relative;
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(10px);
  transition: all 0.4s ease-in-out;
  overflow: hidden;
}
.faq-item:hover {
  border-color: rgba(42, 80, 197, 0.4);
  box-shadow: 0 0 20px rgba(42, 80, 197, 0.15);
}
.faq-item summary {
  cursor: pointer;
  font-size: 17px;
  font-weight: 300;
  list-style: none;
  position: relative;
  transition: color 0.3s ease;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "";
  position: absolute;
  margin-top: 0.5rem;
  right: 0;
  top: 50%;
  width: 12px;
  height: 12px;
  border-right: 2px solid #2a50c5;
  border-bottom: 2px solid #2a50c5;
  transform: translateY(-50%) rotate(45deg);
  transition: transform 0.3s ease;
}
.faq-item[open] summary::after {
  transform: translateY(-50%) rotate(225deg);
}
.faq-item[open] {
  background-color: var(--nightblue);
  box-shadow: 0 0 20px rgba(42, 80, 197, 0.15);
}
.faq-item[open] summary {
  color: var(--primary-color);
}
.faq-item p {
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.4s ease;
}
.faq-item[open] p {
  opacity: 1;
  transform: translateY(0);
}
.faq-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, #2a50c5, #003366);
  transition: width 0.4s ease;
}
.faq-item:hover::before {
  width: 100%;
}

/*Temoignages*/
.temoignages-section {
  margin-top: 2rem;
}
.temoignages-eyebrow {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--t-accent);
  margin-bottom: 1rem;
}
.temoignages-grid {
  columns: 3 320px;
  column-gap: var(--t-col-gap);
  margin-bottom: 2rem;
}
.temoignage-card {
  break-inside: avoid;
  margin-bottom: var(--t-col-gap);
  background: var(--t-card-bg);
  border: 1px solid var(--t-card-border);
  border-radius: var(--t-radius);
  padding: 2rem 1.8rem 1.6rem;
  position: relative;
  overflow: hidden;
  transform-origin: center center;
  transition:
    transform 0.45s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.45s ease,
    border-color 0.45s ease;
  opacity: 0;
  translate: 0 28px;
}
.temoignage-card.is-visible {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 0.6s ease,
    translate 0.6s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.45s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.45s ease,
    border-color 0.45s ease;
}
.temoignage-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--t-accent);
  opacity: 0.5;
  transition: opacity 0.4s ease;
}
.temoignage-card::after {
  content: '\201C';
  position: absolute;
  top: -0.6rem;
  right: 1.4rem;
  font-size: 7rem;
  line-height: 1;
  color: var(--t-accent);
  opacity: 0.06;
  font-family: Georgia, serif;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.temoignage-card:hover {
  border-color: rgba(201,169,110,0.22);
  box-shadow:
    0 0 0 1px rgba(201,169,110,0.12),
    0 20px 60px rgba(0,0,0,0.45);
}
.temoignage-card:hover::before { opacity: 1; }
.temoignage-card:hover::after  { opacity: 0.12; }
.temoignage-card:hover {
  transform: rotate(0deg) scale(1.025) !important;
}
.temoignage-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 1.1rem;
}
.star {
  width: 13px;
  height: 13px;
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%,
    68% 57%, 79% 91%, 50% 70%,
    21% 91%, 32% 57%, 2% 35%,
    39% 35%
  );
  background: var(--t-star-empty);
  transition: background 0.2s;
}
.star.filled { background: var(--t-accent); }
.temoignage-texte {
  font-size: 0.97rem;
  line-height: 1.75;
  color: var(--t-muted);
  margin-bottom: 1.6rem;
  transition: color 0.4s ease;
}
.temoignage-card:hover .temoignage-texte {
  color: rgba(240,237,232,0.7);
}
.temoignage-auteur {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.temoignage-meta { display: flex; flex-direction: column; gap: 2px; }
.temoignage-nom {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--t-text);
  text-transform: uppercase;
}
.temoignage-poste {
  font-size: 0.75rem;
  color: var(--t-muted);
  letter-spacing: 0.03em;
}
@media (max-width: 768px) {
  .temoignages-grid    { columns: 1; }
  /* Pas de rotation sur mobile */
  .temoignage-card     { transform: rotate(0deg) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .temoignage-card,
  .temoignage-card.is-visible { transition: none; translate: 0; opacity: 1; }
}

/*Footer*/
.site-footer {
  background: var(--bg-color);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 4rem 5vw 0;
}
.footer-container {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  justify-content: space-between;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.footer-col img {
  width: 150px;
  max-width: 100%;
  background-color: var(--text-color);
  border-radius: 0.5rem;
  height: auto;
  margin-left: auto;
  display: block;
  place-items: center ;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}
.footer-col img:hover {
  opacity: 1;
}
.footer-col h4 {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary-color);
  margin-bottom: 1.4rem;
  position: relative;
  padding-bottom: 0.8rem;
}
.footer-col h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 24px;
  height: 1px;
  background: var(--primary-color);
  opacity: 0.5;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.footer-col ul li a {
  font-size: 0.88rem;
  color: rgba(240, 237, 232, 0.5);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.25s ease, padding-left 0.25s ease;
  display: inline-block;
}
.footer-col ul li a:hover {
  color: var(--text-color);
  padding-left: 6px;
}
.footer-col p {
  font-size: 0.88rem;
  color: rgba(240, 237, 232, 0.5);
  line-height: 1.7;
  margin: 0 0 0.4rem;
}
.footer-bottom {
  padding: 1.4rem 0;
  text-align: center;
}
.footer-bottom p {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: rgba(240, 237, 232, 0.25);
  margin: 0;
}
@media (max-width: 960px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}
@media (max-width: 768px) {
  .site-footer {
    padding-top: 3.5rem;
  }

  .footer-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-col img {
    width: 150px;
    place-items: center;
    margin: auto;
  }
}
/*BASE*/
@media (max-width: 768px) {
  .entry-content h1 {
    font-size: 30px !important;
  }
  .page-id-1004 .inside-article {
    padding: 0rem 1rem 1rem 1rem !important;
  }
}