/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE.CSS — Corrections et améliorations responsive complètes
   Site : Guèdègbé Togbédji Rodrigue
   Date : 15 septembre 2026
   
   APPROCHE : Réduction progressive de la composition originale
   Breakpoints : 1920 → 1600 → 1440 → 1280 → 1024 → 900 → 768 
                 → 600 → 480 → 414 → 375 → 360 → 320
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 0. RESET GLOBAL ANTI-DÉBORDEMENT ──────────────────────────── */
html {
  overflow-x: hidden;
  width: 100%;
}
body {
  overflow-x: hidden;
  width: 100%;
  min-width: 320px;
}

/* Toutes les images restent dans leur conteneur */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Évite les débordements sur les enfants Grid/Flex */
* { min-width: 0; }

/* ─── 1. CONTENEURS FLUIDES ─────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(.9rem, 4vw, 3rem);
}

/* ─── 2. NAVBAR — réduction progressive ────────────────────────── */

/* ≤ 1280px : réduit les espacements de la navbar */
@media (max-width: 1280px) {
  .nav-container {
    gap: clamp(.8rem, 1.5vw, 2rem);
    padding-inline: clamp(1rem, 3vw, 2.5rem);
  }
  .nav-link {
    padding: .45rem clamp(.4rem, .6vw, .75rem);
    font-size: clamp(.58rem, .72vw, .72rem);
  }
}

/* ≤ 1100px : encore plus compact */
@media (max-width: 1100px) {
  .nav-container { gap: .6rem; }
  .nav-link { padding: .4rem .5rem; letter-spacing: .03em; }
  .btn-collaborer { padding: .55rem 1rem; }
}

/* ─── 3. HERO — corrections débordement et proportions ─────────── */

/* Desktop large : s'assure que les 2 colonnes sont équilibrées */
@media (min-width: 901px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    overflow: hidden; /* Sur desktop, on peut masquer les débordements */
  }
  .hero-left {
    min-width: 0;
    padding-inline: clamp(2rem, 4vw, 5rem);
  }
  .hero-left-inner {
    max-width: min(560px, 100%);
  }
  .hero-right {
    min-width: 0;
  }
}

/* Hero : titre fluide amélioré */
.hero-name {
  font-size: clamp(2rem, 5.5vw, 5.5rem);
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: none;
}

/* Hero roles : évite le débordement */
.hero-roles {
  flex-wrap: wrap;
  gap: .3rem .6rem;
}

/* Hero CTA : empêche les boutons de dépasser */
.hero-cta {
  flex-wrap: wrap;
  gap: .8rem;
}
.hero-cta .btn {
  min-height: 44px; /* Zone tactile */
}

/* Hero stats : s'adaptent en flex-wrap si besoin */
.hero-stats {
  flex-wrap: wrap;
  gap: .8rem 1.5rem;
}

/* ─── 4. SECTION À PROPOS ───────────────────────────────────────── */

@media (min-width: 769px) {
  .apropos-grid {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 4vw, 5rem);
    align-items: center;
  }
}

/* ─── 5. TIMELINE ───────────────────────────────────────────────── */
@media (min-width: 769px) {
  .timeline {
    max-width: 900px;
    margin-inline: auto;
  }
}

/* ─── 6. PARCOURS CARDS ─────────────────────────────────────────── */

/* Desktop : cards en liste horizontale stable */
@media (min-width: 901px) {
  .parcours-cards {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2vw, 1.5rem);
    padding-inline: clamp(1rem, 3vw, 3rem);
  }
  .parcours-card {
    display: grid;
    grid-template-columns: clamp(180px, 22vw, 280px) 1fr;
    min-height: 160px;
  }
  .parcours-card-photo-wrap {
    min-height: 160px;
    width: 100%;
  }
  .parcours-card-photo {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
  }
}

/* Tablette 768–900px */
@media (max-width: 900px) and (min-width: 601px) {
  .parcours-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-inline: clamp(.8rem, 3vw, 2rem);
  }
  .parcours-card {
    display: grid;
    grid-template-columns: clamp(110px, 28vw, 200px) 1fr;
    min-height: 140px;
  }
  .parcours-card-photo-wrap {
    min-height: 140px;
  }
}

/* ─── 7. PROJETS GRID ───────────────────────────────────────────── */

@media (min-width: 901px) {
  .projets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
  }
}

/* Image projets proportions correctes */
.projet-img-wrapper {
  overflow: hidden;
  position: relative;
}
.projet-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform .4s ease;
}

/* ─── 8. VALEURS GRID ───────────────────────────────────────────── */

@media (min-width: 769px) {
  .valeurs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
  }
}

/* ─── 9. CULTURE GALLERY ────────────────────────────────────────── */

