/* ================================
   Variables (faciles à ajuster)
==================================*/
:root{
  --brand:#e6b800;
  --brand-strong:#ffcc00;
  --bg-dark:#000;
  --text-light:#fff;
  --text-muted:#eee;
  --card-bg:#fff;
  --card-border:#e6e6e6;
  --shadow:0 10px 26px rgba(2,6,23,.06);
  --radius:16px;
  --maxw:1280px;
  --gutter:clamp(12px,3.5vw,28px);
}

/* ================================
   Reset utile
==================================*/
*{ margin:0; padding:0; box-sizing:border-box; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button, a, [tabindex]{ -webkit-tap-highlight-color: transparent; }

/* ================================
   Thèmes
==================================*/
html.theme-blanc, body.theme-blanc{ background:#fff !important; color:#000 !important; }
body.theme-blanc footer{ background:#fff !important; color:#000 !important; }

html.theme-noir, body.theme-noir{ background:#111 !important; color:#fff !important; }
body.theme-noir footer{ background:#111 !important; color:#fff !important; }

/* ================================
   Header / Logo / Burger
==================================*/
.top-bar{ position:absolute; top:10px; left:10px; z-index:100; }
.logo{ height:65px; width:auto; }

.burger{
  position:absolute; top:20px; right:20px;
  font-size:32px; color:#fff; cursor:pointer; z-index:101;
  line-height:1; user-select:none;
}
.burger:focus-visible{ outline:2px solid var(--brand); outline-offset:4px; }

/* ================================
   Menu Overlay (plein écran)
==================================*/
.menu-overlay{
  position:fixed; inset:0; display:none;
  flex-direction:column; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.25);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  z-index:1000; text-align:center; transition:opacity .3s ease;
}
.menu-overlay.open{ display:flex; }

.menu-overlay .close{
  position:absolute; top:20px; right:30px;
  font-size:36px; color:#fff; cursor:pointer; line-height:1;
}
.menu-overlay ul{
  list-style:none; padding:0; margin:0; width:100%; text-align:center;
}
.menu-overlay li{ margin:20px 0; }
.menu-overlay a{
  color:#fff; font-size:2rem; text-decoration:none; transition:color .2s ease;
  display:inline-block; padding:10px 20px; /* tap target ≥44px */
}
.menu-overlay a:hover,
.menu-overlay a:focus-visible{ color:var(--brand); outline:0; }

/* ================================
   Dropdown (top nav)
   - Souris (hover) + clavier/tactile (focus-within)
==================================*/
.dropdown{ position:relative; }
.dropdown > a{
  color:#fff; font-size:2rem; display:block; padding:10px; cursor:pointer;
}
.dropdown > a:focus-visible{ outline:2px solid var(--brand); outline-offset:4px; }

.dropdown .submenu{
  display:none; position:absolute; inset-block-start:100%; inset-inline-start:0;
  background:rgba(0,0,0,.95); min-width:200px; z-index:1000;
  list-style:none; margin-block-start:10px;
  border-radius:8px; overflow:hidden; box-shadow:0 12px 24px rgba(0,0,0,.25);
}
.dropdown:hover .submenu,
.dropdown:focus-within .submenu{ display:block; }

/* Evite la sortie d’écran à droite sur grands écrans */
@media (min-width:900px){
  .dropdown .submenu{
    max-width:min(90vw,320px);
    right:0; left:auto; /* ancrage à droite si le menu est trop à droite */
    transform-origin:top right;
  }
}

.dropdown .submenu li a{
  display:block; padding:12px 14px; color:#fff; white-space:nowrap;
}
.dropdown .submenu li a:hover,
.dropdown .submenu li a:focus-visible{
  background:rgba(255,255,255,.06); color:var(--brand);
  outline:0;
}

/* ================================
   Hero
==================================*/
.hero{
  position:relative; overflow:hidden;
  background:#000 url("314DA60B-A342-4B3E-8CD5-3EE93C5EBE55.PNG") no-repeat center/cover;
  height:100vh; height:100dvh; min-height:100svh;
}

/* Grillage SVG léger */
.hero::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='0.5'%3E%3Cpath d='M0 40L40 0'/%3E%3Cpath d='M0 0L40 40'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat; background-size:40px 40px; opacity:.06;
}

/* Overlay sombre + contenu centré */
.hero-overlay{
  position:relative; z-index:3; width:100%; height:100%;
  background:rgba(0,0,0,.6);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:40px;
}
.hero-overlay h1{
  color:#fff; line-height:1.05;
  font-size:clamp(2.2rem, 8vw, 6rem);
}
.hero-overlay p{
  color:var(--text-muted); margin:20px 0;
  font-size:clamp(1rem, 2.4vw, 1.5rem);
}

/* CTA principal */
.btn-primary{
  display:inline-block; padding:15px 30px; border-radius:30px;
  background:var(--brand); color:#000; font-weight:700; text-decoration:none;
  transition:transform .15s ease, background .2s ease;
}
.btn-primary:hover{ background:var(--brand-strong); transform:translateY(-1px); }
.btn-primary:focus-visible{ outline:2px solid var(--brand-strong); outline-offset:4px; }

/* Bouton bas du hero */
.cta-bottom{
  position:absolute; left:0; right:0; bottom:40px;
  text-align:center; z-index:50;
}

/* ================================
   Sections & conteneurs
==================================*/
.section{ padding:80px 20px; background:#fff; }
.container{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }

h2{ text-align:center; margin-bottom:50px; font-size:2.2rem; color:#111; }

/* Grille générique (remplace l'ancien flex) */
.grid{
  display:grid; gap:40px; justify-items:center;
  grid-template-columns:1fr;
}
@media (min-width:700px){
  .grid{ grid-template-columns:repeat(2, minmax(0,1fr)); justify-items:stretch; }
}
@media (min-width:1100px){
  .grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

.card{
  background:var(--card-bg); padding:30px; border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,.1);
  width:100%; max-width:320px; text-align:center;
}
@media (min-width:700px){ .card{ max-width:none; } }

/* ================================
   Contenu principal (Horaires & Services)
==================================*/
main.content{
  max-width:var(--maxw);
  margin:16px auto 28px;
  padding-inline:var(--gutter);
}

/* Grille responsive des cartes principales */
main.content .grid{
  display:grid; grid-template-columns:1fr; gap:20px;
  align-items:stretch; justify-items:center;
}
@media (min-width:900px){
  main.content .grid{
    grid-template-columns:repeat(12, minmax(0,1fr));
    gap:24px; justify-items:stretch;
  }
  main.content .col-hours{ grid-column:span 6; }
  main.content .col-services{ grid-column:span 6; }
}

/* Cartes pleines colonnes, belles marges */
main.content .card{
  width:min(100%, 560px);
  max-width:none;
  background:#fff;
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
}
@media (min-width:900px){
  main.content .card{ padding:26px; width:100%; }
}

/* Titres des cartes */
main.content .card h2{
  margin:0 0 14px;
  font-size:1.35rem; font-weight:900; letter-spacing:.2px; text-align:left;
}
@media (min-width:900px){
  main.content .card h2{ font-size:1.45rem; }
}

/* Tableau horaires */
main.content .card table{
  width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed;
}
main.content .card td{
  padding:16px 12px; border-bottom:1px solid var(--card-border);
  font-size:clamp(1rem,2.2vw,1.08rem); line-height:1.35; word-break:break-word;
}
main.content .card td:first-child{
  font-weight:800; width:48%;
}
main.content tr.today-row td{ background:#fffafa; }

/* Bandeau Aujourd’hui (optionnel) */
main.content .today{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:#fff4f4; border:1px solid #ffdede; border-radius:12px;
  padding:12px 14px; margin:0 0 12px;
}
main.content .today .label{ font-weight:900; }
main.content .today .value{ font-variant-numeric:tabular-nums; font-weight:800; }
main.content .state{ font-weight:900; padding:6px 10px; border-radius:999px; border:1px solid transparent; }
main.content .state.open{ background:#e8f8ee; color:#0b7a37; border-color:#c9efd9; }
main.content .state.closed{ background:#ffebeb; color:#b00020; border-color:#ffd3d3; }

/* Services : grille fluide 1 / 2 / 3 colonnes */
main.content .services{
  display:grid; grid-template-columns:1fr; gap:12px; margin-top:4px;
}
@media (min-width:560px){
  main.content .services{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
}
@media (min-width:1100px){
  main.content .services{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

/* Pastilles service */
main.content .chip{
  display:flex; align-items:center; gap:12px;
  padding:16px; border:1px solid var(--card-border);
  border-radius:14px; background:#fff; font-size:1.05rem; font-weight:700;
  box-shadow:0 6px 16px rgba(0,0,0,.04);
}
main.content .chip i{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:#fff4f4; color:#a31212; font-size:1.15rem; border:1px solid #ffe1e1;
}

/* Sécurité : neutralise toute limite sur ces deux cartes */
main.content .card.col-hours,
main.content .card.col-services{ max-width:none; }

/* Note saisonnière (si présente) */
.season-note{
  margin:-4px 0 12px; text-align:center; color:#777;
  font-weight:600; font-size:.95rem;
}

/* Liste méta alignée à gauche (texte long) */
.meta-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; text-align:left; }
.meta-item{ display:flex; align-items:flex-start; gap:10px; }
.meta-item .ico{ flex:0 0 22px; text-align:center; line-height:1.2; }
.meta-item .txt{ flex:1 1 auto; color:#555; font-size:.98rem; word-break:break-word; }

/* ================================
   Page Alimentation — centrage des cartes
==================================*/
#grid{
  display:grid; grid-template-columns:1fr;
  gap:clamp(14px, 2.4vw, 22px);
  margin:16px 0 64px; justify-items:center;
}
#grid .card{ width:100%; max-width:720px; }
@media (min-width:640px){
  #grid{ grid-template-columns:repeat(2,1fr); justify-items:stretch; }
  #grid .card{ max-width:none; }
}
@media (min-width:1024px){
  #grid{ grid-template-columns:repeat(3,1fr); }
}

/* ================================
   Footer
==================================*/
footer{ text-align:center; }
footer p{ margin:6px 0; }

/* ================================
   Page À propos (a_propos.php)
==================================*/
.stack{
  display:grid; grid-template-columns:1fr;
  gap:clamp(14px,2.2vw,22px);
  margin:22px 0 64px; justify-items:center;
}
.stack .card{ width:min(100%, 720px); }
@media (min-width:900px){
  .stack{
    grid-template-columns:repeat(12, minmax(0,1fr));
    justify-items:stretch;
  }
  .stack .card.col{ grid-column:span 4; width:100%; }
}

/* Mobile : plein écran + petits gutters */
@media (max-width: 900px){
  .stack{ padding-inline:16px; }
  .stack .card{ width:100%; max-width:none; }
}

/* --- iOS: faire descendre l’overlay jusqu’en bas, sous la barre flottante --- */
.menu-overlay{
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;   /* couvre 100% du viewport */
  /* pas de height fixe qui pourrait couper avant le bas */
  height: auto !important;
  min-height: 100vh;                       /* fallback */
}

/* viewport dynamique (iOS 16+ / iOS 17/18 “liquid”) */
@supports (height: 100dvh){
  .menu-overlay{ min-height: 100dvh; }
}

/* occuper aussi la safe-area du bas (sous la barre) sans changer le design */
.menu-overlay{ 
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.menu-overlay::after{
  content:"";
  position: fixed;
  left:0; right:0; bottom:0;
  height: env(safe-area-inset-bottom, 0);
  background: rgba(0,0,0,0.2);   /* même voile que l’overlay pour éviter le “trou” */
  pointer-events: none;
}

/* =======================================================================
   🔧 AJOUTS / FIXES — NE SUPPRIMENT RIEN, SEULEMENT DES AMÉLIORATIONS
   ======================================================================= */

/* 1) Ligne “Bonjour … — Magasin …” centrée et proprement alignée */
.welcome{
  display:flex;
  flex-wrap:wrap;
  gap:.25rem 1rem;
  align-items:baseline;
  justify-content:center;             /* centre la ligne */
  text-align:center;
  width:min(100%, var(--maxw));       /* largeur contenue */
  margin:.25rem auto 1rem;            /* centre la boîte elle-même */
  padding-inline:var(--gutter);       /* même padding que le reste */
  line-height:1.25;
  color:#fff;
}
.welcome .who{ font-weight:700; }

/* ⚠️ plus d'absolu : le tiret est inline -> pas de décalage bizarre */
.welcome .store::before{
  content:"—";
  display:inline-block;
  margin:0 .5rem 0 .35rem;            /* espace avant “Magasin” */
}
.welcome .store{ opacity:.95; }


/* 2) Champ de recherche : placeholder JAMAIS en collision avec la loupe
      - on masque l’icône native WebKit
      - on ajoute une loupe SVG en background, et du padding à gauche
*/
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration{
  -webkit-appearance:none;
  appearance:none;
}

input[type="search"]{
  padding-left:2.25rem;                 /* place pour l’icône */
  background-repeat:no-repeat;
  background-position:.75rem 50%;
  background-size:1rem 1rem;
  /* Loupe vectorielle (contraste OK sur fond clair/sombre) */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23999' viewBox='0 0 24 24'%3E%3Cpath d='M21 20.29 16.65 15.94a8 8 0 1 0-.71.71L20.29 21zM4 11a7 7 0 1 1 7 7 7 7 0 0 1-7-7z'/%3E%3C/svg%3E");
}

/* Placeholder bien positionné, lisible et non décalé */
input[type="search"]::placeholder{
  color:#999;
  opacity:1;               /* iOS réduit souvent => force lisible */
  text-indent:0;           /* pas de décalage hasardeux */
}

/* 3) Toolbar (gauche = actions & compteur / droite = recherche & hint)
   -> utile sur la page Heures; n’impacte rien si non utilisée
*/
.toolbar{
  display:grid; grid-template-columns: auto 1fr; gap:10px; align-items:start;
}
@media (max-width:640px){
  .toolbar{ grid-template-columns: 1fr; }
}
.toolbar-left{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.toolbar-right{ display:block; }
.searchbar{ display:flex; align-items:center; gap:10px; }
.search-hint{ margin:.25rem 0 0; font-size:.9rem; color:#777; }

/* 4) Chiffres tabulaires pour les totaux (alignement nickel) */
.tabnums, .week-total, .today .value{
  font-variant-numeric: tabular-nums;
}

/* 5) Accessibilité / confort */
a:focus-visible, button:focus-visible{ outline:2px solid var(--brand-strong); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* 6) Utilitaire “visually-hidden” pour textes pour lecteurs d’écran */
.visually-hidden{
  position:absolute !important; height:1px; width:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap; clip-path:inset(50%);
  border:0; padding:0; margin:-1px;
}