/*
Theme Name: POSSIBLE
Author: Agence POSSIBLE.
Author URL : https://agence-possible.fr
Version: 1.0
Description: Template de thème personnalisé pour l'entreprise POSSIBLE.
*/

:root {
    --color-blue: #4d6be5;        /* éléments principaux */
    --color-green: #73eb6e;   /* éléments secondaires */
    --color-text: #1A1721;           /* Texte général */
    --color-background: #FBFCFB;     /* Fond du site */
    --color-white: #FBFCFB;
    --color-orange: #ff7d03;
    --color-pink: #ff8cab;
    --color-pale: #fae8e3;
}


*{
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'NewTitle';
    src: url('fonts/NewTitle-Variable.woff2') format('woff2');
    font-weight: 100 900;
  	font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Figtree';
    src: url('fonts/Figtree-VariableFont_wght.woff2') format('woff2');
    font-weight: 100 900;
  	font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Figtree-Italic';
    src: url('fonts/Figtree-Italic-VariableFont_wght.woff2') format('woff2');
    font-weight: 100 900;
  	font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-VariableFont_wght.woff2') format('woff2');
    font-weight: 100 900;
  	font-display: swap;
    font-style: normal;
}


html{
    scroll-behavior: smooth;
}

body{
    background-color: var(--color-background);
    font-family: 'Figtree', sans-serif;
    margin-top: 120px; 
}

@media (max-width: 1024px){
    body{
    margin-top: 100px;
    }
}

::selection {
  background-color: var(--color-text);
  color: var(--color-white);
}



h1{
    font-family: 'NewTitle', sans-serif;
    font-size: 200px;
    font-weight: 900;
    line-height: 200px;
}


h2{
    font-family: 'NewTitle', sans-serif;
    font-size: 96px;
    font-weight: 700;
    line-height: 96px;
}


h3{
    font-family: 'NewTitle', sans-serif;
    font-size: 72px;
    font-weight: 500;
    line-height: 72px;
}

h4{
    font-family: 'NewTitle', sans-serif;
    font-size: 56px;
    font-weight: 500;
    line-height: 56px;
}

p{
    font-family: 'Figtree', sans-serif;
    font-size: 16px;
}

.p-bold{
    font-weight: 700;
}

@media (max-width: 1024px) {
    h1 {
        font-size: 104px;
        line-height: 104px;
    }

    h2 {
        font-size: 80px;
        line-height: 80px;
    }
}

@media (max-width: 786px) {
    h1 {
        font-size: 80px;
        line-height: 80px;
    }

    h2 {
        font-size: 64px;
        line-height: 64px;
    }

    h3 {
        font-size: 48px;
        line-height: 48px;
    }
}

.button{
    font-family: 'Montserrat';
    font-weight: 900;
    font-size: 24px;
    background-color: var(--color-blue);
    padding: 16px 24px;
    border-radius: 8px;
    transition: background-color 0.6s ease;
    text-decoration: none;
    color: var(--color-white);
    text-align: center;
}

.button:hover {
    color: var(--color-text);
    background-color: var(--color-green);
}

@media screen and (max-width: 786px){
    .button{
        font-size: 16px;
        padding: 12px 16px;
    }
}

section {
  scroll-margin-top: 120px; 
}

@media (max-width: 1024px){
section {
  scroll-margin-top: 120px; 
}
}

@media (hover: none) and (pointer: coarse) {
    a:hover,
    .keyword:hover,
    .contact_button:hover {
        color: inherit;
        background-color: inherit;
        border-color: inherit;
    }
}

/* Barre de navigation */

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 72px;
    background-color: var(--color-background);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-sizing: border-box;
}

/* Logo */
.navbar-logo img {
    width: 200px;
}

/* Liens */
.navbar-links {
    display: flex;
    align-items: center;
    gap: 32px;
}

.navbar-links a {
  text-decoration: none;
  color: var(--color-text);
  font-weight: 400;
  transition: font-weight 0.2s ease;
}

.navbar-links a:not(.navbar-button):not(.navbar-dropdown-title):hover {
  font-weight: 700;
}

/* Bouton Contact */
.navbar-button {
    background-color: var(--color-blue);
    color: var(--color-white) !important;
    padding: 12px 16px;
    border-radius: 8px;
    transition: background-color 0.6s ease !important;
    font-family: 'Montserrat';
    font-weight: 900 !important;
}

.navbar-button:hover {
    color: var(--color-text) !important;
    background-color: var(--color-green) !important;
}


.navbar-dropdown {
    position: relative;
}

.navbar-dropdown-title {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dropdown-arrow {
    width: 16px;
    margin-left: 4px;
    transition: transform 0.3s ease;
}

.navbar-dropdown:hover .dropdown-arrow,
.navbar-dropdown-content:hover .dropdown-arrow {
    transform: rotate(180deg);
}

.navbar-dropdown-content {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--color-background);
    padding: 16px 20px;
    min-width: 150px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    z-index: 100;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
    display: flex;           
    flex-direction: column; 
    gap: 8px; 
}

/* Sous-menu visible au survol */
.navbar-dropdown:hover .navbar-dropdown-content {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
}

/* Liens du sous-menu */
.navbar-dropdown-content a {
    display: inline-block;
    padding: 8px 0;
    color: var(--color-text);
    text-decoration: none;
    position: relative;
}


/* BURGER */
.burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.burger span {
    width: 25px;
    height: 3px;
    background-color: var(--color-text);
}

.close-menu {
    display: none;
    width: 24px;
    cursor: pointer;
}

/* MOBILE */
@media screen and (max-width: 1024px) {

    .burger {
        display: flex;
    }

    .close-menu {
        display: block;
        color: var(--color-white);
        align-self: flex-end;
        margin-bottom: 40px;
    }

.navbar-button {
    background-color: var(--color-text);
    border: solid 1px var(--color-background);
}

.navbar-button:hover {
    background-color: var(--color-text);
    border: solid 1px var(--color-background);
    color: var(--color-background);
}


.navbar {
    padding: 40px 20px;
}

    .navbar-links {
        position: fixed;
        top: 0;
        right: -100%;
        width: 260px;
        height: 100%;
        background-color: var(--color-text);
        flex-direction: column;
        align-items: flex-start;
        padding: 64px 32px;
        gap: 30px;
        transition: right 0.3s ease;
    }

    .navbar-links.active {
        right: 0;
    }

    .navbar-links a,
    .navbar-dropdown-title {
        color: var(--color-white);
    }

    /* Supprime le hover desktop sur mobile */
    .navbar-dropdown-content {
        position: static;
        box-shadow: none;
        padding: 0;
        transform: none;
        opacity: 1;
        visibility: visible;
        display: none;
        background: none;
        padding-top: 16px;
        margin-left: 24px;

    }

    /* Sous-menu ouvert */
    .navbar-dropdown.open .navbar-dropdown-content {
        display: flex;
        gap: 16px;
        margin-top: 10px;
    }

    /* Flèche */
    .dropdown-arrow {
        filter: invert(1);
    }

    .navbar-dropdown.open .dropdown-arrow {
        transform: rotate(180deg);
    }

    /* Désactive hover desktop */
    .navbar-dropdown:hover .navbar-dropdown-content {
        display: none;
    }
}

 /* autorise l'ouverture si .open est présent */
.navbar-dropdown.open:hover .navbar-dropdown-content {
    display: flex;
}



/* Footer */

footer {
    background-color: var(--color-background);
    padding: 40px 60px;
    font-size: 16px;
    color: var(--color-text);
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
    margin-top: 60px;
}

.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 40px;
}

.footer-menu-wrapper {
    display: flex;
    gap: 40px;
}

.footer-carbon {
    margin-bottom: -20px;
}

.footer-menu ul.footer-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.footer-menu ul.footer-nav li a {
    position: relative;
    text-decoration: none;
    color: var(--color-text);
    font-weight: 400;
    transition: font-weight 0.2s ease;
}

.footer-menu ul.footer-nav li a:hover{
    font-weight: 700;
}


