/* ==========================================================
   VARIABLES GLOBALES
   ========================================================== */
:root{
  --red:#195fd7;
  --red-dark:#0f1ea8;
  --red-light:#3b41ef;
  --black:#080808;
  --black-2:#111111;
  --white:#ffffff;
  --gray:#f4f4f4;
  --gray-2:#e9e9e9;
  --text:#222222;
  --muted:#666666;
  --border:#dedede;
  --shadow:0 16px 40px rgba(0,0,0,.10);
  --radius:16px;
  --transition:.28s ease;
}

/* ==========================================================
   RÉINITIALISATION ET STYLES GÉNÉRAUX
   ========================================================== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:Inter,Arial,sans-serif;color:var(--text);background:var(--white);
  line-height:1.65;overflow-x:hidden
}

/* Images */
img{max-width:100%;display:block}

/* Liens */
a{text-decoration:none;color:inherit}

/* Champs de formulaire et boutons */
button,input,textarea,select{font:inherit}

/* Conteneur principal */
.container{width:min(1180px,92%);margin:auto}

/* Espacement des sections */
.section{padding:90px 0}
.section-sm{padding:55px 0}

/* Arrière-plan gris clair */
.bg-light{background:var(--gray)}

/* Alignement centré */
.text-center{text-align:center}

/* ==========================================================
   PETITS TITRES / EYEBROW
   ========================================================== */
.eyebrow{
  display:inline-block;color:var(--red);font-size:.76rem;font-weight:900;
  text-transform:uppercase;letter-spacing:2px
}

/* ==========================================================
   EN-TÊTE DES SECTIONS
   ========================================================== */
.section-head{max-width:760px;margin:0 auto 45px;text-align:center}
.section-head h2{
  color:var(--black);font-size:clamp(2rem,4vw,3rem);line-height:1.08;margin:10px 0 14px
}
.section-head p{color:var(--muted)}

/* ==========================================================
   BARRE SUPÉRIEURE
   ========================================================== */
.topbar{background:var(--black);color:#fff;padding:9px 0;font-size:.82rem}
.topbar .container{display:flex;justify-content:space-between;gap:20px}

/* ==========================================================
   BARRE DE NAVIGATION
   ========================================================== */
.navbar{
  position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--border);backdrop-filter:blur(12px)
}

/* Conteneur de navigation */
.nav-wrap{height:78px;display:flex;align-items:center;justify-content:space-between}

/* ==========================================================
   LOGO
   ========================================================== */
.logo{display:flex;align-items:center;gap:11px;font-weight:900;color:var(--black)}
.logo img{width:48px;height:48px;object-fit:contain;border-radius:8px}

/* Carré rouge contenant les initiales CA */
.logo-mark{
  width:47px;height:47px;border-radius:10px;background:var(--red);color:#fff;
  display:grid;place-items:center;font-weight:950;box-shadow:0 7px 18px rgba(215,25,32,.25)
}

/* Texte du logo */
.logo-text span{display:block;font-size:1.02rem;line-height:1.1}
.logo-text small{display:block;color:var(--red);font-size:.61rem;letter-spacing:1.3px;margin-top:3px}

/* ==========================================================
   LIENS DE NAVIGATION
   ========================================================== */
.nav-links{display:flex;align-items:center;gap:25px}
.nav-links a{font-size:.9rem;font-weight:800;color:#292929;position:relative}

/* Soulignement animé des liens */
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:-8px;width:0;height:2px;background:var(--red);transition:var(--transition)
}

/* État actif et survol */
.nav-links a:hover::after,.nav-links a.active::after{width:100%}

/* Bouton du menu mobile */
.menu-toggle{display:none;border:0;background:transparent;color:var(--black);font-size:1.5rem}

/* ==========================================================
   BOUTONS
   ========================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 21px;border-radius:9px;border:1px solid transparent;
  font-weight:900;transition:var(--transition);cursor:pointer
}

/* Bouton rouge */
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dark);transform:translateY(-2px)}

