/*
Theme Name: Civic IA (Full CSS – 2025-08-30)
Description: CSS complète réécrite (header transparent sur le hero, menu à droite, burger mobile, pages responsive, contact, grilles, embeds)
Version: 1.2
Author: Civic IA Team
*/

/* ===============================
   Reset & Variables
   =============================== */
:root{
  --civic-green:#90B393;
  --civic-green-light:#9BC683;
  --civic-green-dark:#5A8A47;
  --civic-white:#ffffff;
  --civic-gray-light:#f8f9fa;
  --civic-gray:#6c757d;
  --civic-dark:#212529;
  --civic-blue:#0066cc;
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{min-height:100%;}
body{
  font-family:'Inter','Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  line-height:1.6;
  color:var(--civic-dark);
  background-color:var(--civic-white);
}

/* ===============================
   Typography
   =============================== */
h1,h2,h3,h4,h5,h6{
  font-weight:600;
  margin:0 0 1rem 0;
  color:var(--civic-dark);
}
h1{font-size:2.5rem;}
h2{font-size:2rem;}
h3{font-size:1.5rem;}
h4{font-size:1.25rem;}
p{margin:0 0 1rem 0;color:var(--civic-gray);}

/* ===============================
   Layout helpers
   =============================== */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}

/* ===============================
   Header (transparent, overlay on hero)
   =============================== */
.site-header{
  background:transparent;
  box-shadow:none;
  position:absolute;   /* overlay au-dessus du hero */
  top:0; left:0; width:100%;
  z-index:1000;
}
.header-content{
  display:flex;
  align-items:center;
  justify-content:space-between; /* logo gauche / nav droite */
  padding:1rem 0;
}

/* Logo (optionnel) */
.logo{
  display:flex;
  align-items:center;
  text-decoration:none;
  color:var(--civic-white);
  gap:.5rem;
}
.logo h1{
  font-size:1.8rem;
  font-weight:700;
  margin:0;
  color:var(--civic-white);
}
.logo .tagline{
  font-size:.9rem;
  color:#fff;
  opacity:.9;
  font-weight:400;
}

/* ===============================
   Navigation
   =============================== */
.main-navigation{
  margin-left:auto;          /* pousse la nav à droite */
  position:relative;         /* pour positionner le dropdown mobile */
}
.main-navigation ul{
  display:flex;
  list-style:none;
  margin:0;
  padding:0;
  gap:2rem;                  /* espacement entre items */
}
.main-navigation li{margin:0;}
.main-navigation a{
  text-decoration:none;
  color:#fff;                /* liens blancs sur le fond vert du hero */
  font-weight:500;
  transition:color .2s ease, opacity .2s ease;
  opacity:.95;
}
.main-navigation a:hover{color:#fff;opacity:1;}

/* Bouton burger (caché en desktop) */
.nav-toggle{
  display:none;
  background:rgba(0,0,0,0.35);
  color:#fff;
  border:0;
  padding:.5rem .75rem;
  border-radius:6px;
  margin-left:1rem;
  cursor:pointer;
}

/* ===============================
   Hero Section
   =============================== */
.hero-section{
  background:linear-gradient(135deg,var(--civic-green-light) 0%,var(--civic-green) 100%);
  color:var(--civic-white);
  padding:6rem 0 4rem; /* top = compense le header en absolute */
  text-align:center;
}
.hero-content h1{
  font-size:3rem;
  margin-bottom:1rem;
  color:var(--civic-white);
}
.hero-content p{
  font-size:1.2rem;
  margin-bottom:2rem;
  color:var(--civic-white);
  opacity:.9;
}
/* Hero image responsive */
.hero-content img{
  max-width:100%;
  height:auto;
  display:block;
  margin:0 auto;
}

/* Buttons */
.btn{
  display:inline-block;
  padding:12px 30px;
  background:var(--civic-green-dark);
  color:var(--civic-white);
  text-decoration:none;
  border-radius:8px;
  font-weight:600;
  transition:transform .2s ease, background .2s ease;
  border:none;
  cursor:pointer;
}
.btn:hover{
  background:#4b763c;
  transform:translateY(-2px);
}
.btn.btn-secondary{
  background:transparent;
  border:2px solid var(--civic-white);
}
.btn.btn-secondary:hover{
  background:var(--civic-white);
  color:var(--civic-green-dark);
}

/* ===============================
   Sections (Services, About, Contact)
   =============================== */
.services-section{padding:4rem 0;background:var(--civic-gray-light);}
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:2rem;
  margin-top:3rem;
}
.service-card{
  background:var(--civic-white);
  padding:2rem;
  border-radius:10px;
  box-shadow:0 5px 15px rgba(0,0,0,.1);
  transition:transform .2s ease;
}
.service-card:hover{transform:translateY(-5px);}
.service-card h3{color:var(--civic-green);margin-bottom:1rem;}

