.about-content {
    background: transparent;
    padding: 0;
}

.about-content h2 {
    font-size: 1.4rem;
    color: var(--brand);
    margin-bottom: 8px;
}

.features-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: block;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.features-list li {
    margin: 8px 0;
    color: #345;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.features-list i {
    color: var(--brand);
    margin-top: 4px;
}


.contact-section {
    background: #f8f9fa;
    padding: 4rem 0;
    text-align: center;
}

.contact-section .contact-info {
    max-width: 760px;
    margin: 0 auto;
}

.contact-info {
    max-width: 600px;
    margin: 0 auto;
}

.contact-info p {
    margin: 1rem 0;
}

.contact-btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 28px;
    background: var(--brand);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.contact-btn:hover {
    background: #003366;
    transform: translateY(-2px);
}

.footer {
    background: #f8f9fa;
    padding: 3rem 0;
    margin-top: 0;
}

.text-retrouvez a {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    transition: color 0.3s ease;
}

.text-retrouvez a:hover {
    color: #004c8c;
}

[data-aos] {
    opacity: 0;
    transition-property: transform, opacity;
}

[data-aos].aos-animate {
    opacity: 1;
}

.about-content {
    background: transparent;
    padding: 0;
}

.about-content h2 {
    font-size: 1.4rem;
    color: var(--brand);
    margin-bottom: 8px;
}

.features-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: block;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.features-list li {
    margin: 8px 0;
    color: #345;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.features-list i {
    color: var(--brand);
    margin-top: 4px;
}

.contact-section .contact-info {
    max-width: 760px;
    margin: 0 auto;
}

.contact-btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 28px;
    background: var(--brand);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.contact-btn:hover {
    background: #003366;
    transform: translateY(-2px);
}

.map-responsive {
    position: relative;
    overflow: hidden;
    padding-bottom: 56.25%;
    height: 0;
}

.map-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.text-overlay h1 {
    font-size: 1.8rem;
    margin: 0 0 8px;
}

.text-overlay p {
    margin: 0;
    color: #234;
}

/* Hero slogan that matches footer phrase */
.lead-slogan{
    margin-top:0.5rem;
    color:#345;
    font-style:italic;
    font-size:0.98rem;
}
.text-overlay img{
    max-width: 500px;
    width: 100%;
    height: auto;
    display: block;
    margin: 16px auto 0;
}

:root{
  --brand: #0b5ea8;
  --brand-dark: #083b66;
  --muted: #f4f8fb;
  --card: #ffffff;
  --text: #12303f;
  --radius: 10px;
  --maxw: 1200px;
  --accent: #2b9ed8;
}

body { 
    font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; 
    color:var(--text); 
}

.hero{ 
    position:relative; 
    height:520px; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    background:var(--muted); 
    overflow:hidden;
    padding-top: 5%;
}

.hero .image{ 
    position:absolute;
    inset:0; 
    width:120%; 
    height:100%; 
    object-fit:cover; 
    left:50%; 
    transform:translateX(-50%); 
    filter:contrast(1.02) saturate(1.02); 
}

.text-overlay{ 
    position:relative; 
    z-index:2; 
    max-width:var(--maxw); 
    margin:0 auto; 
    background: transparent; 
    padding: 0; 
    border-radius:var(--radius); 
    text-align:center;
    margin-left: 20px; 
}

.text-overlay h1{ 
    color:var(--brand); 
    margin:0 0 8px; 
    font-size:2rem; 
    letter-spacing:0.2px; 
}

.title{
    background-color: white;
    padding: 22px 20px;
    border-radius: var(--radius);
    box-shadow: 0 18px 40px rgba(10,30,60,0.08);
    display: inline-block;
}

.text-overlay .lead{ 
    color:#254a5b; 
    margin-bottom:16px; 
    font-size:1.05rem; 
}

.title{
    background-color: white;
    
}

.ctas .btn{ 
    padding:12px 22px; 
    border-radius:8px; 
    font-weight:600; 
}

.btn-primary{ 
    background:var(--brand); 
    border-color:var(--brand); 
}

.btn-primary:hover{ 
    background:var(--brand-dark); 
    border-color:var(--brand-dark); 
}

.section.about{ 
    padding:56px 0; 
}

.about-content h2{ 
    color:var(--brand); 
    margin-bottom:12px; 
    font-size:1.4rem; 
}

.about-content p{ 
    color:#24424f; 
    line-height:1.6; 
}

.features-list{ 
    list-style:none; 
    padding:0; 
    margin-top:16px; 
}

