@media screen and (max-width: 1200px) {
 
}
@media (min-width: 480px) and (max-width: 780px){

}
@media (min-width: 781px) and (max-width: 979px){
}


.container{
padding-left: 90px;
padding-right: 90px;
}

.row {
margin: 0px;
padding: 0px;
}

.header{
margin-top: 100px;
}

.menu .text{
margin-left: 10%;
position: absolute;
display: block;
top:20%;
z-index: 2;
}

.menu .text .top_text{
font-size: 19px;
text-transform: uppercase; 
font-weight: bold;
letter-spacing: 2px;
}

.menu .text .center_text{
font-size: 59px;
font-weight: bold;
letter-spacing: 5px; 
}

.menu .text .bottom_text{
font-size: 30px;
}

/* my_info */
.menu .my_info{
z-index: 2;
position: absolute; 
}

.photo_frame{
position: relative;
border: 8px solid;
height: 75vh;
border-radius: 10px;
}

.photo_frame .photo img{
width: 100%;
height: 74vh;
object-fit: cover;
position: absolute;
right: 1vw;
bottom: 2vh;
z-index: 1;
border-radius: 10px;
}

.my_info{
margin-top: 20px;  
}

.my_info button{
margin-right: 5px;
border-radius: 2px;
padding: 3px;
background: transparent;
border-bottom: 1px solid black;
}

.my_info button:hover{
color: white;
background: rgba(0,0,0,0.8);
padding: 3px;
border-radius: 10px;
border-bottom: none;
}

/*About me*/
.about_me{
margin-top: 60px;
}

.about_me .title{
margin-bottom: 30px;
}

.about_me .portfolio{
border-left: 1px solid;
}

.about_text{
padding-left: 5px;
}

.size_32{
font-size:32px;
}

.size_24{
font-size: 24px;
}

.size_26{
font-size: 26px;
}

.size_34{
font-size: 34px;
}

.size_22{
font-size: 22px;
}

.size_25{
font-size: 25px;
}

.size_45{
  font-size: 45px;
}

/* My skills */
.my_skills{
margin-top: 100px;
}

.my_skills .title{
margin-bottom: 50px;
}

.my_skills .row .skill{
padding: 5px;
}

.my_skills .row .skill_body  {
padding: 2px;
border-radius: 5px;
margin: 0px;
border: 1px solid rgb(0, 0, 0);
min-height: 135px;
}
.my_skills .row .skill .row .image {
padding: 0px;
}

.my_skills .row .skill .row .image img {
padding: 2px;
width: 100%;
}

.my_skills .row .skill .row .desc {
padding: 0px 4px 4px 4px;
font-size: 14px;
}

/* button holder */

.load_more_buttons{
text-align: center;
}


/* Portfolio */

.works{
margin-top: 100px;
padding: 0px;
}

.works .labels{
margin-top: 50px;
color: rgb(0, 0, 0);
}

.works .labels .row .label_name {
font-weight: bold;
}

.works .labels .row .label{
margin: 0px;
}

.works .labels .row .label_name:hover {
text-decoration: underline;
cursor: pointer;
}

.works .labels .row .label_count {
font-size: 10px;
font-weight: bold;
position: absolute;
top: -10px;
margin-left: 6px;
}

.works .display_box{
margin-top: 25px;
}

.works .display_box .display_menu{
text-align: right;
margin-top: -25px;
margin-bottom: 20px;
}

.works .display_box .projects_holder{
padding: 0px;
}

.works .display_box .projects_holder .project{
background-size: contain;
height: 180px;
border-radius: 5px;
margin-bottom: 30px;
}


.works .display_box .projects_holder .project .project_body{
height: 180px;
border-radius: 5px;
}

.works .display_box .projects_holder .project .project_info{
color: #fff;
top: auto;
bottom: auto;
width: 90%;
margin-left: 5%;
margin-right: 5%;
padding: 10px;
z-index: 2;
}

.works .display_box .projects_holder .project .project_info .title a{
color: #fff;
}

.works .display_box .projects_holder .project:hover .project_body{
box-shadow: 2px 5px 20px 8px rgba(145, 145, 145, .8);
}



/* Contact */
.get_in_touch, .contact{
padding: 0px;
margin-top: 100px;
}

.get_in_touch textarea, .contact textarea{
width: 100%;
border-radius: 5px;
border: 1px solid rgba(0,0,0,.2)
}

