html.is-lock { overflow: hidden; }
html.is-lock body { padding-right: var(--sbw); }
html.is-lock .header { padding-right: var(--sbw); }
html, body { overflow-x: clip; }

input:focus:not(#keyword-input):not(#localisation-input),
select:focus,
select:hover,
textarea:focus {
  box-shadow: none !important;
  border: 1px solid #8dc8e8 !important;
  outline: none !important;
  transition: all 0.5s ease-in;
}


/* ====================================================
   COMPONENT – HEADER
   ==================================================== */

.header__inner{
	height: var(--header-h);
	display: flex;
    align-items: center;
    justify-content: space-between;
}
.header__logo {
    display: flex;
}
.header__menu{
	display: none;
}
.header__toggle {
	--head-tm-bg:var(--blue-900);
	--head-tm-radius:var(--radius-xs);
	display: inline;
    width: 30px;
    cursor: pointer;  
}
.header__toggle-bar{
	background: var(--head-tm-bg);
    border-radius: var(--head-tm-radius);
    display: block;
    content: " ";
    width: 100%;
    height: 3px;
    margin: 6px 0;
}

/* ===== Desktop (≥ 1025px) ===== */

@media (min-width: 1025px) {
    .header__toggle, .mobile-menu__item--header-login{
	display: none;
    }
    .header__menu{
	display: block;
    } 
}

/* ======================================================
   MENU - DESKTOP / MOBILE (tokens locaux)
   ====================================================== */

.nav{
  /* Tokens locaux (avec fallbacks) */
  --nav-h: var(--header-h);
  --nav-gap: var(--gap-3xl);                     
  --nav-fs: var(--fs-300);
  --nav-fw: var(--fw-semibold);
  --nav-hover: var(--color-link-hover); 
  --nav-dd-bg: var(--blue-900);
  --nav-dd-color: var(--blue-900);
  --nav-dd-radius: var(--radius-sm);
  --nav-dd-minw: 220px;             /* tu utilisais var(--nav-mw) sans default */
  --nav-dd-offset-y: 8px;
  --nav-dd-z: 50;
  --nav-dd-gap: var(--gap-sm);
  --nav-dd-shadow: 0 10px 30px rgba(0,0,0,.12);
  font-weight: var(--nav-fw);
  font-size: var(--nav-fs);
}
.nav__list{
	display: flex;
	align-items: center;
	gap:var(--nav-gap);
}
.nav__item{
  position: relative;
  margin: 0;
}

/* Bouton/toggle de 80px de haut, basé sur le token */
.nav__toggle{
  height: var(--nav-h);
  cursor: pointer;
  padding: 0;
}
.nav__toggle-link{margin:0 0 0 5px;}
.nav__toggle.is-connected,.mobile-menu__link.is-connected{color:var(--color-primary);}

/* Dropdown */
.nav__dropdown{
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: var(--nav-dd-z);
  margin: 0;
  opacity: 0;
  transform: translate(-50%, var(--nav-dd-offset-y));
  border-radius: 0 0 var(--nav-dd-radius) var(--nav-dd-radius);
  border-end-start-radius: var(--nav-dd-radius);
  border-end-end-radius: var(--nav-dd-radius);
  pointer-events: none;
  transition:
    opacity var(--dur-base,200ms) var(--ease-out, cubic-bezier(.2,.8,.2,1)),
    transform var(--dur-base,200ms) var(--ease-out, cubic-bezier(.2,.8,.2,1));
  min-width: var(--nav-dd-minw, 220px);
}

/* Clavier + état JS (partout) */
.nav__item--has-dropdown:focus-within > .nav__dropdown,
.nav__item--has-dropdown.is-open > .nav__dropdown{
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
}

/* Desktop : hover seulement quand le device le supporte vraiment */
  .nav__item--has-dropdown:hover > .nav__dropdown{
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translate(-50%, 0);
  }


/* Option accessibilité */
@media (prefers-reduced-motion: reduce){
  .nav__dropdown{ transition: none; }
}

/* Panneau + flèche utilisent les tokens locaux */
.nav__dropdown-panel{
  overflow: hidden;
  text-align: center;
}

.nav__dropdown-arrow{
  position: absolute;
  top: -5px;
  left: 50%;
  width: 12px; height: 12px;
  transform: translate(-50%, 0) rotate(45deg);
  background:var(--nav-dd-bg);
  border-left: 1px solid var(--nav-dd-bg);
  border-top: 1px solid var(--nav-dd-bg);
}

/* Liste interne */
.nav__dropdown-list{
  padding: 12px 8px 15px 8px;
  display: grid;
  gap:var(--nav-dd-gap);
  font-size: var(--fs-200);
  font-weight: var(--fw-regular); 
}

/* Hover sur les items/toggles */
.nav ul li > button,
nav ul > li{
  transition: var(--trans-color);
}
.nav ul li > button:hover,
nav ul > li:hover {
  color: var(--nav-hover);
}

/* ------------------------------------------------------------
   Bloc nav menu mobile
   ------------------------------------------------------------ */

.mobile-menu{
  /* Tokens locaux du composant */
  --mm-top: var(--header-h);
  --mm-w: min(92vw, 360px);
  --mm-pad: 16px;
  --mm-gap: 8px;
  --mm-radius: 10px;
  --mm-z: 1000;

  --mm-bg: var(--color-bg);
  --mm-fg: var(--color-body);
  --mm-border: 1px solid transparent;
  --mm-hover: color-mix(in srgb, var(--smoke-80), #fff 94%); /* léger rose pâle */
  --mm-shadow: 0 10px 30px rgba(0,0,0,.12);

  position: fixed;
  top: var(--mm-top);
  left: 0;
  height: calc(100% - var(--mm-top));
  width: var(--mm-w);
  background: var(--mm-bg);
  color: var(--mm-fg);
  transform: translateX(-100%); /* caché par défaut */
  transition: transform .4s cubic-bezier(0.00,0.00,0.20,1.00);
  z-index: var(--mm-z);
  box-shadow: var(--mm-shadow);
  will-change: transform;
}
.mobile-menu--open { transform: translateX(0); }

/* Panneau interne */
.mobile-menu__panel{
  height: 100%;
  overflow: auto;
}

/* Liste */
.mobile-menu__list{
  display: grid;
}
/* Boutons/links */
.mobile-menu__link{
	display: inline-flex;
    align-items: center;
    padding: 20px;
	border-bottom: solid 1px #f5f4f2;
	cursor: pointer;
	width: 100%;
}
.mobile-menu__item--header-login i {
	font-size: var(--fs-600);
}
.mobile-menu__submenu-list li > a {
	padding: 20px 20px 20px 30px;
}
.mobile-menu__link:hover,
.mobile-menu__toggle:hover{
  background: var(--mm-hover);
}
.mobile-menu__toggle[aria-expanded="true"]{
  background: color-mix(in srgb, var(--on-surface), #fff 90%);
}

.mobile-menu__submenu-list{
  display: grid;
}

/* Animation d'ouverture/fermeture accordéon (max-height) */
.mobile-menu__submenu{
  overflow: hidden;
  transition: max-height .28s ease;
}
.mobile-menu__item.is-open > .mobile-menu__submenu{
  max-height: 600px; /* assez grand pour contenir */
}

/* Focus accessible */
.mobile-menu__link:focus-visible,
.mobile-menu__toggle:focus-visible{
  outline: 2px solid #4c9ffe;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Backdrop/overlay pour fermer au clic */
.mobile-menu-backdrop{
  position: fixed;
  inset: var(--mm-top) 0 0 0; /* démarre sous le header */
  background: rgb(0 0 0 / .4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: calc(var(--mm-z) - 1);
}
.mobile-menu--open + .mobile-menu-backdrop{
  opacity: 1;
  pointer-events: auto;
}

/* Safe-area iOS (si ton header colle en haut) */
@supports (padding: max(0px)) {
  .mobile-menu__panel{
    padding-bottom: max(var(--mm-pad), env(safe-area-inset-bottom));
  }
}

/* Thème sombre (facultatif) */
body[data-theme="dark"] .mobile-menu{
  --mm-bg: #0f1720;
  --mm-fg: #e5e7eb;
  --mm-hover: color-mix(in srgb, var(--color-hightlight), #0f1720 85%);
  --mm-shadow: 0 12px 36px rgba(0,0,0,.5);
}

/* ===== open ==>< ===== */

	#overlay.mobile--open {
	animation: mainOpenEnter 200ms;
	visibility: visible;
	cursor: pointer;
    opacity: 1;
    z-index: 1;
	}

/* ========================================
   COMPONENT – SEARCH BAR
   ======================================== */

.search-bar {
  --sb-maxw: 1060px;
  --sb-padinput: 20px;
  --sb-pad: 15px 25px;
  --sb-radius: 3px;
  --sb-shadow: 0 1px 20px rgba(0,0,0,.05);
  --sb-sep: 1px solid #eae9e6;
  --sb-gap: 0; /* si tu veux un vrai gap entre les 2 champs plus tard */
  --sb-focuskey:var(--fc-munsell);
  --sb-focusloc:var(--fc-light-green);     
  /* version sticky = zéro “jump” */
  position: sticky;
  top: var(--header-h);
  z-index: 1;
  margin-top: 20px;
  padding: var(--sb-pad);
  background: var(--color-bg);
  border-radius: var(--sb-radius);
  box-shadow: var(--sb-shadow);
}

.search-bar.is-fixed { animation: none; }

/* Animer uniquement tant que .was-fixed n’est pas présent */
.search-bar.is-fixed:not(.was-fixed) {
  animation: slideDown .5s ease both;
}

/* (optionnel) accessibilité */
@media (prefers-reduced-motion: reduce){
  .search-bar.is-fixed:not(.was-fixed){ animation: none; }
}

/* animation pour adoucir */
@keyframes slideDown {
  from {
    transform: translateY(-100%);  
  }
  to {
    transform: translateY(0);     
  }
}

/* ===== Inner layout ===== */
.search-bar__inner{
  margin: 0 auto;
  max-width: var(--sb-maxw);
  display: grid;
  grid-template-columns: 1fr 1fr auto; /* keyword | localisation | bouton filtres */
  align-items: center;
  gap: var(--sb-gap);
}

/* ===== Keyword field ===== */
.search-bar__keyword{
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  padding-right: var(--sb-padinput);        
}

/* Séparateur vertical entre keyword et localisation */
.search-bar__keyword::after{
  content: "";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  height: 60%;
  border-right: var(--sb-sep);
}

.keyword__input{
  height: var(--height-input);
  width: 100%;
  border: none;
  background: transparent;
  padding-right: 8px;
  min-width: 0;
}

.keyword__input:focus + .keyword-submit i {
  color: var(--sb-focuskey);
}

.keyword-submit{
  cursor: pointer;
  transition: color 0.3s ease;
  padding: 0;
}

/* ===== Localisation field ===== */
.search-bar__localisation{
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  padding-left: var(--sb-padinput);
  min-width: 0;
}

.localisation__input{
  height: var(--height-input);
  width: 100%;
  border: none;
  background: transparent;
  padding-left:  var(--sb-padinput); 
  cursor: pointer;
  min-width: 0;
}

.localisation__input:focus + i {
  color: var(--sb-focusloc);
}

.localisation__input:focus, .keyword__input:focus {
  outline: none;   
  border: none;   
  box-shadow: none;
}

.localisation__icon{ font-size: var(--fs-400); }

/* Liste de résultats localisation */
.localisation__result, .localisation__panel, .keyword-input__result{
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 25px);
  display: none;                 /* JS l’ouvrira */
  background: var(--color-bg);
  padding: 15px;
  box-shadow:
    0 10px 15px -3px rgba(0,0,0,.1),
    0 4px 6px -2px rgba(0,0,0,.05);
  font-size: var(--fs-200);
  z-index: 20;
}

/* ===== Bouton filtres (colonne 3) ===== */
.search-filter{
  position: relative;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--height-input);
  padding: 0 12px;
  background: var(--color-main-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  transition: background .2s ease;
}
.search-filter:hover{
  background: color-mix(in srgb, var(--color-hightlight), #fff 94%);
}

.filter-count{
  position: absolute;
  align-content: center;
  justify-content: center;
  background: #ff1749;
  border-radius: 50%;
  color: #fff;
  font-size: 0.55em;
  width: 15px;
  top: -5px;
  left: 30px;
  display: none;
}

/* ===== Ouverture des listes (classe utilitaire) ===== */
.is-open > .keyword-input__result,
.is-open > .localisation__result{
  display: block !important;
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .search-bar__inner{
    grid-template-columns: 1fr 1fr;
    row-gap: 12px;
  }
  #filter{ grid-column: 1 / -1; justify-self: stretch; }
}
@media (max-width: 640px){
  .search-bar__inner{
    grid-template-columns: 1fr; /* empile tout */
  }
  .search-bar__keyword::after{ display: none; } /* pas de séparateur en pile */
}

/* ======================================================
   COMPONENT - FILTER-PANEL
   ====================================================== */

   .filter-panel{
  /* Tokens locaux du composant */
  --fp-w: min(92vw, 360px);
  --fp-pad: 16px;
  --fp-gap: 8px;
  --fp-radius: 10px;
  --fp-z: 1000;
  --fp-bg: var(--color-bg);
  --fp-fg: var(--color-body);
  --fp-border: 1px solid transparent;
  --fp-hover: color-mix(in srgb, var(--smoke-80), #fff 94%); 
  --fp-shadow: 0 10px 30px rgba(0,0,0,.12);
  position: fixed;
  top: 0;
  right: 0;               
  height:100%;
  width: var(--fp-w);
  background: var(--fp-bg);
  color: var(--fp-fg);
  transform: translateX(100%);
  transition: transform .4s cubic-bezier(0.00,0.00,0.20,1.00);
  z-index: var(--fp-z);
  box-shadow: var(--fp-shadow);
  will-change: transform;
}
.filter-panel--open { transform: translateX(0); }

#overlay.filter--open {
	top:0;
    animation: mainOpenEnter 200ms;
    visibility: visible;
    cursor: pointer;
    opacity: 1;
    z-index: 11;
}

/* ======================================================
   COMPONENT - FOOTER 
   ====================================================== */

/* ------------------------------------------------------
   Grid - Footer
   ------------------------------------------------------ */

.footer__grid {
  --col-max: 280px;
  --footer-gap: var(--gap-md);

  display: grid;
  gap: var(--footer-gap);
  grid-template-columns: 1fr; /* mobile par défaut */
  justify-content: center;
  max-inline-size: calc(4 * var(--col-max));
  margin-inline: auto;
}

@media (--bp-tablet) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (--bp-desktop) {
  .footer__grid { grid-template-columns: repeat(4, minmax(0, var(--col-max))); }
}

/* ---------------------------------------------------------
   Visibilités (is-col-*)
   --------------------------------------------------------- */

/* Tout caché par défaut */
.footer__grid > .footer__col { display: none;flex-direction: column;gap: var(--footer-gap); }
.footer__grid > .footer__col ul {display: flex;flex-direction: column;gap:var(--footer-gap);}


/* Mobile (≤640px) : montrer uniquement col 1 */
@media (--bp-mobile) {
  .footer__grid > .footer__col.is-col-1 { display: flex; }
}

/* Tablet (641–1024px) : col 1 + col 3 */
@media (--bp-tablet) {
  .footer__grid > .footer__col.is-col-1,
  .footer__grid > .footer__col.is-col-3 { display: flex; }
}

/* Desktop (≥1025px) : col 2 + 3 + 4 + 5 */
@media (--bp-desktop) {
  .footer__grid > .footer__col.is-col-2,
  .footer__grid > .footer__col.is-col-3,
  .footer__grid > .footer__col.is-col-4,
  .footer__grid > .footer__col.is-col-5 { display: flex;}
}

/* -----------------------------------------------------------
   Styles généraux
   ----------------------------------------------------------- */
.footer__col { line-height: var(--lh-tight);text-align: right;}
.footer-col--brand { text-align: left; }

.footer__col h3 {
  margin: 0;
  font-size: var(--fs-200);
  line-height: var(--lh-snug);
}

.footer__col a {
  color: var(--on-surface-inv-link);
  transition: var(--trans-color, color var(--dur-base,200ms) var(--ease-out, cubic-bezier(.2,.8,.2,1)));
  font-size: var(--fs-200);
}
.footer__col a:hover,
.footer__col a:focus { color: var(--color-link-hover); }

/* Copyright */
.footer__copyright { display: none; font-size: var(--fs-200); color: var(--on-bg); opacity: .9; }
@media (--bp-desktop) { .footer__copyright { display: block; } }

.footer__grid > .footer__col ul.footer__copyright-mobile, .footer__grid > .footer__col ul.footer__information-mobile {
  justify-content: center;align-items: center;
}
.footer__copyright-mobile li + li::before {
  content: "|"; margin: 0 6px; color: var(--on-surface-inv-link);
}

/* Réseaux sociaux */
.footer__grid > .footer__col ul.footer__socials, footer__information-mobile {display: flex; gap: var(--gap-lg); padding: 0; margin: 0;flex-direction: row;align-items: center;}
.footer__socials li { list-style: none; }
.footer__socials a { display: inline-flex; }
		
.icon-chip{
  inline-size: 2.25rem; block-size: 2.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: var(--on-accent);
  transition: var(--trans-bg, background-color var(--dur-base,200ms) var(--ease-out, cubic-bezier(.2,.8,.2,1)));
}
.icon-chip:hover { filter: brightness(.94); }

/* ============================================================
   Fallback (si @custom-media non supporté)
   ============================================================ */	
		
@media (max-width: 640px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__grid > .footer__col { display: none; }
  .footer__grid > .footer__col.is-col-1 { display: flex; }
  .footer__grid > .footer__col ul.footer__socials{justify-content: center;}
  .footer__grid > .footer__col ul.footer__copyright-mobile{flex-direction: row;gap: 0;}
}

@media (min-width: 641px) and (max-width: 1024px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid > .footer__col { display: none; }
  .footer__grid > .footer__col.is-col-1,
  .footer__grid > .footer__col.is-col-3 { display: flex; }
  .footer__grid > .footer__col ul.footer__information-mobile{align-items: flex-start;}
  .footer__grid > .footer__col ul.footer__copyright-mobile{flex-direction: row;justify-content: flex-start;gap:0;}
}

@media (min-width: 1025px) {
  .footer__grid { grid-template-columns: repeat(4, minmax(0, var(--col-max))); }
  .footer__grid > .footer__col { display: none; }
  .footer__grid > .footer__col.is-col-2,
  .footer__grid > .footer__col.is-col-3,
  .footer__grid > .footer__col.is-col-4,
  .footer__grid > .footer__col.is-col-5 { display:flex;flex-direction: column;gap: var(--footer-gap); }
  .footer__copyright { display: block; }
}