.features-list li{ 
    display:flex; 
    gap:10px; 
    align-items:flex-start; 
    color:#334f5e; 
    margin-bottom:10px; 
}

.features-list i{ 
    color:var(--accent); 
    margin-top:4px; 
}

.about-image {  
    max-width:560px; 
    width:100%; 
    object-fit:contain; 
    display:block;
    margin:0 auto;
}

.section-bloc { 
    padding:56px 0; 
}

.service-card { 
    background:var(--card); 
    border-radius:12px; 
    padding:22px; 
    box-shadow:0 8px 24px rgba(12,30,50,0.06); 
    transition:transform .25s ease, box-shadow .25s ease; 
    height:100%; 
}

.service-card:hover { 
    transform:translateY(-8px); 
    box-shadow:0 24px 48px rgba(12,30,50,0.09); 
}

.service-card .icon { 
    width:56px; 
    height:56px; 
    border-radius:12px; 
    background:linear-gradient(135deg,var(--accent),var(--brand)); 
    color:#fff; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    font-size:20px; 
    margin-bottom:12px; 
}

.stats { 
    padding:36px 0 18px; 
}

.stat h4 { 
    color:var(--brand); 
    font-size:1.6rem; 
    margin-bottom:6px; 
}

.contact-section { 
    padding:48px 0; 
    text-align:center; 
    background:transparent; }
.contact-info h5{ color:var(--brand); margin-bottom:8px; }

.cofrac-container {
    display: flex;
    justify-content: lefts;
    align-items: left;
    flex-direction: row;
    margin-bottom: 6%;
}

.image-cofrac img {
    width: 50px;
    height: auto;
    margin: 0 12px;

}

.map-responsive { 
    position:relative; 
    overflow:hidden; 
    padding-bottom:56.25%; 
    border-radius:8px; 
    height:0; 
    box-shadow:0 8px 30px rgba(10,30,60,0.06); 
}

@media (max-width: 992px) {
  .hero { height: 400px; padding-top: 6%; }
  .text-overlay { padding: 0 16px; margin-left: 12px; }
  .text-overlay h1 { font-size: 1.6rem; }
  .text-overlay .lead { font-size: 1rem; }
  .title { padding: 16px 14px; }
  .about-image { max-width: 420px; }
  .features-list { max-width: 520px; }
  body { padding-top: 100px; }
  .section.about { padding: 40px 0; }
  .service-card { padding: 18px; }
}

@media (max-width: 768px) {
  .hero { height: 360px; }
  .text-overlay { padding: 0 12px; }
  .text-overlay h1 { font-size: 1.4rem; }
  .text-overlay .lead { font-size: 0.95rem; }
  .title { padding: 12px 12px; }
  .about-image { display: none; }
  .service-card { padding: 16px; gap: 8px; }
  .stat h4 { font-size: 1.4rem; }
}

/* Mobile - Small phones */
@media (max-width: 576px) {
  .hero { height: 300px; padding-top: 8%; }
  .text-overlay { margin-left: 8px; }
  .text-overlay h1 { font-size: 1.2rem; }
  .lead-slogan { font-size: 0.9rem; }
  .title { padding: 10px 10px; font-size: 0.95rem; }
  .about-content h2 { font-size: 1.2rem; }
  .features-list { max-width: 100%; margin-left: 0; }
  .service-card { padding: 14px; }
  body { padding-top: 90px; }
}

@media (max-width: 360px) {
  .hero { height: 280px; }
  .text-overlay h1 { font-size: 1.1rem; }
  .title { padding: 8px 8px; }
  .lead-slogan { font-size: 0.85rem; }
  .about-content h2 { font-size: 1.1rem; }
}

.map-responsive iframe{ 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
}

footer{ 
    background:#fff; 
    padding:28px 0 48px; 
    border-top:1px solid rgba(10,30,60,0.04); 
    color:#3a5a6a; 
}

.footer h5{ 
    color:var(--brand); 
    margin-bottom:6px; 
}

.container{ 
    max-width:var(--maxw); 
}

.lead{ 
    font-size:1rem; 
}

@media (max-width: 992px){
  .hero{ height:440px; }
  .text-overlay{ padding:24px; }
  .about-image{ display:none; }
}

@media (max-width: 576px){
  .hero{ height:360px; }
  .text-overlay h1{ font-size:1.4rem; }
  .service-card{ padding:16px; }
  .ctas .btn{ display:block; width:100%; margin-bottom:10px; }
}