/*
╔══════════════════════════════════════════════════════════════════╗
║  NEXORA — Agence Digitale                                        ║
║  Fichier : css/style.css  (CSS EXTERNE partagé toutes pages)    ║
║  TP3 — Site vitrine multi-pages HTML5 + CSS3                    ║
║  Auteure : Nada Elhattab – ENSET Mohammedia                     ║
╚══════════════════════════════════════════════════════════════════╝

  TABLE DES MATIÈRES :
  01. Variables CSS
  02. Reset & base
  03. Typographie
  04. Utilitaires
  05. Navigation (header + nav)
  06. Menu mobile
  07. Boutons
  08. Hero accueil
  09. Hero pages internes
  10. Sections & cartes services
  11. Témoignages
  12. Vidéo
  13. Accordéon (details/summary)
  14. Tableau de tarifs
  15. Galerie (images srcset/picture)
  16. Équipe (figure/figcaption)
  17. Formulaire contact
  18. Carte Google Maps (iframe)
  19. Footer
  20. Responsive (media queries)
  21. Animations
*/


/* ════════════════════════════════════════════════
   01. VARIABLES CSS
   ────────────────────────────────────────────────
   Toutes les couleurs définies ici une seule fois.
   Usage : color: var(--vert);
════════════════════════════════════════════════ */
:root {
  --vert:         #0d9f6e;
  --vert-fonce:   #077a54;
  --vert-clair:   #e8f8f2;
  --noir:         #0f1c15;
  --gris-fonce:   #2c3e35;
  --gris:         #5a6b62;
  --gris-clair:   #dde5e0;
  --gris-bg:      #f4f7f5;
  --blanc:        #ffffff;
  --rouge:        #dc2626;

  --police-titres: 'Cormorant Garamond', Georgia, serif;
  --police-corps:  'Outfit', 'Segoe UI', sans-serif;

  --rayon-sm:   6px;
  --rayon-md:   12px;
  --rayon-lg:   20px;
  --ombre-sm:   0 2px 8px rgba(15,28,21,0.08);
  --ombre-md:   0 4px 20px rgba(15,28,21,0.10);
  --ombre-lg:   0 8px 40px rgba(15,28,21,0.14);
  --transition: 0.25s ease;
  --max-cont:   1100px;
}


/* ════════════════════════════════════════════════
   02. RESET & BASE
════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html { scroll-behavior: smooth; }
body {
  font-family: var(--police-corps);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--gris-fonce);
  background: var(--blanc);
  overflow-x: hidden;
}
img  { max-width: 100%; height: auto; display: block; }
ul   { list-style: none; }
a    { color: var(--vert); text-decoration: none; }
a:hover { text-decoration: underline; }


/* ════════════════════════════════════════════════
   03. TYPOGRAPHIE
════════════════════════════════════════════════ */
h1, h2, h3, h4 {
  font-family: var(--police-titres);
  color: var(--noir);
  line-height: 1.15;
  font-weight: 700;
}
h1 { font-size: clamp(2.2rem, 5vw,   3.8rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.6rem); }
h3 { font-size: clamp(1.1rem, 2vw,   1.5rem); }
h4 { font-size: 1.1rem; }
/* clamp(min, idéal, max) = taille responsive automatique */

p { margin-bottom: 1rem; color: var(--gris); }
p:last-child { margin-bottom: 0; }
strong { color: var(--gris-fonce); font-weight: 600; }


/* ════════════════════════════════════════════════
   04. UTILITAIRES
════════════════════════════════════════════════ */

/* Conteneur centré max-width */
.conteneur {
  max-width: var(--max-cont);
  margin: 0 auto;
  padding: 0 2rem;
}

/* Sections */
.section    { padding: 7rem 2rem; }
.section-sm { padding: 4rem 2rem; }
.fond-gris  { background: var(--gris-bg); }
.fond-noir  { background: var(--noir); }
.fond-noir h2, .fond-noir h3 { color: var(--blanc); }
.fond-noir p { color: rgba(255,255,255,0.6); }

/* En-tête de section centré */
.entete-section { text-align: center; margin-bottom: 4rem; }
.entete-section h2 { margin-bottom: 0.75rem; }
.entete-section p  { max-width: 540px; margin: 0 auto; font-size: 1.05rem; }

