/* ABC minimal custom styles */
body { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; }
.hero-section { padding-top: 72px; }
.navbar .nav-link { font-weight: 500; }
.service-card:hover { transform: translateY(-2px); transition: transform .2s ease; }
footer img { filter: brightness(1.1) contrast(1.05); }


/*new line to up*/

/* Le conteneur principal de la modale, qui prend tout l'écran */
body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    padding: 20px;
    border: 1px solid #888;
    width: 30%; /* Largeur par défaut pour les écrans larges */
    margin: auto; /* Centrage pour les grands écrans */
    border-radius: 8px; /* Bords arrondis pour un meilleur style */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); /* Ombre pour la profondeur */
}

/* Media Query pour les petits écrans (téléphones) */
@media screen and (max-width: 768px) {
    .modal-content {
        width: 90%; /* Prend 90% de la largeur sur les téléphones */
        margin: auto; /* Ajuste le centrage pour les téléphones */
        padding: 15px; /* Réduit le padding pour économiser de l'espace */
    }
}

/* The Close Button */
.close {
  color: #000000;
  float: left;
  text-align : right;
  font-size: 18px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.close2 {
  color: #000000;
  float: left;
  text-align : right;
  font-size: 18px;
  font-weight: bold;
}

.close2:hover,
.close2:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.close3 {
  color: #000000;
  float: left;
  text-align : right;
  font-size: 18px;
  font-weight: bold;
}

.close3:hover,
.close3:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.close4 {
  color: #000000;
  float: left;
  text-align : right;
  font-size: 18px;
  font-weight: bold;
}

.close4:hover,
.close4:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.close5 {
  color: #000000;
  float: left;
  text-align : right;
  font-size: 18px;
  font-weight: bold;
}

.close5:hover,
.close5:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.close6 {
  color: #000000;
  float: left;
  text-align : right;
  font-size: 18px;
  font-weight: bold;
}

.close6:hover,
.close6:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.close7 {
  color: #000000;
  float: left;
  text-align : right;
  font-size: 18px;
  font-weight: bold;
}

.close7:hover,
.close7:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.close8 {
  color: #000000;
  float: left;
  text-align : right;
  font-size: 18px;
  font-weight: bold;
}

.close8:hover,
.close8:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.close9 {
  color: #000000;
  float: left;
  text-align : right;
  font-size: 18px;
  font-weight: bold;
}

.close9:hover,
.close9:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.close10 {
  color: #000000;
  float: left;
  text-align : right;
  font-size: 18px;
  font-weight: bold;
}

.close10:hover,
.close10:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

/* Style pour le texte de la modale */

.modal-title {
    color: #0d6efd;
    font-size: 1.5rem;
    line-height: 1;
	text-align : left;
	padding-bottom : 20px;
}

.modal-text {
    color: #555;
    font-size: 1rem;
    line-height: 1.5;
	text-align : left;
}

/* Animation d'apparition */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Style de base pour la modale (cachée par défaut) */


body { font-family: 'Inter', sans-serif; margin:0; padding:0; color:#0A1A33; background:#fdfdfd; line-height:1.6;}
h1, h2, h3, h4, h5, h6 { font-weight:700; margin-bottom:15px;}
p { margin-bottom:1em;}

header { display:flex; justify-content:space-between; align-items:center; padding:20px 40px; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,0.05);}
header .logo-img { height:70px; width:auto;}
header nav a { margin-left:30px; color:#0A1A33; text-decoration:none; font-weight:600; font-size:1.05em; transition:color 0.3s ease;}
header nav a:hover { color:#c82333;}

.hero { display:flex; justify-content:center; align-items:center; text-align:center; padding:120px 20px; background:url('images/motif-bg.png') center/cover no-repeat; background-color:#0A1A33; color:#fff; min-height:400px;}
.hero-text { max-width:800px;}
.hero h1 { font-size:3.2em; margin-bottom:25px; line-height:1.2;}
.hero p { font-size:1.4em; margin-bottom:40px; opacity:0.9;}
.cta-buttons .btn { padding:15px 35px; margin:0 15px; font-weight:600; border-radius:5px; text-decoration:none; display:inline-block; transition:background-color 0.3s ease;}
.btn-primary { background:#c82333; color:#fff; border:1px solid #c82333;}
.btn-primary:hover { background:#a01c2a; border-color:#a01c2a;}
.btn-secondary { background:transparent; color:#fff; border:1px solid #fff;}
.btn-secondary:hover { background:#fff; color:#0A1A33;}

main { padding:60px 40px; max-width:1200px; margin:0 auto;}

.directors { text-align:center; margin-bottom:60px;}
.directors h2 { font-size:2.2em; color:#0A1A33; margin-bottom:40px;}
.directors-grid { display:flex; justify-content:center; gap:50px; flex-wrap:wrap;}
.director { text-align:center; max-width:280px;}
.director-img { width:200px; height:200px; object-fit:cover; border-radius:50%; border:4px solid #c82333; margin-bottom:15px;}
.director p { font-size:1.1em; line-height:1.4;}
.director strong { display:block; font-size:1.3em; margin-bottom:5px;}

.industries { text-align:center; margin-bottom:60px;}
.industries h2 { font-size:2.2em; color:#0A1A33; margin-bottom:40px;}
.industries-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:25px;}
.industry-card { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:25px; border:1px solid #eee; border-radius:8px; background:#fff; width:220px; height:150px; text-align:center; font-weight:600; color:#0A1A33; text-decoration:none; box-shadow:0 4px 12px rgba(0,0,0,0.05); transition:transform 0.3s ease, box-shadow 0.3s ease;}
.industry-card:hover { transform:translateY(-5px); box-shadow:0 6px 18px rgba(0,0,0,0.1); color:#c82333;}

footer { background:#0A1A33; color:#fff; padding:40px 20px; text-align:center;}
.footer-logo { height:50px; margin-bottom:15px;}
footer p { font-size:0.9em; opacity:0.8;}

/* Responsive adjustments */
@media (max-width: 768px) {
  header { flex-direction:column; padding:15px 20px;}
  header nav { margin-top:15px;}
  header nav a { margin:0 10px 0 0; font-size:1em;}
  .hero h1 { font-size:2.5em;}
  .hero p { font-size:1.1em;}
  .cta-buttons .btn { padding:10px 20px; margin:0 8px;}
  main { padding:40px 20px;}
  .directors-grid, .industries-grid { gap:20px;}
  .director { max-width:100%;}
  .industry-card { width:180px; height:120px;}
}

@media (max-width: 480px) {
  .logo-img { height:60px;}
  .hero h1 { font-size:2em;}
  .hero p { font-size:1em;}
  .cta-buttons { display:flex; flex-direction:column; gap:10px;}
  .cta-buttons .btn { margin:0; width:80%; max-width:250px;}
  .director-img { width:150px; height:150px;}
  .industry-card { width:100%; max-width:250px;}
}