/**
* Styles Hero Section Purple Telecom
* Emplacement : /home/yqqyvar/domains/purpletelecom.fr/public_html/assets/css/hero-section.css
* Permissions : 0644
* Version : 1.0.0
*/

/* ========== WRAPPER ET STRUCTURE ========== */
.hero-wrapper {
 width: 100vw;
 position: relative;
 left: 50%;
 right: 50%;
 margin-left: -50vw;
 margin-right: -50vw;
}



/* ========== SECTION HERO ========== */
.hero-section {
 padding: 40px 20px 30px;
 background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
 position: relative;
 overflow: hidden;
 width: 100%;
}

/* Effet de particules en arriere-plan */
.hero-section::before {
 content: '';
 position: absolute;
 width: 200%;
 height: 200%;
 background-image: 
   radial-gradient(circle at 20% 50%, rgba(52, 152, 219, 0.1) 0%, transparent 50%),
   radial-gradient(circle at 80% 80%, rgba(46, 204, 113, 0.1) 0%, transparent 50%),
   radial-gradient(circle at 40% 20%, rgba(155, 89, 182, 0.1) 0%, transparent 50%);
 animation: float-background 20s ease-in-out infinite;
}

@keyframes float-background {
 0%, 100% { transform: translate(0, 0) rotate(0deg); }
 33% { transform: translate(-20px, -20px) rotate(1deg); }
 66% { transform: translate(20px, -10px) rotate(-1deg); }
}

/* ========== TITRE PRINCIPAL ========== */
.main-title {
 font-size: 42px;
 font-weight: 800;
 text-align: center;
 margin: 20px auto 40px;
 color: var(--dark-navy);
 max-width: 1200px;
 line-height: 1.2;
}

.dynamic-word {
 display: inline-block;
 min-width: 220px;
 position: relative;
 height: 38px;
 vertical-align: middle;
 margin-left: 8px;
}

.word-rotate {
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 opacity: 0;
 animation: wordRotate 15s infinite;
 font-weight: 900;
}

.word-rotate:nth-child(1) { animation-delay: 0s; color: var(--purple-creative); }
.word-rotate:nth-child(2) { animation-delay: 3s; color: var(--blue-tech); }
.word-rotate:nth-child(3) { animation-delay: 6s; color: var(--green-dynamic); }
.word-rotate:nth-child(4) { animation-delay: 9s; background: var(--gradient-modern); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.word-rotate:nth-child(5) { animation-delay: 12s; color: var(--purple-creative); }

@keyframes wordRotate {
 0%, 20% { opacity: 0; transform: translateX(-50%) translateY(20px); }
 5%, 15% { opacity: 1; transform: translateX(-50%) translateY(0); }
 20%, 100% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
}

/* ========== CONTENU PRINCIPAL ========== */
.content-wrapper {
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 20px;
}

.content-container {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 40px;
 align-items: center;
 position: relative;
 margin-bottom: 20px;
}

/* Courbe de separation verticale subtile */
.content-container::before {
 content: '';
 position: absolute;
 top: 0;
 left: 50%;
 transform: translateX(-50%);
 width: 2px;
 height: 100%;
 background: linear-gradient(180deg, 
   transparent 0%, 
   rgba(32, 56, 89, 0.08) 20%,
   rgba(32, 56, 89, 0.12) 50%,
   rgba(32, 56, 89, 0.08) 80%,
   transparent 100%
 );
 filter: blur(8px);
}

/* Courbe SVG verticale animee */
.content-container::after {
 content: '';
 position: absolute;
 top: 0;
 left: 50%;
 transform: translateX(-50%);
 width: 100px;
 height: 100%;
 background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000' preserveAspectRatio='none'%3E%3Cpath d='M50,0 Q40,250 50,500 T50,1000' stroke='rgba(32,56,89,0.08)' stroke-width='2' fill='none'/%3E%3C/svg%3E");
 background-size: 100% 100%;
 opacity: 0.5;
 animation: wave-vertical-subtle 20s ease-in-out infinite;
}

@keyframes wave-vertical-subtle {
 0%, 100% { transform: translateX(-50%) scaleX(1); }
 50% { transform: translateX(-50%) scaleX(1.2); }
}

/* Image a gauche */
.image-container {
 position: relative;
 z-index: 2;
 background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(248,249,250,0.5) 100%);
 border-radius: 20px;
 padding: 15px;
}