.get_in_touch input, .contact input{
border-radius: 5px;
width: 100%;
border: 1px solid rgba(0,0,0,.3);
}

.footer{
padding: 3px;
margin-top: 120px;
border-top: 1px solid rgba(0, 0, 0, 0.582);  
text-align: center;
font-size: 14px;
}

.dark .footer{
border-top: 1px solid rgba(255, 255, 255, 0.582);
}


@media(max-width: 812px){

.container{
  padding: 1%;
}

.photo_frame .photo img{
  height: 30vh;
}

.photo_frame{
  height: 30vh;
  border: 5px solid;
}

.menu{
  padding: 0px;
}

.menu .text{
  padding: 0px;
  margin-left: 1%;
}

.menu .text .top_text{
  font-size: 13px;
}

.menu .text .center_text{
  font-size: 28px;
}

.menu .text .bottom_text{
  font-size: 15px;
}

.my_info button{
  font-size: 11px;
  font-weight:bold;
}

.about_me .about_text{
  font-size: 12px;
}

.skill_body .title h4{
  font-size: 12px;
}

.my_skills .row .skill .row .desc {
  font-size: 10px;
}

.my_skills .row .skill_body {
  min-height: 140px;
}

.my_skills .row .skill .row .image img{
  width: 30px;
  height: 30px;
}

.works .display_box .projects_holder .project .project_body .project_info{
  padding: 2px;
}

.works .display_box .projects_holder .project .project_info .title h3{
  font-size: 1rem;
}

.works .display_box .projects_holder .project .project_info .date{
  font-size: 11px;
}

.works .display_box .projects_holder .project .project_info .desc{
  font-size: 10px;
}

.size_32{
  font-size:22px;
}

.size_24{
  font-size: 14px;
}

.size_26{
  font-size: 16px;
}

.size_34{
  font-size: 24px;
}

.size_22{
  font-size: 12px;
}

.size_25{
  font-size: 15px;
}

.size_45{
    font-size: 25px;
 }

.about_me .portfolio{
  border-left: none;
  margin-top: 20px;
}

}

@media(max-width: 1024px){
.photo_frame{
  height: 36vh;
}
    .photo_frame .photo img{
      height: 35vh;
    }
}




.dark {
background-color: #202124;
color: #ffffff;
}


.dark button {
background: #171717;
color: #fff;
}

* {
outline: 0;
}


.dark .label_name, .dark .label_count{
color: #ffffff; 
}

.dark .my_info button{
margin-right: 5px;
border-radius: 2px;
padding: 3px;
background: transparent;
border-bottom: 1px solid rgb(255, 255, 255);
}


.dark .my_info button:hover{
color: rgb(0, 0, 0);
background: rgba(255, 255, 255, 0.8);
padding: 3px;
border-radius: 10px;
border-bottom: none;
}


.dark .my_skills .row .skill_body  {
padding: 2px;
border-radius: 5px;
margin: 0px;
border: 1px solid rgb(255, 255, 255);
min-height: 135px;
}


.dark #contact_form  {

min-height: 135px;
}



#contact_form {
padding-top: 20px;
}

.form-group {
margin-bottom: 15px;
}

.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

textarea.form-control {
height: 135px;
}

.btn {
display: inline-block;
margin-bottom: 0;
margin-top:5px;
font-weight: normal;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}

.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}

.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
background-image: none;
}

.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
background-color: #fff;
border-color: #ccc;
}




@keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}

@keyframes move-clouds-back {
from {background-position:0 0;}
to {background-position:10000px 0;}
}
@-webkit-keyframes move-clouds-back {
from {background-position:0 0;}
to {background-position:10000px 0;}
}
@-moz-keyframes move-clouds-back {
from {background-position:0 0;}
to {background-position:10000px 0;}
}
@-ms-keyframes move-clouds-back {
from {background-position: 0;}
to {background-position:10000px 0;}
}

.dark .stars, .twinkling, .clouds {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:100%;
display:block;
}

.dark .stars {
background:#000 url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
z-index:-1;
}

