/* =========================================================
   Styles BC Rousseau — v2.14
   - Menu mobile: tailles harmonisées (mêmes tailles l1/l2 + bouton)
   - Anti-débordement iOS/Chrome (safe-areas, min-width, clip)
   - Accueil: grille actus 3→2→1 (plus d'auto-fill)
   - Nettoyage des doublons @media (font-size)
   ========================================================= */

/* -------------------------
   Variables de thème / UI
   ------------------------- */
:root{
  /* NAV */
  --nav-font-desktop: 20px;
  --nav-font-mobile: 14px;
  --nav-pad-mobile-y: 10px;
  --nav-pad-mobile-x: 14px;

  /* Footer */
  --footer-h: 56px;
}

/* =========================
   Base & reset
   ========================= */
* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
html { -webkit-text-size-adjust: 100%; }

.entete_image img { max-width: 100%; margin: 0; }

body {
  font-family: "Lato", sans-serif;
  margin: auto;
  max-width: 100%;
  border: 0;
  font-size: 16px;
}

h1 { font-size: 21px; color: #000; text-align: center; }
h2 { color: #000; font-size: 16px; }
p  { font-size: 16px; color: #000; font-variant: normal; }

table, td, ul { font-size: 16px; color: #000; font-variant: normal; }

a:active { text-decoration: none; }

/* Médias fluides par défaut */
img, video, canvas, svg { max-width: 100%; height: auto; display: block; }
iframe { max-width: 100%; display: block; }

/* Responsive base text */
@media (max-width: 680px) {
  body { font-size: 13px; }
  h1 { font-size: 15px; }
  h2 { font-size: 14px; }
  p, table, td, ul { font-size: 13px; }
}

/* DIV INCLUDE */
.include { margin-top: 4px; }
.include a:link, .include a:visited { color: #000; text-decoration: none; }
.include a:hover { text-decoration: underline; color: #999933; }
.include iframe { max-width: 100%; }

/* =========================
   Ancienne section .news (conservée)
   ========================= */
.news { max-width: 100%; }
.news img { width: 33%; height: 33%; float: right; padding: 25px; }
.news iframe { width: 25%; height: 500px; float: left; padding: 15px; }
@media (max-width: 680px) {
  .news img { width: 33.3%; float: left; padding: 5px; }
  .news iframe { width: 100%; height: 500px; }
}

/* =========================
   NAVBAR (desktop)
   ========================= */
.navbar { overflow: hidden; background-color: #333; }
.navbar a {
  float: left; font-size: var(--nav-font-desktop); color: #fff; text-align: center;
  padding: 10px 11px; text-decoration: none; display: inline-block;
}
.navbar img { float: right; font-size: 20px; color: white; padding: 1px 3px; }

.dropdown { float: left; overflow: hidden; }
.dropdown .dropbtn {
  font-size: var(--nav-font-desktop); border: none; outline: none; color: white;
  padding: 10px 11px; background: inherit; font-family: inherit; margin: 0;
  cursor: pointer;
}

.navbar a:hover, .dropdown:hover .dropbtn { background-color: red; }

.dropdown-content {
  display: none; position: absolute; background: #f9f9f9; min-width: 160px;
  box-shadow: 0 8px 16px rgba(0,0,0,.2); z-index: 9999;
}
.dropdown-content a {
  float: none; color: #000; padding: 12px 16px; text-decoration: none;
  display: block; text-align: left;
}
.dropdown-content a:hover { background-color: #ddd; }
.dropdown:hover .dropdown-content { display: block; }

/* Focus visible (clavier) */
.navbar a:focus-visible, .dropdown .dropbtn:focus-visible {
  outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 2px rgba(255,255,255,.5);
}

/* =========================
   NAV MOBILE
   ========================= */
.nav-toggle {
  display: none; background: #333; color: #fff; font-size: var(--nav-font-mobile); border: 0;
  padding: calc(var(--nav-pad-mobile-y) + 2px) var(--nav-pad-mobile-x); width: 100%; text-align: left;
}

@media (max-width: 680px) {
  .nav-toggle {
    display: block; position: sticky; top: 0; z-index: 1001;
    background: #2c2c2c;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
  }

  #main-nav { display: none !important; }
  #main-nav.is-open { display: block !important; }

  #main-nav {
    position: relative; background: #2b2b2b;
    border-top: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
  }

  /* Liens de niveau 1 (Home, rubriques) + boutons de dropdown */
  #main-nav > a, #main-nav .dropdown {
    float: none !important; clear: both !important; display: block !important; width: 100% !important;
    min-width: 0;
  }

  #main-nav > a,
  #main-nav .dropbtn {
    display: flex !important; align-items: center; gap: 8px;
    width: 100% !important; text-align: left;
    color: #fff; font-size: var(--nav-font-mobile);
    padding: var(--nav-pad-mobile-y) var(--nav-pad-mobile-x);
    border-top: 1px solid rgba(255,255,255,.06); background: transparent;
    line-height: 1.25;
  }
  #main-nav > a:hover, #main-nav .dropbtn:hover { background: #3a3a3a; }

  #main-nav .dropbtn::after {
    content: "▾"; margin-left: auto; transition: transform .18s ease; opacity: .9;
  }
  #main-nav .dropdown.open > .dropbtn::after { transform: rotate(180deg); }

  /* Liens de niveau 2 (contenu des dropdowns) */
  #main-nav .dropdown-content {
    position: static !important; display: none; width: 100% !important; min-width: 0 !important;
    margin: 6px 10px 10px; background: #222; border: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04); border-radius: 10px; overflow: hidden;
  }
  #main-nav .dropdown.open .dropdown-content { display: block; }

  #main-nav .dropdown-content a {
    display: block !important; float: none !important; width: 100% !important;
    padding: var(--nav-pad-mobile-y) var(--nav-pad-mobile-x);
    color: #eee; border-top: 1px solid rgba(255,255,255,.04);
    font-size: var(--nav-font-mobile);
    line-height: 1.25;
  }
  #main-nav .dropdown-content a:first-child { border-top: 0; }
  #main-nav .dropdown-content a:hover { background: #2b2b2b; }

  #main-nav a img { float: none !important; margin-left: 6px; vertical-align: middle; }

  #main-nav a:focus-visible, #main-nav .dropbtn:focus-visible {
    outline: 3px solid #fff; outline-offset: 2px; background: #3a3a3a;
  }

  /* Menu mobile scrollable + Connexion visible */
  #main-nav.is-open {
    max-height: calc(100vh - var(--footer-h) - 56px);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: var(--footer-h);
  }
  #main-nav.is-open > a.login-link {
    display: flex !important; visibility: visible !important;
    height: auto !important; opacity: 1 !important; order: 999;
  }
}