.main-image {
 width: 100%;
 height: auto;
 max-height: 350px;
 object-fit: contain;
 filter: drop-shadow(0 20px 40px rgba(0,0,0,0.1));
 animation: float-smooth 6s ease-in-out infinite;
 transition: transform 0.3s ease;
}

.main-image:hover {
 transform: scale(1.05) rotate(1deg);
}

@keyframes float-smooth {
 0%, 100% { transform: translateY(0) rotate(0deg); }
 50% { transform: translateY(-10px) rotate(-1deg); }
}

/* Description dynamique a droite */
.description-container {
 padding: 20px;
 position: relative;
 z-index: 2;
 background: linear-gradient(135deg, rgba(248,249,250,0.4) 0%, rgba(255,255,255,0.2) 100%);
 border-radius: 20px;
}

.description-title {
 font-size: 28px;
 font-weight: 700;
 color: var(--dark-navy);
 margin-bottom: 20px;
 line-height: 1.2;
}

.highlight {
 background: var(--gradient-modern);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 font-weight: 800;
}

.dynamic-description {
 position: relative;
 min-height: 140px;
}

.description-item {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 opacity: 0;
 animation: descriptionRotate 25s infinite;
 font-size: 16px;
 line-height: 1.6;
 color: var(--text-secondary);
}

.description-item p {
 margin: 5px 0;
}

.description-item:nth-child(1) { animation-delay: 0s; }
.description-item:nth-child(2) { animation-delay: 5s; }
.description-item:nth-child(3) { animation-delay: 10s; }
.description-item:nth-child(4) { animation-delay: 15s; }
.description-item:nth-child(5) { animation-delay: 20s; }

@keyframes descriptionRotate {
 0%, 18% { opacity: 0; transform: translateY(20px); }
 2%, 16% { opacity: 1; transform: translateY(0); }
 18%, 100% { opacity: 0; transform: translateY(-20px); }
}

/* Points cles avec icones SVG */
.key-points {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 15px;
 margin-top: 20px;
 margin-bottom: 0;
}

.point-item {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 12px 15px;
 background: rgba(255,255,255,0.8);
 border-radius: 10px;
 box-shadow: 0 5px 15px rgba(0,0,0,0.05);
 transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 position: relative;
 cursor: pointer;
 overflow: visible;
 z-index: 1;
}

.point-item:hover {
 transform: translateY(-5px);
 box-shadow: 0 15px 35px rgba(0,0,0,0.15);
 z-index: 10;
}

/* Conteneur pour tout le contenu */
.point-content {
 display: flex;
 align-items: center;
 gap: 12px;
 width: 100%;
 position: relative;
 z-index: 2;
}

.point-icon {
 width: 35px;
 height: 35px;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 transition: transform 0.3s ease;
}

.point-icon svg {
 width: 100%;
 height: 100%;
}

.point-text {
 font-size: 12px;
 color: var(--dark-navy);
 font-weight: 600;
 transition: all 0.3s ease;
}

/* Gros cercle rond qui apparait */
.point-circle {
 position: absolute;
 top: 50%;
 right: -10px;
 transform: translate(0, -50%) scale(0);
 width: 90px;
 height: 90px;
 border-radius: 50%;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: 12px;
 text-align: center;
 opacity: 0;
 transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
 box-shadow: 0 10px 30px rgba(0,0,0,0.2);
 z-index: 3;
}

.point-circle::before {
 content: '';
 position: absolute;
 inset: -3px;
 border-radius: 50%;
 padding: 3px;
 background: linear-gradient(45deg, transparent, rgba(255,255,255,0.5));
 mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
 -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
 -webkit-mask-composite: xor;
 mask-composite: exclude;
}

.point-item:hover .point-circle {
 transform: translate(40%, -50%) scale(1);
 opacity: 1;
}

.point-circle .big-number {
 font-size: 22px;
 font-weight: 800;
 line-height: 1;
 margin-bottom: 3px;
}

.point-circle .small-text {
 font-size: 9px;
 font-weight: 600;
 line-height: 1.2;
 opacity: 0.9;
}

.point-item:hover .point-icon {
 transform: scale(1.1) rotate(-5deg);
}

/* Couleurs specifiques pour chaque cercle */
.point-item:nth-child(1) .point-circle {
 background: linear-gradient(135deg, var(--blue-primary), var(--blue-light));
 color: white;
}