/* Petite étiquette colorée */
.etiquette {
  display: inline-block;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vert);
  background: var(--vert-clair);
  padding: 0.28rem 0.85rem;
  border-radius: 100px;
  margin-bottom: 0.75rem;
}
.fond-noir .etiquette { background: rgba(13,159,110,0.2); color: #6ee7c0; }

/* Grilles CSS */
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.grille-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
.grille-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }

/* Skip link (accessibilité clavier) */
.skip-lien {
  position: absolute; top: -60px; left: 1rem; z-index: 9999;
  background: var(--vert); color: var(--blanc);
  padding: 0.5rem 1rem; border-radius: var(--rayon-sm);
  font-size: 0.85rem; font-weight: 600;
  transition: top 0.2s;
}
.skip-lien:focus { top: 1rem; text-decoration: none; }


/* ════════════════════════════════════════════════
   05. NAVIGATION
   ────────────────────────────────────────────────
   <header class="site-header"> sticky en haut.
   <nav> contient le logo + les liens.
════════════════════════════════════════════════ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gris-clair);
  box-shadow: var(--ombre-sm);
}
.nav-interieur {
  max-width: var(--max-cont); margin: 0 auto; padding: 0 2rem;
  height: 68px;
  display: flex; align-items: center; justify-content: space-between;
}

/* Logo */
.logo { font-family: var(--police-titres); font-size: 1.6rem; font-weight: 700; color: var(--noir); }
.logo span { color: var(--vert); }

/* Liens desktop */
.nav-liens { display: flex; align-items: center; gap: 0.2rem; }
.nav-liens a {
  color: var(--gris); font-size: 0.88rem; font-weight: 500;
  padding: 0.45rem 0.9rem; border-radius: var(--rayon-sm);
  transition: background var(--transition), color var(--transition);
}
.nav-liens a:hover, .nav-liens a.active {
  background: var(--vert-clair); color: var(--vert); text-decoration: none;
}
.nav-liens .btn-nav {
  background: var(--vert); color: var(--blanc) !important;
  padding: 0.5rem 1.2rem; border-radius: 100px; font-weight: 600;
  margin-left: 0.5rem;
}
.nav-liens .btn-nav:hover { background: var(--vert-fonce); }


/* ════════════════════════════════════════════════
   06. MENU MOBILE
════════════════════════════════════════════════ */
.burger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.burger span {
  display: block; width: 24px; height: 2px;
  background: var(--gris-fonce); border-radius: 2px; transition: var(--transition);
}
.nav-mobile {
  display: none; flex-direction: column;
  background: var(--blanc); border-top: 1px solid var(--gris-clair);
  padding: 1rem 2rem;
}
.nav-mobile.ouvert { display: flex; }
.nav-mobile a {
  color: var(--gris-fonce); font-size: 1rem; font-weight: 500;
  padding: 0.7rem 0; border-bottom: 1px solid var(--gris-clair);
  text-decoration: none;
}
.nav-mobile a:last-child { border-bottom: none; }