/* =========================
   Footer compact et safe-areas
   ========================= */
body { padding-bottom: var(--footer-h); }

.footer {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: #333; color: #fff; z-index: 1000;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.footer-content {
  max-width: 1200px; margin: 0 auto; padding: 6px 12px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; font-size: 14px; line-height: 1.2; white-space: nowrap;
  min-width: 0;
}

.footer-left, .footer-right { min-width: 0; }
.footer-left a { color: #fff; text-decoration: underline; }
.footer-right { display: flex; align-items: center; gap: 12px; overflow: hidden; }
.footer-right a { color: #fff; display: inline-flex; line-height: 1; transition: color .2s ease; }
.footer-right a:hover { color: #E67E30; }
.footer-right svg { width: 20px; height: 20px; display: block; }

@media (max-width: 480px) {
  .footer-content { white-space: normal; row-gap: 6px; flex-wrap: wrap; }
}

/* =========================
   SLIDESHOW / BANNIÈRE
   ========================= */
.slideshow-container {
  position: relative; width: 100%;
  height: clamp(220px, 28vw, 420px);
  overflow: hidden; background: #222;
}
.slideshow-container .mySlides:first-child { display: block; }
.slideshow-container .mySlides { position: absolute; inset: 0; display: none; }
.slideshow-container .mySlides img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  animation: zoomFade 12s infinite;
}
.slideshow-container::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.45));
}
.site-title {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-align: center;
  pointer-events: none; padding: 0 1rem;
}
.site-title__text {
  color: #fff; text-transform: uppercase; letter-spacing: .06em; font-weight: 800;
  font-size: clamp(22px, 3.4vw, 44px); text-shadow: 0 4px 10px rgba(0,0,0,.7);
  margin-bottom: 10px;
}
.site-logo {
  position: absolute; top: 60%; left: 50%; transform: translateX(-50%);
  max-width: 35px; width: 7vw; height: auto; opacity: .9;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
  animation: popIn .6s ease-out both, breathe 7s ease-in-out infinite .7s;
}
@keyframes popIn { 0%{transform:translateX(-50%) scale(.7);opacity:0;} 100%{transform:translateX(-50%) scale(1);opacity:1;} }
@keyframes breathe { 0%,100%{transform:translateX(-50%) translateY(0) scale(1);} 50%{transform:translateX(-50%) translateY(-2px) scale(1.05);} }
@keyframes zoomFade { 0%,100%{transform:scale(1);opacity:1;} 50%{transform:scale(1.1);opacity:.9;} }
@media (max-width: 680px) { .site-title__text { font-size: 1.3rem; } .site-logo { max-width: 42px; width: 14vw; top: 62%; } }

/* =========================
   Colonnes (prix)
   ========================= */
