/* Theme Name: css depart
Description: The first css start created
Version: 2.1 (Nettoyé)
Author: balde ousmane
*/

/* --- RESET & DEFAUTS --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  transition: all .5s ease;
}

/* --- FONTS --- */
@font-face {      
font-family: "segoe";
src: url("segoe.ttf") format("opentype");
}
@font-face {      
font-family: "lobster";
src: url("lobster.ttf") format("opentype");
}

/* ============================================= */
/* --- CLASSES UTILITAIRES (UTILITY CLASSES) --- */
/* ============================================= */

/* --- FLEXBOX --- */
.dflex 		{ display: flex; }
.flex_column	{ flex-direction: column; }
.flex_wrap		{ flex-wrap: wrap; }
.justify_content_center { justify-content: center; }
.space_around	{ justify-content: space-around; }
.align_item_center { align-items: center; }
.dflexcenter    { display: flex; justify-content: center; align-items: center; }

/* --- DIMENSIONS (Width & Height) --- */
.h2vh { height: 2vh; }
.h10vh { height: 10vh; }
.h40vh { height: 40vh; }

.w5ps { width: 5%; }
.w10ps { width: 10%; }
.w20ps { width: 20%; }
.w30ps { width: 30%; }
.w35ps { width: 35%; }
.w40ps { width: 40%; }
.w50ps { width: 50%; }
.w60ps { width: 60%; }
.w80ps { width: 80%; }
.w90ps { width: 90%; }
.w100ps { width: 100%; }

