/* =========================
   OrientIA — styles.css
   (menu corrigé : desktop = menu visible, mobile = bouton + menu déroulant)
   ========================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Atkinson+Hyperlegible:wght@400;700&display=swap");

:root{
  --color-primary:#0055A4;
  --color-primary-dark:#004488;
  --color-accent:#FFD700;
  --color-text:#1f2937;
  --color-bg:#ffffff;
  --color-bg-alt:#f7f9fc;
  --color-border:#e5e7eb;
  --color-footer-bg:#1f2937;
  --color-footer-text:#d1d5db;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:"Inter","Atkinson Hyperlegible",Arial,sans-serif;
  background:var(--color-bg);
  color:var(--color-text);
  line-height:1.6;
}

a{
  color:var(--color-primary);
  text-decoration:none;
}
a:hover{ text-decoration:underline; }
a:focus-visible{
  outline:2px dashed var(--color-primary);
  outline-offset:3px;
  border-radius:.4rem;
}

/* =========================
   Header / Nav (IMPORTANT)
   ========================= */

.header{
  background:var(--color-bg);
  border-bottom:1px solid var(--color-border);
  position:sticky;
  top:0;
  z-index:50;
}

.nav{
  max-width:1200px;
  margin:0 auto;
  padding:1rem 1.5rem;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  position:relative;
}

.brand .logo-text{
  font-weight:700;
  font-size:1.5rem;
  color:var(--color-primary);
}

/* Bouton burger */
.icon-button{
  background:none;
  border:0;
  padding:.5rem;
  cursor:pointer;
  color:var(--color-primary);
  font-size:1.5rem;
  line-height:1;
}
.icon-button:focus-visible{
  outline:2px dashed var(--color-primary);
  outline-offset:3px;
  border-radius:.5rem;
}

/* Desktop: le bouton burger NE DOIT PAS apparaître */
#menuToggle{ display:none; }

/* Desktop: menu toujours visible */
.nav-list{
  list-style:none;
  margin:0;
  padding:0;

  display:flex;
  align-items:center;
  gap:.75rem;
}

.nav-list a{
  display:inline-block;
  padding:.55rem .85rem;
  border-radius:.5rem;
  font-weight:600;
  color:var(--color-primary);
  white-space:nowrap;
  transition:background-color .15s ease, color .15s ease;
}

.nav-list a:hover,
.nav-list a:focus-visible{
  background:var(--color-primary);
  color:var(--color-bg);
  text-decoration:none;
}

/* =========================
   Hero
   ========================= */

.hero{
  position:relative;
  overflow:hidden;
}

.hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(.75);
  z-index:-1;
}

.hero-content{
  max-width:800px;
  margin:0 auto;
  padding:4rem 1.5rem;
}

.hero h1{
  margin:0 0 1rem;
  font-size:2.25rem;
  font-weight:700;
  color:var(--color-bg);
}

.hero p{
  margin:0 0 1rem;
  font-size:1.125rem;
  color:var(--color-bg);
}

.lead{ font-weight:600; }

/* =========================
   Sections
   ========================= */

.section{
  max-width:800px;
  margin:0 auto;
  padding:3rem 1.5rem;
}

.section h2{
  margin:0 0 1rem;
  font-size:1.875rem;
  font-weight:700;
  color:var(--color-primary);
}

.feature-list{
  list-style:none;
  padding:0;
  margin:1rem 0 0;
}

.feature-list li{
  position:relative;
  padding-left:1.25rem;
  margin:0 0 .75rem;
}

.feature-list li::before{
  content:"•";
  position:absolute;
  left:0;
  top:0;
  color:var(--color-primary);
  font-weight:700;
}

.contact a{ font-weight:700; }

/* =========================
   Actus
   ========================= */

.section.news{ max-width:1100px; }

.news-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1.5rem;
  margin-top:1.5rem;
}

.news-item{
  background:var(--color-bg-alt);
  border:1px solid var(--color-border);
  border-radius:.9rem;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
}

.news-item img{
  width:100%;
  height:170px;
  object-fit:cover;
  display:block;
}

.news-content{
  padding:1rem 1.1rem;
}

.news-content p{
  margin:0;
  font-weight:600;
}

/* =========================
   Réseaux / Footer
   ========================= */

.social-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  gap:1rem;
}

.social-list a{ font-weight:600; }

.footer{
  background:var(--color-footer-bg);
  color:var(--color-footer-text);
  padding:2rem 1.5rem;
  text-align:center;
}

.footer-links{
  list-style:none;
  padding:0;
  margin:1rem 0 0;
  display:flex;
  justify-content:center;
  gap:1.5rem;
}

.footer-links a{
  color:var(--color-footer-text);
}
.footer-links a:hover,
.footer-links a:focus-visible{
  color:var(--color-accent);
  text-decoration:none;
}

/* =========================
   Responsive
   ========================= */

@media (max-width: 1024px){
  .news-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px){
  /* Mobile: bouton visible */
  #menuToggle{ display:inline-flex; align-items:center; justify-content:center; }

  /* Mobile: menu caché par défaut */
  .nav-list{
    display:none;                 /* caché */
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--color-bg);
    border-top:1px solid var(--color-border);
    padding:.5rem;
    flex-direction:column;
    gap:.25rem;
    z-index:60;
  }

  /* Mobile: menu visible quand .open est ajouté via JS */
  .nav-list.open{ display:flex; }

  .nav-list a{
    width:100%;
    padding:1rem .9rem;
  }

  .hero-content{ padding:3.2rem 1.5rem; }
  .hero h1{ font-size:2rem; }

  .news-grid{ grid-template-columns:1fr; }
}