@charset "utf-8";
/* CSS Document */

/*---------------------------------------------------------------*/
/*                             FONTS                             */
/*---------------------------------------------------------------*/

/* --- FONT : LATO --- */
@font-face {    
    font-family: 'Lato';
    src: url('Lato/Lato-Heavy.woff2') format('woff2'),
         url('Lato/Lato-Heavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
.LatoHea { 
    font-family: 'Lato'; 
    font-weight: 900; 
}
/*---------------------------------------------------------------*/
@font-face {    
    font-family: 'Lato';
    src: url('Lato/Lato-Black.woff2') format('woff2'),
         url('Lato/Lato-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
.LatoBlk { 
    font-family: 'Lato'; 
    font-weight: 900; 
}
/*---------------------------------------------------------------*/
@font-face {    
    font-family: 'Lato';
    src: url('Lato/Lato-Bold.woff2') format('woff2'),
         url('Lato/Lato-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
.LatoBld { 
    font-family: 'Lato'; 
    font-weight: 700; 
}	
/*---------------------------------------------------------------*/
@font-face {    
    font-family: 'Lato';
    src: url('Lato/Lato-Semibold.woff2') format('woff2'),
         url('Lato/Lato-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
.LatoSemBld { 
    font-family: 'Lato'; 
    font-weight: 600; 
}
/*---------------------------------------------------------------*/
@font-face {    
    font-family: 'Lato';
    src: url('Lato/Lato-Medium.woff2') format('woff2'),
         url('Lato/Lato-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
.LatoMed { 
    font-family: 'Lato'; 
    font-weight: 500; 
}
/*---------------------------------------------------------------*/
@font-face {    
    font-family: 'Lato';
    src: url('Lato/Lato-Regular.woff2') format('woff2'),
         url('Lato/Lato-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
.LatoReg { 
    font-family: 'Lato'; 
    font-weight: 400; 
}
/*---------------------------------------------------------------*/
@font-face {    
    font-family: 'Lato';
    src: url('Lato/Lato-Light.woff2') format('woff2'),
         url('Lato/Lato-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
.LatoLig { 
    font-family: 'Lato'; 
    font-weight: 300; 
}
/*---------------------------------------------------------------*/
@font-face {    
    font-family: 'Lato';
    src: url('Lato/Lato-Thin.woff2') format('woff2'),
         url('Lato/Lato-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
.LatoThi { 
    font-family: 'Lato'; 
    font-weight: 100; 
}
/*---------------------------------------------------------------*/
@font-face {    
    font-family: 'Lato';
    src: url('Lato/Lato-Hairline.woff2') format('woff2'),
         url('Lato/Lato-Hairline.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
.LatoLin { 
    font-family: 'Lato'; 
    font-weight: 100; 
}

/* --- FONT : NOTO --- */

@font-face {    
    font-family: 'Noto';
    src: url('Noto/NotoSansJP-Black.woff2') format('woff2'),
         url('Noto/NotoSansJP-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
.NotoBlk { 
    font-family: 'Noto'; 
    font-weight: 900; 
}
/*---------------------------------------------------------------*/
@font-face {    
    font-family: 'Noto';
    src: url('Noto/NotoSansJP-Bold.woff2') format('woff2'),
         url('Noto/NotoSansJP-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
.NotoBld { 
    font-family: 'Noto'; 
    font-weight: 700; 
}
/*---------------------------------------------------------------*/
@font-face {    
    font-family: 'Noto';
    src: url('Noto/NotoSansJP-Medium.woff2') format('woff2'),
         url('Noto/NotoSansJP-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
.NotoMed { 
    font-family: 'Noto'; 
    font-weight: 500; 
}
/*---------------------------------------------------------------*/
@font-face {    
    font-family: 'Noto';
    src: url('Noto/NotoSansJP-Regular.woff2') format('woff2'),
         url('Noto/NotoSansJP-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
.NotoReg { 
    font-family: 'Noto'; 
    font-weight: 400; 
}
/*---------------------------------------------------------------*/
@font-face {    
    font-family: 'Noto';
    src: url('Noto/NotoSansJP-Light.woff2') format('woff2'),
         url('Noto/NotoSansJP-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
.NotoLig { 
    font-family: 'Noto'; 
    font-weight: 300; 
}
/*---------------------------------------------------------------*/
@font-face {    
    font-family: 'Noto';
    src: url('Noto/NotoSansJP-DemiLight.woff2') format('woff2'),
         url('Noto/NotoSansJP-DemiLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
.NotoDemLig { 
    font-family: 'Noto'; 
    font-weight: 200; 
}
/*---------------------------------------------------------------*/
@font-face {    
    font-family: 'Noto';
    src: url('Noto/NotoSansJP-Thin.woff2') format('woff2'),
         url('Noto/NotoSansJP-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
.NotoThi { 
    font-family: 'Noto'; 
    font-weight: 100;
}
/*---------------------------------------------------------------*/
/*                         CUSTOM FONT                           */
/*---------------------------------------------------------------*/

/*  ROLLOVER ROUGE SUR UN LIEN */
.FontPara01  p a:hover {
    color: #ff4a4a;
    text-decoration: underline;
}
.FontPara01  {
    font-family: 'Lato'; 
    color: #6d6f71;
    font-weight: 500;
    font-size: 1.3rem;
	line-height: 1.5 !important; /* Ajoute un peu d'espace entre les lignes */
}

/* --- COULEUR DU LIEN PAR DEFAUT --- */
.FontPara01 p a {
    color: inherit;         /* "inherit" force le lien à copier la couleur grise (#6d6f71) du paragraphe */
    text-decoration: none;  /* Enlève définitivement le soulignement bleu */
}

/*---------------------------------------------------------------*/
/*                      COULEURS DES THEMES                      */
/*---------------------------------------------------------------*/

/* --- CONFIGS  DES THÈMES PAR PAGE --- */
body.theme-accueil       { --theme-color: #0056b3; } 
body.theme-voyages       { --theme-color: #009b8b; } 
body.theme-galerie       { --theme-color: #8e24aa; } 
body.theme-moto          { --theme-color: #7557c1; } 
body.theme-zic           { --theme-color: #ffcb46; } 
body.theme-numerique     { --theme-color: #1196ba; } 
body.theme-projets       { --theme-color: #d39452; } 
body.theme-commentaires  { --theme-color: #37474f; } 


/*---------------------------------------------------------------*/
/*                             HEADER                            */
/*---------------------------------------------------------------*/

/* --- MENU PAR DEFAUT --- */
.TypoMenu {
    font-family: 'Noto';
    font-weight: 500;
    font-size: 1.5rem; 
    color: #8a8c8f;
    text-decoration: none;
    padding: 0 15px; 
    transition: color 0.3s;
}

/* --- APPLIQUE LE THEME AU ROLLOVER --- */
.TypoMenu:hover {
    color: var(--theme-color); 
}

/* ---APPLIQUE LE THEME A LA RUBRIQUE ACTIVE --- */
.TypoMenu.active, 
.TypoMenu.active:hover {
    color: var(--theme-color) !important;
    cursor: default;
}

/* --- APPLIQUE LE THEME AUX DIV ET TEXTE --- */
.div-texte-theme {
    color: var(--theme-color);
}

/* --- APPLIQYE LE THEME A LA COULEUR DE FON D'UNE DIV --- */
.div-fond-theme {
    background-color: var(--theme-color);
    color: #ffffff; 
}

/* --- MASQUE LA CHECKBOX DU MOBIL SUR PC --- */
.burger-checkbox, .burger-btn {
    display: none;
}

/* --- CONTAINER LOGO ET DU MENU  --- */
.DivTetiereMenu {
        display: flex;
        justify-content: space-between; /* Pousse le logo à gauche et le bouton à droite */
        align-items: center;
        padding: 0 20px;
        position: relative;
        z-index: 9999; /* Reste bien par-dessus le slider */
        box-sizing: border-box; /* Évite que le padding ne pousse le bloc hors de l'écran */
        width: 100%;
}

/* --- CONTAINER DU MENU  --- */
.DivMenu {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: flex-end; /* 'right' est obsolète en flexbox, flex-end est plus propre */
    align-items: center;
	padding-top: 38px
}

/* --- CONTAINER DU SLIDER --- */
.ZoneSlider {
    width: 100%;
    height: 600px;         /* La hauteur exacte de tes panoramas */
    overflow: hidden;      /* Masque les photos qui dépassent de l'écran */
    position: relative;    /* INDISPENSABLE pour bloquer le texte à l'intérieur */
    background-color: #eff0f0;
}

/* --- GESTION DES PHOTOS DU SLIDE --- */
.ConteneurSlides {
    display: flex;
    width: 1100%;          /* 11 photos = 1100% de la largeur de l'écran */
    height: 100%;
    animation: defilement 58s infinite ease-in-out; 
/* FORCE LES IMAGE A RESTER EN ARRIERE PLAN */
    position: relative;
    z-index: 1; 
}

.Slide {
    width: 100%;           
    height: 100%;
}

.Slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;     
    object-position: center;
}

/* --- CONTAINER DU PANO --- */
.ZonePano {
    width: 100%;
    height: 600px;         /* La hauteur exacte de tes panoramas */
    overflow: hidden;      /* Masque les photos qui dépassent de l'écran */
    position: relative;    /* INDISPENSABLE pour bloquer le texte à l'intérieur */
    background-color: #eff0f0;
}
.ConteneurPano {
    display: flex;
    height: 100%;
    
/* FORCE LES IMAGE A RESTER EN ARRIERE PLAN */
    position: relative;
    z-index: 1; 
}
.Pano {
    width: 100%;           
    height: 100%;
}

.Pano img {
    width: 100%;
    height: 100%;
    object-fit: cover;     
    object-position: center;
}


/* --- TITRE DU SLIDER --- */
.TexteSurligneSlider {
    position: absolute;   /* Extrait le texte du flux pour flotter par-dessus */
    top: 50%;             /* Positionne au centre vertical */
    left: 50%;            /* Positionne au centre horizontal */
    transform: translate(-50%, -50%); /* Ajustement parfait au centre exact */
    
    text-align: center;
    color: #ffffff;       /* Texte blanc */
    z-index: 10;          /* Passe STRICTEMENT devant le conteneur d'images (10 est supérieur à 1) */
    
/* EFFET DE FOND FLOU SOUS LE TITRE */
    background-color: rgba(255, 255, 255, 0.2); 
    padding: 30px 50px;
    border-radius: 8px;
    backdrop-filter: blur(4px); /* Léger flou arrière-plan style verre poli */
}

/* TAILLE DU TEXTE ET EFFET */
.TexteSurligneSlider h1 {
    font-size: 3.5rem;
    margin: 0 0 10px 0;
    letter-spacing: 4px;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.4);
}
.TexteSurligneSlider p {
    font-size: 1.5rem;
    margin: 0;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.6);
}

/* --- L'ANIMATION DU DIAPORAMA --- */
@keyframes defilement {
    0%, 7%     { transform: translateX(0); }
    9%, 16%    { transform: translateX(-9.09%); }  
    18%, 25%   { transform: translateX(-18.18%); } 
    27%, 34%   { transform: translateX(-27.27%); } 
    36%, 43%   { transform: translateX(-36.36%); } 
    45%, 52%   { transform: translateX(-45.45%); } 
    54%, 61%   { transform: translateX(-54.54%); } 
    63%, 70%   { transform: translateX(-63.63%); } 
    72%, 79%   { transform: translateX(-72.72%); } 
    81%, 88%   { transform: translateX(-81.81%); } 
    90%, 97%   { transform: translateX(-90.9%); }  
    100%       { transform: translateX(0); }       
}

/*---------------------------------------------------------------*/
/*                              BODY                             */
/*---------------------------------------------------------------*/

/*------------------------------------------------- */
/* ------------ COMMUN A TOUTE LES PAGES----------- */
/*------------------------------------------------- */

html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Coupe STRICTEMENT tout ce qui dépasse à droite ou à gauche */
}

/*  TITRE */
.Titre {
    width: 100%;
    margin: 0px auto;    
    padding: 4px 0px 0px 0px;
  
    
    /* Ajout pour centrer l'image */
    text-align: center;
	font-family: 'Lato'; 
   
    font-weight: 500;
    font-size: 1.8rem;
    line-height: 50px;
}

/* SOUS TITRE */
.SsTitre {
    width: 100%;
    margin: 3px 0px 0px 0px;    
    padding: 0px;
  
    
    /* Ajout pour centrer l'image */
    text-align: center;
	font-family: 'Lato'; 
 
    font-weight: 500;
    font-size: 1.3rem;
    line-height: 30px;
}

/* --- SEPARATEUR --- */
.Separateur {
    width: 100%;
    margin: 3px 0px 0px 0px;    
    padding: 0px;
    opacity: 0.3;
    
    /* Ajouts pour centrer l'image */
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center;     /* Centre verticalement si besoin */
}

/* --- CONTAINER STANDARD  --- */
.container {
    max-width: 800px;
    margin:  auto;    
    padding: 0 20px;
	align-items: center;
    box-sizing: border-box; /* Sécurité pour inclure le padding dans le calcul de la largeur */
}

/* --- ZONE DES BOUTONS DE NAVIGATION POUR ROLLOVER --- */
.ZoneBoutons {
    margin-top: 15px;       /* ↕️ Crée un espace important entre le slider et ce bloc boutons */
    margin-bottom: 10px;/* ↕️ Crée un espace avec ce qui sera écrit en dessous */
    display:flex;          /* Active Flexbox pour aligner les boutons sur une seule ligne */
    justify-content: space-between; /* ↔️ Répartit les boutons automatiquement avec un espace égal entre eux */
    align-items: center;    /* Centre les boutons verticalement si nécessaire */
    flex-wrap: wrap;        /* S'il n'y a pas assez de place sur mobile, les boutons passent à la ligne proprement */
    gap: 15px;              /* Sécurité d'espacement minimal (surtout quand les boutons passent à la ligne) */
}

.ZoneBoutons img {
    cursor: pointer;
    transition: transform 0.2s ease;
}

/* Optionnel : Un léger effet d'agrandissement quand on survole le bouton */
.ZoneBoutons img:hover {
    transform: scale(1.30); 
}

/*---------------------------------------------------------------*/
/*                     ACCUEIL -INDEX.HTLM                       */
/*---------------------------------------------------------------*/

/*------------------------------------------------- */
/* --- EFFET ROLLOVER DES BOUTONS ACCUEIL BLEU --- */
/*----------------------------------------------- */

/* 1. Voyage */
.btn-voyage:hover {
    content: url('Boutons/Bleu/BotonVBleuVoyageOn.png'); /* Remplace par ta version bleue allumée */
}

/* 2. Galerie */
.btn-galerie:hover {
    content: url('Boutons/Bleu/BotonVBleuPhotoOn.png'); /* Ajuste le nom si nécessaire */
}

/* 3. Moto */
.btn-moto:hover {
    content: url('Boutons/Bleu/BotonVBleuMotoOn.png');
}

/* 4. Zic */
.btn-zic:hover {
    content: url('Boutons/Bleu/BotonVBleuZicOn.png');
}

/* 5. Numérique */
.btn-numerique:hover {
    content: url('Boutons/Bleu/BotonVBleuNumeriqueOn.png');
}

/* 6. Projets */
.btn-projets:hover {
    content: url('Boutons/Bleu/BotonVBleuProjetOn.png');
}

/* 7. Commentaires */
.btn-commentaires:hover {
    content: url('Boutons/Bleu/BotonVBleuCommentaireOn.png');
}

/* --- CONTAINER TEXTE ET PHOTOS --- */
.PresentationBox {
    display: flex !important;       /* Aligne de force la zone texte et la moto côte à côte */
    justify-content: space-between;
    align-items: flex-start;        /* Aligne le haut du texte avec le haut de la moto */
    gap: 35px;                      /* Espace entre le texte et la photo de moto */
    border: 0px solid #ff4a4a;       /* Ton cadre rouge */
    padding: 10px;
    background-color: #ffffff;
    box-sizing: border-box !important;
    
    /* 🚀 FORCE L'ÉLARGISSEMENT STRICT À */
    width: 100% !important;
    max-width: 1700px !important;
    margin: 0px auto !important;   /* Centre parfaitement la boîte rouge au milieu du site */
}

/* --- COLONNE GAUCHE : TEXTE --- */
.PresentationTexte {
    flex: 1 !important;             /* Force le bloc de texte à s'élargir au maximum à gauche */
    color: #4a4a4a;          
    font-size: 1.05rem;
    line-height: 1.6;        
    text-align: justify;     
}

/* 🟥 ANNULATION DU BRIDAGE DES PARAGRAPHES (Ligne 353) */
.PresentationTexte p {
    max-width: 100% !important;     /* Force le texte à occuper 100% de la colonne gauche */
    margin: 0 0 15px 0 !important;   /* Supprime le centrage auto qui figeait les blocs de texte */
}
.PresentationTexte p:last-child {
    margin-bottom: 0 !important;
}

/* 🟥 L'HABILLAGE DU PORTRAIT */
.ProfilImage {
    float: left !important;         /* Force le texte à monter directement à droite de ta photo */
    width: 120px;            
    height: auto;
    margin-right: 22px;             /* Espace à droite de la photo */
    margin-bottom: 10px;            /* Espace sous la photo */
    border-radius: 4px;      
}

/* --- COLONNE DROITE : LA MOTO --- */
.ActionImage {
    width: 280px;                   /* Largeur fixe de ton image de droite */
    flex-shrink: 0 !important;      /* Interdit à Flexbox de compresser la moto */
}

.ActionImage img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
}

/*---------------------------------------------------------------*/
/*                             Voyages                           */
/*---------------------------------------------------------------*/

/*------------------------------------------------- */
/* --- EFFET ROLLOVER DES BOUTONS VOYAGES VERT --- */
/*----------------------------------------------- */

/* 2. Galerie */
.btn-homeVert:hover {
    content: url('Boutons/Vert/BotonVertHomeOn.png'); /* Ajuste le nom si nécessaire */
}

/* 2. Galerie */
.btn-galerieVert:hover {
    content: url('Boutons/Vert/BotonVertPhotoOn.png'); /* Ajuste le nom si nécessaire */
}

/* 3. Moto */
.btn-motoVert:hover {
    content: url('Boutons/Vert/BotonVertMotoOn.png');
}

/* 4. Zic */
.btn-zicVert:hover {
    content: url('Boutons/Vert/BotonVerZictOn.png');
}

/* 5. Numérique */
.btn-numeriqueVert:hover {
    content: url('Boutons/Vert/BotonVertNumeriqueOn.png');
}

/* 6. Projets */
.btn-projetsVert:hover {
    content: url('Boutons/Vert/BotonVertProjetOn.png');
}

/* 7. Commentaires */
.btn-commentairesVert:hover {
    content: url('Boutons/Vert/BotonVerCommentairetOn.png');
}

/* --- CONTAINER Sous Menu  --- */
.ZoneBoutonsSousMenu {
    margin-top: 0px;       /* ↕️ Crée un espace important entre le slider et ce bloc boutons */
    margin-bottom: 0px;/* ↕️ Crée un espace avec ce qui sera écrit en dessous */
    display:flex;          /* Active Flexbox pour aligner les boutons sur une seule ligne */
    justify-content: space-between; /* ↔️ Répartit les boutons automatiquement avec un espace égal entre eux */
    align-items: center;    /* Centre les boutons verticalement si nécessaire */
    flex-wrap: wrap;        /* S'il n'y a pas assez de place sur mobile, les boutons passent à la ligne proprement */
    gap: 15px;              /* Sécurité d'espacement minimal (surtout quand les boutons passent à la ligne) */
}

.ZoneBoutonsSousMenu img {
    cursor: pointer;
    transition: transform 0.60s ease;
}

/* Optionnel : Un léger effet d'agrandissement quand on survole le bouton */
.ZoneBoutonsSousMenu img:hover {
    transform: scale(1.10); 
}

.SsMenu {
    max-width: 1100px;
    margin:  auto;    
    padding: 15px 0px 0px 0px;
	align-items: center;
    box-sizing: border-box; /* Sécurité pour inclure le padding dans le calcul de la largeur */
}

/* 1. Voyage */
.Bt-Canyons:hover {
    content: url('Boutons/BoutonsVoyages/On/CanyonsOn.png'); /* Remplace par ta version bleue allumée */
}

/* 2. Galerie */
.Bt-Espagne:hover {
    content: url('Boutons/BoutonsVoyages/On/EspagneOn.png'); /* Ajuste le nom si nécessaire */
}

/* 3. Moto */
.Bt-Corse:hover {
    content: url('Boutons/BoutonsVoyages/On/CorseOn.png');
}

/* 4. Zic */
.Bt-Crete:hover {
    content: url('Boutons/BoutonsVoyages/On/CreteOn.png');
}

/* 5. Numérique */
.Bt-Ecosse:hover {
    content: url('Boutons/BoutonsVoyages/On/EcosseOn.png');
}

/* 6. Projets */
.Bt-Hongrie:hover {
    content: url('Boutons/BoutonsVoyages/On/HongrieOn.png');
}

/* 7. Commentaires */
.Bt-Parapente:hover {
    content: url('Boutons/BoutonsVoyages/On/ParapenteOn.png');
}

/* 8. Commentaires */
.Bt-Catamaran:hover {
    content: url('Boutons/BoutonsVoyages/On/CatamaranOn.png');
}

/* 9. Commentaires */
.Bt-VTT:hover {
    content: url('Boutons/BoutonsVoyages/On/VttOn.png');
}

/* --- CONTAINER INTRODUCTION VOYAGE --- */
.IntroVoyageBox {
    position: relative; /* Indispensable pour que l'image puisse se caler dedans */
    max-width: 1700px;
    margin: 0px auto;
    padding-top: 50px; /* Espace en haut pour le titre */
}

/* Le cadre vert du texte */
.IntroTexte {
	max-width: 930px;
    border: 2px solid #009b8b;
    padding: 0px 30px;
    font-family: 'Lato', sans-serif;
    color: #4a4a4a;
    font-size: 1.1rem;
    line-height: 1.6;
    text-align: justify;
    margin-left: 650px; /* On décale le texte pour laisser la place à la moto à gauche */
}

/* La moto en position absolue */
.IntroImage {
    position: absolute;
    bottom: 0px; /* Alignée tout en bas */
    left: 0px;   /* Alignée tout à gauche */
    width: 700px; /* Ajuste la taille de la moto ici */
    z-index: 1;  /* La moto passe DEVANT le cadre si besoin */
}

.IntroImage img {
    width: 100%;
    display: block;
}

/*------------------------------------------------- */
/* ---------------- CANYONS ---------------------- */
/*----------------------------------------------- */

/* --- Menu Canyons --- */
.ContainerMenuCanyons {
    
    width: 100% !important; 
    min-height: 0px !important;  /* Pris en compte ta modif (120px) */
    margin-top: 0px !important; 
  
    
    /* --- ALIGNEMENT EN COLONNE POUR LE SAUT DE LIGNE --- */
    display: flex !important;         
    flex-direction: column !important; /* 🔥 AJOUTÉ : Aligne la ligne 1 au-dessus de la ligne 2 */
    justify-content: center !important;/* Centre verticalement dans les 120px */
    align-items: center !important;    /* Centre horizontalement le texte et les liens */
    gap: 12px !important;              /* Espace entre la ligne des liens et le copyright */
    padding: 15px 0 !important;        /* Sécurité pour donner de l'air */
    
    /* --- STYLE DU TEXTE ET DES LIENS --- */
    color: #009b8b !important;         
    font-family: 'Lato', sans-serif !important;
    font-size: 1.1rem !important;
}

/* Style spécifique pour structurer le texte à l'intérieur */
.ContainerMenuCanyons p {
    text-align: center !important;     /* Force le centrage de chaque ligne */
    margin: 5px 0px 0px 0px !important;              /* Supprime les espaces par défaut des paragraphes */
}

/* Force tous les liens du footer à être Vert et sans soulignement par défaut */
.ContainerMenuCanyons a {
    color: #009b8b !important;
    text-decoration: none !important;
    transition: opacity 0.2s ease;
}
/* Effet au survol des liens (Pris en compte ta modif à 0.2) */
.ContainerMenuCanyons a:hover {
    opacity: 0.2 !important;
    text-decoration: none !important;
}

.CanyonsBox {
    position: relative; /* Indispensable pour que l'image puisse se caler dedans */
    max-width: 1600px;
    margin: 0px auto;
    padding-top: 50px; /* Espace en haut pour le titre */
}
/* Le cadre vert du texte */
.CanyonsTexte {
	max-width: 930px;
    border: 2px solid #009b8b;
    padding: 0px 30px;
    font-family: 'Lato', sans-serif;
    color: #4a4a4a;
    font-size: 1.1rem;
    line-height: 1.6;
    text-align: justify;
    margin-left: 647px; /* On décale le texte pour laisser la place à la moto à gauche */
}

/* La moto en position absolue */
.CanyonsPix {
    position: absolute;
	top: 50px;
    bottom: 0px; /* Alignée tout en bas */
    left: 0px;   /* Alignée tout à gauche */
    width:713px; /* Ajuste la taille de la moto ici */
   
}

.CanyonsPix img {
    width: 100%;
    display: block;
}

/*----------------------------------------------------------------*/
/*                             MOTO                           */
/*----------------------------------------------------------------*/

/* --- EFFET ROLLOVER DES BOUTONS VOYAGES VERT --- */


/* 1. Home */
.btn-HomeViolet:hover {
    content: url('Boutons/Violet/BotonVioletHomeOn.png'); 
}

/* 1. Voyage */
.btn-VoyageViolet:hover {
    content: url('Boutons/Violet/BotonVioletVoyageOn.png'); 
}

/* 3. Galerie */
.btn-galerieViolet:hover {
    content: url('Boutons/Violet/BotonVioletPhotoOn.png'); 
}

/* 4. Zic */
.btn-zicViolet:hover {
    content: url('Boutons/Violet/BotonVioletZicOn.png');
}

/* 5. Numérique */
.btn-numeriqueViolet:hover {
    content: url('Boutons/Violet/BotonVioletNumeriiqueOn.png');
}

/* 6. Projets */
.btn-projetsViolet:hover {
    content: url('Boutons/Violet/BotonVioletProjetOn.png');
}

/* 7. Commentaires */
.btn-commentairesViolet:hover {
    content: url('Boutons/Violet/BotonVioletCommentaireOn.png');
}

.MotoBox {
    position: relative; /* Indispensable pour que l'image puisse se caler dedans */
    max-width: 1680px;
    margin: 0px auto;
    padding-top: 50px; /* Espace en haut pour le titre */
}
/* Le cadre vert du texte */
.MotoTexte {
	max-width: 930px;
    border: 2px solid #7557c1;
    padding: 0px 30px;
    font-family: 'Lato', sans-serif;
    color: #4a4a4a;
    font-size: 1.1rem;
    line-height: 1.6;
    text-align: justify;
    margin-left: 790px; /* On décale le texte pour laisser la place à la moto à gauche */
}

/* La moto en position absolue */
.MotoPix {
    position: absolute;
	top: 50px;
    bottom: 0px; /* Alignée tout en bas */
    left: 0px;   /* Alignée tout à gauche */
    width:813px; /* Ajuste la taille de la moto ici */
   
}

.MotoPix img {
    width: 100%;
    display: block;
}


/*----------------------------------------------------------------*/
/*                             Zic                          */
/*----------------------------------------------------------------*/

/* --- EFFET ROLLOVER DES BOUTONS ZIC ORANGE --- */


/* 1. Home */
.btn-HomeOrange:hover {
    content: url('Boutons/Orange/BotonOrangeHomeOn.png'); 
}

/* 2. Voyage */
.btn-VoyageOrange:hover {
    content: url('Boutons/Orange/BotonOrangeVoyageOn.png'); 
}

/* 3. Galerie */
.btn-galerieOrange:hover {
    content: url('Boutons/Orange/BotonOrangePhotoOn.png'); 
}

/* 4. Moto */
.btn-motoOrange:hover {
    content: url('Boutons/Orange/BotonOrangeMotoOn.png'); 
}

/* 5. Zic */
.btn-zicVOrange:hover {
    content: url('Boutons/Orange/BotonOrangeZicOn.png');
}

/* 6. Numérique */
.btn-numeriqueOrange:hover {
    content: url('Boutons/Orange/BotonOrangeNumeriqueOn.png');
}

/* 7. Projets */
.btn-projetsOrange:hover {
    content: url('Boutons/Orange/BotonOrangeProjetOn.png');
}

/* 8. Commentaires */
.btn-commentairesOrange:hover {
    content: url('Boutons/Orange/BotonOrangeCommentaireOn.png');
}

.ZicBox {
    position: relative; /* Indispensable pour que l'image puisse se caler dedans */
    max-width: 1750px;
    margin: 0px auto;
    padding-top: 50px; /* Espace en haut pour le titre */
}
/* Le cadre vert du texte */
.ZicTexte {
	max-width: 900px;
    border: 2px solid #ffcb46;
    padding: 0px 30px;
    font-family: 'Lato', sans-serif;
    color: #4a4a4a;
    font-size: 1.1rem;
    line-height: 1.6;
    text-align: justify;
    margin-left: 871px; /* On décale le texte pour laisser la place à la moto à gauche */
}

/* La moto en position absolue */
.ZicPix {
    position: absolute;
	top: 76px;
    bottom: 0px; /* Alignée tout en bas */
    left: 0px;   /* Alignée tout à gauche */
    width:870px; /* Ajuste la taille de la moto ici */
   
}

.ZicPix img {
    width: 100%;
    display: block;
}

/*----------------------------------------------------------------*/
/*                             NUMERIQUE                          */
/*----------------------------------------------------------------*/

/* --- EFFET ROLLOVER DES BOUTONS ZIC CYAN --- */


/* 1. Home */
.btn-HomeCyan:hover {
    content: url('Boutons/Cyan/BotonCyanHome.png'); 
}

/* 2. Voyage */
.btn-VoyageCyan:hover {
    content: url('Boutons/Cyan/BotonCyanVoyage.png'); 
}

/* 3. Galerie */
.btn-galerieCyan:hover {
    content: url('Boutons/Cyan/BotonCyanPhoto.png'); 
}

/* 4. Moto */
.btn-motoCyan:hover {
    content: url('Boutons/Cyan/BotonCyanMoto.png'); 
}

/* 5. Zic */
.btn-zicCyan:hover {
    content: url('Boutons/Cyan/BotonCyanZic.png');
}

/* 6. Numérique */
.btn-numeriqueCyan:hover {
    content: url('Boutons/Cyan/BotonCyanNumerique.png');
}

/* 7. Projets */
.btn-projetsCyan:hover {
    content: url('Boutons/Cyan/BotonCyanProjet.png');
}

/* 8. Commentaires */
.btn-commentairesCyan:hover {
    content: url('Boutons/Cyan/BotonCyanCommentaire.png');
}

.NumBox {
    position: relative; /* Indispensable pour que l'image puisse se caler dedans */
    max-width: 1800px;
    margin: 0px auto;
    padding-top: 50px; /* Espace en haut pour le titre */
}
/* Le cadre vert du texte */
.NumTexte {
	max-width: 900px;
    border: 2px solid #1196ba;
    padding: 0px 30px;
    font-family: 'Lato', sans-serif;
    color: #4a4a4a;
    font-size: 1.1rem;
    line-height: 1.6;
    text-align: justify;
    margin-left: 973px; /* On décale le texte pour laisser la place à la moto à gauche */
}

/* La moto en position absolue */
.NumPix {
    position: absolute;
	top: 52px;
    bottom: 0px; /* Alignée tout en bas */
    left: 0px;   /* Alignée tout à gauche */
    width:972px; /* Ajuste la taille de la moto ici */
   
}

.NumPix img {
    width: 100%;
    display: block;
}

/*----------------------------------------------------------------*/
/*                             PROJETS                            */
/*----------------------------------------------------------------*/

/* --- EFFET ROLLOVER DES BOUTONS ZIC CYAN --- */
 

/* 1. Home */
.btn-HomeDesert:hover {
    content: url('Boutons/Desert/BotonDesertHomeOn.png'); 
}

/* 2. Voyage */
.btn-VoyageDesert:hover {
    content: url('Boutons//Desert/BotonDesertVoyageOn.png'); 
}

/* 3. Galerie */
.btn-galerieDesert:hover {
    content: url('Boutons//Desert/BotonDesertPhotoOn.png'); 
}

/* 4. Moto */
.btn-motoDesert:hover {
    content: url('Boutons//Desert/BotonDesertMotoOn.png'); 
}

/* 5. Zic */
.btn-zicDesert:hover {
    content: url('Boutons//Desert/BotonDesertZicOn.png');
}

/* 6. Numérique */
.btn-numeriqueDesert:hover {
    content: url('Boutons//Desert/BotonDesertNumeriqueOn.png');
}

/* 7. Projets */
.btn-projetsDesert:hover {
    content: url('Boutons//Desert/BotonDesertProjetsOn.png');
}

/* 8. Commentaires */
.btn-commentairesDesert:hover {
    content: url('Boutons//Desert/BotonDesertCommentaireOn.png');
}

.ProjBox {
    position: relative; /* Indispensable pour que l'image puisse se caler dedans */
    max-width: 1750px;
    margin: 0px auto;
    padding-top: 50px; /* Espace en haut pour le titre */
}
/* Le cadre vert du texte */
.ProjTexte {
	max-width: 900px;
    border: 2px solid #d39452;
    padding: 0px 30px;
    font-family: 'Lato', sans-serif;
    color: #4a4a4a;
    font-size: 1.1rem;
    line-height: 1.6;
    text-align: justify;
    margin-left: 736px; /* On décale le texte pour laisser la place à la moto à gauche */
}

/* La moto en position absolue */
.ProjPix {
    position: absolute;
	top: 50px;
    bottom: 0px; /* Alignée tout en bas */
    left: 50px;   /* Alignée tout à gauche */
    width:683px; /* Ajuste la taille de la moto ici */
   
}

.ProjPix img {
    width: 100%;
    display: block;
}


/*----------------------------------------------------------------*/
/*                             FOOTER                             */
/*----------------------------------------------------------------*/

/* --- LE PIED DE PAGE --- */
.FooterContainer {
    
    width: 100% !important; 
    min-height: 60px !important;  /* Pris en compte ta modif (120px) */
    margin-top: 50px !important; 
    clear: both !important;
    
    /* --- ALIGNEMENT EN COLONNE POUR LE SAUT DE LIGNE --- */
    display: flex !important;         
    flex-direction: column !important; /* 🔥 AJOUTÉ : Aligne la ligne 1 au-dessus de la ligne 2 */
    justify-content: center !important;/* Centre verticalement dans les 120px */
    align-items: center !important;    /* Centre horizontalement le texte et les liens */
    gap: 12px !important;              /* Espace entre la ligne des liens et le copyright */
    padding: 15px 0 !important;        /* Sécurité pour donner de l'air */
    
    /* --- STYLE DU TEXTE ET DES LIENS --- */
    color: #ffffff !important;         
    font-family: 'Lato', sans-serif !important;
    font-size: 1.1rem !important;
}

/* Style spécifique pour structurer le texte à l'intérieur */
.FooterContainer p {
    text-align: center !important;     /* Force le centrage de chaque ligne */
    margin: 0 !important;              /* Supprime les espaces par défaut des paragraphes */
}

/* Force tous les liens du footer à être blancs et sans soulignement par défaut */
.FooterContainer a {
    color: #ffffff !important;
    text-decoration: none !important;
    transition: opacity 0.2s ease;
}

/* Effet au survol des liens (Pris en compte ta modif à 0.2) */
.FooterContainer a:hover {
    opacity: 0.2 !important;
    text-decoration: none !important;
}
/* ---------------------------------------------------------------*/
/*                       RESPONSIVE MOBILE                        */
/* ---------------------------------------------------------------*/

@media (max-width: 1024px) {
    
/* 1. FORCE LA TETIERE A DISTRUBUER LE LOGO A GAUCHE ET LA CHECKBOX A DROITE */
    .DivTetiereMenu {
        justify-content: space-between;
        padding: 0 20px;
        position: relative;
        z-index: 1000;
}

/* 2. FORCE L'AFFICHGE DE CHECKBOX SUR LE MOBIL */
    .burger-btn {
        display: flex !important; /* Ajout d'une sécurité pour contrer le display:none */
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 20px;
        cursor: pointer;
}

    .burger-btn span {
        display: block;
        width: 100%;
        height: 3px;
        background-color: #8a8c8f;
        border-radius: 3px;
        transition: all 0.3s ease-in-out;
}

/* 3. POSITIONNE LE MENU A LA VERTICAL */
    .DivMenu {
        position: absolute;
        top: 125px; 
        left: 0;
        width: 100%;
        height: calc(100vh - 125px); 
        background-color: #eff0f0;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: 40px;
        transform: translateX(-100%);
        transition: transform 0.4s ease-in-out;
        box-shadow: 0px 10px 20px rgba(0,0,0,0.1);
}

/* STYLE DES LIEN DANS LE MENU MOBIL */
    .TypoMenu {
        width: 100%;
        text-align: center;
        padding: 0px 0;
        font-size: 1.15rem;
        border-bottom: 1px solid rgba(0,0,0,0.0);
}

/* 4. DECLANCHEMNT DU MENU HORISONTAL */
    .burger-checkbox:checked ~ .DivMenu {
        transform: translateX(0);
}

/* ANNIMATION DE LA BARRE EN CROIX */
    .burger-checkbox:checked ~ .burger-btn span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
}
    .burger-checkbox:checked ~ .burger-btn span:nth-child(2) {
        opacity: 0;
}
    .burger-checkbox:checked ~ .burger-btn span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
}
/* --- SÉCURITÉ RESPONSIVE DU SLIDER SUR MOBILE --- */
@media (max-width: 1024px) {
    .ZoneSlider {
        height: 400px; 
}
    .TexteSurligneSlider {
        width: 80%;
        padding: 20px;
}
    .TexteSurligneSlider h1 {
        font-size: 2.5rem;
}
    .TexteSurligneSlider p {
        font-size: 1.2rem;
}
}
@media (max-width: 768px) {
    .ZoneSlider {
        height: 250px; 
}
    .TexteSurligneSlider h1 {
        font-size: 1.8rem;
}
    .TexteSurligneSlider p {
        font-size: 0.9rem;
}
}
/* --- MISE EN PAGE DES BOUTONS SUR UNE LIGNE --- */
@media (max-width: 768px) {
    .ZoneBoutons {
        margin-top: 25px;         /* Espace avec le slider */
        display: flex;
        flex-wrap: nowrap !important; /*  INTERDIT le retour à la ligne (force une seule ligne) */
        justify-content: space-between; /* Aligne proprement du bord gauche au bord droit */
        gap: 5px;                 /* Un petit espace de sécurité minimal entre chaque bouton */
        width: 100%;
}
    .ZoneBoutons a {
        display: block;
        flex: 1;                  /* Dit au navigateur de distribuer l'espace équitablement */
        max-width: 100px;         /* Empêche les boutons de devenir trop grands si l'écran est large */
}
    .ZoneBoutons img {
        width: 100% !important;   /* Force l'image à occuper la largeur de son lien */
        height: auto !important;  /* Garde les proportions parfaites sans écraser le bouton */
}
}

/* --- MISE EN PAGE DES BOUTONS SUR DEUX LIGNES SUR MOBILE --- */
@media (max-width: 768px) {
    .ZoneBoutonsSousMenu {
        margin-top: 0px;
        display: flex;
        flex-wrap: wrap !important;      /* 🔥 Permet aux boutons de passer à la ligne */
        justify-content: center !important; /* Centre les deux lignes proprement */
        gap: 15px !important;            /* Espace horizontal et vertical entre les boutons */
        width: 100%;
    }

    .ZoneBoutonsSousMenu a {
        display: block;
        width: 20%;                      /* 🔥 Force environ 4 à 5 boutons par ligne (100% / 5 = 20%) */
        min-width: 60px;                 /* Empêche les boutons de devenir trop minuscules */
        max-width: 80px;                 /* Taille max sur mobile */
    }

    .ZoneBoutonsSousMenu img {
        width: 100% !important;
        height: auto !important;
    }
}
/* --- ADAPTATION TEXTE MOBILE --- */
@media (max-width: 900px) {
    .PresentationBox {
        flex-direction: column; /* Aligne les blocs verticalement sur mobile */
        gap: 20px;
    }
    
    .ProfilImage {
        float: none !important;        /* Désactive l'habillage sur petit écran */
        display: block !important;
        margin: 0 auto 25px auto !important; /* 👁️ Changé 15px par 25px pour créer de l'espace sous la photo */
    }
    
    .ActionImage {
        width: 100%;        /* La moto prend toute la largeur sur mobile */
    }
}
@media (max-width: 900px) {
    .PresentationBox {
        flex-direction: column; /* Aligne les blocs verticalement sur mobile */
        gap: 20px;
    }
    
    .ProfilImage {
        float: none !important;        /* Désactive l'habillage sur petit écran */
        display: block !important;
        margin: 0 auto 25px auto !important; 
    }
    
    .ActionImage {
        width: 100%;        /* La moto prend toute la largeur sur mobile */
    }
	
	@media (max-width: 900px) {
    .IntroVoyageBox {
        position: relative !important; /* On annule l'absolu */
        padding-top: 20px !important;
        display: flex !important;
        flex-direction: column !important; /* Empile l'image et le texte */
    }

    .IntroImage {
        position: relative !important; /* La moto redevient un élément normal */
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;        /* La moto prend toute la largeur */
        margin-left: 0 !important;
        order: 1;                      /* La moto en premier */
    }

    .IntroTexte {
        margin-left: 0 !important;     /* On supprime le décalage de 350px */
        width: 100% !important;
        box-sizing: border-box;        /* Évite que le padding ne dépasse */
        order: 2;                      /* Le texte en deuxième */
        border: 2px solid #009b8b;     /* Ton cadre vert */
    }
	
	@media (max-width: 900px) {
    .CanyonsBox {
        position: relative !important; /* On annule l'absolu */
        padding-top: 30px !important;
        display: flex !important;
        flex-direction: column !important; /* Empile l'image et le texte */
    }

    .CanyonsPix {
        position: relative !important; /* La moto redevient un élément normal */
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;        /* La moto prend toute la largeur */
        margin-left: 0 !important;
        order: 1;                      /* La moto en premier */
    }
    }
    

    .CanyonsTexte {
        margin-left: 0 !important;     /* On supprime le décalage de 350px */
        width: 100% !important;
        box-sizing: border-box;        /* Évite que le padding ne dépasse */
        order: 2;                      /* Le texte en deuxième */
        border: 2px solid #009b8b;     /* Ton cadre vert */
    }
		
		@media (max-width: 900px) {
    .MotoBox {
        position: relative !important; /* On annule l'absolu */
        padding-top: 30px !important;
        display: flex !important;
        flex-direction: column !important; /* Empile l'image et le texte */
    }

    .MotoPix {
        position: relative !important; /* La moto redevient un élément normal */
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;        /* La moto prend toute la largeur */
        margin-left: 0 !important;
        order: 1;                      /* La moto en premier */
    }
    }
    

    .MotoTexte {
        margin-left: 0 !important;     /* On supprime le décalage de 350px */
        width: 100% !important;
        box-sizing: border-box;        /* Évite que le padding ne dépasse */
        order: 2;                      /* Le texte en deuxième */
        border: 2px solid #7557c1;     /* Ton cadre vert */
    }
		
		@media (max-width: 900px) {
    .ZicBox {
        position: relative !important; /* On annule l'absolu */
        padding-top: 30px !important;
        display: flex !important;
        flex-direction: column !important; /* Empile l'image et le texte */
    }

    .ZicPix {
        position: relative !important; /* La moto redevient un élément normal */
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;        /* La moto prend toute la largeur */
        margin-left: 0 !important;
        order: 1;                      /* La moto en premier */
    }
    }
    

    .ZicTexte {
        margin-left: 0 !important;     /* On supprime le décalage de 350px */
        width: 100% !important;
        box-sizing: border-box;        /* Évite que le padding ne dépasse */
        order: 2;                      /* Le texte en deuxième */
        border: 2px solid #7557c1;     /* Ton cadre vert */
    }
		
			@media (max-width: 900px) {
    .NumBox {
        position: relative !important; /* On annule l'absolu */
        padding-top: 30px !important;
        display: flex !important;
        flex-direction: column !important; /* Empile l'image et le texte */
    }

    .NumPix {
        position: relative !important; /* La moto redevient un élément normal */
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;        /* La moto prend toute la largeur */
        margin-left: 0 !important;
        order: 1;                      /* La moto en premier */
    }
    }
    

    .NumTexte {
        margin-left: 0 !important;     /* On supprime le décalage de 350px */
        width: 100% !important;
        box-sizing: border-box;        /* Évite que le padding ne dépasse */
        order: 2;                      /* Le texte en deuxième */
        border: 2px solid #7557c1;     /* Ton cadre vert */
    }
		
			@media (max-width: 900px) {
    .ProjBox {
        position: relative !important; /* On annule l'absolu */
        padding-top: 0px !important;
        display: flex !important;
        flex-direction: column !important; /* Empile l'image et le texte */
    }

    .ProjPix {
        position: relative !important; /* La moto redevient un élément normal */
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;        /* La moto prend toute la largeur */
        margin-left: 0 !important;
        order: 1;                      /* La moto en premier */
    }
    }
    

    .ProjTexte {
        margin-left: 0 !important;     /* On supprime le décalage de 350px */
        width: 100% !important;
        box-sizing: border-box;        /* Évite que le padding ne dépasse */
        order: 2;                      /* Le texte en deuxième */
        border: 2px solid #7557c1;     /* Ton cadre vert */
    }
}
}
}
/*---------------------------------------------------------------*/
/*                              END                              */
/*---------------------------------------------------------------*/