/* ===== REPREND EXACTEMENT TON CSS ===== */
/* COPIER / COLLER TON STYLE ACTUEL ICI */
/* je ne le remets pas pour éviter 1000 lignes */

/* ===== breadcrumb ===== */

.breadcrumb{

position:fixed;

top:60px;
left:0;
width:100%;

background:white;

padding:8px 20px;

z-index:9999;

font-size:14px;

}

/* espace sous menu + breadcrumb */

body.has-breadcrumb{

padding-top:100px;

}

.breadcrumb a{

color:#e7591C;
font-weight:600;
text-decoration:none;

}

*{box-sizing:border-box}

body{

margin:0;

font-family:"Source Sans 3", sans-serif;

overflow-x:hidden;

font-weight:400;

}
h1,h2,h3,h4{

font-weight:700;

letter-spacing:-0.02em;
font-family:"Inter", sans-serif;

}

p{

font-weight:400;

line-height:1.5;

}
.intro{

position:relative;

height:170vh;

display:flex;
align-items:center;
justify-content:center;

overflow:hidden;

color:white;

}


/* background image */

.intro-bg{

position:absolute;

width:130%;
height:130%;

background:url("https://picsum.photos/1400/900")
center/cover no-repeat;

transform:scale(1.6);

z-index:0;

}


/* overlay premium */

.intro::after{

content:"";

position:absolute;
inset:0;

background:linear-gradient(
180deg,
rgba(0,0,0,0.4),
rgba(0,0,0,0.2),
rgba(0,0,0,0.5)
);

z-index:1;

}


/* content */

.intro-content{

position:relative;
z-index:2;

text-align:center;

max-width:95vw;

padding:20px;

}


/* TITLE ULTRA */

.intro-big{

font-size:clamp(30px, 8vw, 120px);

font-weight:900;

letter-spacing:-0.05em;

line-height:0.85;

opacity:0;

transform:scale(1.2);

text-shadow:0 10px 30px rgba(0,0,0,0.5);

}


/* SUBTITLE PREMIUM */

.intro-sub{

font-size:clamp(20px, 3vw, 50px);

font-weight:600;

line-height:1.1;

margin-top:30px;

opacity:0;

transform:translateY(60px);

text-shadow:0 6px 20px rgba(0,0,0,0.5);

}

/* ===== MENU ===== */

#menu{

position:fixed;
top:0;
left:0;

width:100%;
height:60px;

display:flex;
align-items:center;
justify-content:space-between;

padding:0 20px;

background:white;

z-index:10000;

}

.logo{
font-weight:bold;
}

/* ===== BURGER MODERNE ===== */

#burger{

width:32px;
height:24px;

position:relative;

cursor:pointer;

z-index:10001;

}


/* lignes */

#burger span{

position:absolute;

left:0;

width:100%;
height:2px;

background:black;

transition:0.35s ease;

}


/* positions normales */

#burger span:nth-child(1){
top:2px;
}

#burger span:nth-child(2){
top:11px;
}

#burger span:nth-child(3){
top:20px;
}


/* animation croix */

#burger.open span:nth-child(1){

top:11px;
transform:rotate(45deg);

}

#burger.open span:nth-child(2){

opacity:0;
transform:scaleX(0);

}

#burger.open span:nth-child(3){

top:11px;
transform:rotate(-45deg);

}

/* ===== NAV ===== */

#nav{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:#e7591C;

transform:translateX(100%);

transition:0.3s;

z-index:9999;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

gap:10px;

}

#nav.open{
transform:translateX(0);
}

#nav button{

font-size:18px;

padding:8px 16px;

border:none;

background:white;

color:#e7591C;

cursor:pointer;

border-radius:4px;

}
#nav button.active{

background:#ffd400;
color:#000;

}
/* ===== CONTENT ===== */



.horizontal-container{
display:flex;
}