.point-item:nth-child(1) .counter::after {
 content: '10';
}

.point-item:nth-child(1):hover .counter::after {
 animation: countUp10 0.8s ease-out;
}

@keyframes countUp10 {
 0% { content: '1'; }
 25% { content: '3'; }
 50% { content: '6'; }
 75% { content: '8'; }
 100% { content: '10'; }
}

/* Animation Mondial */
.point-item:nth-child(2) .point-circle {
 background: linear-gradient(135deg, var(--purple-primary), var(--purple-light));
 color: white;
}

.point-item:nth-child(2) .counter::after {
 content: '3000';
}

.point-item:nth-child(2):hover .counter::after {
 animation: countUp3000 1s ease-out;
}

@keyframes countUp3000 {
 0% { content: '500'; }
 25% { content: '1500'; }
 50% { content: '2000'; }
 75% { content: '2500'; }
 100% { content: '3000'; }
}

/* Animation Economique */
.point-item:nth-child(3) .point-circle {
 background: linear-gradient(135deg, var(--green-success), var(--green-light));
 color: white;
}

.point-item:nth-child(3) .percent::after {
 content: '20%';
}

.point-item:nth-child(3):hover .percent::after {
 animation: percentUp 0.6s ease-out;
}

@keyframes percentUp {
 0% { content: '5%'; }
 33% { content: '10%'; }
 66% { content: '15%'; }
 100% { content: '20%'; }
}

/* Animation Securise */
.point-item:nth-child(4) .point-circle {
 background: linear-gradient(135deg, var(--orange-warning), #FFB84D);
 color: #232F3E;
}

/* Effet de pulsation sur le cercle */
@keyframes pulse-circle {
 0% { box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
 50% { box-shadow: 0 10px 40px rgba(0,0,0,0.3); }
 100% { box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
}

.point-item:hover .point-circle {
 animation: pulse-circle 2s ease-in-out infinite;
}

/* Ajustement pour mobile */
@media (max-width: 768px) {
 .point-circle {
   width: 80px;
   height: 80px;
   right: -5px;
 }
 
 .point-circle .big-number {
   font-size: 20px;
 }
 
 .point-item:hover .point-circle {
   transform: translate(25%, -50%) scale(1);
 }
}

/* ========== CARROUSEL PLEINE LARGEUR ========== */
.clients-carousel-fullwidth {
 position: relative;
 width: 100%;
 margin: 30px 0 0;
 overflow: hidden;
 padding: 15px 0;
}

/* Piste de defilement pleine largeur */
.clients-track-fullwidth {
 display: flex;
 animation: scroll-clients-fullwidth 25s linear infinite;
}

/* Animation de defilement */
@keyframes scroll-clients-fullwidth {
 0% { transform: translateX(0); }
 100% { transform: translateX(-50%); }
}

/* Item individuel pleine largeur */
.client-item-fullwidth {
 flex-shrink: 0;
 padding: 0 30px;
 display: flex;
 align-items: center;
 justify-content: center;
}

/* Style des logos pleine largeur */
.client-logo-fullwidth {
 height: 50px;
 width: auto;
 filter: grayscale(100%) brightness(0.8);
 transition: all 0.3s ease;
 cursor: pointer;
 opacity: 0.6;
}

/* Effet au survol */
.client-logo-fullwidth:hover {
 filter: grayscale(0%) brightness(1);
 transform: scale(1.1);
 opacity: 1;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
 .main-title {
   font-size: 26px;
 }
 
 .content-container {
   grid-template-columns: 1fr;
   gap: 20px;
 }
 
 .description-title {
   font-size: 20px;
   text-align: center;
 }
 
 .key-points {
   grid-template-columns: 1fr;
 }
 
 .client-logo-fullwidth {
   height: 35px;
 }
 
 .client-item-fullwidth {
   padding: 0 25px;
 }
 
 .main-image {
   max-height: 250px;
 }
}

@media (max-width: 480px) {
 .main-title {
   font-size: 22px;
 }
 
 .dynamic-word {
   min-width: 160px;
   height: 28px;
 }
 
 .client-logo-fullwidth {
   height: 30px;
 }
 
 .client-item-fullwidth {
   padding: 0 20px;
 }
 
 .description-item {
   font-size: 14px;
 }
 
 .point-text {
   font-size: 11px;
 }
}