/* Lien du logo Webistor dans menu Nav */
/* Logo texte */
.logo-link a {
  color: #FDFDFD;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Hover */
.logo-link a:hover {
  color: #D7383A;
  text-decoration: none;
}


/* Liens principaux + bouton mega menu */
.wp-block-navigation .wp-block-navigation-item__content:hover {
  color: #D7383A;
}

/* Liens à l'intérieur du mega menu */
.wp-block-ollie-mega-menu__menu-container a:hover {
  color: #D7383A;
}

/* Footer : liens hover */
.footer-links a {
  color: #FDFDFD; /* Couleur par défaut (noir, ou autre) */
  text-decoration: none;
  transition: color 0.3s ease; /* Animation fluide (optionnel) */
}

.footer-links a:hover {
  color: #D7383A; /* Rouge au survol uniquement */
  text-decoration: none;
}

.mobile-menu a:hover {
    color: #D7383A;
}

/* --------- HERO AJUSTEMENTS ---------- */

/* 1. Container global */
.hero{
    padding: clamp(100px, 12vh, 140px) 2rem 4rem;
}

/* 2. Colonnes = vrai layout */
.hero .colonnes{
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

/* 3. Colonne texte */
.hero .text-section{
    flex: 1;
    max-width: 520px;
    transform: translate(85px);
}

/* 4. Colonne image */
.hero .hero-img{
    flex: 1;
    display: flex;
    align-items: center;
    transform: translate(-55px, 10px);
}

.hero .hero-img img{
    max-height: calc(100% - 40px);
    width: auto;
    height: auto;
}

/* features ajustements et  :hover */

.features{
    opacity: 0.9;
    transform: scale(1);
}

.features {
    transition: transform 0.2s ease;
}

.features:hover {
    transform: translateY(-3px);
}

/* DIVIDER */

.hero-divider{
display: block;
width:80px;
height:2px;

background:linear-gradient(
90deg,
#D7383A,
rgba(215,56,58,0.4),
rgba(215,56,58,0)
);

margin:24px auto;
border-radius:2px;

box-shadow:0 0 12px rgba(215,56,58,0.25);
}

/* comportements hero responsive */

@media (min-width: 1024px){
    .hero{
        padding: 8rem 2rem 4rem;
    }
}

@media (max-width: 916px){

    .hero .colonnes{
        flex-direction: column;
        gap: 2rem;
        min-height: auto;
    }

    .hero .text-section{
        max-width: 100%;
        transform: none;
        text-align: center;
    }
    
    .pile-hero {
    display: flex;            /* active Flexbox */
    align-items: center;      /* centre horizontalement */
    gap: 40px;
    }

    .hero .hero-img{
        transform: none;
        width: 100%;
    }
}

/* FADEUP HERO TEXT + FEATURES + CTA + SCALE IMG */

/* animation de base */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* même easing partout */
.hero-subtitle,
.hero-title,
.hero-text,
.hero-features,
.hero-buttons {
  opacity: 0;
  animation: fadeUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* cascade beaucoup plus serrée */
.hero-subtitle { animation-delay: 0.05s; }
.hero-title    { animation-delay: 0.1s; }
.hero-text     { animation-delay: 0.15s; }
.hero-features { animation-delay: 0.20s; }
.hero-buttons  { animation-delay: 0.25s; }

/* image */
.hero-img {
  opacity: 0;
  transform: scale(0.97);
  animation: fadeScale 1s cubic-bezier(0.4, 0, 0.2, 1) 0.15s forwards;
}

@keyframes fadeScale {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* version mmobile */
@media (max-width: 768px) {

    /* Subtitle */
    .hero-subtitle {
        animation-delay: 0.1s;
    }

    /* Titre */
    .hero-title {
        animation-delay: 0.2s;
    }

    /* Texte */
    .hero-text {
        animation-delay: 0.3s;
    }

    /* Features */
    .hero-features {
        animation-delay: 0.4s;
    }

    /* Boutons */
    .hero-buttons {
        animation-delay: 0.5s;
    }

    /* Image (clé du problème) */
    .hero-img {
        animation-delay: 0.7s;
    }
}

@media (max-width: 768px) {

    .hero-subtitle,
    .hero-title,
    .hero-text,
    .hero-features,
    .hero-buttons,
    .hero-img {
        animation-duration: 0.5s;
    }
}

/* FIN FADEUP HERO TEXT + FEATURES + CTA + SCALE IMG */

/* ---------- FIN HERO AJUSTEMENTS ---------- */


/* ---------- CARTES OFFRES sous Hero ---------- */

/* Faire flotter le badge "Recommandé" */

.offer-card {
  position: relative;
}

.offer-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  
  background: #D7383A;
  color: #fff;
  
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  
  border-radius: 20px;
  white-space: nowrap;
  
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
/* FIN flotter le badge "Recommandé" */


/* Hover léger (cartes 1 et 3) */
.offer-card {
  transition: all 0.25s ease;
}

.offer-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
  border-color: #D7383A !important;
}

/* Hover renforcer (cartes 2) */
.offer-card.featured:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 50px rgba(0,0,0,0.08);
  border-color: #b32223!important;
}

@media (max-width: 781px) {
    .offer-title {
        font-size: 40px !important;
    }
}

@media (max-width: 426px) {
    .offer-title {
        font-size: 30px !important;
    }
}

/* ---------- FIN CARTES OFFRES sous Hero ---------- */

/* SLIDE + FADE PAGE SITE INTERNET */

.title-cov {
  opacity: 0;
  transform: translateY(-200px);
  animation: titleSlideDown 1.6s ease-out forwards;
}

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

.paragraph-cov {
  opacity: 0;
  animation: paragraphFade 2.6s ease-out forwards;
  animation-delay: 1.6s;
}

@keyframes paragraphFade {
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tittle-cov,
  .paragraph-cov {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* FIN SLIDE + FADE PAGE SITE INTERNET */


/* SLIDE + FADE title-webistor page webistor*/
.title-webistor {
  opacity: 0;
  transform: translateY(-80px);
  animation: fadeUp 1.2s ease-out forwards;
  will-change: transform, opacity; /* micro gain de fluidité */
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* FIN SLIDE + FADE title-webistor page webistor*/

/* SLIDE + FADE title-faq page FAQ */
.title-faq {
  opacity: 0;
  transform: translateY(-80px);
  animation: fadeUp 1.2s ease-out forwards;
  will-change: transform, opacity; /* micro gain de fluidité */
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* FIN SLIDE + FADE title-faq page FAQ */

/* SLIDE + FADE du titre "les-offres-webistor" page "Les offres webistor" */
.les-offres-webistor {
  opacity: 0;
  transform: translateY(-80px);
  animation: fadeUp 1.2s ease-out forwards;
  will-change: transform, opacity; /* micro gain de fluidité */
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* FIN SLIDE + FADE du titre "les-offres-webistor" page "Les offres webistor" */

/* maps Google pleine largeur */
.map-full iframe {
  display: block;
  width: 100%;
  max-width: 100%;
}
/* FIN maps Google pleine largeur */


/* Supprimer la marge supérieure pour les boutons */
.wp-block-buttons{
    margin-top: 0 !important;
}
/* FIN Supprimer la marge supérieure pour les boutons */


/* ZOOM IN ET TREMBLEMENTS APP PHOTO */

/* Zoom img appareil photo au scroll */
.app-photo {
    opacity: 0;
    transform: scale(0.6); /* Image légèrement réduite au départ */
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.app-photo.is-visible {
    opacity: 1;
    transform: scale(1); /* Retour à la taille normale */
}

/* Micro tremblement au hover */
.app-photo.is-visible:hover {
    animation: shake-strong 0.3s ease-in-out infinite;
}

@keyframes shake-strong {
    0%   { transform: scale(1) translate(0, 0); }
    20%  { transform: scale(1) translate(-2px, 1px); }
    40%  { transform: scale(1) translate(2px, -1px); }
    60%  { transform: scale(1) translate(-1px, 2px); }
    80%  { transform: scale(1) translate(1px, -2px); }
    100% { transform: scale(1) translate(0, 0); }
}

/* FIN ZOOM IN ET TREMBLEMENTS APP PHOTO */


/* ANIMATION PTS BENEFICES */

/* gr bénéfices - numéro arrière plan */
.benefit-row {
  max-width: 760px;
  padding-left: 0px;
  position: relative;
  z-index: 1; /* Par défaut, supérieur à -1 */
}

.benefit-number {
  position: absolute;
  left: 50%;
  top: -31px;
  transform: translateX(-50%);
  z-index: -1; /* Force l'arrière-plan */
  color: #fef2f2;
}

.benefit-group {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1);
}

.benefit-group.animate-in {
  opacity: 1;
  transform: translateY(0);
}

.benefit-group + .benefit-group {
  margin-top: 200px;
}

@media (max-width: 769px) {
  .benefit-group + .benefit-group {
    margin-top: 140px;
  }
  .benefit-number {
    top: auto;
    bottom: 91px;
  }
}

@media (max-width: 426px) {
  .benefit-group + .benefit-group {
    margin-top: 100px;
  }
  .benefit-number {
    top: auto;
    bottom: 99px;
  }
}

@media (max-width: 376px) {
  .benefit-number {
    top: auto;
    bottom: 96px;
  } 
}

@media (max-width: 321px) {
  .benefit-number {
    top: auto;
    bottom: 92px;
  } 
}

/* FIN ANIMATION PTS BENEFICES */


/* ANIMATIONS GRID + CARDS EXPERTISE */

.card {
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1),
              box-shadow 0.35s cubic-bezier(.22,.61,.36,1);
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.08);
}

.card {
  position: relative;
  overflow: hidden;
  background-color: #fef2f2; /* plus léger */
}

/* barre accent */
.card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #D7383A; /* ta couleur secondaire */
  transition: width 0.35s cubic-bezier(.22,.61,.36,1);
}

/* animation */
.card:hover::after {
  width: 100%;
}


/* transition douce */
.expertise-grid .card {
  transition: 
    transform 0.35s cubic-bezier(.22,.61,.36,1),
    opacity 0.35s ease,
    box-shadow 0.35s ease;
}

/* quand on entre dans la grid */
.expertise-grid:hover .card {
  opacity: 0.5;
}

/* la carte active reste normale */
.expertise-grid .card:hover {
  opacity: 1;
  transform: translateY(-6px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.08);
}

.logo-expertise {
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1);
}

.logo-expertise:hover {
  transform: scale(1.08);
}

/* FIN ANIMATIONS GRID + CARDS EXPERTISE */


/* ===== Animation pour les images Web et Transistor ===== */

.web img,
.transistor img {
  transition: transform 0.4s ease;
}

.web img:hover,
.transistor img:hover {
  transform: scale(1.50);
}


/* ===== Animation title-cascade  ===== */

.js-cascade span {
  opacity: 0;
  transform: translateY(10px);
  display: inline-block;
}

.js-cascade.is-visible span {
  animation: cascadeFade 0.6s ease forwards;
}

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

/* cascade fluide */
.js-cascade span:nth-child(1) { animation-delay: 0.1s; }
.js-cascade span:nth-child(2) { animation-delay: 0.2s; }
.js-cascade span:nth-child(3) { animation-delay: 0.3s; }
.js-cascade span:nth-child(4) { animation-delay: 0.4s; }
.js-cascade span:nth-child(5) { animation-delay: 0.5s; }

/* Ciblage des deux titres */
.offres-webistor,
.title-benefices {
  text-align: center !important;
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1.2;
}

/* Important pour garder l’alignement propre */
.offres-webistor span,
.title-benefices span {
  display: inline-block;
}

/* ===== FIN Animation title-cascade ===== */


/* ===== Page 404 ===== */

/* ===== Page 404 : centrage paragraphe ===== */
@media (max-width: 768px) {
  .stack404 p {
    text-align: center;
    max-width: 500px;
    margin-inline: auto;
  }
}

/* ===== Page 404 : slide et fade title404 ===== */
.title404 {
  opacity: 0;
  transform: translateY(-120px);
  animation: fadeUp 1.2s ease-out forwards;
  will-change: transform, opacity; /* micro gain de fluidité */
}

/* =====  FIN Page 404 ===== */


/* ===== Landing Page cahier des charges ===== */

/* centrage image cahier */

@media (max-width: 579px) {

  .wp-block-group.cahier-wrapper {
    flex-direction: column;
    align-items: stretch; /* important */
  }

  /* le bloc texte reste à gauche */
  .wp-block-group.cahier-wrapper > .is-vertical {
    align-items: flex-start;
    text-align: left;
  }

  /* on centre uniquement l'image */
  .wp-block-group.cahier-wrapper figure {
    margin-left: auto;
    margin-right: auto;
  }
  
}

/* fade et slide title et subtitle */

/* état initial */
.title-cahier,
.subtitle-cahier {
  opacity: 0;
}

/* ANIMATION TITLE (depuis le haut) */
.title-cahier {
  animation: fadeDown 1.2s ease-out forwards;
}

/* ANIMATION SUBTITLE (depuis la gauche avec délai) */
.subtitle-cahier {
  animation: fadeLeft 1.2s ease-out forwards;
  animation-delay: 0.4s;
}

/* KEYFRAMES */

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-140px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ===== FIN Landing Page cahier des charges ===== */