/* ===========================
   PRÉSENTATION PAGE STYLES
=========================== */

/* ===========================
   TITRE A PROPOS
=========================== */
.section-apropos{
    width: 100%;
    padding: 100px 0 100px;
    text-align: center;
    background: #FFFFFF;
}

.section-apropos .container{
    max-width: 1000px;
    margin: auto;
    padding: 5px 5px;
}

.section-subtitle1{
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #C8102E;
    margin-bottom: 20px;
    text-align: center;
}

.section-title1{
    font-family: "Montserrat", Arial, sans-serif;
    font-size: clamp(40px, 6vw, 60px);
    font-weight: 700;
    line-height: 1.08;
    max-width: 950px;
    margin: 0 auto 40px;
    text-align: center;

    /* IMPORTANT */
    white-space: normal;
    word-break: break-word;
}

.section-title1 .highlight1{
    color: #C8102E;
}

.card-desc{
    font-family: "Montserrat", Arial, sans-serif;
    font-size: clamp(18px, 2vw, 20px);
    font-weight: 400;
    line-height: 1.6;
    color: #4A5568;
    max-width: 720px;
    margin: 20px auto 0;
    text-align: center;
}

@media (max-width:768px){
    .section-apropos {
        padding-top: 255px;
    }

    .card-desc{
        max-width:100%;
        line-height:1.7;
    }
}

.section-divider{
    height: 1px;
    background: #ECECEC;
    margin: 60px auto;
    max-width: 1280px;
}

/* ===========================
   IMAGE
=========================== */
.image-container{
    overflow: hidden;
    border-radius: 8px;
}

.image-container img{
    width:100%;
    height:700px;
    object-fit:cover;
    display: block;

    opacity:0;
    transform:scale(.15) translateY(40px);

    animation:revealImage 6.4s ease forwards;
}

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

/* ===========================
   Vision & Mission
=========================== */

.vision-mission{
    padding:100px 0;
    background: #FAFAFA;
    border-top: 1px solid #ECECEC;
}

.vision-mission .row{
    align-items:stretch;
}

.vm-card{
    position:relative;
    height:100%;
    background:#fff;
    border-radius:18px;
    padding:36px 34px 30px;
    border:1px solid #f2f2f2;
    overflow:hidden;
}

.vm-card::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:4px;
    background:#C8102E;
}

.vm-card-header{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:22px;
}

.vm-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:60px;
    height:60px;
    flex-shrink:0;
    border-radius:50%;
    background:#C8102E;
}

.vm-icon svg{
    width:26px;
    height:26px;
    stroke:#fff;
}

.vm-badge{
    display:inline-flex;
    align-items:center;
    background:#C8102E;
    color:#fff;
    font-size:12px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    padding:7px 16px;
    border-radius:20px;
}

.vm-heading{
    font-family: "Montserrat", Arial, sans-serif;
    font-size:clamp(20px,2.4vw,26px);
    font-weight:700;
    line-height:1.3;
    color:#111;
    margin-bottom:18px;
}

.vm-heading .highlight-red{
    color:#C8102E;
}

.vm-text{
    font-family: "Montserrat", Arial, sans-serif;
    font-size:15px;
    line-height:1.7;
    color:#555;
    margin-bottom:22px;
}

.vm-text strong{
    color:#111;
    font-weight:700;
}

.vm-points{
    list-style:none;
    margin:0;
    padding:0;
}

.vm-points li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:14px 0;
    border-bottom:1px solid #f0f0f0;
    font-size:14px;
    line-height:1.6;
    color:#333;
}

.vm-points li:last-child{
    border-bottom:none;
    padding-bottom:0;
}

.vm-points li:first-child{
    padding-top:0;
}

.vm-point-check{
    display:flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    flex-shrink:0;
    margin-top:2px;
    border-radius:50%;
    background:#C8102E;
}