@media (min-width: 769px) {
  .culture-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
    gap: clamp(.5rem, 1vw, 1rem);
  }
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1;
}

/* ─── 10. IMPACT ────────────────────────────────────────────────── */

@media (min-width: 769px) {
  .impact-pillars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
  }
}

/* ─── 11. MÉDIAS / GALERIE ──────────────────────────────────────── */

@media (min-width: 769px) {
  .masonry-grid {
    columns: clamp(2, 3, 4);
    gap: clamp(.5rem, 1vw, 1rem);
  }
}
.masonry-item {
  break-inside: avoid;
  margin-bottom: clamp(.5rem, 1vw, 1rem);
}
.masonry-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--r, 10px);
}

/* ─── 12. ACTUALITÉS ────────────────────────────────────────────── */

@media (min-width: 769px) {
  .actualites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
  }
}
.article-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ─── 13. CONTACT FORMULAIRE ────────────────────────────────────── */

.contact-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
}
@media (min-width: 769px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    align-items: start;
  }
}

/* Champs formulaire : 44px minimum pour zone tactile */
.form-input,
.form-select,
.form-textarea {
  min-height: 44px;
  width: 100%;
}

/* Bouton envoi formulaire */
.form-submit {
  min-height: 48px;
  width: 100%;
}

/* Email dans contact : overflow sur petits écrans */
.contact-value {
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* ─── 14. FOOTER ────────────────────────────────────────────────── */

@media (min-width: 769px) {
  .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
  }
}

/* ─── 15. PANNEAUX DÉTAIL ───────────────────────────────────────── */

.detail-panel {
  width: min(560px, 100vw);
}
.detail-panel-body {
  padding: clamp(1.2rem, 4vw, 2rem);
}

/* ─── 16. BREAKPOINT 1440px ─────────────────────────────────────── */

@media (max-width: 1440px) {
  .hero-name {
    font-size: clamp(2.5rem, 5vw, 5rem);
  }
}

/* ─── 17. BREAKPOINT 1280px ─────────────────────────────────────── */

@media (max-width: 1280px) {
  .hero-left {
    padding-inline: clamp(2rem, 4vw, 4rem);
  }
  .hero-name {
    font-size: clamp(2.2rem, 4.5vw, 4.5rem);
  }
  .section-title {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  }
}

/* ─── 18. BREAKPOINT 1024px ─────────────────────────────────────── */

@media (max-width: 1024px) {
  .hero-name {
    font-size: clamp(2rem, 4.2vw, 4rem);
  }
  .hero-left {
    padding-inline: clamp(1.5rem, 3.5vw, 3.5rem);
  }
}

/* ─── 19. BREAKPOINT 900px ──────────────────────────────────────── */

@media (max-width: 900px) {
  /* Hero : passe en 1 colonne avec photo en background */
  .hero {
    grid-template-columns: 1fr;
    overflow: hidden;
  }
}

/* ─── 20. BREAKPOINT 768px ──────────────────────────────────────── */

@media (max-width: 768px) {

  /* Titres adaptés */
  .section-title {
    font-size: clamp(1.5rem, 6vw, 2.2rem);
    line-height: 1.2;
  }
  .hero-name {
    font-size: clamp(2rem, 9vw, 3.5rem);
  }

  /* Espacements réduits mais présents */
  .section {
    padding-block: clamp(2.5rem, 7vw, 5rem);
  }

  /* Boutons full width sur mobile */
  .hero-cta .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  /* Cards max-width pour éviter les cartes trop larges */
  .parcours-card,
  .projet-card,
  .article-card {
    max-width: 480px;
    margin-inline: auto;
    width: 100%;
  }

  /* Pagination détail */
  .detail-pagination {
    flex-direction: column;
    gap: .8rem;
  }
  .detail-pagination-prev,
  .detail-pagination-next {
    width: 100%;
    justify-content: center;
  }
}

/* ─── 21. BREAKPOINT 600px ──────────────────────────────────────── */

@media (max-width: 600px) {
  :root {
    --nav-h: 60px;
  }

  .section-title {
    font-size: clamp(1.4rem, 7.5vw, 2rem);
  }

  .hero-name {
    font-size: clamp(1.9rem, 10vw, 3rem);
  }

  /* Contact : email wrap correct */
  .contact-item {
    flex-wrap: wrap;
  }
  .contact-value {
    font-size: clamp(.75rem, 3.5vw, .9rem);
  }

  /* Formulaire : row en column */
  .form-row {
    grid-template-columns: 1fr;
  }

  /* Footer : tout centré */
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-nav ul,
  .footer-contact ul {
    align-items: center;
  }

  /* Galerie 1 colonne */
  .culture-gallery {
    grid-template-columns: 1fr;
  }
  .masonry-grid {
    columns: 1;
  }
}