/* Bouton noir */
.btn-black{background:var(--black);color:#fff}
.btn-black:hover{background:#2a2a2a;transform:translateY(-2px)}

/* Bouton avec contour blanc */
.btn-outline{border-color:#fff;color:#fff}
.btn-outline:hover{background:#fff;color:var(--black)}

/* Bouton blanc */
.btn-white{background:#fff;color:var(--black)}

/* ==========================================================
   SECTION HERO / BANNIÈRE PRINCIPALE
   ========================================================== */
.hero{
  min-height:calc(100vh - 87px);display:flex;align-items:center;color:#fff;
  background:
    linear-gradient(90deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.78) 52%,rgba(0,0,0,.43) 100%),
    url('../Images/LOGO.jpeg') center/cover no-repeat;
  background-color:var(--black)
}

/* Contenu de la bannière */
.hero-content{max-width:800px;padding:90px 0}

/* Titre principal */
.hero h1{font-size:clamp(2.5rem,6vw,5.2rem);line-height:1.01;letter-spacing:-2px;margin:12px 0 22px}

/* Mise en évidence du texte du titre */
.hero h1 span{color:var(--red-light)}

/* Texte descriptif */
.hero p{font-size:1.08rem;color:#eee;max-width:680px}

/* Boutons du hero */
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* Badges du hero */
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}

/* Style des badges */
.badge{border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.07);border-radius:999px;padding:7px 12px;font-size:.78rem}

/* ==========================================================
   HERO DES PAGES INTERNES
   ========================================================== */
.page-hero{
  padding:85px 0;color:#fff;background:
  linear-gradient(90deg,rgba(0,0,0,.92),rgba(0,0,0,.70)),
  url('../Images/LOGO.jpeg') center/cover no-repeat;background-color:var(--black)
}

/* Titre des pages internes */
.page-hero h1{font-size:clamp(2.3rem,5vw,4rem);line-height:1.05;margin:8px 0 10px}

/* Description */
.page-hero p{color:#eee;max-width:680px}

/* Fil d'Ariane */
.breadcrumb{color:#bbb;font-size:.84rem}

/* ==========================================================
   CARTES DE CONTENU
   ========================================================== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:23px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:23px}

/* Carte */
.card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:27px;box-shadow:0 7px 22px rgba(0,0,0,.04);transition:var(--transition)
}

/* Animation au survol */
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}

/* Icône des cartes */
.icon-box{
  width:54px;height:54px;border-radius:13px;background:rgba(215,25,32,.09);
  color:var(--red);display:grid;place-items:center;font-size:1.2rem;margin-bottom:18px
}

/* Titre des cartes */
.card h3{color:var(--black);font-size:1.12rem;margin-bottom:8px}

/* Texte des cartes */
.card p{color:var(--muted);font-size:.93rem}

/* ==========================================================
   SECTION STATISTIQUES
   ========================================================== */
.stats {background: #2563EB;
  color: #fff;
}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.stat{text-align:center;padding:18px}

/* Chiffre principal */
.stat strong{display:block;font-size:2.25rem;line-height:1;color:#fff}

/* Libellé de la statistique */
.stat span{font-size:.85rem;color:#fff}

/* ==========================================================
   SECTION AVEC DEUX COLONNES
   ========================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}

/* Titre */
.split h2{font-size:clamp(2rem,4vw,3rem);line-height:1.08;color:var(--black);margin:10px 0 17px}

/* Paragraphes */
.split p{color:var(--muted);margin-bottom:14px}

/* Liste avec icônes */
.check-list{display:grid;gap:11px;margin:22px 0}
.check-list li{display:flex;gap:10px}
.check-list i{color:var(--red);margin-top:5px}

/* ==========================================================
   VISUEL PRINCIPAL
   ========================================================== */
.visual-card{border-radius:20px;overflow:hidden;background:#eee;box-shadow:var(--shadow)}
.visual-card img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ==========================================================
   CARTES DES SERVICES
   ========================================================== */
.service-card{padding:0;overflow:hidden}
.service-card img{width:100%;aspect-ratio:16/10;object-fit:cover;background:#eee}
.service-card .body{padding:23px}

/* ==========================================================
   GALERIE DES RÉALISATIONS
   ========================================================== */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}

/* Élément individuel de la galerie */
.gallery-item{position:relative;overflow:hidden;border-radius:14px;background:#eee;cursor:pointer}

/* Image de la galerie */
.gallery-item img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:.45s}

/* Zoom de l'image au survol */
.gallery-item:hover img{transform:scale(1.06)}

/* Légende de l'image */
.gallery-caption{
  position:absolute;left:0;right:0;bottom:0;padding:32px 15px 13px;
  color:#fff;font-weight:850;background:linear-gradient(transparent,rgba(0,0,0,.78))
}

/* ==========================================================
   BLOC D'APPEL À L'ACTION
   ========================================================== */
.cta{background:var(--black);color:#fff;border-radius:22px;padding:50px}

/* Titre du CTA */
.cta h2{font-size:clamp(2rem,4vw,3rem);line-height:1.08;margin:9px 0 12px}

/* Texte du CTA */
.cta p{max-width:720px;color:#ddd;margin-bottom:24px}

/* ==========================================================
   SECTION CONTACT
   ========================================================== */
.contact-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:30px}

/* Liste des coordonnées */
.contact-list{display:grid;gap:14px}

/* Élément individuel de contact */
.contact-item{
  display:flex;gap:14px;padding:17px;border:1px solid var(--border);
  border-radius:14px;background:#fff
}

/* Icône du contact */
.contact-item .icon-box{margin:0;flex:none;width:44px;height:44px}

/* Titre du contact */
.contact-item h4{color:var(--black);margin-bottom:2px}

/* Informations de contact */
.contact-item p,.contact-item a{font-size:.89rem;color:var(--muted)}

/* ==========================================================
   FORMULAIRE
   ========================================================== */
.form-card{padding:30px;border:1px solid var(--border);border-radius:18px;background:#fff;box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}

/* Champ individuel */
.field{display:grid;gap:7px;margin-bottom:14px}

/* Champ occupant toute la largeur */
.field.full{grid-column:1/-1}

/* Libellé des champs */
.field label{font-size:.83rem;font-weight:850;color:var(--black)}

/* Champs de saisie */
.field input,.field textarea,.field select{
  width:100%;border:1px solid #d2d2d2;border-radius:9px;padding:12px 13px;
  outline:none;background:#fff;transition:var(--transition)
}

/* Zone de texte */
.field textarea{min-height:145px;resize:vertical}

/* État des champs lorsqu'ils sont sélectionnés */
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--red);box-shadow:0 0 0 4px rgba(215,25,32,.09)
}

/* ==========================================================
   CARTE GOOGLE MAPS
   ========================================================== */
.map{width:100%;height:440px;border:0;border-radius:18px}

/* ==========================================================
   MESSAGE D'INFORMATION
   ========================================================== */
.notice{padding:15px 18px;background:#fff5f5;border-left:4px solid var(--red);border-radius:9px;color:#5d171a;font-size:.9rem}

/* ==========================================================
   PIED DE PAGE
   ========================================================== */
.footer{background:var(--black);color:#ddd;padding:62px 0 23px}

/* Organisation des colonnes du footer */
.footer-grid{display:grid;grid-template-columns:1.25fr .75fr .85fr 1fr;gap:32px}

/* Titres du footer */
.footer h3{color:#fff;font-size:1rem;margin-bottom:15px}

/* Textes et liens */
.footer p,.footer a,.footer span{font-size:.87rem;color:#aaa}

/* Effet au survol des liens */
.footer a:hover{color:#fff}

/* Liste des liens */
.footer-links{display:grid;gap:8px}

/* Logo du footer */
.footer .logo{color:#fff}
.footer .logo-text span{color:#fff}

/* Ligne inférieure du footer */
.footer-bottom{border-top:1px solid #292929;margin-top:38px;padding-top:18px;display:flex;justify-content:space-between;gap:15px;font-size:.79rem;color:#888}

/* ==========================================================
   BOUTONS FLOTTANTS
   ========================================================== */
.float-actions{position:fixed;right:19px;bottom:19px;z-index:999;display:grid;gap:9px}

/* Style général des boutons flottants */
.float-btn{
  width:55px;height:55px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-size:1.25rem;box-shadow:0 9px 23px rgba(0,0,0,.25);transition:var(--transition)
}

/* Animation au survol */
.float-btn:hover{transform:translateY(-3px) scale(1.04)}

/* Couleurs des boutons flottants */
.whatsapp{background:#25d366}.phone{background:var(--red)}

/* ==========================================================
   FENÊTRE MODALE DE LA GALERIE
   ========================================================== */
.modal{position:fixed;inset:0;display:none;place-items:center;padding:22px;background:rgba(0,0,0,.88);z-index:2000}

/* Affichage de la modale lorsqu'elle est active */
.modal.open{display:grid}

/* Image affichée dans la modale */
.modal img{max-width:95vw;max-height:86vh;border-radius:12px}

/* Bouton de fermeture */
.modal-close{position:absolute;right:22px;top:15px;background:none;border:0;color:#fff;font-size:2.1rem;cursor:pointer}

/* ==========================================================
   RESPONSIVE — TABLETTES ET PETITS ÉCRANS
   ========================================================== */
@media(max-width:920px){

  /* Menu de navigation mobile */
  .nav-links{
    position:absolute;top:78px;left:0;right:0;display:none;flex-direction:column;
    align-items:stretch;background:#fff;padding:20px;border-bottom:1px solid var(--border);
    box-shadow:0 15px 30px rgba(0,0,0,.08)
  }

  /* Affichage du menu lorsqu'il est ouvert */
  .nav-links.open{display:flex}

  /* Bouton du menu en pleine largeur */
  .nav-links .btn{width:100%}

  /* Affichage du bouton hamburger */
  .menu-toggle{display:block}

  /* Passage des cartes sur deux colonnes */
  .cards,.grid-3{grid-template-columns:1fr 1fr}

  /* Passage des blocs principaux sur une colonne */
  .split,.contact-grid{grid-template-columns:1fr;gap:35px}

  /* Organisation du footer */
  .footer-grid{grid-template-columns:1fr 1fr}
}

/* ==========================================================
   RESPONSIVE — SMARTPHONES
   ========================================================== */
@media(max-width:620px){

  /* Masquage de la barre supérieure */
  .topbar{display:none}

  /* Réduction des espacements */
  .section{padding:68px 0}
  .section-sm{padding:45px 0}

  /* Adaptation de la section hero */
  .hero{min-height:760px}
  .hero-content{padding:55px 0}
  .hero h1{letter-spacing:-1px}

  /* Passage des grilles sur une seule colonne */
  .cards,.grid-3,.stats-grid,.gallery,.footer-grid,.form-grid{grid-template-columns:1fr}

  /* Réinitialisation de la largeur du champ pleine largeur */
  .field.full{grid-column:auto}

  /* Boutons hero en pleine largeur */
  .hero-actions .btn{width:100%}

  /* Adaptation du CTA */
  .cta{padding:32px 23px}

  /* Réduction de la hauteur de la carte */
  .map{height:350px}

  /* Footer en colonne */
  .footer-bottom{flex-direction:column}
}/* ==================================================
GOOGLE MAPS : STYLE DE LA CARTE DE LOCALISATION
================================================== */

/*
Conteneur de la carte.
Il définit la hauteur, les bordures et l'apparence générale.
*/
.map-container {
position: relative;
width: 100%;
height: 420px;
margin-top: 25px;
overflow: hidden;
border-radius: 16px;
background-color: #f1f1f1;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

/*
Iframe Google Maps.
La carte occupe toute la surface du conteneur.
*/
.map-container .map {
display: block;
width: 100%;
height: 100%;
min-height: 0;
border: 0;
}

/*
Bouton permettant d'ouvrir la carte dans Google Maps.
Le bouton est centré sous la carte.
*/
.map-link {
display: flex;
justify-content: center;
margin-top: 20px;
}

/*
Tablettes et téléphones.
La hauteur de la carte est réduite pour mieux s'adapter.
*/
@media screen and (max-width: 768px) {

```
.map-container {
    height: 320px;
    border-radius: 12px;
}
```

}

/*
Petits téléphones.
La carte conserve une hauteur suffisante pour être utilisable.
*/
@media screen and (max-width: 480px) {

```
.map-container {
    height: 260px;
}
```

}