.panel{

width:100vw;
height:100vh;

flex-shrink:0;

display:flex;
align-items:center;
justify-content:center;

position:relative;
font-size:50px;
color:white;

}


.panel::before{

content:"";
position:absolute;
inset:0;

background:rgba(0,0,0,0.25);

pointer-events:none;

}
.panel-content{

transform:scale(0.9);

filter:blur(3px);

opacity:0.6;

transition:
transform 0.4s ease,
filter 0.4s ease,
opacity 0.4s ease;

}

.panel.active .panel-content{

transform:scale(1);

filter:blur(0);

opacity:1;

}


/* colors */

.c1{background:linear-gradient(135deg,#e7591C,#a63f0f);} /* orange CFDT */
.c2{background:linear-gradient(135deg,#2f2f2f,#1a1a1a);} /* noir */
.c3{background:linear-gradient(135deg,#d46a1a,#7a3a08);} /* orange sombre */
.c4{background:linear-gradient(135deg,#3a3f45,#1f2327);} /* gris pro */
.c5{background:linear-gradient(135deg,#e7591C,#6e2a08);} /* orange profond */
.c6{background:linear-gradient(135deg,#4a4f55,#2a2e33);} /* gris acier */
.c7{background:linear-gradient(135deg,#c45112,#6a2c06);} /* orange brun */
.c8{background:linear-gradient(135deg,#2c3e50,#141a20);} /* bleu sombre */
.c9{background:linear-gradient(135deg,#e7591C,#5a2105);} /* orange CFDT fort */
.c10{background:linear-gradient(135deg,#5a5f66,#2c2f33);} /* gris neutre */
.c11{background:linear-gradient(135deg,#3b3b3b,#1b1b1b);} /* noir doux */
.c12{background:linear-gradient(135deg,#e7591C,#8a340c);} /* orange accent */


#dots{
position:fixed;
bottom:20px;
left:50%;
transform:translateX(-50%);
display:flex;
gap:8px;
z-index:10000;
}

.dot{
width:10px;
height:10px;
border-radius:50%;
background:white;
opacity:0.4;
cursor:pointer;
transition:0.2s;
}

.dot.active{
opacity:1;
transform:scale(1.4);
}


.panel-content{

width:100%;
height:100%;

display:flex;
align-items:center;
justify-content:center;

gap:40px;

padding:60px;

max-width:1200px;
margin:auto;

}

.panel-text{

flex:1;

color:white;

}

.panel-text h2{

margin-bottom:20px;
font-size:clamp(26px, 3vw, 42px);

font-weight:800;

}

.panel-text p{

font-size:clamp(16px, 1.4vw, 20px);

line-height:1.4;
margin-bottom:20px;

}

.panel-image{

flex:1;
display:flex;
justify-content:center;

}

.panel-image img{

max-width:100%;
border-radius:10px;

}

.btn{

padding:22px 42px;

font-size:20px;

border:none;

border-radius:16px;

background:white;

color:#111;

font-weight:600;

letter-spacing:0.3px;

min-width:240px;

cursor:pointer;

transition:
all 0.35s cubic-bezier(.22,.61,.36,1);

box-shadow:
0 8px 20px rgba(0,0,0,0.15);

overflow:hidden;   /* IMPORTANT */
position:relative; /* IMPORTANT */

}

.btn::before{

content:"";

position:absolute;

inset:0;

background:#e7591C;

transform:scaleX(0);

transform-origin:left;

transition:0.3s ease;

z-index:-1;

}

.btn:hover::before{

transform:scaleX(1);

}

.btn:hover{

background:#e7591C;

color:white;

transform:translateY(-4px) scale(1.03);

box-shadow:
0 16px 30px rgba(0,0,0,0.25);

border-radius:16px; /* force le radius */

}
/* click */

.btn:active{

transform:scale(0.96);

border-radius:16px;

}
.btn,
.btn:hover,
.btn:active{

border-radius:16px;

}
.btn{

border-radius:16px;

will-change:transform;

}
.anim-text{

opacity:0;
transform:translateX(-80px);

}
.btn{

backdrop-filter:blur(6px);

}
.anim-img{

opacity:0;
transform:scale(1.3);

}

.anim-btn{

opacity:0;
transform:translateY(40px);

}
@media (max-width:900px){

.panel-content{

flex-direction:column;
text-align:center;

}

}
.footer{

position:relative;

min-height:100vh;

display:flex;
align-items:center;
justify-content:center;

background:#111;
color:white;

overflow:hidden;

}

/* fond sombre pro */

.footer-bg{

position:absolute;
inset:0;

background:

linear-gradient(
180deg,
#111 0%,
#1a1a1a 40%,
#111 100%
);

z-index:0;

}

/* halo très léger */

.footer-bg::after{

content:"";

position:absolute;

width:500px;
height:500px;

left:50%;
top:50%;

transform:translate(-50%,-50%);

background:

radial-gradient(
circle,
rgba(231,89,28,0.15),
transparent 70%
);

filter:blur(120px);

opacity:0.6;

}

/* contenu */

.footer-content{

position:relative;
z-index:1;

max-width:1100px;
margin:auto;

text-align:center;

padding:60px 20px;

}

/* titre */

.footer-title{

font-size:clamp(32px,4vw,56px);
font-weight:900;

letter-spacing:-0.02em;

}

/* texte */

.footer-text{

font-size:clamp(16px,1.4vw,20px);

opacity:0.85;

margin-top:10px;

}

/* menu */

.footer-menu-premium{

margin-top:50px;

display:flex;
justify-content:center;

gap:60px;

flex-wrap:wrap;

}

/* colonnes */

.footer-col{

display:flex;
flex-direction:column;
gap:10px;

min-width:160px;

}

.footer-col h3{

font-size:18px;

opacity:0.9;

}

/* boutons */

.footer-col button{

transition:0.25s;

}

.footer-col button:hover{

color:#e7591C;

transform:translateX(6px);

}
/* bouton principal */

.footer-btn{

margin-top:40px;

background:#e7591C;

color:white;

border:none;

padding:14px 26px;

font-weight:700;

border-radius:8px;

transition:0.25s;

}

.footer-btn:hover{

background:#ff7a3c;

transform:translateY(-2px);

}
.horizontal-wrapper {

background:black;
overflow: hidden;


}
.footer-content{

max-width:1100px;

margin:auto;

padding:40px 20px;

}
.btn,
#nav button,
.footer-col button{

font-family:"Inter", sans-serif;

font-weight:600;

}
.footer .btn,
.footer-col button{

background:#e7591C;

color:white;

border-radius:16px;

border:none;

padding:14px 24px;

font-weight:600;

transition:
all 0.35s cubic-bezier(.22,.61,.36,1);

box-shadow:
0 8px 20px rgba(0,0,0,0.25);

overflow:hidden;

position:relative;

}
.footer .btn:hover,
.footer-col button:hover{

background:white;

color:#e7591C;

transform:translateY(-4px) scale(1.03);

box-shadow:
0 16px 30px rgba(0,0,0,0.35);

border-radius:16px;

}
.footer .btn:active,
.footer-col button:active{

transform:scale(0.96);

border-radius:16px;

}
.footer .btn,
.footer .btn:hover,
.footer .btn:active,
.footer-col button,
.footer-col button:hover,
.footer-col button:active{

border-radius:16px;

}
.btn.footer-btn{

background:white;

color:#e7591C;

}
.btn.footer-btn:hover{

background:#e7591C;

color:white;

transform:translateY(-4px) scale(1.03);

box-shadow:
0 16px 30px rgba(0,0,0,0.35);

border-radius:16px;

}
.btn.footer-btn,
.btn.footer-btn:hover,
.btn.footer-btn:active{

border-radius:16px;

}
.footer-col a{

display:block;

padding:12px 18px;

border-radius:16px;

background:white;

color:#111;

text-decoration:none;

font-weight:600;

transition:all 0.3s ease;

box-shadow:0 6px 14px rgba(0,0,0,0.15);

margin-bottom:8px;

}
.footer-col a:hover{

background:#e7591C;

color:white;

transform:translateY(-3px) scale(1.02);

box-shadow:0 14px 26px rgba(0,0,0,0.25);

}
.btn{

display:inline-block;

text-decoration:none;

}
@media (max-width:900px){

.breadcrumb{

position:relative;

top:auto;

}

body.has-breadcrumb{

padding-top:60px;

}

}
.panel-text{

flex:1;

color:white;

display:flex;

flex-direction:column;

justify-content:center;

gap:20px;

}


/* partie haute */

.panel-head h2{

font-size:clamp(28px,3vw,46px);

margin-bottom:10px;

}

.accroche{

font-size:clamp(18px,2vw,26px);

opacity:0.9;

}


/* partie basse */

.panel-body{

font-size:clamp(16px,1.3vw,20px);

max-width:500px;

line-height:1.5;

opacity:0.9;

}
.panel-split{

display:flex;

gap:40px;

align-items:center;

width:100%;

}


.panel-left{

flex:1;

}


.panel-right{

flex:1;

max-width:520px;

}


/* titre */

.panel-left h2{

font-size:clamp(32px,4vw,54px);

margin-bottom:10px;

}


/* accroche */

.accroche{

font-size:clamp(18px,2vw,26px);

opacity:0.9;

}


/* texte détaillé */

.panel-right p{

font-size:clamp(16px,1.3vw,20px);

line-height:1.5;

margin-bottom:20px;

}
@media (max-width:900px){

.panel-split{

flex-direction:column;

text-align:center;

}

.panel-right{

max-width:100%;

}

}
.panel .panel-left h2 {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}
.panel-left h2 i {
  margin-right: 10px;
  font-size: 0.9em;
}
.panel-left i {
  display: inline-block;
}

.panel.active .panel-left i {
  animation: iconBounce 1s ease;
}

@keyframes iconBounce {

  0% {
    transform: scale(0.5);
    opacity: 0;
  }

  60% {
    transform: scale(1.4);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }

}
.panel ul{
list-style:none;
padding-left:0;
}

.panel li{
position:relative;
padding-left:22px;
margin-bottom:6px;
font-size:1.2rem;
line-height:1.5;
}

.panel li::before{
content:"\f058";
font-family:"Font Awesome 6 Free";
font-weight:900;

position:absolute;
left:0;
top:4px;

font-size:14px;   /* taille icône */
color:#ffffff;    /* blanc */

opacity:0.9;
}
.panel li{
opacity:0;
transform:translateY(8px);
}

.panel.active li{
animation:bulletFade 0.35s ease forwards;
}

.panel.active li:nth-child(1){ animation-delay:0.15s; }
.panel.active li:nth-child(2){ animation-delay:0.25s; }
.panel.active li:nth-child(3){ animation-delay:0.35s; }
.panel.active li:nth-child(4){ animation-delay:0.45s; }
.panel.active li:nth-child(5){ animation-delay:0.55s; }
.panel.active li:nth-child(6){ animation-delay:0.65s; }
.panel.active li:nth-child(7){ animation-delay:0.75s; }
@keyframes bulletFade{
to{
opacity:1;
transform:translateY(0);
}
}
.panel:not(.active) li{
opacity:0;
transform:translateY(8px);
animation:none;
}
.logo-block{
display:flex;
align-items:center;
gap:10px;
}

.logo-cfdt{
height:38px;
width:auto;
}

.logo-text{
font-size:14px;
font-weight:600;
line-height:1.1;
white-space:nowrap;
}