.about-section{padding:4rem 0;}
.about-content{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:center;
}
.about-text h2{color:var(--civic-green);margin-bottom:1.5rem;}
.about-image{text-align:center;}
.about-image img{
  max-width:100%;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.1);
}

.contact-section{padding:4rem 0;background:var(--civic-gray-light);}
.contact-form{max-width:600px;margin:0 auto;}
.form-group{margin-bottom:1.5rem;}
.form-group label{
  display:block;
  margin-bottom:.5rem;
  font-weight:600;
  color:var(--civic-dark);
}
.form-group input,.form-group textarea{
  width:100%;
  padding:12px;
  border:1px solid #ddd;
  border-radius:5px;
  font-size:1rem;
  transition:border-color .2s ease;
}
.form-group input:focus,.form-group textarea:focus{
  outline:none;
  border-color:var(--civic-green);
}

/* ===============================
   Footer
   =============================== */
.site-footer{
  background:var(--civic-dark);
  color:var(--civic-white);
  padding:3rem 0 1rem;
}
.footer-content{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:2rem;
  margin-bottom:2rem;
}
.footer-section h3{color:var(--civic-green);margin-bottom:1rem;}
.footer-section a{
  color:var(--civic-white);
  text-decoration:none;
  opacity:.85;
  transition:opacity .2s ease;
}
.footer-section a:hover{opacity:1;}
.footer-bottom{
  text-align:center;
  padding-top:2rem;
  border-top:1px solid #444;
  opacity:.7;
}

/* ===============================
   WordPress specific helpers
   =============================== */
.wp-block-image{margin:2rem 0;}
.wp-block-quote{
  border-left:4px solid var(--civic-green);
  padding-left:1rem;
  font-style:italic;
  margin:2rem 0;
}
.aligncenter{text-align:center;}
.alignleft{float:left;margin:0 2rem 1rem 0;}
.alignright{float:right;margin:0 0 1rem 2rem;}

/* ===============================
   Admin bar adjustment
   =============================== */
body.admin-bar .site-header{top:32px;}
@media (max-width:782px){
  body.admin-bar .site-header{top:46px;}
}

/* ===============================
   Responsive
   =============================== */
@media (max-width:992px){
  .hero-content h1{font-size:2.4rem;}
}

@media (max-width:768px){
  /* Hero image slightly smaller on small screens */
  .hero-content img{ max-width:80%; }

  /* Hero padding */
  .hero-section{padding:6rem 0 3rem;}
  .hero-content h1{font-size:2rem;}

  /* About grid -> 1 colonne */
  .about-content{
    grid-template-columns:1fr;
    text-align:center;
  }

  /* Services grid -> 1 colonne */
  .services-grid{grid-template-columns:1fr;}

  /* Navigation mobile */
  .nav-toggle{display:inline-block;}
  .main-navigation ul{
    position:absolute;
    top:100%;
    right:0;
    display:none;              /* caché par défaut */
    flex-direction:column;
    gap:0;
    background:rgba(0,0,0,0.65);
    backdrop-filter:blur(4px);
    border-radius:10px;
    padding:.5rem 0;
    min-width:220px;
  }
  .main-navigation.is-open ul{display:flex !important;}
  .main-navigation a{
    display:block;
    padding:.75rem 1rem;
    color:#fff;
  }
  .main-navigation a:hover{
    background:rgba(255,255,255,0.12);
    color:#fff;
  }
}

/* ===============================
   Contact page – responsive helpers
   =============================== */
.contact-section .container{
  max-width:900px; /* slightly narrower for readability */
}

/* Gutenberg Columns on contact page */
.wp-block-columns{
  display:flex;
  gap:2rem;
  flex-wrap:wrap;
}
.wp-block-column{
  flex:1 1 0;
  min-width:280px;
}
@media (max-width:768px){
  .wp-block-columns{ flex-direction:column; gap:1.25rem; }
  .wp-block-column{ flex-basis:100% !important; max-width:100% !important; }
}

/* Generic form responsiveness (native, CF7, WPForms) */
.contact-section form,
.wpcf7 form,
.wpforms-container form{ width:100%; }