.dark .twinkling{
background:transparent url(http://www.script-tutorials.com/demos/360/images/twinkling.png) repeat top center;
z-index:-1;

-moz-animation:move-twink-back 200s linear infinite;
-ms-animation:move-twink-back 200s linear infinite;
-o-animation:move-twink-back 200s linear infinite;
-webkit-animation:move-twink-back 200s linear infinite;
animation:move-twink-back 200s linear infinite;
}

.dark .clouds{
background:transparent url(http://www.script-tutorials.com/demos/360/images/clouds3.png) repeat top center;
z-index:-1;

-moz-animation:move-clouds-back 200s linear infinite;
-ms-animation:move-clouds-back 200s linear infinite;
-o-animation:move-clouds-back 200s linear infinite;
-webkit-animation:move-clouds-back 200s linear infinite;
animation:move-clouds-back 200s linear infinite;
}



.page-container {
position: relative; 
z-index: 1; 
}


.dark .stars, .twinkling, .clouds {
position: fixed; 
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
z-index: -1; 
}
.dark .petal{
display : none;
}




body {
background: linear-gradient(to bottom, #A8E0FF 0%, #A2E8F6 50%, #F8EDCC 100%);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
transition: background-color 0.5s, color 0.5s;
overflow-x: hidden;
position: relative;
padding-top: 70px;
min-height: 100vh;
}
.clouds {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent url(http://www.script-tutorials.com/demos/360/images/clouds3.png) repeat top center;
z-index: -1;
-moz-animation: move-clouds-back 200s linear infinite;
-ms-animation: move-clouds-back 200s linear infinite;
-o-animation: move-clouds-back 200s linear infinite;
-webkit-animation: move-clouds-back 200s linear infinite;
animation: move-clouds-back 200s linear infinite;
}

.petal {
width: 1rem;
height: 1rem;
display: inline-block;
position: absolute;
top: -10rem;
bottom:0;
z-index: -1;

}
.petal .rotate {
animation: driftyRotate 1s infinite both ease-in-out;
perspective: 1000;
}
.petal .askew {
background: currentColor;
transform: skewY(10deg);
display: block;
width: 2rem;
height: 2rem;
animation: drifty 1s infinite alternate both ease-in-out;
perspective:1000;
}

.petal {
color: rgba(0,0,0,0);
}
.petal:nth-of-type(7n) .askew {
animation-delay: -.6s;
animation-duration: 2.25s;
}
.petal:nth-of-type(7n + 1) .askew {
animation-delay: -.879s;
animation-duration: 3.5s;
}
.petal:nth-of-type(7n + 2) .askew {
animation-delay: -.11s;
animation-duration: 1.95s;
}
.petal:nth-of-type(7n + 3) .askew {
animation-delay: -.246s;
animation-duration: .85s;
}
.petal:nth-of-type(7n + 4) .askew {
animation-delay: -.43s;
animation-duration: 2.5s;
}
.petal:nth-of-type(7n + 5) .askew {
animation-delay: -.56s;
animation-duration: 1.75s;
}
.petal:nth-of-type(7n + 6) .askew {
animation-delay: -.76s;
animation-duration: 1.5s;
}

.petal:nth-of-type(9n) .rotate {
animation-duration: 2s;
}
.petal:nth-of-type(9n + 1) .rotate {
animation-duration: 2.3s;
}
.petal:nth-of-type(9n + 2) .rotate {
animation-duration: 1.1s;
}
.petal:nth-of-type(9n + 3) .rotate {
animation-duration: .75s;
}
.petal:nth-of-type(9n + 4) .rotate {
animation-duration: 4.3s;
}
.petal:nth-of-type(9n + 5) .rotate {
animation-duration: 3.05s;
}
.petal:nth-of-type(9n + 6) .rotate {
animation-duration: 2.76s;
}
.petal:nth-of-type(9n + 7) .rotate {
animation-duration: 7.6s;
}
.petal:nth-of-type(9n + 8) .rotate {
animation-duration: 1.78s;
}

@keyframes drifty {
0% {
  transform: skewY(10deg) translate3d(-250%, 0, 0);
  display:block;
}
100% {
  transform: skewY(-12deg) translate3d(250%, 0, 0);
  display:block;
}
}
@keyframes driftyRotate {
0% {
  transform: rotateX(0);
  display:block;
}
100% {
  transform: rotateX(359deg);
  display:block;
}
}



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

}





.socials .button a {
color: inherit; 
text-decoration: none; 
}




.contact-form-container {
margin-bottom: 20px; 
}


.follow-container .socials {
width: 100%;
max-width: 26rem;
display: flex;
flex-direction: column;
align-items: flex-start; 
margin-bottom: 20px;
}
.socials .button {
width: 54px;
height: 54px;
border-radius: 50px;
margin-left: 10px;
overflow: hidden;
transition: all 0.3s ease-out;
}

.socials .button .icon {
width: 54px;
height: 54px;
text-align: center;
border-radius: 50%;
float: left;
line-height: 54px;
font-size: 2rem;
}

.socials .button span {
text-align: center;
line-height: 54px;
margin-right: 0px;
}

.socials .button:nth-of-type(1):hover {
width: 34%;
color: #000000; 
box-shadow: 0px 0px 4px 0px #000000;
}

.dark .socials .button:nth-of-type(1):hover {
width: 34%;
color: #ffffff; 
box-shadow: 0px 0px 4px 0px #ffffff;
}

.socials .button:nth-of-type(2):hover {
width: 34%;
color: #0e76a8; 
box-shadow: 0px 0px 4px 0px #0e76a8;
}

.socials .button:nth-of-type(3):hover {
width: 8%;
color: #000000; 
box-shadow: 0px 0px 4px 0px #000000;
bottom: 5%;
right: 5%;
position: fixed;

}
.socials .button:nth-of-type(3) {
position: fixed;
bottom: 5%;
right: 5%;
z-index: 999; 
cursor: pointer;
box-shadow: 0px 0px 4px 0px #000000;
}

.dark .socials .button:nth-of-type(3):hover {
width: 8%;
color: #ffffff; 
box-shadow: 0px 0px 4px 0px #ffffff;
}

.dark .socials .button:nth-of-type(3) {
box-shadow: 0px 0px 4px 0px #ffffff;
}



.project {
margin-bottom: 30px;
}

.project_body {
position: relative;
padding: 20px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
color: white;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.project_body:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.project_info {
position: relative;
z-index: 2;
}

.project_info .title h3 {
font-size: 1.25em;
margin: 0;
color: #ffffff;
}

.project_info .date {
font-size: 0.9em;
color: #ffffff;
margin-top: 5px;
}

.project_info .desc {
font-size: 1em;
color: #ffffff;
margin-top: 10px;
}

.project_body {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 200px;
}

.project_info .title h3 {
font-size: 1.25em;
}

.project .title,
.project .date,
.project .desc {
margin: 0;
padding: 5px 0;
}

.get_in_touch .title h2 {
font-size: 2em;
margin-bottom: 20px;
}

.get_in_touch .labels {
margin-bottom: 40px;
}
#veille_holder {
margin-top: 20px; 
}

.project_info a {
color: #ffffff; 
}









.dark 

.dark 

.dark 

body {
padding-top: 70px; /* pour que le contenu ne soit pas caché sous le header */
}

html, body {
height: 100%;
margin: 0;
padding: 0;
}

body {
background: linear-gradient(to bottom, #A8E0FF 0%, #A2E8F6 50%, #F8EDCC 100%);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
transition: background-color 0.5s, color 0.5s;
overflow-x: hidden;
position: relative;
padding-top: 70px;
min-height: 100vh;
}

.stars, .twinkling, .clouds {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
z-index: -1;
}

/* Dropdown dans navbar */
.navbar .dropdown {
position: relative;
}

.navbar .dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #ffffffcc;
backdrop-filter: blur(10px);
list-style: none;
padding: 0;
margin: 0;
z-index: 9999;
min-width: 160px;
border-radius: 5px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.navbar .dropdown-menu li a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #000;
font-weight: normal;
font-size: 14px;
transition: background 0.3s ease;
}

.navbar .dropdown-menu li a:hover {
background-color: #A8E0FF;
color: #000;
}

.navbar .dropdown:hover .dropdown-menu {
display: block;
}

/* Dark mode */
.dark .dropdown-menu {
background-color: #1e1e1ecc;
}

.dark .dropdown-menu li a {
color: #fff;
}

.dark .dropdown-menu li a:hover {
background-color: #333;
}

/* NAVBAR MODERNE CENTRÉE */
.navbar {
width: 100%;
background: linear-gradient(to right, #A8E0FF, #F8EDCC);
backdrop-filter: blur(12px);
padding: 25px 0;
position: fixed;
top: 0;
z-index: 9999;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.nav-links {
list-style: none;
display: flex;
justify-content: center;
align-items: center;
gap: 50px;
margin: 0;
padding: 0;
}

.nav-links li a {
text-decoration: none;
color: #000;
font-weight: bold;
font-size: 18px;
padding: 12px 18px;
border-radius: 8px;
transition: all 0.3s ease;
font-family: 'Segoe UI', sans-serif;
}

.nav-links li a:hover {
background-color: rgba(255, 255, 255, 0.6);
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* DARK MODE NAVBAR */
.dark .navbar {
background: rgba(30, 30, 30, 0.9);
}

.dark .nav-links li a {
color: #fff;
}

.dark .nav-links li a:hover {
background-color: rgba(255, 255, 255, 0.15);
}

.navbar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.nav-links {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.section {
  max-width: 1000px;
  margin: 0 auto;
  padding: 60px 20px;
}

.section h1,
.section h2 {
  color: #003a6e;
  text-align: center;
}

.section h1 {
  font-size: 28px;
  margin-bottom: 30px;
  font-weight: 700;
}

.section h2 {
  font-size: 24px;
  margin-top: 40px;
  margin-bottom: 20px;
  font-weight: 600;
}

.section p {
  font-size: 16px;
  line-height: 1.7;
  text-align: justify;
  margin-bottom: 20px;
}

.info-box {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  margin-top: 30px;
}

.info-box h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
}

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

.info-box li {
  margin-bottom: 10px;
}

ul {
  padding-left: 25px;
}

ul li {
  margin-bottom: 8px;
}

/* BOUTONS */
.btn-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.btn {
  background: #0077cc;
  color: #fff;
  text-decoration: none;
  padding: 14px 28px;
  font-weight: 600;
  border-radius: 8px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, background-color 0.3s ease;
}

.btn:hover {
  background-color: #005fa3;
  transform: translateY(-3px);
}

body {
  font-family: 'Montserrat', sans-serif;
}

.about-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 20px;
  margin-top: 30px;
}

.about-card {
  background: rgba(255, 255, 255, 0.95);
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  width: 220px;
  text-align: center;
  transition: transform 0.3s ease;
}

.about-card:hover {
  transform: translateY(-5px);
}

.timeline {
  list-style: none;
  padding-left: 0;
  margin-top: 30px;
}

.timeline li {
  margin-bottom: 20px;
  border-left: 4px solid #007acc;
  padding-left: 15px;
}

.timeline .date {
  font-weight: bold;
  color: #007acc;
}

.timeline .content {
  font-size: 15px;
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  margin-top: 30px;
}

.skill-block {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.07);
  transition: transform 0.3s ease;
}

.skill-block:hover {
  transform: translateY(-5px);
}

.skill-block h3 {
  color: #003b80;
  margin-bottom: 12px;
  font-size: 1.2rem;
}

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

.skill-block ul li {
  padding: 5px 0;
  font-size: 15px;
  line-height: 1.5;
}
.documentation-section {
  margin-top: 80px;
  padding: 20px;
}

.doc-tabs {
  text-align: center;
  margin-bottom: 30px;
}

.tab-btn {
  background: transparent;
  border: 2px solid #007BFF;
  color: #007BFF;
  padding: 8px 16px;
  margin: 0 10px;
  border-radius: 30px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.tab-btn:hover, .tab-btn.active {
  background-color: #007BFF;
  color: white;
}

.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.doc-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.doc-card:hover {
  transform: translateY(-5px);
}

.doc-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.doc-info {
  padding: 15px;
}

.doc-info h4 {
  font-size: 18px;
  margin-bottom: 5px;
  color: #007BFF;
}

.doc-info p {
  font-size: 14px;
  color: #333;
}


.documentation-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.doc-card {
  display: block;
  border-radius: 12px;
  background-color: white;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  overflow: hidden;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.doc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.doc-card-img img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  background-color: #f4f4f4;
}

.doc-card-body {
  padding: 15px;
}

.doc-card-body h5 {
  font-size: 18px;
  margin-bottom: 8px;
  color: #0057ff;
}

.doc-card-body p {
  font-size: 14px;
  color: #333;
}

.documentation-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: 40px;
}

.doc-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  width: 250px;
  overflow: hidden;
  text-align: center;
  transition: transform 0.3s;
}

.doc-card:hover {
  transform: translateY(-5px);
}

.doc-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.doc-card h5 {
  font-weight: bold;
  color: #0056d2;
  margin: 10px 0 5px;
}

.doc-card p {
  padding: 0 10px 15px;
  font-size: 14px;
  color: #555;
}


/* Centrer le bouton */
.btn-show-more {
  margin: 30px auto 0 auto;
  display: block;
  padding: 12px 28px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  transition: background 0.3s ease, transform 0.3s ease;
}

.btn-show-more:hover {
  background-color: #005fa3;
  transform: scale(1.05);
}

/* Animation apparente fluide */
.doc-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.doc-card.visible {
  opacity: 1;
  transform: translateY(0);
}
.section-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  color: #003a6e;
  margin-bottom: 30px;
  font-family: 'Montserrat', sans-serif;
}

.center-button {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.btn-cv {
  background-color: #0077cc;
  color: white;
  text-decoration: none;
  padding: 12px 25px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 1rem;
  transition: background 0.3s ease;
}

.btn-cv:hover {
  background-color: #005fa3;
}

.about-container {
  max-width: 1100px;
  margin: 0 auto;
}

.about-header {
  display: flex;
  align-items: center;
  font-size: 2rem;
  font-weight: 700;
  color: #003a6e;
  gap: 10px;
  justify-content: center;
  margin-bottom: 30px;
}

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

.about-img img {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.about-text {
  flex: 1;
  min-width: 300px;
  font-size: 1.1rem;
  color: #1a1a1a;
}

.about-text p {
  margin-bottom: 16px;
  line-height: 1.6;
}

.cv-btn {
  margin-top: 20px;
}

.btn-blue {
  background-color: #0077cc;
  color: white;
  padding: 12px 24px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.btn-blue:hover {
  background-color: #005fa3;
}

.contact-section {
  padding: 60px 20px;
 
  font-family: 'Montserrat', sans-serif;
}



.contact-container {
  display: flex;
  justify-content: space-between;
  max-width: 1000px;
  margin: auto;
  flex-wrap: wrap;
}

.contact-left {
  flex: 1;
  min-width: 250px;
  margin-right: 40px;
}

.contact-left h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #003a6e;
}

.social-icons a {
  font-size: 30px;
  margin-right: 15px;
  color: #222;
  transition: color 0.3s;
}

.social-icons a:hover {
  color: #0077cc;
}

.contact-right {
  flex: 1.5;
  min-width: 300px;
}

.contact-right form {
  display: flex;
  flex-direction: column;
}

.contact-right input,
.contact-right textarea {
  padding: 12px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: inherit;
}

.contact-right button {
  width: fit-content;
  background-color: #0077cc;
  color: white;
  padding: 10px 20px;
  font-weight: 600;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.contact-right button:hover {
  background-color: #005fa3;
}


nav.navbar {
  width: 100%;
  background: linear-gradient(to right, #A8E0FF, #F8EDCC);
  backdrop-filter: blur(12px);
  padding: 25px 0;
  position: fixed;
  top: 0;
  z-index: 9999;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.nav-links {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  margin: 0;
  padding: 0;
}

.nav-links li a {
  text-decoration: none;
  color: #003a6e;
  font-weight: bold;
  font-size: 18px;
  padding: 12px 18px;
  border-radius: 8px;
  transition: all 0.3s ease;
  font-family: 'Montserrat', sans-serif;
}

.nav-links li a:hover {
  background-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Dropdown (si présent dans la page index plus tard) */
.navbar .dropdown {
  position: relative;
}

.navbar .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ffffffcc;
  backdrop-filter: blur(10px);
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 9999;
  min-width: 160px;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.navbar .dropdown-menu li a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #000;
  font-weight: normal;
  font-size: 14px;
  transition: background 0.3s ease;
}

.navbar .dropdown-menu li a:hover {
  background-color: #A8E0FF;
  color: #000;
}

.navbar .dropdown:hover .dropdown-menu {
  display: block;
}

.sio-container {
  display: flex;
  gap: 40px;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 20px;
}

.sio-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  flex: 1 1 45%;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, opacity 0.6s ease;
  opacity: 0;
  transform: translateY(20px);
}

.sio-card.animate.visible {
  opacity: 1;
  transform: translateY(0);
}

.sio-card h4 {
  margin-bottom: 15px;
  font-size: 1.2rem;
  color: #003a6e;
}

.sio-card ul {
  padding-left: 20px;
  margin-top: 10px;
}

.chosen {
  font-size: 0.85rem;
  font-style: italic;
  margin-left: 10px;
  color: #0077cc;
  background: #d8f0ff;
  padding: 2px 8px;
  border-radius: 12px;
}