/* ════════════════════════════════════════════════
   07. BOUTONS
════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.8rem 1.8rem; border-radius: 100px;
  font-family: var(--police-corps); font-size: 0.9rem; font-weight: 600;
  text-decoration: none; cursor: pointer; border: none;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }

.btn-primaire   { background: var(--vert); color: var(--blanc); }
.btn-primaire:hover { background: var(--vert-fonce); box-shadow: 0 8px 20px rgba(13,159,110,0.3); }

.btn-contour    { background: transparent; color: var(--blanc); border: 2px solid rgba(255,255,255,0.5); }
.btn-contour:hover { background: rgba(255,255,255,0.1); }

.btn-secondaire { background: transparent; color: var(--vert); border: 2px solid var(--vert); }
.btn-secondaire:hover { background: var(--vert-clair); }


/* ════════════════════════════════════════════════
   08. HERO ACCUEIL
════════════════════════════════════════════════ */
.hero {
  min-height: 88vh; display: flex; align-items: center;
  justify-content: center; text-align: center;
  position: relative; overflow: hidden;
  padding: 6rem 2rem;
  background: var(--noir);
}
/* Fond décoratif SVG inline en base64 */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(15,28,21,0.90) 0%, rgba(7,122,84,0.65) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='600'%3E%3Crect fill='%23063d28' width='900' height='600'/%3E%3Ccircle fill='%230d9f6e' opacity='0.4' cx='700' cy='100' r='350'/%3E%3Ccircle fill='%23077a54' opacity='0.3' cx='100' cy='500' r='250'/%3E%3Crect fill='%230d9f6e' opacity='0.07' x='0' y='0' width='900' height='600'/%3E%3C/svg%3E");
  background-size: cover; background-position: center;
}
.hero-contenu { position: relative; z-index: 1; max-width: 740px; }
.hero-contenu h1  { color: var(--blanc); margin-bottom: 1rem; }
.hero-contenu > p { color: rgba(255,255,255,0.75); font-size: 1.15rem; margin-bottom: 2rem; }
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.hero .etiquette  { background: rgba(13,159,110,0.25); color: #6ee7c0; }

/* Chiffres clés dans le hero */
.hero-stats {
  display: flex; align-items: center; justify-content: center;
  gap: 2rem; margin-top: 4rem;
  padding-top: 2.5rem; border-top: 1px solid rgba(255,255,255,0.1);
  flex-wrap: wrap;
}
.stat-item { text-align: center; }
.stat-valeur { font-family: var(--police-titres); font-size: 2.5rem; font-weight: 700; color: #6ee7c0; line-height: 1; }
.stat-label  { font-size: 0.78rem; color: rgba(255,255,255,0.5); letter-spacing: 0.06em; }
.stat-sep    { width: 1px; height: 40px; background: rgba(255,255,255,0.15); }


/* ════════════════════════════════════════════════
   09. HERO PAGES INTERNES
════════════════════════════════════════════════ */
.hero-page {
  background: var(--noir); padding: 5rem 2rem 4rem;
  text-align: center; position: relative; overflow: hidden;
}
.hero-page::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(13,159,110,0.12), transparent);
}
.hero-page h1, .hero-page p { position: relative; z-index: 1; }
.hero-page h1 { color: var(--blanc); }
.hero-page  p { color: rgba(255,255,255,0.6); }

