:root{
  --bg:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --primary:#0ea5e9;
  --primary-dark:#0284c7;
  --accent:#22c55e;
  --surface:#f8fafc;
  --border:#e5e7eb;
  --shadow:0 8px 24px rgba(0,0,0,.06);
  --radius:16px;
  --max:1100px;
  --font: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
/* Conteneur principal du header */
.header {
  display: flex;
  justify-content: center; /* centre le header horizontalement */
  padding: 1rem 0;
  background: transparent; /* le conteneur externe reste transparent */
}
.gallery-container {
  max-width: 1200px;       /* limite la largeur de la galerie */
  margin: 0 auto;           /* centre horizontalement la div */
  padding: 0 20px;          /* espace à gauche et à droite */
  text-align: center;       /* centre le titre */
}

.gallery-row {
  display: flex;              
  justify-content: center;    /* centre horizontalement les images */
  align-items: center;        /* aligne verticalement */
  gap: 20px;                  /* espace entre les images */
  flex-wrap: wrap;            /* passe sur plusieurs lignes si écran trop petit */
}

.contenu {
  text-align: center; /* centre le texte à l'intérieur */
  background: white;
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}



.gallery-row img {
  width: 200px;               /* largeur fixe */
  height: 150px;              /* hauteur fixe */
  object-fit: cover;          /* recadrage sans déformation */
  border-radius: 8px;         
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}



/* Boîte interne du header */
.header .container {
  background-color: #7fc1f9; /* bleu clair moyen */
  border-radius: 16px;       /* arrondir les coins */
  padding: 0.75rem 2rem;     /* espace intérieur */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* ombre pour le relief */
  max-width: var(--max);      /* largeur limitée */
  width: 100%;                /* s'adapte sur mobile */
}

/* Menu et boutons */
.nav .menu a {
  color: #1f2937; /* texte sombre pour contraste */
  background: rgba(255,255,255,0.85); /* boutons légèrement clairs */
  padding: 0.5rem 0.8rem;
  border-radius: 12px;
  font-weight: 500;
  transition: background 0.2s ease, transform 0.2s ease;
}

.nav .menu a:hover {
  background: #ffffff;  /* ressortir au hover */
  transform: translateY(-2px);
}

/* Bouton CTA */
.cta {
  background-color: #ffdd57; /* couleur qui ressort bien sur bleu */
  color: #1f2937;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.cta:hover {
  background-color: #ffd633;
  transform: translateY(-2px);
}


*{box-sizing:border-box}
html{font-size:16px; scroll-behavior:smooth}
body{margin:0; font-family:var(--font); color:var(--text); background:var(--bg); line-height:1.6}
img{max-width:100%; height:auto; display:block; border-radius:12px}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--max); margin:0 auto; padding:0 1rem}
/* Header */
.header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.8); backdrop-filter:saturate(180%) blur(8px); border-bottom:1px solid var(--border)}
.nav{display:flex; align-items:center; justify-content:space-between; padding:.75rem 0}
.brand{display:flex; gap:.75rem; align-items:center; font-weight:700; color:var(--text)}
.brand-logo{width:36px; height:36px; background:linear-gradient(135deg, var(--primary), var(--accent)); border-radius:8px; box-shadow:var(--shadow)}
.menu{display:flex; gap:1rem; align-items:center}
.menu a{color:var(--text); padding:.4rem .7rem; border-radius:12px}
.menu a.active, .menu a:hover{background:var(--surface)}
.cta{background:var(--primary); color:white; padding:.55rem .9rem; border-radius:12px; box-shadow:var(--shadow)}
.cta:hover{background:var(--primary-dark); text-decoration:none}
/* Hero */
.hero{background:radial-gradient(1200px 400px at 50% -10%, rgba(14,165,233,.15), transparent 60%), var(--bg)}
.hero-inner{display:grid; grid-template-columns:1.2fr 1fr; gap:2rem; padding:3rem 0}
.tag{display:inline-block; font-size:.9rem; color:var(--primary-dark); background:rgba(14,165,233,.12); padding:.25rem .6rem; border-radius:999px; border:1px solid rgba(14,165,233,.25)}
h1{font-size:2.2rem; line-height:1.2; margin:.6rem 0 1rem}
.lead{color:var(--muted); font-size:1.1rem}
.btn{display:inline-block; padding:.75rem 1rem; border-radius:12px; background:var(--text); color:#fff; margin-right:.5rem}
.btn.secondary{background:#fff; color:var(--text); border:1px solid var(--border)}
.btn:hover{text-decoration:none; opacity:.95}
/* Sections */
.section{padding:3rem 0; background:var(--bg)}
.section.alt{background:var(--surface)}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem}
.card img {
  width: 100%;      /* l'image s'adapte à la largeur de la carte */
  height: auto;     /* garde les proportions originales */
  border-radius: 6px;
  display: block;
}

.card {
  background: linear-gradient(145deg, #ffffff, #f3f4f6); /* contraste subtil */
  border: 1px solid #cbd5e1; /* bordure fine et discrète (gris clair) */
  border-radius: var(--radius);
  padding: 1.5rem;

  /* ombre permanente externe + interne */
  box-shadow: 
    0 6px 14px rgba(0,0,0,.12),   /* externe douce mais visible */
    inset 0 2px 3px rgba(0,0,0,.06); /* interne subtile */

  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.card:hover {
  transform: translateY(-5px);
  background: linear-gradient(145deg, #ffffff, #e5e7eb); /* léger éclaircissement */
  box-shadow: 
    0 10px 22px rgba(0,0,0,.18),   /* ombre externe plus forte */
    inset 0 2px 6px rgba(0,0,0,.1); /* interne renforcée */
}
.card h3{margin-top:.2rem}
.badge{display:inline-block; font-size:.8rem; color:#065f46; background:#d1fae5; border:1px solid #a7f3d0; padding:.2rem .5rem; border-radius:999px}
/* News */
.news{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem}
.news article{background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.news article .content{padding:1rem}
article .meta{font-size:.85rem; color:var(--muted)}
/* Footer */
.footer{background:#0b1220; color:#e5e7eb; padding:2.5rem 0; margin-top:3rem}
.footer a{color:#cbd5e1}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:1.25rem}
.footer small{color:#94a3b8}
/* Forms */
form{display:grid; gap:.75rem}
input, textarea{padding:.75rem 1rem; border-radius:12px; border:1px solid var(--border); background:#fff; font:inherit}
textarea{min-height:140px}
input:focus, textarea:focus{outline:2px solid rgba(14,165,233,.35); border-color:var(--primary)}
/* Responsive */
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .news{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .grid-3, .news{grid-template-columns:1fr}
}
/* Utility */
.spacer{height:1.5rem}
hr{border:none; height:1px; background:var(--border); margin:1.25rem 0}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}