/* ─── 22. BREAKPOINT 480px ──────────────────────────────────────── */

@media (max-width: 480px) {
  :root {
    --nav-h: 56px;
  }

  .container {
    padding-inline: .9rem;
  }

  .section-title {
    font-size: clamp(1.3rem, 7vw, 1.8rem);
  }

  .hero-name {
    font-size: clamp(1.8rem, 9.5vw, 2.6rem);
  }

  /* Logo navbar : taille réduite */
  .logo-text {
    font-size: clamp(.52rem, 2.5vw, .7rem);
    letter-spacing: .06em;
  }

  /* Boutons plus petits */
  .btn {
    padding: .7rem 1.2rem;
    font-size: clamp(.6rem, 3vw, .72rem);
  }

  /* Cards valeurs 1 colonne */
  .valeurs-grid {
    grid-template-columns: 1fr;
  }

  /* Panneaux detail */
  .detail-panel {
    width: 100vw;
  }

  /* Contact form */
  .contact-form-wrapper {
    padding: 1rem;
  }
}

/* ─── 23. BREAKPOINT 414px ──────────────────────────────────────── */

@media (max-width: 414px) {
  .hero-name {
    font-size: clamp(1.7rem, 9vw, 2.4rem);
  }

  .hero-roles {
    font-size: clamp(.75rem, 3.5vw, .9rem);
    flex-direction: column;
    align-items: center;
    gap: .2rem;
  }
  .hero-role-sep {
    display: none;
  }

  .hero-stats {
    gap: .6rem 1rem;
  }

  .section-title {
    font-size: clamp(1.2rem, 7vw, 1.7rem);
  }

  /* Badge hero plus petit */
  .hero-tag {
    font-size: clamp(.55rem, 3vw, .7rem);
  }
}

/* ─── 24. BREAKPOINT 375px ──────────────────────────────────────── */

@media (max-width: 375px) {
  :root {
    --nav-h: 54px;
  }

  .container {
    padding-inline: .75rem;
  }

  .hero-name {
    font-size: clamp(1.6rem, 8.5vw, 2.2rem);
  }

  .hero-left {
    padding-inline: .8rem;
  }

  /* Titre sections plus compact */
  .section-title {
    font-size: clamp(1.15rem, 7vw, 1.6rem);
  }

  /* Stats hero */
  .hero-stat strong {
    font-size: clamp(1.1rem, 5.5vw, 1.5rem);
  }

  /* Drawer mobile */
  .mobile-drawer {
    width: 100vw;
  }
}

/* ─── 25. BREAKPOINT 360px ──────────────────────────────────────── */

@media (max-width: 360px) {
  .hero-name {
    font-size: clamp(1.5rem, 8vw, 2rem);
    letter-spacing: -.01em;
  }

  .hero-cta .btn {
    max-width: 100%;
    padding: .75rem 1rem;
  }

  .btn-collaborer {
    display: none; /* Sur très petits écrans, masqué */
  }
}

/* ─── 26. BREAKPOINT 320px ──────────────────────────────────────── */

@media (max-width: 320px) {
  :root {
    --nav-h: 52px;
  }

  .container {
    padding-inline: .6rem;
  }

  .hero-name {
    font-size: clamp(1.4rem, 7.5vw, 1.8rem);
  }

  .section-title {
    font-size: clamp(1rem, 6.5vw, 1.4rem);
  }

  .hero-stat strong {
    font-size: clamp(1rem, 5vw, 1.3rem);
  }

  /* Tout en colonne */
  .hero-roles {
    flex-direction: column;
  }
  .hero-role-sep {
    display: none;
  }
}

/* ─── 27. GRANDS ÉCRANS ≥ 1600px ────────────────────────────────── */

@media (min-width: 1600px) {
  .container {
    max-width: 1400px;
  }
  .hero-left {
    padding-inline: clamp(4rem, 6vw, 7rem);
  }
  .hero-name {
    font-size: clamp(4rem, 5.5vw, 6rem);
  }
}

@media (min-width: 1920px) {
  .container {
    max-width: 1600px;
  }
  .hero-name {
    font-size: clamp(4.5rem, 5vw, 6.5rem);
  }
}

/* ─── 28. ACCESSIBILITÉ ET ZONES TACTILES ───────────────────────── */