/* --- COULEURS (Background) --- */
.bgblack { background-color: black; }
.bgblackdesign { background-image: linear-gradient(283deg, rgba(228, 228, 228,0.04) 0%, rgba(228, 228, 228,0.04) 30%,rgba(130, 130, 130,0.04) 30%, rgba(130, 130, 130,0.04) 49%,rgba(31, 31, 31,0.04) 49%, rgba(31, 31, 31,0.04) 100%),linear-gradient(297deg, rgba(228, 228, 228,0.04) 0%, rgba(228, 228, 228,0.04) 20%,rgba(130, 130, 130,0.04) 20%, rgba(130, 130, 130,0.04) 60%,rgba(31, 31, 31,0.04) 60%, rgba(31, 31, 31,0.04) 100%),linear-gradient(242deg, rgba(228, 228, 228,0.04) 0%, rgba(228, 228, 228,0.04) 29%,rgba(130, 130, 130,0.04) 29%, rgba(130, 130, 130,0.04) 48%,rgba(31, 31, 31,0.04) 48%, rgba(31, 31, 31,0.04) 100%),linear-gradient(90deg, rgb(0,0,0),rgb(0,0,0));}
.bgblackclass { background-image: linear-gradient(346deg, rgba(55, 55, 55,0.04) 0%, rgba(55, 55, 55,0.04) 22%,rgba(140, 140, 140,0.04) 22%, rgba(140, 140, 140,0.04) 69%,rgba(225, 225, 225,0.04) 69%, rgba(225, 225, 225,0.04) 100%),linear-gradient(31deg, rgba(55, 55, 55,0.04) 0%, rgba(55, 55, 55,0.04) 42%,rgba(140, 140, 140,0.04) 42%, rgba(140, 140, 140,0.04) 85%,rgba(225, 225, 225,0.04) 85%, rgba(225, 225, 225,0.04) 100%),linear-gradient(55deg, rgba(55, 55, 55,0.04) 0%, rgba(55, 55, 55,0.04) 13%,rgba(140, 140, 140,0.04) 13%, rgba(140, 140, 140,0.04) 72%,rgba(225, 225, 225,0.04) 72%, rgba(225, 225, 225,0.04) 100%),linear-gradient(90deg, rgb(0,0,0),rgb(0,0,0));}
.bgwhite { background-color: white; }
.bgred { background-color: red; }
.bgbluedesign{background-image: linear-gradient(90deg, rgb(59, 59, 59),rgb(125, 125, 125)),linear-gradient(22.5deg, rgb(34, 118, 254) 0%, rgb(34, 118, 254) 27%,rgb(45, 113, 222) 27%, rgb(45, 113, 222) 41%,rgb(57, 108, 190) 41%, rgb(57, 108, 190) 48%,rgb(68, 103, 157) 48%, rgb(68, 103, 157) 64%,rgb(80, 98, 125) 64%, rgb(80, 98, 125) 65%,rgb(91, 93, 93) 65%, rgb(91, 93, 93) 100%),linear-gradient(112.5deg, rgb(34, 118, 254) 0%, rgb(34, 118, 254) 27%,rgb(45, 113, 222) 27%, rgb(45, 113, 222) 41%,rgb(57, 108, 190) 41%, rgb(57, 108, 190) 48%,rgb(68, 103, 157) 48%, rgb(68, 103, 157) 64%,rgb(80, 98, 125) 64%, rgb(80, 98, 125) 65%,rgb(91, 93, 93) 65%, rgb(91, 93, 93) 100%),linear-gradient(157.5deg, rgb(34, 118, 254) 0%, rgb(34, 118, 254) 27%,rgb(45, 113, 222) 27%, rgb(45, 113, 222) 41%,rgb(57, 108, 190) 41%, rgb(57, 108, 190) 48%,rgb(68, 103, 157) 48%, rgb(68, 103, 157) 64%,rgb(80, 98, 125) 64%, rgb(80, 98, 125) 65%,rgb(91, 93, 93) 65%, rgb(91, 93, 93) 100%); background-blend-mode:overlay, overlay, overlay, normal;}
.bggreen { background-color: #063711; }
.bgOrange { background-color: #bb4d03; }
.bgreno { background-image: linear-gradient(45deg, rgb(240, 99, 99) 0%, rgb(240, 99, 99) 11%,rgb(230, 115, 107) 11%, rgb(230, 115, 107) 24%,rgb(220, 132, 114) 24%, rgb(220, 132, 114) 29%,rgb(210, 148, 122) 29%, rgb(210, 148, 122) 45%,rgb(199, 164, 129) 45%, rgb(199, 164, 129) 87%,rgb(189, 181, 137) 87%, rgb(189, 181, 137) 90%,rgb(179, 197, 144) 90%, rgb(179, 197, 144) 100%),linear-gradient(67.5deg, rgb(240, 99, 99) 0%, rgb(240, 99, 99) 11%,rgb(230, 115, 107) 11%, rgb(230, 115, 107) 24%,rgb(220, 132, 114) 24%, rgb(220, 132, 114) 29%,rgb(210, 148, 122) 29%, rgb(210, 148, 122) 45%,rgb(199, 164, 129) 45%, rgb(199, 164, 129) 87%,rgb(189, 181, 137) 87%, rgb(189, 181, 137) 90%,rgb(179, 197, 144) 90%, rgb(179, 197, 144) 100%),linear-gradient(135deg, rgb(240, 99, 99) 0%, rgb(240, 99, 99) 11%,rgb(230, 115, 107) 11%, rgb(230, 115, 107) 24%,rgb(220, 132, 114) 24%, rgb(220, 132, 114) 29%,rgb(210, 148, 122) 29%, rgb(210, 148, 122) 45%,rgb(199, 164, 129) 45%, rgb(199, 164, 129) 87%,rgb(189, 181, 137) 87%, rgb(189, 181, 137) 90%,rgb(179, 197, 144) 90%, rgb(179, 197, 144) 100%),linear-gradient(90deg, rgb(156, 174, 7),rgb(129, 53, 44)); background-blend-mode:overlay,overlay,overlay,normal;}
.bgbleureno { background-image: linear-gradient(45deg, rgb(144, 100, 159) 0%, rgb(144, 100, 159) 24%,rgb(112, 112, 163) 24%, rgb(112, 112, 163) 28%,rgb(79, 124, 166) 28%, rgb(79, 124, 166) 40%,rgb(47, 136, 170) 40%, rgb(47, 136, 170) 84%,rgb(14, 148, 173) 84%, rgb(14, 148, 173) 100%),linear-gradient(0deg, rgb(144, 100, 159) 0%, rgb(144, 100, 159) 24%,rgb(112, 112, 163) 24%, rgb(112, 112, 163) 28%,rgb(79, 124, 166) 28%, rgb(79, 124, 166) 40%,rgb(47, 136, 170) 40%, rgb(47, 136, 170) 84%,rgb(14, 148, 173) 84%, rgb(14, 148, 173) 100%),linear-gradient(135deg, rgb(144, 100, 159) 0%, rgb(144, 100, 159) 24%,rgb(112, 112, 163) 24%, rgb(112, 112, 163) 28%,rgb(79, 124, 166) 28%, rgb(79, 124, 166) 40%,rgb(47, 136, 170) 40%, rgb(47, 136, 170) 84%,rgb(14, 148, 173) 84%, rgb(14, 148, 173) 100%),linear-gradient(90deg, rgb(79, 35, 157),rgb(43, 171, 222)); background-blend-mode:overlay,overlay,overlay,normal;}
.bgnettoyage { background-image: linear-gradient(336deg, rgba(161, 161, 161, 0.07) 0%, rgba(161, 161, 161, 0.07) 50%,rgba(36, 36, 36, 0.07) 50%, rgba(36, 36, 36, 0.07) 100%),linear-gradient(69deg, rgba(68, 68, 68, 0.04) 0%, rgba(68, 68, 68, 0.04) 50%,rgba(203, 203, 203, 0.04) 50%, rgba(203, 203, 203, 0.04) 100%),linear-gradient(291deg, rgba(193, 193, 193, 0.03) 0%, rgba(193, 193, 193, 0.03) 50%,rgba(165, 165, 165, 0.03) 50%, rgba(165, 165, 165, 0.03) 100%),linear-gradient(151deg, rgba(202, 202, 202, 0.02) 0%, rgba(202, 202, 202, 0.02) 50%,rgba(158, 158, 158, 0.02) 50%, rgba(158, 158, 158, 0.02) 100%),linear-gradient(260deg, rgba(87, 87, 87, 0.03) 0%, rgba(87, 87, 87, 0.03) 50%,rgba(45, 45, 45, 0.03) 50%, rgba(45, 45, 45, 0.03) 100%),linear-gradient(323deg, rgba(160, 160, 160, 0.01) 0%, rgba(160, 160, 160, 0.01) 50%,rgba(57, 57, 57, 0.01) 50%, rgba(57, 57, 57, 0.01) 100%),linear-gradient(253deg, rgba(122, 122, 122, 0.02) 0%, rgba(122, 122, 122, 0.02) 50%,rgba(222, 222, 222, 0.02) 50%, rgba(222, 222, 222, 0.02) 100%),linear-gradient(159deg, rgba(213, 213, 213, 0.01) 0%, rgba(213, 213, 213, 0.01) 50%,rgba(149, 149, 149, 0.01) 50%, rgba(149, 149, 149, 0.01) 100%),linear-gradient(138deg, rgba(10, 10, 10, 0.05) 0%, rgba(10, 10, 10, 0.05) 50%,rgba(111, 111, 111, 0.05) 50%, rgba(111, 111, 111, 0.05) 100%),linear-gradient(135deg, #319366,#24f04b);}
.bgorangedesign { background-image: linear-gradient(112.5deg, rgb(199, 149, 37) 0%, rgb(199, 149, 37) 2%,rgb(202, 137, 37) 2%, rgb(202, 137, 37) 10%,rgb(205, 124, 37) 10%, rgb(205, 124, 37) 38%,rgb(208, 112, 37) 38%, rgb(208, 112, 37) 64%,rgb(210, 100, 36) 64%, rgb(210, 100, 36) 66%,rgb(213, 87, 36) 66%, rgb(213, 87, 36) 78%,rgb(216, 75, 36) 78%, rgb(216, 75, 36) 100%),linear-gradient(157.5deg, rgb(199, 149, 37) 0%, rgb(199, 149, 37) 2%,rgb(202, 137, 37) 2%, rgb(202, 137, 37) 10%,rgb(205, 124, 37) 10%, rgb(205, 124, 37) 38%,rgb(208, 112, 37) 38%, rgb(208, 112, 37) 64%,rgb(210, 100, 36) 64%, rgb(210, 100, 36) 66%,rgb(213, 87, 36) 66%, rgb(213, 87, 36) 78%,rgb(216, 75, 36) 78%, rgb(216, 75, 36) 100%),linear-gradient(67.5deg, rgb(199, 149, 37) 0%, rgb(199, 149, 37) 2%,rgb(202, 137, 37) 2%, rgb(202, 137, 37) 10%,rgb(205, 124, 37) 10%, rgb(205, 124, 37) 38%,rgb(208, 112, 37) 38%, rgb(208, 112, 37) 64%,rgb(210, 100, 36) 64%, rgb(210, 100, 36) 66%,rgb(213, 87, 36) 66%, rgb(213, 87, 36) 78%,rgb(216, 75, 36) 78%, rgb(216, 75, 36) 100%),linear-gradient(90deg, rgb(65, 48, 207),rgb(202, 204, 121)); background-blend-mode:overlay,overlay,overlay,normal;}
.bgarticle { background-color: #f5f3f3; }
.bgreddesign{background-image: linear-gradient(180deg, rgb(167, 167, 167),rgb(27, 27, 27)),linear-gradient(135deg, rgb(116, 19, 48) 0%, rgb(116, 19, 48) 69%,rgb(141, 30, 47) 69%, rgb(141, 30, 47) 75%,rgb(166, 41, 47) 75%, rgb(166, 41, 47) 81%,rgb(192, 52, 46) 81%, rgb(192, 52, 46) 85%,rgb(217, 63, 46) 85%, rgb(217, 63, 46) 91%,rgb(242, 74, 45) 91%, rgb(242, 74, 45) 100%),linear-gradient(225deg, rgb(116, 19, 48) 0%, rgb(116, 19, 48) 69%,rgb(141, 30, 47) 69%, rgb(141, 30, 47) 75%,rgb(166, 41, 47) 75%, rgb(166, 41, 47) 81%,rgb(192, 52, 46) 81%, rgb(192, 52, 46) 85%,rgb(217, 63, 46) 85%, rgb(217, 63, 46) 91%,rgb(242, 74, 45) 91%, rgb(242, 74, 45) 100%); background-blend-mode:overlay,overlay,normal;}
/* --- COULEURS (Texte) --- */
.clrwhite { color:white; }
.clrgreen { color:green; }
.clrblue { color: #042b80; }
.clrorangemissionlocale { color: #f06409; }
.clrgold { color: rgb(201, 155, 28); }

/* --- TYPOGRAPHIE --- */
.segoe { font-family: segoe, sans-serif; }
.lobster { font-family: lobster, cursive; }
.bold { font-weight: bold; }
.fs20 { font-size: 20px; }
.fs30 { font-size: 30px; }
.fs40 { font-size: 40px; }
.fs50 { font-size: 50px; }
.fs60 { font-size: 60px; }
.fs3rem { font-size: 3rem; }
.lh40px { line-height: 40px; }
.txt_center	{ text-align: center; }
.txt_justify { text-align: justify; }
.uppercase { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }
.txtdecorationnone { text-decoration: none; }

/* --- ESPACEMENT (Margin & Padding) --- */
.p10px { padding: 10px; }
.p20px { padding: 20px; }
.p30px { padding: 30px; }
.margin10auto { margin: 10px auto; }
.margin20auto { margin: 20px auto; }
.mt10px { margin-top: 10px; }
.mt20px { margin-top: 20px; }
.mt30px { margin-top: 30px; }
.mt50px { margin-top: 50px; }
.mb5ps { margin-bottom: 5%; }
.mb10ps { margin-bottom: 10%; }
.mb20px { margin-bottom: 20px; }
.mb50px { margin-bottom: 50px; }
.ml20px { margin-left: 20px; }
.mt2ps { margin-top: 2%; }
.mt5ps { margin-top: 5%; }
.mb2ps { margin-bottom: 2%; }

/* --- POSITIONNEMENT --- */
.relative { position: relative; }
.absolute	{ position: absolute; }
.top1 { top: 1%; }
.top5 { top: 5%; }
.left1 { left: 1%; }
.bottom6 { bottom: 6%; }
.left14 { left: 14%; }
.left17 { left: 17%; }
.zindex999 { z-index: 999; }

/* --- BORDURES & OMBRES --- */
.borderadius30 { border-radius: 30px; }
.borderadius30top { border-radius: 30px 30px 0 0; }
.borderadius30bottom { border-radius: 0 0 30px 30px; }
.borderbottomwhite { border-bottom: 1px solid white; }
.boxshadow { box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px; }

/* --- AUTRES --- */
.opacity50:hover { opacity: 50%; }
.overflowhiddenx { overflow-x: hidden; }
.none { display: none; }

/* ============================================= */
/* --- COMPOSANTS SPÉCIFIQUES --- */
/* ============================================= */

/* --- Slider / Carrousel (page d'accueil) --- */
.outer-wrapper {
width: 95%;
margin: 50px auto;
}
.s-wrap {
width: 100%;
margin-bottom: 50px;
padding-bottom: 55%;
position: relative;
border: 10px solid #fff;
background-color: #efefe8;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.s-wrap > input { display: none; }
.s-wrap .s-content {
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 500%;
height: 100%;
font-size: 0;
list-style: none;
transition: transform 1s;
}
.s-wrap .s-item {
display: inline-block;
width: 20%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
}
.s-wrap .s-item-1 { background-image: url("../img/photo1.png"); }
.s-wrap .s-item-2 { background-image: url("../img/photo2.png"); }
.s-wrap .s-item-3 { background-image: url("../img/photo20.png"); }
.s-wrap .s-item-4 { background-image: url("../img/photo4.png"); }
.s-wrap .s-item-5 { background-image: url("../img/photo21.png"); }
.s-type-1 .s-control {
position: absolute;
bottom: 18px;
left: 50%;
text-align: center;
transform: translateX(-50%);
}
.s-type-1 .s-control > label[class^="s-c-"] {
display: inline-block;
width: 12px;
height: 12px;
margin-right: 10px;
border-radius: 50%;
border: 1px solid #999;
background-color: #efefe8;
cursor: pointer;
}
.s-type-1 .s-nav label {
display: none;
position: absolute;
top: 50%;
padding: 5px 10px;
transform: translateY(-50%);
cursor: pointer;
}
.s-type-1 .s-nav label::before, .s-type-1 .s-nav label::after {
content: "";
display: block;
width: 8px;
height: 24px;
background-color: #fff;
}
.s-type-1 .s-nav label::before { margin-bottom: -12px; }
.s-type-1 .s-nav label.left { left: 20px; }
.s-type-1 .s-nav label.left::before { transform: rotate(45deg); }
.s-type-1 .s-nav label.left::after { transform: rotate(-45deg); }
.s-type-1 .s-nav label.right { right: 20px; }
.s-type-1 .s-nav label.right::before { transform: rotate(-45deg); }
.s-type-1 .s-nav label.right::after { transform: rotate(45deg); }

.s-type-1 #s-1:checked ~ .s-content { transform: translateX(0%); }
.s-type-1 #s-1:checked ~ .s-control .s-c-1 { background-color: #333; }
.s-type-1 #s-1:checked ~ .s-nav .s-nav-1 { display: block; }

.s-type-1 #s-2:checked ~ .s-content { transform: translateX(-20%); }
.s-type-1 #s-2:checked ~ .s-control .s-c-2 { background-color: #333; }
.s-type-1 #s-2:checked ~ .s-nav .s-nav-2 { display: block; }

.s-type-1 #s-3:checked ~ .s-content { transform: translateX(-40%); }
.s-type-1 #s-3:checked ~ .s-control .s-c-3 { background-color: #333; }
.s-type-1 #s-3:checked ~ .s-nav .s-nav-3 { display: block; }

.s-type-1 #s-4:checked ~ .s-content { transform: translateX(-60%); }
.s-type-1 #s-4:checked ~ .s-control .s-c-4 { background-color: #333; }
.s-type-1 #s-4:checked ~ .s-nav .s-nav-4 { display: block; }

.s-type-1 #s-5:checked ~ .s-content { transform: translateX(-80%); }
.s-type-1 #s-5:checked ~ .s-control .s-c-5 { background-color: #333; }
.s-type-1 #s-5:checked ~ .s-nav .s-nav-5 { display: block; }

/* --- Carrousel Partenaires (page d'accueil) --- */
.pic-ctn {
position: relative;
width: 100%;
height: 300px; /* ou la hauteur souhaitée */
}
.pic-ctn > img {
position: absolute;
top: 0;
left: calc(50% - 100px); /* centre des images de 200px de large */
height: 100%;
object-fit: contain;
opacity: 0;
animation: display 10s infinite;
}
@keyframes display {
0% { transform: translateX(200px); opacity: 0; }
10%, 20% { transform: translateX(0); opacity: 1; }
30%, 100% { transform: translateX(-200px); opacity: 0; }
}
.pic-ctn img:nth-child(2) { animation-delay: 2s; }
.pic-ctn img:nth-child(3) { animation-delay: 4s; }

/* --- Blocs de texte gauche/droite (page MAC) --- */
.bloctexteright, .bloctexteleft {
border-radius: 30px;
box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.3);
}

/* --- Menu de Navigation Principal --- */
.menu {
background-image: linear-gradient(to right, #000000 0%, #030303 100%);
text-transform: uppercase;
box-shadow: inset 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.15);
}
.menu a {
color: #fff;
text-decoration: none;
font-weight: 300;
}
.menu > ol {
display: flex;
justify-content: space-around;
}
.menu > ol > li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  flex-direction: column;
}
.menu > ol > li > a {
padding: 2rem 0;
font-size: 20px;
position: relative;
width: 100%;
text-align: center;
z-index: 1;
opacity: 0.7;
transition: opacity 250ms ease;
}
.menu > ol > li:hover > a,
.menu > ol > li:focus-within > a {
opacity: 1;
}
.menu .sub-menu {
position: absolute;
top: 100%;
left: 0;
width: 100%;
visibility: hidden;
z-index: 2;
}
.menu li:hover .sub-menu,
.menu li:focus-within .sub-menu {
visibility: visible;
}
.menu .sub-menu .menu-item a {
  display: block;
  padding: 1rem 0.5rem;
  background: darkgoldenrod;
  transition: all 250ms ease;
}
.menu .sub-menu .menu-item a:hover {
background: #3C5A9A; /* Couleur au survol */
color: white;
}

/* --- Formulaire de Contact/Adhésion --- */
.form {
background-color: seagreen;
border-radius: 20px;
box-sizing: border-box;
padding: 20px;
}
.title {
color: #eee;
font-family: sans-serif;
font-size: 36px;
font-weight: 600;
margin-top: 30px;
}
.input-container {
height: 50px;
position: relative;
width: 100%;
}
.input-container.ic1 { margin-top: 40px; }
.input-container.ic2 { margin-top: 30px; }
.input {
background-color: #303245;
border-radius: 12px;
border: 0;
box-sizing: border-box;
color: #eee;
font-size: 18px;
height: 100%;
outline: 0;
padding: 4px 20px 0;
width: 100%;
}
textarea.input {
height: auto;
padding-top: 20px;
}
.cut {
background-color: seagreen;
border-radius: 10px;
height: 20px;
left: 20px;
position: absolute;
top: -20px;
transform: translateY(0);
transition: transform 200ms;
width: 76px;
}
.cut-short { width: 50px; }
.input:focus ~ .cut,
.input:not(:placeholder-shown) ~ .cut {
transform: translateY(8px);
}
.placeholder {
color: #65657b;
font-family: sans-serif;
left: 20px;
line-height: 14px;
pointer-events: none;
position: absolute;
transform-origin: 0 50%;
transition: transform 200ms, color 200ms;
top: 20px;
}
.input:focus ~ .placeholder,
.input:not(:placeholder-shown) ~ .placeholder {
transform: translateY(-30px) translateX(10px) scale(0.75);
}
.input:not(:placeholder-shown) ~ .placeholder { color: #808097; }
.input:focus ~ .placeholder { color: #dc2f55; }
.submit {
background-color: #08d;
border-radius: 12px;
border: 0;
box-sizing: border-box;
color: #eee;
cursor: pointer;
font-size: 18px;
height: 50px;
margin-top: 38px;
text-align: center;
width: 100%;
}
.submit:active { background-color: #06b; }

/* Formulaire de contact.php (ancien) */
.expediteuremail, .adressmail, .telephone, .ville, .resp_input {
padding: 5px;
border-radius: 5px;
border: 1px solid #ccc;
width: 300px;
}
textarea.resp_input { width: 300px; }

/* --- Véhicule Animé --- */
.camion, .hommenettoyage {
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.camion { animation: mymove2 5s infinite; }
.hommenettoyage { animation: mymove3 5s infinite; }

@keyframes mymove2 {
  0% {right: 80%;}
  100% {right: 70%;}
}
@keyframes mymove3 {
  0% {top: 75%;}
  100% {top: 60%;}
}

/* ============================================= */
/* --- AJOUTS RÉCENTS & STYLES DE PAGE --- */
/* ============================================= */

/* --- Page Partenaires --- */
.partner-card {
background-color: #f5f3f3;
border-radius: 20px;
margin-bottom: 40px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
overflow: hidden;
border: 1px solid #ddd;
}
.partner-img {
width: 50%;
object-fit: cover;
transition: transform 0.3s ease;
}
.partner-card:hover .partner-img {
transform: scale(1.05);
}
.partner-button {
background-color: #3C5A9A;
color: white;
padding: 12px 25px;
border-radius: 30px;
text-decoration: none;
font-weight: bold;
text-align: center;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.partner-button:hover {
background-color: #2c4373;
transform: translateY(-2px);
}
.flex_reverse { flex-direction: row-reverse; }

/* --- Séparateur SVG --- */
.svg-divider { margin: 20px 0 60px 0; }
.heartbeat {
stroke: #3C5A9A;
stroke-dasharray: 200;
stroke-dashoffset: 200;
animation: draw-heartbeat 2s ease-in-out forwards infinite;
}
@keyframes draw-heartbeat {
0% { stroke-dashoffset: 200; }
50% { stroke-dashoffset: 0; }
100% { stroke-dashoffset: -200; }
}

/* --- Section Autres Formations (ASAP) --- */
.asap-modules-container { gap: 20px; }
.asap-module {
  background-color: white;
  border: 2px solid goldenrod;
  color: black;
  padding: 20px;
  border-radius: 15px;
  font-size: 18px;
  font-family: 'segoe', sans-serif;
  font-weight: bold;
  text-align: center;
  flex: 1;
  transition: all 0.3s ease;
}
.asap-module:hover {
background-color: #3C5A9A;
color: white;
transform: scale(1.05);
}

/* --- Section Témoignages --- */
.testimonials-container {
gap: 30px;
align-items: stretch;
}
.testimonial-card {
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 15px;
padding: 25px;
color: white;
display: flex;
flex-direction: column;
align-items: center;
width: 30%;
text-transform: none;
transition: transform 0.3s ease, background-color 0.3s ease;
}
.testimonial-card:hover {
transform: translateY(-10px);
background-color: rgba(255, 255, 255, 0.2);
}
.testimonial-img {
width: 80px;
height: 80px;
border-radius: 50%;
border: 3px solid white;
margin-bottom: 15px;
}
.testimonial-name {
font-size: 24px;
font-weight: bold;
font-family: 'segoe', sans-serif;
}
.testimonial-text {
font-size: 16px;
line-height: 1.6;
margin-top: 15px;
font-style: italic;
text-align: center;
flex-grow: 1;
}
.testimonial-source {
font-size: 14px;
margin-top: 20px;
opacity: 0.7;
}

.hr_index{
  margin-right: 20%;
  margin-left: 20%;
}
/* ============================================= */
/* --- STYLES POUR LA NOUVELLE PAGE "FORMALINE" --- */
/* ============================================= */

/* --- Section Héros (Introduction) --- */
.hero-presentation {
  background-color: #f8f9fa; /* Fond clair et neutre */
}
.profile-pic {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* --- Section Parcours (Timeline) --- */
.timeline-container {
  position: relative;
  width: 100%;
  margin: 50px auto;
}
.timeline-container::after {
  content: '';
  position: absolute;
  width: 4px;
  background-color: #3C5A9A; /* Couleur bleue du site */
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -2px;
  border-radius: 2px;
}
.timeline-item {
  padding: 10px 40px;
  position: relative;
  width: 50%;
}
.timeline-item:nth-child(odd) {
  left: 0;
  text-align: right;
}
.timeline-item:nth-child(even) {
  left: 50%;
  text-align: left;
}
.timeline-icon {
  position: absolute;
  width: 50px;
  height: 50px;
  right: -25px;
  top: 30px;
  background-color: white;
  border: 4px solid #3C5A9A;
  border-radius: 50%;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #3C5A9A;
}
.timeline-item:nth-child(even) .timeline-icon {
  left: -25px;
}
.timeline-content {
  padding: 20px 30px;
  background-color: #f8f9fa;
  position: relative;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.timeline-title {
  font-size: 24px;
  font-weight: bold;
  font-family: 'segoe', sans-serif;
  color: #042b80;
  margin-bottom: 10px;
}
.timeline-text {
  font-size: 18px;
  line-height: 1.6;
  font-family: 'segoe', sans-serif;
}

/* --- Section Mission --- */
.mission-section {
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Effet de parallaxe */
}
.mission-content {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 30px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
}

/* --- Section Appel à l'Action (CTA) --- */
.cta-button {
  background-color: #3C5A9A; /* bgblueportusien */
  color: white;
  padding: 15px 35px;
  border-radius: 50px;
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(60, 90, 154, 0.4);
}
.cta-button:hover {
  background-color: #2c4373;
  transform: translateY(-3px);
  box-shadow: 0 7px 20px rgba(60, 90, 154, 0.6);
}

/* --- Responsive pour la Timeline --- */
@media screen and (max-width: 768px) {
  .timeline-container::after {
    left: 25px;
  }
  .timeline-item {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
    text-align: left !important;
  }
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    left: 0;
  }
  .timeline-icon {
    left: 0;
  }
}
/* --- Style pour la zone d'intervention --- */
.location-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* Espace entre l'icône et le texte */
  font-size: 18px;
  color: #555;
  text-align: center;
  max-width: 80%;
}
/* ============================================= */
/* --- STYLES POUR LA NOUVELLE PAGE "FORMATIONS" --- */
/* ============================================= */

/* --- Grille pour les cartes de formation --- */
.formation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
  width: 90%;
  margin: 0 auto;
}

/* --- Style de la carte de formation principale --- */
.formation-card {
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.formation-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.card-content {
  padding: 25px;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Permet au contenu de pousser le bouton vers le bas */
}
.card-title {
  font-size: 24px;
  font-family: 'segoe', sans-serif;
  font-weight: bold;
  color: #042b80;
}
.card-description {
  font-size: 16px;
  line-height: 1.6;
  margin-top: 15px;
  flex-grow: 1; /* Occupe l'espace disponible */
}
.card-tags {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tag-item {
  background-color: #e9ecef;
  color: #495057;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: bold;
}
.card-button {
  display: inline-block;
  background-color: #3C5A9A;
  color: white;
  padding: 12px 25px;
  border-radius: 50px;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
  margin-top: 25px;
  transition: background-color 0.3s ease;
}
.card-button:hover {
  background-color: #2c4373;
}

/* --- Grille et cartes pour les modules ASAP --- */
.formation-grid-small {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  width: 90%;
  margin: 0 auto;
}
.module-card {
  background-color: white;
  border-radius: 15px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.module-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.module-icon {
  color: #3C5A9A;
  margin-bottom: 20px;
}
.module-title {
  font-size: 22px;
  font-weight: bold;
  font-family: 'segoe', sans-serif;
  margin-bottom: 20px;
  height: 50px; /* Hauteur fixe pour aligner les boutons */
}
.module-button {
  display: inline-block;
  background-color: #f8f9fa;
  color: #3C5A9A;
  padding: 10px 20px;
  border: 1px solid #dee2e6;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
}
.module-button:hover {
  background-color: #3C5A9A;
  color: white;
  border-color: #3C5A9A;
}
/* ============================================= */
/* --- RESPONSIVE DESIGN --- */
/* ============================================= */
@media (max-width:600px) {
.resp_flex_column { flex-direction: column; }
.resp_w50ps { width: 50%; }
.resp_w70ps { width: 70%; }
.resp_w80ps { width: 80%; }
.resp_w90ps { width: 90%; }
.resp_w100ps { width: 100%; }
.resp_fs10px { font-size: 10px; }
.resp_fs20px { font-size: 20px; }
.resp_fs25px { font-size: 25px; }
.resp_fs30px { font-size: 30px; }
.resp_fs40px { font-size: 40px; }
.resp_display_none { display: none; }
.resp_displayyes { display: flex; } /* Inversion de 'none' pour mobile */
.resp_dflexcenter { display: flex; justify-content: center; align-items: center; }
.resp_mt20px { margin-top: 20px; }
.resp_ml0 { margin-left: 0; }

/* Menu responsive */
.menu > ol { flex-direction: column; }
.menu > ol > li > a { font-size: 1.5rem; padding: 1rem 0.5rem; }
.menu .sub-menu {
  position: static; /* Le sous-menu n'est plus absolu */
  max-height: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.1);
  box-shadow: inset 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.15);
  transition: max-height 250ms ease-out;
}
.menu li:hover .sub-menu,
.menu li:focus-within .sub-menu {
  max-height: 200px; /* Hauteur suffisante pour les sous-éléments */
}

/* Corrections spécifiques responsive */
.flex_reverse { flex-direction: column-reverse; } /* Inverser la colonne sur mobile */
.partner-card { padding: 10px; }
.partner-button.ml20px { margin-left: 0; }
.partner-button.resp_mt20px { margin-top: 20px; }
.testimonial-card { width: 100%; }
.asap-modules-container { flex-direction: column; }

/* Ancien responsive pour témoignages (peut être retiré si vous utilisez la nouvelle version) */
.resp_dflex { display: flex; } 
.resp_dflex_column { flex-direction: column; }
}