/* Fil d'Ariane */
.fil-ariane {
  font-size: 0.78rem; color: rgba(255,255,255,0.4);
  display: flex; align-items: center; justify-content: center;
  gap: 0.4rem; margin-bottom: 0.75rem;
  position: relative; z-index: 1;
}
.fil-ariane a { color: rgba(255,255,255,0.45); }
.fil-ariane a:hover { color: #6ee7c0; }


/* ════════════════════════════════════════════════
   10. CARTES SERVICES
════════════════════════════════════════════════ */
.carte-service {
  background: var(--blanc); border: 1px solid var(--gris-clair);
  border-radius: var(--rayon-lg); padding: 2rem;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.carte-service:hover { transform: translateY(-4px); box-shadow: var(--ombre-lg); border-color: var(--vert); }
.icone-service {
  width: 52px; height: 52px; background: var(--vert-clair);
  border-radius: var(--rayon-md); display: flex;
  align-items: center; justify-content: center;
  font-size: 1.4rem; margin-bottom: 1rem;
}
.carte-service h3 { margin-bottom: 0.5rem; font-size: 1.1rem; }
.carte-service p  { font-size: 0.9rem; margin-bottom: 0; }
.lien-service {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.85rem; font-weight: 600; color: var(--vert);
  margin-top: 1rem; transition: gap var(--transition);
}
.carte-service:hover .lien-service { gap: 0.6rem; }


/* ════════════════════════════════════════════════
   11. TÉMOIGNAGES
════════════════════════════════════════════════ */
.carte-temoignage {
  background: var(--blanc); border: 1px solid var(--gris-clair);
  border-left: 4px solid var(--vert); border-radius: var(--rayon-md);
  padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem;
}
.temoignage-texte { font-style: italic; font-size: 0.95rem; line-height: 1.75; margin-bottom: 0; }
.temoignage-auteur { display: flex; align-items: center; gap: 0.75rem; }
.avatar-ini {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--vert-clair); color: var(--vert);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.88rem; flex-shrink: 0;
}
.temo-nom   { font-weight: 700; color: var(--gris-fonce); font-size: 0.9rem; }
.temo-poste { font-size: 0.78rem; color: var(--gris); }
.etoiles    { color: #f59e0b; letter-spacing: 2px; font-size: 0.85rem; }


/* ════════════════════════════════════════════════
   12. VIDÉO DE PRÉSENTATION
   ────────────────────────────────────────────────
   <video autoplay muted loop playsinline>
   autoplay  = démarrage auto
   muted     = sans son (obligatoire pour autoplay)
   loop      = boucle infinie
════════════════════════════════════════════════ */
.section-video { background: var(--noir); padding: 7rem 2rem; }
.video-grille {
  display: grid; grid-template-columns: 1fr 1.25fr;
  gap: 4rem; align-items: center;
  max-width: var(--max-cont); margin: 0 auto;
}
.video-texte h2 { color: var(--blanc); margin-bottom: 1rem; }
.video-texte p  { color: rgba(255,255,255,0.6); }
.video-texte .btn-primaire { margin-top: 1.5rem; }
/* Conteneur de la vidéo : maintient le ratio 16:9 */
.video-enveloppe {
  border-radius: var(--rayon-lg); overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  aspect-ratio: 16/9;
}
.video-enveloppe video { width: 100%; height: 100%; object-fit: cover; }


/* ════════════════════════════════════════════════
   13. ACCORDÉON details/summary
   ────────────────────────────────────────────────
   <details> = bloc repliable natif HTML5.
   <summary> = en-tête cliquable du bloc.
   CSS natif : pas de JavaScript nécessaire !
════════════════════════════════════════════════ */
.accordeon {
  border: 1px solid var(--gris-clair); border-radius: var(--rayon-md);
  overflow: hidden; margin-bottom: 0.75rem;
  transition: border-color var(--transition);
}
.accordeon:hover, .accordeon[open] { border-color: var(--vert); }

/* summary = l'en-tête cliquable */
.accordeon summary {
  padding: 1.25rem 1.5rem; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; color: var(--gris-fonce); font-size: 0.95rem;
  list-style: none; background: var(--blanc);
  transition: background var(--transition); user-select: none;
}
.accordeon summary::-webkit-details-marker { display: none; } /* cache flèche Chrome */
.accordeon summary:hover { background: var(--gris-bg); }
/* Icône +/x à droite */
.accordeon summary::after { content: '+'; font-size: 1.4rem; color: var(--vert); transition: transform 0.25s; }
.accordeon[open] summary::after { transform: rotate(45deg); }

.accordeon-corps {
  padding: 0 1.5rem 1.5rem; background: var(--blanc);
  color: var(--gris); font-size: 0.92rem; line-height: 1.75;
}
.accordeon-corps ul { margin: 0.5rem 0 0 1.25rem; list-style: disc; }
.accordeon-corps li { margin-bottom: 0.3rem; }


/* ════════════════════════════════════════════════
   14. TABLEAU DE TARIFS
   ────────────────────────────────────────────────
   colspan = fusionner plusieurs colonnes
   rowspan = fusionner plusieurs lignes
   overflow-x: auto = défilement horizontal sur mobile
════════════════════════════════════════════════ */
.tableau-enveloppe {
  overflow-x: auto;
  border-radius: var(--rayon-lg);
  border: 1px solid var(--gris-clair);
  box-shadow: var(--ombre-sm);
}
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
thead { background: var(--noir); color: var(--blanc); }
thead th {
  padding: 1rem 1.5rem; text-align: center;
  font-family: var(--police-corps); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
thead th:first-child { text-align: left; }
tbody tr { border-bottom: 1px solid var(--gris-clair); transition: background 0.15s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--gris-bg); }
tbody th {
  padding: 1rem 1.5rem; text-align: left;
  font-weight: 600; color: var(--gris-fonce); white-space: nowrap;
}
tbody td { padding: 1rem 1.5rem; text-align: center; color: var(--gris); }
tfoot td {
  padding: 0.75rem 1.5rem; font-size: 0.78rem;
  color: var(--gris); background: var(--gris-bg);
  border-top: 1px solid var(--gris-clair);
}
.oui  { color: #059669; font-weight: 700; }
.non  { color: var(--gris-clair); }
.badge-vedette {
  display: inline-block; background: var(--vert); color: white;
  font-size: 0.65rem; padding: 0.1rem 0.45rem; border-radius: 100px;
  margin-left: 0.3rem; vertical-align: middle; font-weight: 700;
}


/* ════════════════════════════════════════════════
   15. GALERIE D'IMAGES
   ────────────────────────────────────────────────
   <picture> + <source srcset> = images responsives
   srcset = liste d'images selon la taille d'écran
   loading="lazy" = chargement différé (performance)
════════════════════════════════════════════════ */
.grille-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1rem;
}
.item-galerie {
  position: relative; border-radius: var(--rayon-md);
  overflow: hidden; aspect-ratio: 4/3;
  background: var(--gris-bg); cursor: pointer;
}
.item-galerie img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease;
}
.item-galerie:hover img { transform: scale(1.08); }

/* Légende apparaît au survol */
.cap-galerie {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(15,28,21,0.85));
  color: var(--blanc); padding: 2rem 1rem 0.75rem;
  font-size: 0.85rem; font-weight: 600;
  transform: translateY(100%); transition: transform 0.3s ease;
}
.item-galerie:hover .cap-galerie,
.item-galerie:focus-within .cap-galerie { transform: translateY(0); }