.contact-section .form-group,
.wpcf7 .wpcf7-form-control-wrap,
.wpforms-container .wpforms-field{
  width:100%;
  display:block;
  margin-bottom:1rem;
}

/* Inputs full width */
.contact-section input[type="text"],
.contact-section input[type="email"],
.contact-section input[type="tel"],
.contact-section input[type="url"],
.contact-section input[type="search"],
.contact-section select,
.contact-section textarea,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea,
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container select,
.wpforms-container textarea{
  width:100%;
  max-width:100%;
  padding:12px;
  border:1px solid #ddd;
  border-radius:6px;
  font-size:1rem;
  line-height:1.4;
  box-sizing:border-box;
}

/* Submit buttons */
.contact-section .btn,
.contact-section input[type="submit"],
.wpcf7 input[type="submit"],
.wpforms-container .wpforms-submit{
  display:inline-block;
  width:auto;
  max-width:100%;
  padding:12px 24px;
  background:var(--civic-green-dark);
  color:#fff;
  border:0;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
}
@media (max-width:768px){
  .contact-section .btn,
  .contact-section input[type="submit"],
  .wpcf7 input[type="submit"],
  .wpforms-container .wpforms-submit{
    width:100%;
  }
}

/* Map / iframe responsive */
.contact-section iframe,
.wp-block-embed iframe,
.wp-block-html iframe{
  width:100%;
  max-width:100%;
}

.embed-responsive,
.responsive-embed{
  position:relative;
  width:100%;
  padding-bottom:56.25%; /* 16:9 */
  height:0;
  overflow:hidden;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.embed-responsive iframe,
.responsive-embed iframe{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:100%;
  border:0;
}

/* colorisation images/icones */
.icon {
  filter: brightness(0) saturate(100%) invert(61%) sepia(9%) saturate(619%) hue-rotate(82deg) brightness(92%) contrast(87%);
  vertical-align: middle;
}
.icon-40 {
  width: 30px;
  height: 30px;
  filter: brightness(0) saturate(100%) invert(61%) sepia(9%) saturate(619%) hue-rotate(82deg) brightness(92%) contrast(87%);
  object-fit: contain;  /* évite toute déformation */
  vertical-align: middle; /* centre avec le texte */
  margin-right: 8px; /* espace entre l’icône et le texte */
}
.icon-100 {
  filter: brightness(0) saturate(100%) invert(61%) sepia(9%) saturate(619%) hue-rotate(82deg) brightness(92%) contrast(87%);
  object-fit: contain;  /* évite toute déformation */
  vertical-align: middle; /* centre avec le texte */
  margin-right: 8px; /* espace entre l’icône et le texte */
}
/* Spacing & readability */
.contact-section address,
.contact-section p{ line-height:1.7; }

/* Conteneur principal des publications */
.publications-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 2rem 0;
}

/* Carte de publication */
.publication-card {
    background: var(--civic-gray-light);
    padding: 3rem;
    border-radius: 15px;
    text-align: left;
}

/* Contenu de la publication */
.publication-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
}

/* Image de publication */
.publication-image {
    width: 100%;
    max-width: 300px;
    height: auto;
    object-fit: contain;
}

/* Texte de la publication */
.publication-text {
    width: 100%;
}

/* Boutons de publication */
.publication-buttons {
    text-align: center;
    margin-top: 2rem;
}

.publication-buttons .btn {
    display: inline-block;
    margin: 0 0.5rem 0.5rem 0;
}

/* ===== VERSION DESKTOP ===== */
@media (min-width: 768px) {
    .publication-content {
        flex-direction: row;
        align-items: flex-start;
    }
    
    .publication-image {
        width: 300px;
        max-width: 300px;
        flex-shrink: 0;
    }
    
    .publication-buttons {
        text-align: left;
    }
}

/* ===== VERSION MOBILE ===== */
@media (max-width: 767px) {
    .publications-container {
        padding: 1rem 0;
        gap: 1.5rem;
    }
    
    .publication-card {
        padding: 2rem;
    }
    
    .publication-text {
        padding: 0 0.5rem;
    }
    
    .publication-buttons {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }
    
    .publication-buttons .btn {
        width: 100%;
        max-width: 280px;
        text-align: center;
        margin: 0;
    }
}

/* ===== TRÈS PETITS ÉCRANS ===== */
@media (max-width: 480px) {
    .publication-card {
        padding: 1.5rem;
    }
    
    .publications-container {
        gap: 1rem;
    }
}