.vm-point-check svg{
    width:12px;
    height:12px;
    stroke:#fff;
    stroke-width:3;
}

/* ===========================
   Timeline History Section
=========================== */

.history-section{
    padding:120px 0;
    background: #FFFFFF;
    border-top: 1px solid #ECECEC;
}

.history-section .container{
    max-width: 1280px;
    margin: 0 auto;
}

.history-label{
    display:block;
    font-size:13px;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#C8102E;
    margin-bottom:20px;
}

.history-title{
    font-family: "Montserrat", Arial, sans-serif;
    font-size: clamp(2rem, 4.6vw, 4rem);
    font-weight:300;
    margin:20px 0 90px;
    color:#111;
    line-height:1.2;
}

/* ===================== */

.timeline{
    position:relative;
    max-width:1100px;
    margin:auto;
}

.timeline::before{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    transform:translateX(-50%);
    width:1px;
    height:100%;
    background:#ddd;
}

.timeline-item{
    display:grid;
    grid-template-columns:1fr 60px 1fr;
    align-items:center;
    margin-bottom:100px;
    position:relative;
}

.timeline-year{
    font-size: clamp(2.125rem, 4.6vw, 4rem);
    color:#d61d2d;
    font-weight:300;
    text-align:center;
    font-family: "Montserrat", Arial, sans-serif;
}

.timeline-dot{
    width:12px;
    height:12px;
    background:#c9002b;
    border-radius:50%;
    margin:auto;
    z-index:2;
}

.timeline-content{
    max-width:360px;
}

.timeline-content h4{
    font-size: clamp(1.375rem, 2vw, 1.75rem);
    margin-bottom:15px;
    color:#111;
    font-family: "Montserrat", Arial, sans-serif;
}

.timeline-content p{
    color:#666;
    line-height:1.9;
}

/* Alternance */

.timeline-item.right .timeline-year{
    grid-column:1;
}

.timeline-item.right .timeline-dot{
    grid-column:2;
}

.timeline-item.right .timeline-content{
    grid-column:3;
    padding-left:40px;
}

.timeline-item.left .timeline-content{
    grid-column:1;
    justify-self:end;
    text-align:right;
    padding-right:40px;
}

.timeline-item.left .timeline-dot{
    grid-column:2;
}

.timeline-item.left .timeline-year{
    grid-column:3;
}

/* Responsive */

@media(max-width:991px){

    .timeline::before{
        left:20px;
    }

    .timeline-item{
        grid-template-columns:40px 1fr;
        gap:20px;
        margin-bottom:70px;
    }

    .timeline-dot{
        grid-column:1;
    }

    .timeline-year{
        grid-column:2 !important;
        text-align:left;
    }

    .timeline-content{
        grid-column:2 !important;
        padding:0 !important;
        text-align:left !important;
        margin-top:10px;
    }
}

/* Animation date */

.timeline-year,
.timeline-dot{
    animation: floatYear 4s ease-in-out infinite;
}

.timeline-item:nth-child(2) .timeline-year,
.timeline-item:nth-child(2) .timeline-dot{
    animation-delay:.5s;
}

.timeline-item:nth-child(3) .timeline-year,
.timeline-item:nth-child(3) .timeline-dot{
    animation-delay:1s;
}

.timeline-item:nth-child(4) .timeline-year,
.timeline-item:nth-child(4) .timeline-dot{
    animation-delay:1.5s;
}

.timeline-item:nth-child(5) .timeline-year,
.timeline-item:nth-child(5) .timeline-dot{
    animation-delay:2s;
}

@keyframes floatYear{
    0%{
        transform:translateY(-12px);
    }

    50%{
        transform:translateY(12px);
    }

    100%{
        transform:translateY(-12px);
    }
}

/* ===========================
   VALEURS
=========================== */

.values-section{
    padding:120px 0;
    background: #FAFAFA;
    border-top: 1px solid #ECECEC;
}