.footer-icons {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-contact {
    width: 24px;
    height: auto;
}

.footer-instagram {
    width: 20px;
    height: auto;
}

.footer-linkedin {
    width: 20px;
    height: auto;
}

.footer-logo {
    width: 100%;
    text-align: center;
}

.footer-logo img.taille_logo_footer {
    width: 100%;
    max-width: 100%;
    height: auto;
}

@media screen and (max-width: 1279px) {

    footer {
        padding: 40px 20px;
    }

    .footer-top {
        flex-direction: column;
        gap: 40px;
    }


    .footer-right {
        order: 1;
        align-items: center;
        width: 100%;
    }

    .footer-left {
        order: 2;
        text-align: center;
        align-items: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
        width: 100%;
    }


    .footer-menu ul.footer-nav {
        flex-wrap: wrap;
        gap: 24px;
        display: flex;
        justify-content: center;
    }

    .footer-carbon {
        margin-bottom: 0;
    }

    .footer-logo img.taille_logo_footer {
        width: 100%;
    }

    .footer-menu-wrapper {
    flex-direction: column;
    align-items: center;
    }

    .footer-icons {
    gap: 40px;
    }

    .footer-contact {
    width: 28px;
    height: auto;
    }

    .footer-instagram {
        width: 24px;
        height: auto;
    }

    .footer-linkedin {
        width: 24px;
        height: auto;
    }
}

@media screen and (max-width: 786px) {
    .footer-menu ul.footer-nav {
        gap: 24px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/*ANIMATION*/

/*Scroll etiquette*/
.scroll-drop-label {
  transform: translateY(var(--drop-start, -80px)) rotate(0);
  opacity: 0;
  transition: transform 0.6s ease-in-out, opacity 0.4s ease-in-out;
}

.scroll-drop-label.is-visible {
  opacity: 1;
  transform: translateY(var(--drop-y, 0)) rotate(var(--label-rotate));
}

.etiquette-expertises {
  --drop-y: 19px;
  --label-rotate: -5deg;
  --drop-start: -80px;
  transition-delay: 1s;
}

.etiquette-clients {
  --drop-y: -2px;
  --label-rotate: -5deg;
  --drop-start: -80px;
    transition-delay: 1.50s;
}

.value-label:nth-of-type(1) {
  --drop-y: 0px;
  --label-rotate: -2deg;
  --drop-start: -80px;
  transition-delay: 0s;
}

.value-label:nth-of-type(2) {
  --drop-y: 0px;
  --label-rotate: 2deg;
  --drop-start: -80px;
  transition-delay: 0.15s;
}

.value-label:nth-of-type(3) {
  --drop-y: 0px;
  --label-rotate: -2deg;
  --drop-start: -80px;
  transition-delay: 0.3s;
}

.value-label:nth-of-type(4) {
  --drop-y: 0px;
  --label-rotate: 2deg;
  --drop-start: -80px;
  transition-delay: 0.45s;
}

@media screen and (max-width: 1024px){
    .etiquette-expertises {
  --drop-y: 54px;
}
}

@media screen and (max-width: 786px){
    .etiquette-expertises {
  --drop-y: 45px;
}
}

/*Mots clés et images accueil*/

/* Bloc scroll-reveal */
.scroll-reveal {
    opacity: 0;
    transform: translateX(-100px);
    transition: transform 0.8s ease, opacity 0.6s ease;
}

.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Delay par bloc */
.services-conseil.scroll-reveal { transition-delay: 0.1s; }
.services-communication.scroll-reveal { transition-delay: 0.3s; }
.services-formation.scroll-reveal { transition-delay: 0.6s; }



/* Texte hero - animation gauche/droite */
.hero-title-left {
    display: inline-block;
    opacity: 0;
    transform: translateX(-80px);
    transition: transform 0.8s ease, opacity 0.6s ease;
}

.hero-title-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.hero-title-right {
    display: inline-block;
    opacity: 0;
    transform: translateX(80px);
    transition: transform 0.8s ease, opacity 0.6s ease;
}

.hero-title-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Images hero - clip/slide */
.hero-image-reveal {
    overflow: hidden;
}

/* IMAGE DU HAUT → gauche → droite, plus lente */
.hero-image-top img {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.8s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.hero-image-top.is-visible img {
    clip-path: inset(0 0 0 0);
}

/* IMAGE DU BAS → droite → gauche, plus rapide */
.hero-image-bottom img {
    clip-path: inset(0 0 0 100%);
    transition: clip-path 1.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.hero-image-bottom.is-visible img {
    clip-path: inset(0 0 0 0);
}

/* Étiquette hero - chute avec zoom */
.hero-label {
    transform: translate(-50%, -50%) scale(1.3) rotate(-5deg);
    opacity: 0;
    transition: transform 1s cubic-bezier(1, -0.2, 0.4, 1.8), opacity 0.4s ease-in-out;
}

.hero-label.is-visible {
    transform: translate(-50%, -50%) scale(1) rotate(-5deg);
    opacity: 1;
}

/* Animation vibration */
@keyframes heroVibrateOnce {
  0%   { transform: translate(-50%, -50%) scale(1) rotate(-5deg); }
  15%  { transform: translate(-50%, -50%) scale(1) rotate(-4.5deg); }
  30%  { transform: translate(-50%, -50%) scale(1) rotate(-5.5deg); }
  45%  { transform: translate(-50%, -50%) scale(1) rotate(-4.7deg); }
  60%  { transform: translate(-50%, -50%) scale(1) rotate(-5.3deg); }
  75%  { transform: translate(-50%, -50%) scale(1) rotate(-4.9deg); }
  100% { transform: translate(-50%, -50%) scale(1) rotate(-5deg); }
}

/* Applique l’animation au hover, une seule fois */
.hero-label.is-visible:hover {
  animation: heroVibrateOnce 0.4s ease;
}


/* HERO DESCRIPTION - slide ensemble de gauche à droite */
.hero-description {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.hero-description.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/*RECREER DU SENS*/

.animated-title span {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.animated-title span.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/*ACCUEIL*/

.accueil{
    display: flex;
    flex-direction: column;
    gap: 80px;
    padding-bottom: 80px;
    padding-top: 40px;

}

.hero-section {
  padding: 0 224px;
  position: relative;
  overflow: hidden;
}

/* Rangées */
.hero-row {
  display: flex;
  align-items: center;
  gap: 32px;
}

/* Rangée "RÉVEILLEZ" */
.hero-row--top {
  justify-content: space-between;
  gap: 32px;
}

/* Rangée "LE FUTUR" */
.hero-row--bottom {
  display: flex;
  justify-content: space-between; 
  align-items: center;
}

/* Texte */
.hero-text {
  grid-column: 1 / 7;
  text-align: left;
}

.hero-text-right {
  text-align: right;
}

.hero-title {
  font-size: 240px;
  font-weight: 900;
  line-height: 1;
  margin: 0;
  white-space: nowrap;
}

/* Images */
.hero-image {
  flex: 1;
  height: 196px;
  overflow: hidden;
}

.hero-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Étiquette */
.hero-label {
  position: absolute;
  top: 39%;
  left: 50%;
  z-index: 10;
}

.hero-label p {
  padding: 10px 10px;
  border-radius: 8px;
  background-color: var(--color-green);
  color: var(--color-text);
  font-weight: 900;
  font-family: 'Montserrat';
  font-size: 40px;
}

/* Description */
.hero-description {
    display: flex;
    gap: 32px;
    align-items: center;
}

/* Images : colonnes 7 à 12 */
.hero-logos {
    grid-column: 8 / 13;
    display: flex;
    gap: 32px;
    justify-content: center;
    align-items: center;
}

.lucie_logo {
  width: 96px;
  height: auto;
}

.qualiopi_logo {
  width: 168px;
  height: auto;
}

.impact_logo {
  width: 104px;
  height: auto;
}

.lab_academy_logo {
  width: 160px;
  height: auto;
}

@media screen and (max-width: 1300px){
    .hero-section{
        padding: 0 72px;
    }
}

@media screen and (max-width: 1024px) {
    .hero-section {
    padding: 0 20px;
    position: relative;
    overflow: hidden;
    }

    .hero-description {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 24px;
    }

    .hero-logos{
        gap: 64px;
    }

     .hero-text p{
        text-align: center;
    }

    .hero-label{
        top: 35%;
    }
}

@media screen and (max-width: 786px){
    .hero-image{
        display: none;
    }

    .hero-row--top{
        justify-content: center;
    }

    .hero-row--bottom{
        justify-content: center;
    }

    .hero-title{
        font-size: 144px;
    }

    .hero-text-right {
        padding: 0 0 0 0;
    }

    .hero-text-left {
    padding: 0 0 0 0;
    }

    .hero-label{
        top: 14%;
    }

    .hero-label p{
        font-size: 16px;
        text-align: center;
    }

    .hero-logos{
        gap: 32px;
        flex-direction: column;
    }

    .hero-description{
        gap: 32px;
    }


    .lucie_logo {
    width: 128px;
    }

    .qualiopi_logo {
    width: 216px;
    }

    .impact_logo {
    width: 136px;
    }

    .lab_academy_logo {
    width: 200px;
    }
}

/*SECTION PHRASE MILIEU*/

.titre_description {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 224px;
  gap: 8px;
  text-transform: uppercase;
}


/* conteneur */
.scroll-lines span {
    display: inline-block;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

/* état visible */
.scroll-lines span.is-visible {
    opacity: 1;
    transform: translateY(0);
}


@media screen and (max-width: 1300px){
.titre_description {
  padding: 0 72px;
}

}

@media screen and (max-width: 1024px){
.titre_description {
  padding: 0 20px;
}

}

    

/*Services*/

.services_section{
display: flex;
flex-direction: column;
padding: 0 224px;
gap: 0;
}

.etiquette-expertises{
  z-index: 10;
  padding: 10px 10px;
  border-radius: 8px;
  background-color: var(--color-orange);
  color: var(--color-text);
  width: fit-content;
  align-self: flex-start;
}

.etiquette-expertises p {
  font-weight: 900;
  font-family: 'Montserrat';
  font-size: 24px;
}

.services-conseil{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.conseil-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: 100%;
}

.conseil-image {
  flex: 1;
  height: 184px;
  overflow: hidden;
}

.conseil-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.formation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: 100%;
}

.formation-image {
  flex: 1;
  height: 184px;
  overflow: hidden;
}

.formation-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.services-communication{
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}
.services-formation{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.keyword{
    font-family: 'NewTitle';
    font-weight: 700;
    font-size: 232px;
    line-height: 232px;
    text-decoration: none;
    color: var(--color-text);
    transition: color 0.3s ease;
}


.keyword_description{
    font-size: 16px;
    max-width: 560px;;
}

@media screen and (max-width: 1300px){
    .services_section{
        padding: 0 72px;
    }
}

@media screen and (max-width: 1024px) {
.services_section{
gap: 40px;
padding: 0 20px;
align-items: stretch;
}

.keyword{
    font-size: 200px;
    line-height: 200px;
}

.keyword_description{
    font-size: 16px;
    max-width: max-content;
}

.services-communication{
    align-items: center;
}
.services-formation{
    align-items: flex-start;
}

.etiquette-expertises p {
  font-size: 24px;
}
}

@media screen and (max-width: 786px){

    .services_section{
    align-items: center;
    }
    .keyword{
    font-size: 80px;
    line-height: 80px;
    }

    .etiquette-expertises p {
    font-size: 16px;
    }
    .etiquette-expertises{
    align-self: center;
    }

    .conseil-image{
        display: none;
    }

    .formation-image{
        display: none;
    }
}



/*section Ref client*/
.clients_logos {
    padding: 0 72px;
    background-color: var(--color-background);
    display: flex;
    flex-direction: column;
}

.title-clients-logo {
    display: flex;
    justify-content: center; /* centre l’ensemble */
}

.title_inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* référence = bord gauche du texte */
    width: fit-content;
}

.etiquette-clients{
  z-index: 1;
  padding: 10px 10px;
  border-radius: 8px;
  background-color: var(--color-pink);
  color: var(--color-text);
  width: fit-content;
}

.etiquette-clients p {
  font-weight: 900;
  font-family: 'Montserrat';
  font-size: 24px;
}

/* Titre */
.clients_logos h2 {
    margin: 0 0 48px 0;
    text-align: center;
}

/* Logos */

.carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
  }

  /* ===== FLÈCHES ===== */
  .arrow-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    opacity: 0.6;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .arrow-btn:hover { opacity: 1; }

  /* Flèches en SVG inline (à remplacer par vos images) */
  .arrow-btn img {
    width: 36px;
    height: 36px;
  }

  /* Si vous utilisez vos propres images, remplacez le SVG ci-dessous
     par : <img src="fleche-gauche.png" alt="Précédent"> */

  /* ===== VIEWPORT CARROUSEL ===== */
  .carousel-viewport {
    flex: 1;
    overflow: hidden;
  }

  /*TRACK*/
  .carousel-track {
    display: flex;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
     width: 100%;
  }

  /*SLIDE*/
  .carousel-slide {
    flex: 0 0 100%;
    display: grid;

    grid-template-rows: 1fr 1fr;
    gap: 24px 32px;
    padding: 20px 8px;

    width: 100%;
  min-width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  }

  /*LOGO CARD*/
  .logo-card {
    background: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
    min-width: 0;
    min-height: 120px;
  }

  .logo-card img {
    max-width: 100%;
    object-fit: contain;
    transition: filter 0.3s, opacity 0.3s;
  }

  /*POINTS*/
  .carousel-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
  }

  .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ccc;
    border: none;
    cursor: pointer;
    transition: background 0.25s, transform 0.25s;
    padding: 0;
  }
  .dot.active {
    background: #333;
    transform: scale(1.3);
  }



.spie {
    width: 96px;
}

.freeland {
    width: 100px;
}

.opera-de-dijon {
    width: 80px;
}

.crossject {
    width: 96px;
}

.chut-magazine {
    width: 96px;
}

.energies-mixites {
    width: 184px;
}

.global-hygiene {
    width: 120px;
}

.aptissen {
    width: 128px;
}

.vinci {
    width: 208px;
}

.ema-events {
    width: 184px;
}

.afnor {
    width: 104px;
}

.conforama {
    width: 160px;
}

.culture-papier {
    width: 96px;
}

.relais-et-chateau {
    width: 80px;
}

.mind_partners {
    width: 128px;
}

.tiers{
    width: 48px;
}

.acadir{
    width: 104px;
}

.bfc-mobilite-electrique {
    width: 96px;
}

.campus-la-varappe {
    width: 128px;
}

.french-tech {
    width: 64px;
}

.jolis-kids {
    width: 128px;
}

.ecole-des-metiers {
    width: 144px;
}

.federations-des-entreprises {
    width: 144px;
}

.surfy {
    width: 104px;
}

.propulzup {
    width: 128px;
}

.ionis {
    width: 104px;
}

.avignon {
    width: 128px;
}

.guiton {
    width: 48px;
}

.excellence-pro {
    width: 104px;
}

.max-im {
    width: 128px;
}

.region-bfc {
    width: 80px;
}

.gh-groupe {
    width: 80px;
}

.we-regen {
    width: 80px;
}

.ofa-numerique {
    width: 144px;
}

.ddg {
    width: 80px;
}

.aubenard {
    width: 144px;
}

.universite-bourgogne-europe {
    width: 104px;
}

.jda-handball {
    width: 80px;
}

.nsa {
    width: 80px;
}

.villaverde {
    width: 128px;
}

.fonderie{
    width: 128px;
}

.urbicand{
    width: 176px;
}

.chrysalide-wines{
    width: 120px;
}

.bivb{
    width: 136px;
}

@media screen and (max-width: 1024px){
    .clients_logos{
        padding: 0 20px;
    }

    /* Une seule rangée sur tablette/mobile */
    .carousel-slide {
      grid-template-rows: 1fr; /* une seule rangée */
      gap: 16px;
      padding: 12px 4px;
    }

 /* Points cachés */
    .carousel-dots { 
        display: none; 
    }

    .arrow-btn img {
         width: 28px; height: 28px; 
        }

    .logo-card { 
        padding: 16px 12px; 
    }

    .logo-card img { 
        min-height: 104px;
    }


    .logo-placeholder { 
        width: 90px; 
        height: 38px; 
        font-size: 0.6rem; 
    }

    

}

@media screen and (max-width: 786px){
    .etiquette-clients p {
    font-size: 16px;
    }

    .logo-card {
    background: var(--color-background);
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    min-width: 0;
    min-height: 120px;
  }

}



/* Articles page accueil */
.home_articles {
    padding: 0 224px;
    display: flex;
    flex-direction: column;
    transition: opacity 0.8s ease, transform 0.8s ease;
    transform: translateY(20px); 
    opacity: 0;
}

.home_articles h2{
    padding-bottom: 32px;
}

.home_articles.is-visible {
    opacity: 1;
    transform: translateY(0); 
}

.article_link {
    text-decoration: none;
    display: block;
}

.article {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-text);
    padding: 16px 0;
    transition: background-color 0.3s ease;
}

/*.article_link:hover .article {
    background-color: #e8e8e8; 
}*/



.article_name {
    color: var(--color-text);
    transition: transform 0.3s ease;
    padding-right: 32px;

}

.article_link:hover .article_name {
    transform: translateX(8px);
}


.arrow_article {
    width: 32px;
    height: auto;
    padding-right: 56px;
    transition: transform 0.3s ease;
}

.article_link:hover .arrow_article {
    transform: translateX(8px);
}

.div-more-articles {
    text-align: center;
    padding-top: 32px;
}

.more_articles {
    position: relative; 
    text-decoration: none;
    color: var(--color-text);
    transition: color 0.3s ease;
    font-weight: 500;
    transition: font-weight 0.2s ease;
    padding: 16px 24px;
}

.more_articles:hover {
    font-weight: 700;
}

@media (max-width: 1300px) {
    .home_articles {
    padding: 0 72px;
}
}

@media (max-width: 1024px) {
    .home_articles {
    padding: 0 20px;
}
}

@media (max-width: 786px) {
    .home_articles {
    padding: 0 20px;
}

.article {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    
}

.article_name{
    padding-right: 0;
}

.arrow_article{
    padding-right: 8px;
}

.arrow-place{
display: flex;
align-self: flex-end;
}
}

/*Section contact page d'accueil*/

.contact_homepage {
    position: relative;
    width: 100%;
    background-color: var(--color-background);
    overflow: hidden;
}

/* CONTENEUR DES MOTS */
.keywords_row {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 24px;

    width: calc(100% + 240px); 
    margin-left: -120px;

    margin-bottom: 0;

    opacity: 0;               
    transform: translateX(0);
    transition: transform 0.9s cubic-bezier(.22,1,.36,1), opacity 0.6s ease;
    transition-timing-function: 1s;
}

/* MOTS */
.keywords_row p {
    font-family: 'NewTitle';
    margin: 0;
    font-size: 96px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.15); 
    white-space: nowrap; 
    user-select: none;
    text-transform: uppercase;
}

/* Directions */
.keywords_row.from-left {
    transform: translateX(-120px);
}

.keywords_row.from-right {
    transform: translateX(120px);
}

.keywords_row.is-visible {
    transform: translateX(0);
    opacity: 1;
}

.contact_overlay {
    position: absolute;
    top: 50%;
    left: 50%;

    background-color: var(--color-background);
    border: 1px solid var(--color-text);
    border-radius: 8px;

    padding: 40px 40px;

    width: 536px;   
    height: 360px;  

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

    transform: translateX(-50%) translateY(-50%) scale(1.35);
    transform-origin: center center;
    opacity: 0;
    transition:
        transform 0.8s cubic-bezier(1, -0.3, 0.4, 1.6),
        opacity 0.3s ease-in-out;

    z-index: 5;
    
}

.contact_overlay a {
    background-color: var(--color-blue);
    padding: 16px 24px;
    border-radius: 8px;
    transition: background-color 0.3s ease;
    text-decoration: none;
    color: var(--color-white);
    font-family: 'Montserrat';
    font-weight: 900;
    font-size: 24px;
}

.contact_overlay a:hover {
    background-color: var(--color-green);
    color: var(--color-text);
}


.contact_overlay.is-visible {
    transform: translateX(-50%) translateY(-50%) scale(1);
    opacity: 1;
}


@media (max-width: 1024px){
    .keywords_row {
  width: calc(100% + 100px); 
     margin-left: -50px;
}
.keywords_row p {
    font-size: 80px;
}

.contact_overlay {
        padding: 16px 16px;
        gap: 24px;
        width: 432px;   
        height: 320px; 
    }

.contact_overlay a {
    font-size: 32px;
}
}

@media (max-width: 786px){
    .keywords_row {
  width: calc(100% + 50px); 
     margin-left: -25px;

}
.keywords_row p {
    font-size: 64px;
}
.contact_overlay {
    width: 256px;   
    height: 208px; 
    gap: 24px;
    }

.contact_overlay a {
    padding: 12px 16px;
    font-size: 16px;
}
}


/*PAGE AGENCE*/

.agence{
    display: flex;
    flex-direction: column;
    gap: 80px;
    padding-bottom: 80px;
    padding-top: 40px;
}

/*introduction agence*/

.agency-intro {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  padding: 0 72px;
  min-height: 400px;
  align-items: center;
}

.agency-intro-content {
  grid-column: 1 / span 7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  text-align: left;
}

.agency-intro-bold{
    font-weight: 700;
}

.agency-intro-values {
  grid-column: 8 / 13;
}


@media screen and (max-width: 1024px) {
    .agency-intro {
        padding: 0 20px;
    }

    .agency-intro-content {
        grid-column: 1 / span 7;
    }

    .agency-intro-image {
        grid-column: 9 / 13;
    }
}


@media screen and (max-width: 786px) {
    .agency-intro {
        display: flex;
        flex-direction: column;
        gap: 24px;
        min-height: auto;
    }

    .agency-intro-image {
       display: none;
    }

    .agency-intro-content {
        gap: 16px;
}
}



/*MISSION*/

.mission-bold{
    font-weight: 700;
    display: inline-block;
    margin-bottom: 8px;
}

.mission-number{
 display: flex;
 gap: 16px;
 align-items: center;
}

.mission-number-pourcentage{
    font-family: 'Newtitle';
    font-weight: 500;
    font-size: 96px;
    line-height: 96px;
}

.mission-number-text{
    font-size: 20px;
    font-weight: 700;
}


@media (max-width: 1024px){

.mission-number{
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.mission-number-text{
    text-align: left;
}

}

@media (max-width: 786px){
    .mission-number{
        gap: 8px;
        align-items: flex-start;
    }

    .mission-number-text{
        text-align: left;
    }
}

/* vision*/
.vision-section {
  padding: 40px 72px; 
  display: flex;
  flex-direction: column;
  gap: 32px;
  background-color: #ececec; 
}

.vision-description{
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.vision-cards-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.vision-card {
  width: 272px;              
  background-color: var(--color-background);    
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
  justify-content: flex-start; 
  padding: 24px;   
  box-sizing: border-box;
  gap: 16px;
}

.vision-card p {
  font-weight: 700;
  text-align: left;
}

.fleur-methode{
    width: 24px;
    height: auto;
}

.montagne-methode{
    width: 28px;
    height: auto;
}

.arc-methode{
    width: 32px;
    height: auto;
}

.oeil-methode{
    width: 32px;
    height: auto;
}

@media screen and (max-width: 1024px){
  .vision-section {
    padding: 40px 20px;
  }
}

@media screen and (max-width: 786px){
  .vision-card {
    width: 100%;
  }

  .vision-description p {
  text-align: center;
}
}

/*Méthode*/
.method-section {
  padding: 0 72px; 
  display: flex;
  flex-direction: column;
  gap: 32px;
  background-color: var(--color-background); 
}

.method-description{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.method-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.method-card {
  width: 272px;              
  background-color: var(--color-background);    
  border-radius: 8px;
  display: flex;
  align-items: center; 
  justify-content: center; 
  padding: 24px;   
  box-sizing: border-box;
  background-color: #ececec;
}

.method-card p {
  font-weight: 700;
  text-align: center;
}

@media screen and (max-width: 1024px){
  .method-section {
    padding: 0 20px;
  }
}

@media screen and (max-width: 786px){
  .method-card {
    width: 100%;
  }
}

/*Valeurs*/

.values{
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 0 72px;
}

.section-values-description{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-values-description h2{
    text-align: center;
}

.section-values-description p{
    text-align: center;
}

.values-wrapper{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    align-items: center;
}

.value-label:nth-of-type(1) {
  background-color: var(--color-green);
}

.value-label:nth-of-type(2) {
  background-color: var(--color-pink);
}

.value-label:nth-of-type(3) {
  background-color: var(--color-orange);
}

.value-label:nth-of-type(4) {
  background-color: var(--color-blue);
  color: var(--color-white);
}

.value-label{
    color: var(--color-text);
    padding: 10px 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;

}

.value-label p{
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 32px;
    line-height: 32px;
}

@media screen and (max-width: 1024px){
    .values{
        padding: 0 20px;
    }
}

@media screen and (max-width: 786px){
    .values{
        padding: 0 20px;
    }

    .values-wrapper{
        gap: 32px;
    }

    .value-label{
        width: 100%;
        justify-content: center;
        height: 48px;
        box-sizing: border-box;
    }

    .value-label p{
        font-size: 24px;
        line-height: 24px;
    }
}

/*raison d'être*/

.purpose-section {
  padding: 0 72px;
}

.purpose-card {
  border-radius: 16px;
  height: 100%;

  background-image: url("img/arbre-et-ciel-bleu.webp");
  background-size: cover;           
  background-repeat: no-repeat;
  background-position: center center;

  display: flex;
  align-items: flex-start;   
  justify-content: flex-start; 
  padding: 40px;          
  box-sizing: border-box;
  color: var(--color-background);
}

.purpose-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
}

.purpose-text-bold{
    font-weight: 700;
}

@media screen and (max-width: 1024px) {
  .purpose-section {
    padding: 0 20px;
  }

  .purpose-card {
    height: auto;
    background-position: 45% 20%;
  }

  .purpose-content{
        max-width: 540px;

  }
}

@media screen and (max-width: 786px){
    .purpose-content {
    max-width: max-content;
    }

    .purpose-card{
        background-position: 45% 20%;
    }
}

/*distinctions*/

.awards-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 72px;
  gap: 40px;
}


.awards-title {
  text-align: center;
}

.awards{
    display: flex;
    flex-direction: column;
    gap: 56px;
    align-items: center;
}

.awards-wrapper {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  width: 100%;
}


.award-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  max-width: 320px;
}

.award-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 24px;
}

.award-lucie {
  width: 104px;
}

.award-coq-crea {
  width: 104px;
}

.award-pulse-event {
  width: 80px;
}

.award-card h3 {
  text-align: center;
  font-family: 'Figtree';
  font-weight: 700;
  font-size: 24px;
  line-height: 24px;
}

@media screen and (max-width: 1024px){
.awards-section {
  padding: 0 20px;
}
}

@media screen and (max-width: 786px){
.awards-wrapper {
  gap: 40px;
}
}


/*Dynamiques positives*/

.dynamic-positive-section {
  padding: 72px 72px;
  background-color: #ececec;
}

.dynamic-positive-main {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  align-items: center;
}

.wrapper-action{
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.internal-link-action {
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px 16px 0;
}

.arrow-action{
    width: 16px;
    height: 100%;
    transform: rotate(-45deg);
}

.dynamic-positive-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}


.dynamic-positive-text-1 {
  grid-column: 1 / 7;
}

.dynamic-positive-image {
  grid-column: 9 / 13; 
  width: 100%;    
  display: flex;      
  justify-content: center;
  align-items: center;
}

.dynamic-positive-image img {
  width: 100%;         
  height: 504px;    
  object-fit: cover;    
  border-radius: 8px; 
}

.dynamic-positive-intro {
  margin: 0;
}

.dynamic-positive-points p {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-text);
  font-weight: 700;
}

.dynamic-positive-points p:not(:first-child) {
  padding-top: 16px;
}

@media (max-width: 1024px) {
  .dynamic-positive-section {
    padding: 72px 20px;
  }

  .dynamic-positive-text-1 {
    grid-column: 1 / 8;
  }

  .dynamic-positive-text-2 {
    grid-column: 9 / 11;
  }

  .dynamic-positive-image img{
    height: 528px;

  }
}

@media (max-width: 786px) {
  .dynamic-positive-main {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .dynamic-positive-image img{
    height: 204px;
  }
}

/*Dernière section agence*/
.make-things-possible{
    padding: 0 72px;
}

.wrapper-make-things{
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
}

.text-make-things{
font-family: 'Newtitle';
font-size: 128px;
line-height: 128px;
text-align: center;
font-weight: 700;
}

@media screen and (max-width: 1024px){
    .make-things-possible{
        padding: 0 20px;
    }

    .text-make-things{
    font-size: 104px;
    line-height: 104px;
    }
}

@media screen and (max-width: 786px){
    .text-make-things{
    font-size: 72px;
    line-height: 72px;
    }
}



/*PAGE CARNET D'IMPACT*/

.page-carnet-impact{
    display: flex;
    flex-direction: column;
    gap: 80px;
    padding-top: 40px;
    padding-bottom: 80px;
}

.carnet_impact{
    display: flex;
    justify-content: space-between;
    padding: 0 72px;
    align-items: flex-end;
    gap: 48px;
}

.carnet_imapct_titre{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.carnet_impact img{
    width: auto;
    height: 480px;
}


/* SECTION ARTICLE */
.articles-section{
  padding: 40px 72px 0 72px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}


.article-card{
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--color-text);
  background-color: var(--color-background);
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  transition: transform 0.2s;
  width: 360px;
  height: 360px; 
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.article-card:hover{
  transform: translateY(-4px);
}

.article-img{
  height: 152px;
  overflow: hidden;
  border-radius: 8px;
}

.article-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-title{
  font-weight: bold;
  text-align: left;
  font-size: 16px;
  padding: 24px 0 8px 0;
}


.article-excerpt{
  padding: 0;
  flex: 1;
  opacity: 0.6;
}

.article-arrow{
  display: flex;
  justify-content: flex-end;
  padding: 0 24px 24px 16px;
  border-bottom: solid 1px var(--color-text);
}

.article-arrow img{
  width: 24px;
  transition: transform 0.3s ease;
}


.article-card:hover .article-arrow img{
  transform: translateX(16px);
}

.articles-pagination {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 40px 0;
}

.articles-pagination a,
.articles-pagination span {
  text-decoration: none;
  font-weight: 500;
  color: var(--color-text);
}

.articles-pagination .current {
  font-weight: 700;
}

/* RESPONSIVE */
@media screen and (max-width: 786px){
  .articles-section{
    padding: 0 20px 48px 20px;
  }

  .article-card{
    width: 100%;
  }

  .article-img{
    height: 180px;
  }
}


@media screen and (max-width: 1024px){

    .page-carnet-impact{
    gap: 40px;
}

    .carnet_impact{
    padding: 0 20px;
}

.carnet_impact img{
    width: auto;
    height: 336px;
}

.articles-section{
    padding: 0 20px;
    justify-content: center;
}
}

@media screen and (max-width: 786px){
    .carnet_impact img{
    display: none;
}


 .article-grid{
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 100%;
    min-height: 0;  
  }

  .article-image{
    min-height: 0;
  }

  .article-image{
    overflow: hidden;
  }

}

/*INTÉRIEUR ARTICLE*/

.article-highlight-big {
    font-family: 'Newtitle';
  font-size: 72px;
  line-height: 72px;
  font-weight: 500;
}

.article-highlight-small {
    font-family: 'Newtitle';
  font-size: 56px;
  line-height: 56px;
  font-weight: 500;
}

.article-single{
    padding-top: 40px;
    padding-bottom: 80px;
}


.article-top {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
  padding: 0 72px;
}

.article-date{
    font-size: 12px;
    opacity: 0.6;
}

.article-header {
  grid-column: 3 / 11;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.article-header h1{
    font-family: 'Newtitle';
    font-size: 128px;
    line-height: 128px;
    font-weight: 700;
}

.article-intro {
  font-weight: 700;
}

.article-hero {
  grid-column: 3 / 11;
  height: 400px;
  overflow: hidden;
  padding-top: 32px;
  padding-bottom: 32px;
}

.article-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.article-content {
  grid-column: 3 / 11;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.article-back {
  grid-column: 3 / 11;
  padding-top: 40px;
}

.article-back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 500;
  color: var(--color-text);
  transition: color 0.3s ease;
}

.article-back-arrow {
  width: 16px;
  height: auto;
  transition: transform 0.2s ease;
  transform: rotate(180deg);
}

.article-back a:hover .article-back-arrow {
  transform: rotate(180deg) translateX(-4px);
}

.article-back a:hover {
  color: var(--color-blue);
}

@media screen and (max-width: 1024px){
    .article-header h1{
    font-size: 96px;
    line-height: 96px;
}

.article-top {
  padding: 0 20px;
}

.article-header {
  grid-column: 2 / 12;
}

.article-hero {
  grid-column: 2 / 12;
  height: 320px;
  padding-top: 24px;
  padding-bottom: 24px;
}

.article-content {
  grid-column: 2 / 12;
  gap: 24px;
}

.article-back {
  grid-column: 2 / 12;
}

}

@media screen and (max-width: 786px){
    .article-highlight-big {
  font-size: 56px;
  line-height: 56px;
}

.article-highlight-small {
  font-size: 40px;
  line-height: 40px;
}

.article-header h1{
    font-size: 96px;
    line-height: 96px;
}

.article-top {
  display: flex;
  gap: 24px;
  flex-direction: column;
}


}


/*PAGE FORMATION GÉNÉRALE*/
.page-formations{
    display: flex;
    flex-direction: column;
    padding-top: 40px;
    padding-bottom: 80px;
    gap: 80px;
}

.formation-hero {
    padding: 0 72px;
}

.formation-main-image {
    width: 100%;
    height: 320px;
    box-sizing: border-box;
}

.formation-main-image img {
    width: 100%;
    height: 100%;      
    object-fit: cover;
    display: block;
    object-position: 50% 90%;
    border-radius: 8px;
}

/* Chiffres clés */

.key-numbers {
  padding: 0 224px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.key-numbers-top {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

.key-numbers-card {
  grid-column: span 4;
  background-color: #ececec;
  border-radius: 8px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.key-numbers-bottom {
  background-color: #ececec;
  border-radius: 8px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.key-numbers-intro {
  text-align: center;
  font-weight: 700;
}

.key-numbers-text{
    font-weight: 700;
}

.key-numbers-bottom-inside {
    display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

.key-numbers-item {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;

}

/* typo*/

.key-numbers-value {
  font-family: 'Newtitle', sans-serif;
  font-size: 128px;
  font-weight: 500;
  line-height: 128px;
  color: var(--color-blue);
  text-align: center;
}

/*responsive chiffres clés*/

@media screen and (max-width: 1300px){
.key-numbers {
  padding: 0 72px;
}

.key-numbers-value {
  font-size: 96px;
  line-height: 96px;
}
}

@media screen and (max-width: 1024px){
.key-numbers {
  padding: 0 20px;
}
}

@media screen and (max-width: 786px){

.key-numbers {
  padding: 0 20px;
  gap: 32px;
}

.key-numbers-top {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.key-numbers-bottom{
    gap: 32px;
}

.key-numbers-bottom-inside{
    display: flex;
    flex-direction: column;
    gap: 32px;
}
}


.formations-intro-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    padding: 0 72px;
    gap: 32px;
}

.intro-text {
    grid-column: 1 / 7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
}

.internal-link {
    text-decoration: none;
    color: var(--color-text);
}

.internal-link-bold{
    font-weight: 700;
}

.arrow-reglement-interieur{
    width: 16px;
    height: auto;
    transform: rotate(-45deg);
}

.handicap-title{
    font-weight: 700;
}

.handicap-contact{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.qualiopi-box {
    grid-column: 7 / 13;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.qualiopi-logo{
    width: 300px;
    height: auto;
}

.qualiopi-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--color-text);
    padding: 16px 24px;
}

.arrow_qualiopi{
    width: 16px;
    height: auto;
    transform: rotate(-45deg);
}


.categorie{
    padding-bottom: 32px;
}


.formations-categories {
    padding: 0 72px;
}


.categorie-title {
    margin-bottom: 32px;
}


.formations-grid {
    display: flex;
    flex-wrap: wrap;       
    gap: 32px;                
    justify-content: flex-start; 
}


.formation-card {
    display: flex;
    flex-direction: column;
    width: 360px;
    height: 296px;
    background-color: var(--color-background);
    overflow: hidden;
    text-decoration: none;
    color: var(--color-text);
    transition: transform 0.2s ease;
}

.formation-card:hover {
    transform: translateY(-4px);
}


.formation-img {
    height: 152px;
    overflow: hidden;
}

.formation-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.formation-content {
    flex: 1;
}

/* Titre de la formation */
.formation-title {
    font-weight: bold;
    text-align: left;
    font-size: 16px;
    padding-top: 24px;
    padding-bottom: 16px;


}

.formation-arrow {
    display: flex;
    justify-content: flex-end;
    padding: 0 24px 24px 16px;
    border-bottom: solid 1px var(--color-text);
}


.formation-arrow img {
    width: 24px;
    height: 100%;
    transition: transform 0.3s ease;
}

.formation-card:hover .formation-arrow img {
    transform: translateX(16px);
}


@media screen and (max-width: 1024px){
.formation-main-image {
    padding: 0 20px 0 20px;
}

.formation-main-image img {
    object-position: 50% 90%;
}

.formations-intro-grid{
    padding: 0 20px 0 20px;
}

.formations-grid {
    justify-content: center;
}

.qualiopi-logo{
    width: 250px;
}

.formations-categories {
    padding: 0 20px;
}
}

@media screen and (max-width: 786px){
.formation-main-image {
    display: none;
}

.formations-intro-grid{
    display: flex;
    flex-direction: column;
    gap: 72px;
}

.qualiopi-box{
    gap: 16px;
}

.formations-grid{
    justify-content: center;
}

.formation-img{
    width: 100%;
}

.qualiopi-link{
    display: flex;
    flex-direction: column;
    text-align: center;
}
}


/*PAGE SINGLE-FORMATION*/

.single-formation {
    display: flex;
    flex-direction: column;
    gap: 80px;
    padding-top: 40px;
    padding-bottom: 80px
}

.formation-h1{
    font-size: 128px;
    line-height: 128px;
}

.formation-text-block h2{
        font-weight: 500;
    }

.formation-hero {
    padding: 0 72px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.formation-hero-flex {
    display: flex;
    gap: 32px;
    align-items: stretch; 
}

.formation-hero-image {
    flex: 1;
    border-radius: 8px;
    overflow: hidden;
    height: 560px;

}

.formation-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.formation-hero-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 32px;
    justify-content: flex-end;

}

.objectifs_pedagogiques{
    background-color: #ececec;
    border-radius: 8px;
    padding: 32px;
}

.formation-h3 {
    font-family: 'Figtree';
    font-size: 32px;
    font-weight: 700;
    line-height: 32px;

}

.formation-text-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.formation-text-block ul,
.formation-text-block ol {
    list-style: disc inside;
}

@media screen and (max-width: 1024px){

    .formation-hero{
        padding: 0 20px;
    }

    .formation-h1{
    font-size: 104px;
    line-height: 104px;
}

    .formation-hero-flex {
    align-items: stretch;
    flex-direction: column; 
    gap: 24px;
}

.formation-hero-image img{
        height: 204px;
}

.formation-h3{
    font-size: 28px;
    line-height: 28px;
}

}

@media screen and (max-width: 786px){
    .formation-h3{
    font-size: 24px;
    line-height: 24px;
    }

    .formation-h1{
    font-size: 72px;
    line-height: 72px;
}
}


/* SECTION À QUI S'ADRESSE */
.to-who {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 0 72px;
}


.to-who-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.to-who-title h2 {
    font-weight: 500;
}


.to-who-cards {
    display: flex;
    gap: 32px;
}


.to-who-card-inside {
    flex: 1;
    background-color: #ececec;
    border-radius: 8px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.to-who-cards ul,
.to-who-cards ol {
    list-style: disc inside;
}

@media screen and (max-width: 1024px){
    .to-who {
    padding: 0 20px;
    
}
}

@media screen and (max-width: 786px){
    .to-who {
        gap: 24px;
    }


    .to-who-cards {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.to-who-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}
}


/* SECTION MÉTHODE PÉDAGOGIQUE & ÉVALUATION */
.methods-evaluation {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 0 72px;
}

.methods-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.methods-title h2 {
    font-weight: 500;
}

.methods-cards {
    display: flex;
    gap: 32px;
}

.methods-card-inside {
    flex: 1;
    background-color: #ececec;
    border-radius: 8px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.methods-cards ul,
.methods-cards ol {
    list-style: disc inside;
}

/* Responsive tablette / grand écran */
@media screen and (max-width: 1024px){
    .methods-evaluation {
        padding: 0 20px;
    }
}

/* Responsive mobile */
@media screen and (max-width: 786px){
    .methods-evaluation{
        gap: 24px;
    }
    .methods-cards {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .methods-title {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}


/* SECTION MODALITÉS PRATIQUES */
.modalites-pratiques {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 0 72px;
}

.modalites-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.modalites-title h2 {
    font-weight: 500;
}

.modalites-cards {
    display: flex;
    gap: 32px;
}

.modalites-card-inside {
    flex: 1;
    background-color: #ececec;
    border-radius: 8px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modalites-card-inside a{
    text-decoration: none;
    color: var(--color-text);
}

.modalites-cards ul,
.modalites-cards ol {
    list-style: disc inside;
}

/* Responsive tablette / grand écran */
@media screen and (max-width: 1024px){
    .modalites-pratiques {
        padding: 0 20px;
    }
}

/* Responsive mobile */
@media screen and (max-width: 786px){
    .modalites-pratiques {
        gap: 24px;
    }
    .modalites-cards {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .modalites-title {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}


/* SECTION PROGRAMME */
.section-programme {
    padding: 0 72px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.section-programme-content {
    background-color: #ececec;
    border-radius: 8px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.section-programme-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.section-programme-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.section-programme-title h2 {
    font-weight: 500;
}

.section-programme-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-programme-text ul,
.section-programme-text ol {
    list-style: disc inside;
}

/* RESPONSIVE */
@media screen and (max-width: 1024px) {
    .section-programme {
        padding: 0 20px;
    }
}

@media screen and (max-width: 786px) {
    .section-programme-content{
        gap: 24px;
    }
    .section-programme-title {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* SECTION ACCESSIBILITÉ */
.section-accessibilite {
    padding: 0 72px;
    display: flex;
    flex-direction: column;
}

.section-accessibilite-content {
    background-color: #ececec;
    border-radius: 8px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.section-accessibilite-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.section-accessibilite-title h2 {
    font-weight: 500;
}

.section-accessibilite-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-accessibilite-text ul,
.section-accessibilite-text ol {
    list-style: disc inside;
    margin: 0;
    padding-left: 16px;
}


/*RETOUR AUX FORMATIONS*/
.formation-back {
 padding: 0 72px;
}

.formation-back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 500;
  color: var(--color-text);
  transition: color 0.3s ease;
}

.formation-back-arrow {
  width: 16px;
  height: auto;
  transition: transform 0.2s ease;
  transform: rotate(180deg);
}

.formation-back a:hover .article-back-arrow {
  transform: rotate(180deg) translateX(-4px);
}

.formation-back a:hover {
  color: var(--color-blue);
}

/* RESPONSIVE */
@media screen and (max-width: 1024px) {
    .section-accessibilite {
        padding: 0 20px;
    }

    .formation-back {
    padding: 0 20px;
    }
}

@media screen and (max-width: 786px) {
    .section-accessibilite-content{
        gap: 24px;
    }
    .section-accessibilite-title {
        flex-direction: column;
        align-items: flex-start;
    }
}




/*PAGE COMMUNICATION ET CONSEIL*/
.expertise{
display: flex;
flex-direction: column;
gap: 80px;
padding-bottom: 80px;
padding-top: 40px;
}

.introduction_expertise {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    padding: 0 72px;
   min-height: 400px;
}

.title_expertise{
    text-align: left;
    grid-column: 1 / span 7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px
}

.title_expertise h1 {
    line-height: 148px;
}

.image_introduction_expertise {
    grid-column: 9 / 13;
}

.image_introduction_expertise img {
    width: 100%;
    height: 100%;     
    object-fit: cover;  
    display: block;
    border-radius: 8px; 
}

@media screen and (max-width: 1024px){
.introduction_expertise{
    padding : 0 20px;
}

.title_expertise h1 {
    line-height: 72px;
}

}

@media screen and (max-width: 786px){
.introduction_expertise {
    display: flex;
    flex-direction: column;
    gap: 24px;
   min-height: 100%;
}   

.image_introduction_expertise img {
        width: 100%;
        border-radius: 8px;
}

.title_expertise h1 {
    line-height: 56px;
}

}

/* SECTION EXPERTISE */
.expertise-section{
  padding: 0 72px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}


.title_details_expertise{
  display: flex;
  flex-direction: column;
  gap: 16px;
}


.every_rectangle_expertise {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
 padding-top: 24px;

}

.text_rectangle_expertise {
  width: 272px;
  background-color: #ececec;
  border-radius: 8px;
  display: flex;
  flex-direction: column; 
  gap: 16px;
  padding: 24px;
}

.text_rectangle_expertise h4{
  font-family: 'Figtree', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 16px;
}

.text_rectangle_expertise p {
  text-align: left;
}


@media screen and (max-width: 1024px){
.expertise-section{
  padding: 0 20px;
  gap: 24px;
}
}

@media screen and (max-width: 786px){
.text_rectangle_expertise{
    width: 100%;
}

}


/*SECTION SERVICE*/

.section-services {
  padding: 0 72px;
}

.services-main {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

.services-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}


.services-text-1 {
  grid-column: 1 / 6;
}


.services-text-2 {
  grid-column: 8 / 13;
}


.services-intro {
  margin: 0;
}


.services-points p {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-text);
}

.services-points p:not(:first-child) {
  padding-top: 16px;
}


@media (max-width: 1024px) {
    .section-services {
  padding: 0 20px;
}

.services-text-1 {
  grid-column: 3 / 11;
}

.services-text-2 {
  grid-column: 3 / 11;
  padding-top: 32px;
}

}

@media (max-width: 786px){
.services-main {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
}

/*SECTION POUR QUI*/
.section-for-who {
  padding: 40px 72px; 
  display: flex;
  flex-direction: column;
  gap: 32px;
  background-color: #ececec; 
  text-align: center;
}


.for-who-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  padding-top: 24px;
}


.for-who-rectangle {
  width: 272px;              
  background-color: var(--color-background);    
  border-radius: 8px;
  display: flex;
  flex-direction: column; 
  align-items: flex-start;  
  gap: 16px;
  padding: 24px;   
  text-align: left;
}


.for-who-icon {
  width: 32px;
  height: auto;
  object-fit: contain;
}


.for-who-rectangle p {
  margin: 0;
}

.for-who-rectangle-bold {
    font-weight: 700;
}

.for-who-rectangle p:not(:last-child) {
  padding-top: 16px;
}


@media screen and (max-width: 1024px){
  .section-for-who {
    padding: 40px 20px;
  }
}

@media screen and (max-width: 786px){
.for-who-rectangle {
    width: 100%;
}

}

/*SECTION DOUBLE SENS*/

.section-double-sens{
    padding: 0 72px;
}

.double-sens{
    background-color: #ececec;
    padding: 64px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 64px;
}

.double-sens h2{
    font-weight: 500;
}

.double-sens img{
    width: 300px;
    height: auto;
}

.text-double-sens{
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.button-double-sens{
    font-family: 'Montserrat';
    font-weight: 900;
    font-size: 24px;
    background-color: var(--color-background);
    padding: 16px 24px;
    border-radius: 8px;
    transition: color 0.6s ease;
    text-decoration: none;
    color: var(--color-text);
    text-align: center;
    border: 1px solid var(--color-text);
    width: fit-content;
}

.button-double-sens:hover {
    color: var(--color-blue);
    border: 1px solid var(--color-blue);
}

@media (max-width: 1024px){

    .section-double-sens{
    padding: 0 20px;
    }

    .double-sens img{
    width: 200px;
    }
}

@media (max-width: 786px){
    .double-sens{
    flex-direction: column;
    padding: 32px;
    }

    .double-sens h2{
        text-align: center;
    }

    .text-double-sens{
        align-items: center;
    }

    .button-double-sens{
    font-size: 16px;
    padding: 12px 16px;
    }
}

/* SECTION FINALE RSE */
.section-activate-rse {
  background-color: var(--color-background);
  padding: 0px 72px;
}

.activate-rse-content {
  display: flex;
  align-items: center;    
  justify-content: center;   
  gap: 40px;                
  flex-wrap: wrap;  
  /*height: 168px;*/
}

.activate-rse-content-agency {
  display: flex;
  align-items: center;    
  justify-content: center;   
  gap: 40px;                
  flex-wrap: wrap;  
}

.activate-rse-content-agency h2 {
  white-space: nowrap;
}

.activate-rse-content h2 {
  white-space: nowrap;
}

.activate-rse-arrow {
  width: 48px;
  height: auto;
  object-fit: contain;
}

.activate-contact-button{
    font-family: 'Montserrat';
    font-weight: 900;
    font-size: 24px;
    background-color: var(--color-blue);
    padding: 16px 24px;
    border-radius: 8px;
    transition: background-color 0.6s ease;
    text-decoration: none;
    color: var(--color-white);
}

.activate-contact-button:hover {
    color: var(--color-text);
    background-color: var(--color-green);
}

.activate-rse-agency{
    background-color: var(--color-background);
}


@media screen and (max-width: 1024px){
    .section-activate-rse{
        padding: 0px 20px;
    }
}

@media screen and (max-width: 786px){
    .activate-rse-content {
  display: flex;
  flex-direction: column;
  align-items: center;    
  justify-content: center;   
  gap: 40px;                
  flex-wrap: nowrap;
  /*height: 384px;*/
}

    .activate-rse-content-agency {
  display: flex;
  flex-direction: column;
  align-items: center;    
  justify-content: center;   
  gap: 40px;                
  flex-wrap: nowrap;
}

.activate-rse-content h2 {
  white-space: wrap;
  text-align: center;
}

.activate-rse-content-agency h2 {
  white-space: wrap;
  text-align: center;
}

.activate-rse-arrow {
  transform: rotate(90deg);
}

.activate-contact-button{
    font-size: 16px;
    padding: 12px 16px;
}
}


/*PAGE ENGAGEMENT*/

/*Section intro*/
.engagements{
display: flex;
flex-direction: column;
gap: 80px;
padding-top: 40px;
padding-bottom: 80px;
}

.introduction_engagements {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    padding: 0 72px;
    min-height: 400px;
    align-items: center;

}

.title_engagements{
    text-align: left;
    grid-column: 1 / span 8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
}

.image_introduction_engagements {
    grid-column: 10 / 13;
}

.image_introduction_engagements img{
    height: 200px;
}



@media screen and (max-width: 1024px){
.introduction_engagements{
    padding : 0 20px;
}

.image_introduction_engagements {
       grid-column: 9 / 13;
}

.image_introduction_engagements img {
       height: 160px;
}

.title_engagements{
    grid-column: 1 / span 7;
}

}

@media screen and (max-width: 786px){
.introduction_engagements {
    display: flex;
    flex-direction: column;
    gap: 24px;
   min-height: 100%;
}  

.image_introduction_engagements img {
        height: 160px;
}

.image_introduction_engagements img {
        width: 100%;
        border-radius: 8px;
}

}
/*Section grandes causes*/

.big-cause-section {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    padding: 0 72px;
    align-items: start;
}

/* COLONNE GAUCHE */
.big-cause-odd {
     grid-column: 1 / 3;
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex-wrap: wrap;

}

.big-cause-odd img {
    width: 120px;
    object-fit: cover;
    border-radius: 8px;
}

/* COLONNE DROITE */
.big-cause-right {
    grid-column: 4 / 13;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.big-cause-right h2 {
    font-weight: 500;
}

/* Image principale */
.big-cause-main-image {
    height: 320px;
    border-radius: 8px;
    overflow: hidden;
}

.big-cause-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.big-cause-logos{
    display: flex;
    gap: 40px;
    align-items: center;
    flex-wrap: wrap;
}

.big-cause-logos-text{
font-weight: 700;
}


.big-cause-logos a {
    display: inline-flex;
    align-items: center;
}

.big-cause-logos a img{
    width: auto;
}

/*logo hauteur*/
.women-owned img {
  height: 48px;
}

.nova-in-tech img {
  height: 56px;
}

.french-tech img {
  height: 72px;
}

.chut-magazine img {
  height: 72px;
}

.entreprises-engagent img{
    height: 56px; 
}

.femmes-medef img {
  height: 56px;
}

.professional-women-network img {
  height: 56px;
}

.jda img {
  height: 50px;
}

.team-for-the-planet img{
    height: 104px;
}

.impact-score img{
    height: 80px;
}

.impact-france img{
    height: 56px;
}

.charte-numerique-responsable img{
    height: 72px;
}

.planet-tech-care img{
    height: 72px;
}

.fresque-numerique img{
    height: 56px;
}

.femmes-numerique img{
    height: 40px;
}

.cent-mille-entrepreneurs img{
    height: 72px;
}

.universite-bourgogne-europe img{
    height: 64px;
}

.we-are img{
    height: 56px;
}

.village-by-CA img{
    height: 72px;
}

.UIMM img{
    height: 64px;
}

.pulse-event img{
    height: 40px;
}

.cap-nord img{
    height: 48px;
}


@media screen and (max-width: 1024px){
    .big-cause-section {
    padding: 0 20px;
}

    .big-cause-odd img{
        width: 96px;
    }
}

@media screen and (max-width: 786px){
    .big-cause-section{
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .big-cause-odd{
        flex-direction: row;
    }

    .big-cause-main-image {
    height: 200px;
    border-radius: 8px;
    overflow: hidden;
}

.big-cause-logos-text{
    text-align: center;
}

.big-cause-logos{
    justify-content: center;
}
}

/*PAGE PRESSE*/

.section-presse {
  padding: 40px 72px 80px 72px;
}

.section-presse h2{
    margin-bottom: 40px;
}

.presse-article-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.presse-article {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 24px 0;
  border-bottom: 1px solid var(--color-text);

  transition: background-color 0.3s ease;
}

.presse-article-first-child {
  border-top: 1px solid var(--color-text);
}

.presse-article-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.3s ease;
}

.presse-article_media {
  font-weight: 400;
}

.presse-article_name {
  font-weight: 700;
}

.presse-article_date {
  font-size: 12px;
  opacity: 0.6;
}

.presse-arrow-place {
  display: flex;
  justify-content: flex-end;
}

.arrow_presse {
  width: 32px;
  height: auto;
  transition: transform 0.3s ease;
  padding-left: 32px;
  padding-right: 32px;
}

/* Hover : texte + flèche se déplacent */
.presse-article-link:hover .presse-article-content,
.presse-article-link:hover .arrow_presse {
  transform: translateX(8px);
}

/*
.presse-article-link:hover .presse-article {
  background-color: #e8e8e8;
} */

@media screen and (max-width: 1024px){
    .section-presse {
    padding: 40px 20px 80px 20px;
    }
}

/*Page CONTACT*/

.contact-container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    padding: 40px 72px 80px 72px;
    align-items: start;
}


.contact-left {
    grid-column: 1 / span 6;
}


.contact-left p {
    margin-bottom: 40px;
}


.contact-right {
    grid-column: 8 / span 6;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


.image-wrapper {
    width: 100%;
    margin-bottom: 20px;
}


.img_big {
    width: 100%;
    height: 900px;
    object-fit: cover;
      border-radius: 8px;
}


.contact-email {
    margin-bottom: 20px;
    margin-top: 20px;
    font-weight: 500;
}

@media screen and (max-width: 1024px){
.contact-container {
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
    padding: 40px 20px 80px 20px; 
    max-width: 100%;
}


.contact-left {
    order: 1;
    text-align: center; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}


.contact-right {
    order: 2; 
    display: flex;
    flex-direction: column;
    align-items: center; 
    width: 100%;
}


.image-wrapper {
    margin-bottom: 20px;
}


.img_big {
    display: none;
}

.contact-email {
    text-align: center;
}
}


/*le formulaire de contact */

div.wpforms-container-full button[type=submit]{
	font-family: 'Montserrat' !important;
    font-weight: 900 !important;
    font-size: 24px !important;
	border-radius: 8px !important;
	padding: 28px 24px !important;
	display: flex;
	align-items: center;
	background: var(--color-blue) !important;
    border: none !important;
    color: var(--color-white) !important;
    transition: background-color 0.3s ease !important;
	
	@media screen and (max-width: 786px) {
		padding: 12px 16px !important;
		font-size: 16px !important;
	}
}

.wpforms-submit-container{
    display: flex;
    justify-content: center;
}

div.wpforms-container-full button[type=submit]:hover{
    border: none;
    color: var(--color-text) !important;
    background-color: var(--color-green) !important;
}

.wpforms-field-label-inline{
    text-align: left;
}

div.wpforms-container-full input[type=checkbox]:checked:before{
    border-color: var(--color-blue) !important;
    box-shadow: 0 0 0 1px var(--color-blue), 0px 1px 2px rgba(0, 0, 0, 0.15) !important;
}

div.wpforms-container-full input[type=checkbox]:checked:after{
 border-left: 4px solid var(--color-blue) !important;
border-bottom: 4px solid var(--color-blue) !important;   
}



div.wpforms-container-full input[type=text]{
	border-color: var(--color-text) !important;
}

div.wpforms-container-full input[type=email]{
	border-color: var(--color-text) !important;
}


div.wpforms-container-full .wpforms-form textarea.wpforms-field-large{
	border-color: var(--color-text) !important;
}


#wpforms-49{
    margin: 0;
}

div.wpforms-container-full input[type=checkbox]:before, div.wpforms-container-full input[type=radio]:before{
    border: solid 1px var(--color-text) !important;
}


#wpforms-49-field_6-container{
    display: flex;
    justify-content: flex-start;
}



div.wpforms-field-container{
	@media screen and (max-width: 786px){
		display: flex;
		flex-direction: column;
		padding-left: 0;
	}

}


#wpforms-49-field_1-container{
	@media screen and (max-width: 786px){
	margin: 0;
	width: 100%;
	}
}

#wpforms-49-field_2-container{
	@media screen and (max-width: 786px){
	margin: 0;
	width: 100%;
	}
}

#wpforms-49-field_3-container{
	@media screen and (max-width: 786px){
	width: 100%;
    margin: 0;
	}
}

#wpforms-49-field_4-container{
	@media screen and (max-width: 786px){
	width: 100%;
    margin: 0;
	}
}



/* PAGE MENTIONS LEGALES*/
.mentions-legal-container {
  padding: 40px 584px 80px 72px;
  display: flex;
  flex-direction: column;
  gap: 48px; 
}

.mentions-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mentions-section h2 {
  font-size: 80px;
  line-height: 80px;
  font-weight: 500;
}

.mentions-section ul {
  list-style-type: disc;
  padding-left: 24px;
}

@media screen and (max-width: 1300px){
    .mentions-legal-container{
    padding: 40px 360px 80px 20px ;
    }
}

@media screen and (max-width: 1024px){
    .mentions-legal-container{
    padding: 40px 20px 80px 20px ;
    }

    .mentions-section h2 {
    font-size: 64px;
    line-height: 64px;
    }
}

@media screen and (max-width: 786px){

    .mentions-section h2 {
    font-size: 40px;
    line-height: 40px;
    }
}


/* Page de cookies*/

#cmplz-document{
	max-width: 100%;
    padding : 40px 584px 80px 72px;
}

#cmplz-document h2{
    font-size: 80px;
    font-weight: 500;
    line-height: 80px;
}


@media (max-width: 1300px){
    #cmplz-document{
    padding : 40px 360px 80px 72px;
}
}

@media (max-width: 1024px){
    #cmplz-document{
	max-width: 100%;
    padding : 40px 20px 80px 72px;
}

#cmplz-document h2{
    font-size: 64px;
    line-height: 64px;
}
}

@media (max-width: 786px){

#cmplz-document h2{
    font-size: 40px;
    line-height: 40px;
}
}


/* Bannière de cookies

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn{
    height: 24px !important;
}

*/



/* Curseur principal - point bleu */
.link-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-blue);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 99999;
  transition: width 0.25s ease, height 0.25s ease, background-color 0.25s ease, backdrop-filter 0.25s ease;
  opacity: 0;
}

.link-cursor.is-link {
  width: 32px;
  height: 32px;
  background: transparent;
  backdrop-filter: invert(1) grayscale(1) contrast(2);
}

@media (hover: none) and (pointer: coarse) {
  .link-cursor {
    display: none !important;
  }
}

@media (max-width: 786px){
    .link-cursor {
    display: none !important;
  }
}

body { 
    cursor: none; 
}

a, button { 
    cursor: none; 
}


/*Badge Website Carbon*/

#wcb.wcb-d #wcb_2{
    color: var(--color-text) !important;
}