.columns { float: left; width: 25%; padding: 8px; }
.price { list-style: none; border: 1px solid #eee; margin: 0; padding: 0; transition: .3s; }
.price:hover { box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2); }
.price .header { background-color: #111; color: white; font-size: 25px; }
.price li { border-bottom: 1px solid #eee; padding: 20px; text-align: center; }
.price .grey { background-color: #eee; font-size: 15px; }
.button { background-color: #E67E30; border: none; color: white; padding: 10px 25px; text-align: center; text-decoration: none; font-size: 18px; }
@media (max-width: 600px) { .columns { width: 100%; } }

/* =========================
   UI divers (hérités)
   ========================= */
.accordion { background-color: #eee; color: #444; font-size: 16px; cursor: pointer; padding: 18px; width: 100%; text-align: left; border: none; outline: none; transition: .4s; }
.active, .accordion:hover { background-color: #ccc; }
.panel { padding: 0 18px; background-color: white; display: none; overflow: hidden; font-size: 16px; }

/* Vieux tabs (laisse en place si pages existantes s’en servent) */
.tab { float: left; border: 1px solid #ccc; background-color: #f1f1f1; width: 30%; height: 700px; font-size: 16px; }
.tab button { display: block; background-color: inherit; color: black; padding: 10px 6px; width: 100%; border: none; outline: none; text-align: left; cursor: pointer; transition: .3s; font-size: 17px; }
.tab button:hover { background-color: #ddd; }
.tab button.active { background-color: #ccc; }
.tabcontent { float: left; padding: 0 12px; border: 1px solid #ccc; width: 70%; border-left: none; height: 700px; }

/* Autocomplete, skills bar, tableau filtrable (hérités) */
.autocomplete { position: relative; display: inline-block; }
.autocomplete-items { position: absolute; border: 1px solid #d4d4d4; border-bottom: none; border-top: none; z-index: 99; top: 100%; left: 0; right: 0; }
.autocomplete-items div { padding: 10px; cursor: pointer; background-color: #fff; border-bottom: 1px solid #d4d4d4; }
.autocomplete-items div:hover { background-color: #e9e9e9; }
.autocomplete-active { background-color: DodgerBlue !important; color: #fff; }

.container { width: 100%; background-color: #ddd; }
.skills { text-align: right; padding: 10px 0; color: white; }
.html { width: 90%; background-color: #4CAF50; }
.css  { width: 80%; background-color: #2196F3; }
.js   { width: 65%; background-color: #f44336; }
.php  { width: 60%; background-color: #808080; }

#myInput {
  background-image: url('searchicon.png');
  background-position: 10px 12px; background-repeat: no-repeat;
  width: 200px; font-size: 13px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px;
}
#myTable { font-size: 14px; }
#myTable th, #myTable td { text-align: left; padding: 2px; }
#myTable tr { border-bottom: 1px solid #ddd; height: 30px; }
#myTable tr.header, #myTable tr:hover { background-color: #f1f1f1; }

.switch { position: relative; display: inline-block; width: 60px; height: 34px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; }
input[type=submit] { cursor: pointer; }
input:checked + .slider { background-color: #2196F3; }
input:focus + .slider { box-shadow: 0 0 1px #2196F3; }
input:checked + .slider:before { transform: translateX(26px); }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }

/* =========================
   Correctifs spécifiques Accueil (include/index.php)
   ========================= */
.home-section {
  max-width: 100%;
  overflow-x: clip; /* iOS 16+ */
  padding-left: max(12px, env(safe-area-inset-left)) !important;
  padding-right: max(12px, env(safe-area-inset-right)) !important;
}

/* Grille actus : 3 → 2 → 1 colonnes, sans auto-fill */
.home-section .news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  overflow-x: hidden;
  min-width: 0;
}
@media (max-width: 1024px) {
  .home-section .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .home-section .news-grid { grid-template-columns: 1fr; }
}

.home-section .home-layout,
.home-section .news-card {
  min-width: 0;
  max-width: 100%;
}

.home-section .news-card a { display: block; color: inherit; text-decoration: none; }
.home-section .news-card {
  background: #fff; border-radius: 10px; overflow: hidden;
}
.home-section .news-card img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain; /* affiches A4 non rognées */
}

.home-section .home-calendar { max-width: 100%; }
.home-section .calendar-embed { width: 100%; max-width: 100%; }
.home-section .calendar-embed iframe { width: 100%; height: 100%; border: 0; }

@media (max-width: 360px) {
  .home-section {
    padding-left: max(8px, env(safe-area-inset-left)) !important;
    padding-right: max(8px, env(safe-area-inset-right)) !important;
  }
}

/* === HOTFIX anti-débordement iPhone (final) ===================== */
/* 1) Coupe tout débordement horizontal, y compris sur iOS */
html, body { overflow-x: clip; }

/* 2) Tous les gros blocs sont clampés à la largeur du viewport */
.entete_image,
.navbar,
.include,
.home-section,
.home-section .home-layout,
.home-section .news-grid,
.home-section .news-card,
.home-section .home-calendar,
.footer {
  max-width: 100vw;
  overflow-x: clip;
}

/* 3) Remplace les safe-areas par un padding responsive stable */
.home-section {
  padding-inline: clamp(8px, 2.5vw, 12px) !important;  /* était: max(12px, env(...)) */
}

/* 4) Grilles/éléments qui ne doivent jamais élargir la page */
.home-section .home-layout,
.home-section .news-grid,
.home-section .news-card {
  min-width: 0;
  width: 100%;
}

/* 5) Sécurité sur les images des cartes */
.home-section .news-card img {
  display: block;
  max-width: 100%;
  height: auto;
}