.values-section .container{
    max-width: 1280px;
    margin: 0 auto;
}

.values-label{
    display:block;
    color:#c51230;
    font-size:12px;
    letter-spacing:4px;
    text-transform:uppercase;
    font-weight:600;
    margin-bottom:18px;
}

.values-title{
    font-size: clamp(2rem, 4.4vw, 3.875rem);
    font-weight:300;
    line-height:1.15;
    color:#111;
    margin-bottom:90px;
    font-family: "Montserrat", Arial, sans-serif;
}

/* GRID */

.values-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:22px;
}

.value-card{
    position:relative;
    background:#fff;
    border-radius:18px;
    padding:34px 20px 28px;
    text-align:center;
    border:1px solid #f2f2f2;
    transition:transform .35s ease;
}

/* RUBAN NUMÉRO (coin haut-gauche, effet fanion) */

.value-number{
    position:absolute;
    top:0;
    left:22px;
    width:34px;
    padding:8px 0 12px;
    background:#fff;
    color:#111;
    font-size:13px;
    letter-spacing:0;
    font-weight:700;
    text-align:center;
    border-radius:0 0 4px 4px;
}

.value-number::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:0;
    height:0;
    border-left:17px solid transparent;
    border-right:17px solid transparent;
    border-top:8px solid #d9d9d9;
}

/* ICÔNE CIRCULAIRE + PASTILLE */

.value-icon-wrap{
    position:relative;
    width:88px;
    height:88px;
    margin:22px auto 20px;
}

.value-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    border-radius:50%;
    background:#C8102E;
}

.value-icon svg{
    width:38px;
    height:38px;
    stroke:#fff;
}

.value-icon-badge{
    position:absolute;
    top:-4px;
    right:-4px;
    width:30px;
    height:30px;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
}

.value-icon-badge svg{
    width:16px;
    height:16px;
    stroke:#c51230;
}

/* TEXTES */

.value-card h3{
    font-size:18px;
    font-weight:700;
    color:#111;
    margin-bottom:12px;
    font-family: "Montserrat", Arial, sans-serif;
    line-height:1.3;
}

.value-divider{
    display:block;
    width:26px;
    height:3px;
    background:#C8102E;
    border-radius:2px;
    margin:0 auto 16px;
}

.value-card p{
    color:#777;
    font-size:13.5px;
    line-height:1.7;
    max-width:none;
    margin:0;
}

/* HOVER PREMIUM */

.value-card:hover{
    transform:translateY(-10px);
}

.value-card:hover h3{
    color:#c51230;
}

/* RESPONSIVE */

@media(max-width:992px){

    .values-grid{
        grid-template-columns:repeat(2,1fr);
        gap:24px;
    }

}

@media(max-width:768px){

    .values-grid{
        grid-template-columns:1fr;
        gap:24px;
    }
}

/* La section "Mot de la direction" est un composant partagé
   (partials/direction_section.blade.php), stylé globalement dans
   accueil.css pour être disponible sur toutes les pages du site. */

@media(max-width:480px){

    .section-apropos{
        padding:255px 0 50px;
    }

}

/* ===========================
   PLAQUETTE / NEWSLETTER
=========================== */

.download-cta-section{
    position:relative;
    padding:90px 0;
    background:#0d0d0d;
}

.download-cta-bg{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    opacity:0.5;
}

.download-cta-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(100deg, rgba(5,5,5,0.94) 0%, rgba(10,10,10,0.8) 45%, rgba(30,4,8,0.6) 100%);
}

