/* ============================================
   VARIABLES (couleurs du Gabon)
=========================================== */
:root{
  --gabon-green:#009639; --gabon-yellow:#FCD116; --gabon-blue:#3A75C4;
  --dark-green:#006b2a; --light-yellow:#fde68a; --dark-blue:#2563eb;
  --pad:16px; --radius:14px; --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Reset de base */
*{margin:0;padding:0;box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color:#fff;
  min-height:100dvh; display:flex; flex-direction:column;
  /* Image de fond + voile sombre */
  background:
    linear-gradient(rgba(0,0,0,.30), rgba(0,0,0,.50)),
    url('images/PHOTO-2025-08-26-17-05-17.jpg') center/cover no-repeat;
  background-attachment: fixed;
}
/* iOS: évite le bug du fixed sur mobile */
@supports (-webkit-touch-callout: none) {
  @media (max-width:768px){
    body{ background-attachment: scroll; }
  }
}

/* ============================================
   PARTICULES (décor, non cliquable)
=========================================== */
.particles{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.particle{position:absolute;background:var(--gabon-yellow);border-radius:50%;opacity:.6;animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(0);opacity:.6}50%{transform:translateY(-20px) rotate(180deg);opacity:.85}}

/* ============================================
   HEADER / NAV (MOBILE FIRST)
=========================================== */
header{
  position:sticky; top:0; z-index:1000;
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px;
  background:linear-gradient(135deg, rgba(0,150,57,.9), rgba(0,107,42,.9));
  backdrop-filter:blur(10px); box-shadow:0 4px 20px rgba(0,0,0,.3);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.logo{
  font-size:clamp(1.2rem, 3.5vw, 2rem); font-weight:bold; color:var(--gabon-yellow);
  text-shadow:2px 2px 4px rgba(0,0,0,.5); display:flex; gap:10px; align-items:center;
}
.logo::before{content:"🏍️";font-size:1.25rem}

/* Burger visible sur mobile */
.menu-toggle{display:flex;flex-direction:column;gap:4px;cursor:pointer}
.menu-toggle span{width:26px;height:3px;background:var(--gabon-yellow);border-radius:2px}

/* NAV = drawer (caché par défaut en mobile) */
nav{display:none; position:fixed; inset:56px 0 0 0;
  background:rgba(0,0,0,.85); padding:18px; gap:12px; flex-direction:column; }
nav a{
  color:#fff; text-decoration:none; font-weight:600; padding:10px 14px; border-radius:12px;
  background:rgba(255,255,255,.08); transition:.25s;
}
nav a:hover{background:linear-gradient(135deg,var(--gabon-yellow),#f59e0b); color:#1f2937}
nav.active{display:flex}

/* ============================================
   MAIN (titre, recherche, boutons)
=========================================== */
main{display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;padding:40px 16px}
h2{
  font-size:clamp(1.4rem, 4.8vw, 2.6rem);
  background:linear-gradient(135deg,rgba(0,0,0,.80),rgba(0,0,0,.60));
  padding:18px 20px; border-radius:20px; margin-bottom:20px;
  border:2px solid var(--gabon-yellow); box-shadow:0 10px 30px rgba(0,0,0,.3);
  backdrop-filter:blur(10px);
}

.search-container{
  display:flex; flex-direction:column; gap:12px; align-items:stretch;
  width:100%; max-width:520px; margin-bottom:24px;
}
input[type="text"]{
  min-height:44px; padding:12px 16px; border-radius:25px; font-size:1rem;
  border:2px solid var(--gabon-yellow); background:rgba(255,255,255,.92); color:#333;
  transition:.25s; backdrop-filter:blur(5px);
}
input[type="text"]::placeholder{color:#666}
input[type="text"]:focus{outline:none; border-color:var(--gabon-blue); box-shadow:0 0 18px rgba(58,117,196,.35); transform:translateY(-1px)}

.btn-main{
  display:inline-block; text-align:center; min-height:44px; line-height:44px;
  padding:0 22px; font-size:1.06rem; font-weight:700; border-radius:25px;
  background:linear-gradient(135deg,var(--gabon-green),var(--dark-green));
  color:#fff; box-shadow:0 8px 25px rgba(0,150,57,.3); transition:.25s;
}
.btn-main:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,150,57,.4); }

/* ============================================
   ICÔNES (services)
=========================================== */
.icon-row{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:22px; margin-top:32px; width:100%; max-width:680px; padding:0 8px;
}
.icon{ text-align:center; transition:transform .25s; }
.icon:hover{ transform:translateY(-6px); }
.icon a{ display:block; color:inherit; }
.icon-circle{
  width:72px; height:72px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin:0 auto 12px;
  background:linear-gradient(135deg,var(--gabon-blue),var(--dark-blue));
  box-shadow:0 10px 25px rgba(58,117,196,.3); font-size:1.9rem; transition:.25s;
}
.icon:hover .icon-circle{
  background:linear-gradient(135deg,var(--gabon-yellow),#f59e0b);
  transform:scale(1.06) rotate(5deg); box-shadow:0 14px 32px rgba(252,209,22,.35);
}
.icon span{ font-weight:700; text-shadow:1px 1px 2px rgba(0,0,0,.5) }

/* ============================================
   FOOTER
=========================================== */
footer{
  text-align:center; padding:24px 16px calc(24px + var(--safe-bottom));
  background:linear-gradient(135deg,rgba(0,0,0,.80),rgba(0,0,0,.60));
  border-top:3px solid var(--gabon-yellow); margin-top:auto; backdrop-filter:blur(10px);
}
.footer-links{margin-top:12px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.footer-links a{color:var(--gabon-yellow); font-weight:500}
.footer-links a:hover{text-decoration:underline; color:#fff}

/* ============================================
   ACCESSIBILITÉ
=========================================== */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ============================================
   BREAKPOINTS
=========================================== */
/* ≥480px : mobiles larges */
@media (min-width:480px){
  .icon-row{ gap:24px; }
  .icon-circle{ width:76px; height:76px; font-size:2rem; }
}

/* ≥768px : tablettes (nav horizontal) */
@media (min-width:768px){
  .menu-toggle{ display:none; }
  nav{ position:static; display:flex; flex-direction:row; background:transparent; padding:0; gap:18px; }
  nav a{ background:transparent; padding:8px 10px; }
  main{ padding-top:56px; }
  .search-container{ flex-direction:row; align-items:center; justify-content:center; }
  .icon-row{ grid-template-columns:repeat(3,minmax(160px,1fr)); max-width:900px; }
}

/* ≥1024px : desktop */
@media (min-width:1024px){
  header{ padding:16px 24px; }
  .icon-row{ grid-template-columns:repeat(4,minmax(170px,1fr)); gap:26px; max-width:1000px; }
  .icon-circle{ width:84px; height:84px; font-size:2.1rem; }
}