/* Toutes les zones interactives : min 44×44px */
button,
a.btn,
.btn,
.nav-link,
.drawer-link,
.hamburger,
.detail-close,
.drawer-close,
.hero-social-link,
.social-link,
.filter-btn,
.projet-link,
.article-link,
.parcours-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Focus visible sur tous les éléments interactifs */
:focus-visible {
  outline: 2px solid var(--orange, #F97316);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link accessibilité */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  padding: .5rem 1rem;
  background: var(--orange, #F97316);
  color: white;
  border-radius: 4px;
  font-weight: 700;
  z-index: 9999;
  transition: top .2s;
}
.skip-link:focus {
  top: 1rem;
}

/* ─── 29. CORRECTIONS SPÉCIFIQUES ───────────────────────────────── */

/* Email dans contact : évite le débordement horizontal */
a[href^="mailto"] {
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* Images cards parcours : ratio correct */
.parcours-card-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Éviter que les panneaux détail sortent de l'écran */
.detail-panel {
  max-width: 100vw;
}

/* Overlay festival page */
.fest-page-overlay {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ─── 30. PERFORMANCE ───────────────────────────────────────────── */

/* Images lazy : réservent l'espace avant chargement */
img[loading="lazy"] {
  background: var(--gris-100, #f1f5f9);
}

/* Animations réduites pour accessibilité */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── 31. CORRECTIONS SAFARI MOBILE ────────────────────────────── */

/* 100svh fallback Safari */
@supports not (min-height: 100svh) {
  .hero {
    min-height: 100vh;
  }
  .mobile-drawer {
    height: 100vh;
  }
}

/* Overflow fix iOS Safari */
.mobile-drawer {
  -webkit-overflow-scrolling: touch;
}

/* ─── 32. PRINT ─────────────────────────────────────────────────── */

@media print {
  .navbar,
  .hamburger,
  .mobile-drawer,
  .drawer-overlay,
  .hero-scroll,
  .btn,
  .detail-panel,
  .fest-page-overlay {
    display: none !important;
  }
  body {
    font-size: 12pt;
    color: #000;
  }
  .hero {
    min-height: auto;
    padding: 2rem;
  }
}

/* ─── CORRECTIONS MOBILE HERO + NAVBAR + PARCOURS PHOTOS ────────── */

/* === HERO MOBILE : suppression photo arrière-plan === */
@media (max-width: 900px) {

  /* Cacher complètement la photo hero sur mobile */
  .hero-right {
    display: none !important;
  }

  /* Fond uni bleu sombre pour le hero sans photo */
  .hero {
    background: linear-gradient(160deg, var(--bleu-900, #0D1F3C) 0%, var(--bleu, #1B3A6B) 100%);
    min-height: 100svh;
  }

  /* Hero-left : plus besoin du gradient photo, fond propre */
  .hero-left {
    background: transparent !important;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding-block: calc(var(--nav-h, 64px) + 2.5rem) 4rem;
  }

  /* Accueil : float badge inutile sans photo */
  .hero-float-badge {
    display: none !important;
  }
}

/* === NAVBAR MOBILE : bouton Collaborer + hamburger === */
@media (max-width: 900px) {

  .nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: clamp(1rem, 4vw, 1.5rem);
    gap: .5rem;
  }

  /* Logo prend l'espace disponible */
  .nav-logo {
    flex: 1;
    min-width: 0;
  }

  /* Bouton Collaborer navbar : bien visible */
  .btn-collaborer {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: .55rem 1rem;
    font-size: .65rem;
    letter-spacing: .06em;
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 36px;
    border-radius: 6px;
    background: var(--orange, #F97316);
    color: #fff;
    font-weight: 700;
    order: 2;
  }

  /* Hamburger : toujours visible, taille correcte */
  .hamburger {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    gap: 5px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    order: 3;
  }

  .ham-line {
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .25s, opacity .25s;
  }

  /* Bouton hero "Collaborer" : bien stylé */
  .btn-ghost {
    background: rgba(255,255,255,.12) !important;
    border: 2px solid rgba(255,255,255,.4) !important;
    color: #fff !important;
    backdrop-filter: blur(4px);
  }
  .btn-ghost:hover {
    background: rgba(255,255,255,.22) !important;
    border-color: rgba(255,255,255,.7) !important;
  }
}

/* === PHOTOS PARCOURS : visages bien centrés === */

/* Pages détail parcours : photo hero centrée en haut */
.detail-hero {
  background-position: center top !important;
}

/* Cards parcours index : photo centrée en haut pour les visages */
.parcours-card-photo {
  background-position: center 15% !important;
}

/* Galerie photos parcours detail */
.detail-gallery-item img {
  object-position: center 20%;
}

/* Images portrait dans le site (apropos, projets) */
.apropos-img,
.projet-img {
  object-position: center top !important;
}

/* Festival hero photo */
.fest-hero-bg,
.fest-page-hero-bg {
  background-position: center top !important;
}

/* Galerie culture : centrer les visages */
.gallery-item img {
  object-position: center 20%;
}