.download-cta-shapes{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.dl-shape{
    position:absolute;
    background:#C8102E;
}

.dl-shape-1{
    width:130px;
    height:190px;
    top:-50px;
    right:80px;
    clip-path:polygon(30% 0, 100% 0, 70% 100%, 0 100%);
    opacity:0.9;
}

.dl-shape-2{
    width:90px;
    height:150px;
    bottom:-40px;
    left:0;
    clip-path:polygon(30% 0, 100% 0, 70% 100%, 0 100%);
    opacity:0.85;
}

.dl-shape-dots{
    position:absolute;
    right:24px;
    bottom:24px;
    width:130px;
    height:90px;
    background-image:radial-gradient(rgba(200,16,46,0.65) 1.5px, transparent 1.5px);
    background-size:13px 13px;
}

.download-cta-inner{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
}

.download-cta-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:18px 28px;
    font-family:"Montserrat", Arial, sans-serif;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    text-decoration:none;
    border-radius:4px;
    cursor:pointer;
    transition:transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.download-cta-btn svg{
    width:16px;
    height:16px;
    flex-shrink:0;
}

.download-cta-btn--outline{
    background:transparent;
    color:#fff;
    border:1.5px solid rgba(255,255,255,0.55);
}

.download-cta-btn--outline:hover{
    border-color:#fff;
    transform:translateY(-3px);
}

.download-cta-btn--solid{
    background:#C8102E;
    color:#fff;
    border:1.5px solid #C8102E;
}

.download-cta-btn--solid:hover{
    background:#a80f24;
    border-color:#a80f24;
    transform:translateY(-3px);
}

.newsletter-wrap{
    position:relative;
}

.newsletter-popover{
    position:absolute;
    right:0;
    bottom:calc(100% + 16px);
    width:290px;
    background:#fff;
    border-radius:12px;
    padding:24px 22px;
    box-shadow:0 20px 50px rgba(0,0,0,0.4);
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    z-index:10;
}

.newsletter-popover.open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.newsletter-popover::after{
    content:"";
    position:absolute;
    top:100%;
    right:26px;
    border:8px solid transparent;
    border-top-color:#fff;
}

.newsletter-popover-close{
    position:absolute;
    top:10px;
    right:12px;
    background:none;
    border:none;
    font-size:20px;
    line-height:1;
    color:#999;
    cursor:pointer;
}

.newsletter-popover-close:hover{
    color:#111;
}

.newsletter-form h4{
    font-family:"Montserrat", Arial, sans-serif;
    font-size:16px;
    font-weight:700;
    color:#111;
    margin:0 0 4px;
}

.newsletter-form p{
    font-size:12.5px;
    color:#777;
    margin:0 0 16px;
}

.newsletter-form input{
    width:100%;
    border:1px solid #e0e0e0;
    border-radius:8px;
    padding:11px 14px;
    font-family:"Montserrat", Arial, sans-serif;
    font-size:13.5px;
    margin-bottom:10px;
}

.newsletter-form input:focus{
    outline:none;
    border-color:#C8102E;
}

.newsletter-error{
    display:block;
    font-size:12px;
    color:#C8102E;
    margin:-4px 0 10px;
}

.newsletter-form button{
    width:100%;
    background:#111;
    color:#fff;
    border:none;
    border-radius:8px;
    padding:12px;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:0.5px;
    text-transform:uppercase;
    cursor:pointer;
    transition:background-color 0.25s ease;
}

.newsletter-form button:hover{
    background:#C8102E;
}

.newsletter-success{
    text-align:center;
    padding:10px 4px;
}

.newsletter-success-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    margin:0 auto 12px;
    border-radius:50%;
    background:rgba(200,16,46,0.1);
    color:#C8102E;
}

.newsletter-success-icon svg{
    width:22px;
    height:22px;
}

.newsletter-success p{
    font-size:13.5px;
    color:#333;
    margin:0;
    line-height:1.6;
}

@media (max-width:600px){
    .download-cta-inner{
        flex-direction:column;
        align-items:stretch;
    }

    .download-cta-btn{
        justify-content:center;
    }

    .newsletter-popover{
        right:auto;
        left:0;
        width:min(290px, 80vw);
    }

    .newsletter-popover::after{
        right:auto;
        left:26px;
    }
}