/* Placeholder coloré (quand pas d'image réelle) */
.ph {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.5rem; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.65);
}
.ph em { font-size: 2.2rem; font-style: normal; }
.ph-1 { background: linear-gradient(135deg, #063d28, #0d9f6e); }
.ph-2 { background: linear-gradient(135deg, #1e3a5f, #2563eb); }
.ph-3 { background: linear-gradient(135deg, #4a1d96, #7c3aed); }
.ph-4 { background: linear-gradient(135deg, #7c2d12, #ea580c); }
.ph-5 { background: linear-gradient(135deg, #1c1917, #57534e); }
.ph-6 { background: linear-gradient(135deg, #064e3b, #059669); }
.ph-7 { background: linear-gradient(135deg, #1e1b4b, #4f46e5); }
.ph-8 { background: linear-gradient(135deg, #450a0a, #dc2626); }
.ph-9 { background: linear-gradient(135deg, #0c4a6e, #0284c7); }

/* Filtres */
.filtres-galerie {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  margin-bottom: 2rem; justify-content: center;
}
.btn-filtre {
  padding: 0.4rem 1rem; border: 1.5px solid var(--gris-clair);
  border-radius: 100px; background: var(--blanc);
  font-size: 0.82rem; font-weight: 600; cursor: pointer;
  transition: all var(--transition); font-family: var(--police-corps);
}
.btn-filtre:hover, .btn-filtre.actif { background: var(--vert); color: var(--blanc); border-color: var(--vert); }


/* ════════════════════════════════════════════════
   16. ÉQUIPE — figure + figcaption
   ────────────────────────────────────────────────
   <figure>     = regroupe image + sa légende
   <figcaption> = légende de la figure
   Balises sémantiques HTML5 pour le contenu visuel.
════════════════════════════════════════════════ */
.carte-membre {
  background: var(--blanc); border: 1px solid var(--gris-clair);
  border-radius: var(--rayon-lg); overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.carte-membre:hover { transform: translateY(-4px); box-shadow: var(--ombre-lg); }

/* figure = balise HTML autour de l'image + figcaption */
.carte-membre figure { display: flex; flex-direction: column; }

/* Photo (placeholder texte si pas d'image) */
.photo-membre {
  width: 100%; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--police-titres); font-size: 3.5rem; font-weight: 700;
  color: var(--vert);
  background: linear-gradient(135deg, var(--vert-clair), #d1fae5);
}

/* figcaption = la légende (infos du membre) */
.carte-membre figcaption { padding: 1.25rem; }
.membre-nom   { font-weight: 700; color: var(--gris-fonce); font-size: 1rem; margin-bottom: 0.2rem; }
.membre-poste { font-size: 0.82rem; color: var(--vert); font-weight: 600; margin-bottom: 0.5rem; }
.membre-bio   { font-size: 0.83rem; color: var(--gris); margin-bottom: 0; }
.membre-liens { display: flex; gap: 0.4rem; margin-top: 0.75rem; }
.lien-membre  {
  width: 30px; height: 30px; border-radius: var(--rayon-sm);
  background: var(--gris-bg); display: flex; align-items: center;
  justify-content: center; font-size: 0.85rem; transition: background var(--transition);
}
.lien-membre:hover { background: var(--vert-clair); text-decoration: none; }


/* ════════════════════════════════════════════════
   17. FORMULAIRE DE CONTACT
════════════════════════════════════════════════ */
.form-card {
  background: var(--blanc); border: 1px solid var(--gris-clair);
  border-radius: var(--rayon-lg); padding: 2.5rem; box-shadow: var(--ombre-md);
}
.form-card h2 { margin-bottom: 0.5rem; }
.form-card > p { margin-bottom: 2rem; }

/* Grille de champs 2 colonnes */
.grille-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.grille-champs .full { grid-column: 1 / -1; }

.champ { display: flex; flex-direction: column; gap: 0.35rem; }
.champ label {
  font-size: 0.82rem; font-weight: 600; color: var(--gris-fonce);
  display: flex; align-items: center; gap: 0.3rem;
}
.req  { color: var(--rouge); font-size: 0.75rem; }
.aide { font-size: 0.72rem; color: var(--gris); }

/* Inputs, select, textarea */
.champ input[type="text"],
.champ input[type="email"],
.champ input[type="tel"],
.champ input[type="date"],
.champ input[type="file"],
.champ select,
.champ textarea {
  width: 100%; padding: 0.65rem 0.9rem;
  border: 1.5px solid var(--gris-clair); border-radius: var(--rayon-sm);
  font-family: var(--police-corps); font-size: 0.9rem; color: var(--gris-fonce);
  background: var(--gris-bg); outline: none;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  border-color: var(--vert); background: var(--blanc);
  box-shadow: 0 0 0 3px rgba(13,159,110,0.12);
}
.champ textarea { resize: vertical; min-height: 120px; }
.champ select { cursor: pointer; }

/* Groupe radio/checkbox : cartes cliquables */
.groupe-choix { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.option {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.9rem; border: 1.5px solid var(--gris-clair);
  border-radius: 100px; cursor: pointer; font-size: 0.85rem;
  font-weight: 500; color: var(--gris);
  transition: all var(--transition); user-select: none;
}
.option:hover { border-color: var(--vert); background: var(--vert-clair); color: var(--vert); }
.option input { width: 14px; height: 14px; accent-color: var(--vert); flex-shrink: 0; }
.option:has(input:checked) { border-color: var(--vert); background: var(--vert-clair); color: var(--vert); font-weight: 600; }

/* Checkbox CGU */
.cgu-ligne {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 1rem; background: var(--vert-clair);
  border: 1.5px solid rgba(13,159,110,0.25); border-radius: var(--rayon-sm);
}
.cgu-ligne input[type="checkbox"] {
  width: 17px; height: 17px; flex-shrink: 0;
  margin-top: 2px; accent-color: var(--vert); cursor: pointer;
}
.cgu-ligne label { font-size: 0.85rem; font-weight: 400; color: var(--gris-fonce); cursor: pointer; }
.cgu-ligne a { color: var(--vert); text-decoration: underline; }

/* Bouton submit */
.btn-submit {
  background: var(--vert); color: var(--blanc); border: none;
  border-radius: 100px; padding: 0.9rem 2.25rem;
  font-family: var(--police-corps); font-size: 0.95rem; font-weight: 600;
  cursor: pointer; width: 100%; margin-top: 0.5rem;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn-submit:hover { background: var(--vert-fonce); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(13,159,110,0.3); }

/* Bannière succès */
.msg-succes {
  display: none; background: #d1fae5; border: 1.5px solid #6ee7b7;
  border-radius: var(--rayon-md); padding: 1.25rem; text-align: center;
  color: #065f46; font-weight: 600; margin-top: 1rem;
}
.msg-succes.visible { display: block; }


/* ════════════════════════════════════════════════
   18. CARTE GOOGLE MAPS (iframe)
════════════════════════════════════════════════ */
.carte-maps { border-radius: var(--rayon-lg); overflow: hidden; border: 1px solid var(--gris-clair); box-shadow: var(--ombre-sm); }
.carte-maps iframe { display: block; width: 100%; height: 300px; border: none; }

.infos-contact { display: flex; flex-direction: column; gap: 0.75rem; }
.ligne-info { display: flex; align-items: flex-start; gap: 0.75rem; }
.ico-info {
  width: 38px; height: 38px; border-radius: var(--rayon-sm);
  background: var(--vert-clair); display: flex;
  align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0;
}
.ligne-info p { margin-bottom: 0; font-size: 0.9rem; }
.ligne-info strong { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gris); margin-bottom: 0.1rem; }


/* ════════════════════════════════════════════════
   19. FOOTER
   ────────────────────────────────────────────────
   Contient : plan du site + mentions légales
════════════════════════════════════════════════ */
.site-footer { background: var(--noir); color: rgba(255,255,255,0.55); padding: 4rem 2rem 0; }
.footer-grille {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem;
  padding-bottom: 4rem; max-width: var(--max-cont); margin: 0 auto;
}
.footer-marque .logo { color: var(--blanc); font-size: 1.5rem; }
.footer-marque .logo span { color: #6ee7c0; }
.footer-marque p { font-size: 0.87rem; margin-top: 0.75rem; }

.footer-col h4 {
  color: var(--blanc); font-family: var(--police-corps);
  font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.1em; margin-bottom: 1rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.4rem; }
.footer-col a { color: rgba(255,255,255,0.45); font-size: 0.87rem; }
.footer-col a:hover { color: #6ee7c0; text-decoration: none; }

.footer-bas {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 1.25rem 0; max-width: var(--max-cont); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.5rem; font-size: 0.78rem;
}
.footer-bas a { color: rgba(255,255,255,0.35); }
.footer-bas a:hover { color: #6ee7c0; }


/* ════════════════════════════════════════════════
   20. RESPONSIVE — Media Queries
   ────────────────────────────────────────────────
   @media (max-width: Xpx) = styles pour petits écrans
════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .grille-4 { grid-template-columns: repeat(2,1fr); }
  .footer-grille { grid-template-columns: 1fr 1fr; }
  .video-grille  { grid-template-columns: 1fr; }
  .video-texte   { text-align: center; }
}

@media (max-width: 640px) {
  /* Nav mobile */
  .nav-liens { display: none; }
  .burger    { display: flex; }

  /* Sections */
  .section    { padding: 4rem 1.25rem; }
  .section-sm { padding: 3rem 1.25rem; }

  /* Grilles → 1 colonne */
  .grille-2, .grille-3, .grille-4 { grid-template-columns: 1fr; }
  .grille-champs { grid-template-columns: 1fr; }

  /* Hero */
  .hero { min-height: 70vh; }
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-stats { gap: 1.5rem; }
  .stat-sep { display: none; }

  /* Footer */
  .footer-grille { grid-template-columns: 1fr; }
  .footer-bas { flex-direction: column; text-align: center; }

  /* Tableau scroll horizontal */
  .tableau-enveloppe { overflow-x: auto; }
  table { min-width: 580px; }
}


/* ════════════════════════════════════════════════
   21. ANIMATIONS
   ────────────────────────────────────────────────
   Classes à ajouter sur les éléments à animer.
   JavaScript ajoute .visible pour déclencher.
════════════════════════════════════════════════ */
@keyframes monterFade {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animer           { animation: monterFade 0.65s ease both; }
.animer-1         { animation-delay: 0.1s; }
.animer-2         { animation-delay: 0.2s; }
.animer-3         { animation-delay: 0.3s; }
.animer-4         { animation-delay: 0.4s; }

/* Révélation au scroll via IntersectionObserver */
.a-reveler {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.a-reveler.visible { opacity: 1; transform: translateY(0); }