/* =========================================================
   style.cleaned.css — version 2025-08-14
   But : repartir proprement, éviter les conflits, et garantir :
   - Top bar lisible (Materialize)
   - Grilles Home/Recherches en 2 colonnes alignées
   - Impression propre (#recette uniquement)
   ========================================================= */

/* -------------------- Palette (variables) -------------------- */
:root{
  --bleu-texte: #0d47a1;
  --bleu-fond:  #e7f1fb;
  --bleu-fond-2:#f3f8fe;
  --bleu-survol: rgba(13,71,161,.08);
  --bleu-bord:  rgba(13,71,161,.20);

  --topbar-h: 64px;
  --topbar2-h: 56px;
}

/* =========================================================
   NAVIGATION (desktop)
   ========================================================= */
@media (min-width: 993px){
  nav { height: var(--topbar-h); line-height: var(--topbar-h); }
  nav .nav-wrapper{ display:flex; align-items:center; height: var(--topbar-h); }

  /* Brand logo : éviter le positionnement absolu de Materialize */
  .nav-main .brand-logo{
    position: static; transform: none;
    font-family: "Georgia","Times New Roman",serif;
    font-size: 26px; font-weight: 700; white-space: nowrap;
    margin-right: 16px; line-height: var(--topbar-h); color: #fff;
    display:flex; align-items:center;
  }

  /* Bloc menus de gauche (si présent) */
  .nav-main .nav-wrapper > ul.hide-on-med-and-down:not(.right),
  .nav-sub  .nav-wrapper > ul.left{
    display:flex; gap:10px; flex:1 1 auto;
    margin:0; padding:0; list-style:none;
    overflow-x:auto;
  }

  /* Bloc de droite (loupe + bouton) */
  nav .nav-wrapper > ul.right{
    display:flex; align-items:center; gap:10px; flex:0 0 auto;
    margin:0; padding:0; list-style:none; white-space:nowrap;
    height: var(--topbar-h);
  }
  nav .nav-wrapper > ul.right > li{ display:flex; align-items:center; height: var(--topbar-h); }
  nav .nav-wrapper > ul.right > li > a{
    display:flex; align-items:center; height: var(--topbar-h); line-height: var(--topbar-h); padding:0 8px;
  }
  nav .nav-wrapper ul.right i.material-icons{ color:#fff; line-height: var(--topbar-h); height: var(--topbar-h); }

  /* Liens : taille/padding raisonnables */
  nav .nav-wrapper > ul > li > a,
  nav .nav-wrapper .dropdown-trigger{
    padding: 0 16px; line-height: var(--topbar-h); font-size: 16.5px;
  }

  /* Sous-barre (nav-sub) un peu plus basse */
  .nav-sub { height: var(--topbar2-h); line-height: var(--topbar2-h); }
  .nav-sub .nav-wrapper{ height: var(--topbar2-h); }
  .nav-sub .nav-wrapper > ul.left > li > a{
    line-height: var(--topbar2-h); padding: 0 14px;
  }
}

/* Bouton "Privé / Déconnexion" discret */
.nav-main .btn-small{
  height:30px; line-height:30px; padding:0 12px; font-size:13px; border-radius:6px;
  box-shadow:none;
}
.nav-main .btn-small.indigo.lighten-1{ background-color:#3949ab !important; }
.nav-main .btn-small.indigo.lighten-1:hover{ background-color:#303f9f !important; }

/* =========================================================
   DROPDOWNS (desktop) + Groupe /Pays
   ========================================================= */
nav.nav-sub { position:relative; z-index:1001; }
nav.nav-sub .dropdown-content{
  background: var(--bleu-fond) !important;
  border: 1px solid var(--bleu-bord) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.15) !important;
  min-width: 260px;
  max-height: 70vh; overflow-y: auto;
  z-index: 1004;
}
nav.nav-sub .dropdown-content li > a,
nav.nav-sub .dropdown-content li > span{
  color: var(--bleu-texte) !important;
  font-size: 15px; line-height:1.2; padding: 12px 16px;
}
nav.nav-sub .dropdown-content li > a:hover{ background: var(--bleu-survol) !important; }
nav.nav-sub .dropdown-content .divider{ background-color: var(--bleu-bord) !important; }

/* Groupe /Pays */
.dropdown-groups .group-title{
  display:block; width:100%; text-align:left;
  background: var(--bleu-fond); color: var(--bleu-texte);
  font-weight:600; border:0; padding:10px 14px; margin:6px 8px;
  border-radius:6px; cursor:pointer;
}
.dropdown-groups .group-title .chevron{ float:right; opacity:.75; }
.dropdown-groups .group-title[aria-expanded="true"]{ background:#d6e7fb; }
.dropdown-groups .group-list{
  padding:0 12px 8px 12px; margin:0 8px 8px 8px; background: var(--bleu-fond-2); border-radius:6px;
}
.dropdown-groups .group-list a{ display:block; padding:10px 12px; color: var(--bleu-texte) !important; }
.dropdown-groups .group-list a:hover{ background: var(--bleu-survol); border-radius:4px; }

/* =========================================================
   SIDENAV (mobile)
   ========================================================= */
/* Couleurs douces menu mobile */
.sidenav { background:#f2f6fa; }
.sidenav a { color:#0d47a1; }
.sidenav .collapsible-header { background:#e3f2fd; font-weight:600; }
.sidenav .collapsible-body { background:#f9fbfd; }
/* === Palette mobile (tons bleus doux) === */
:root{
  --m-bg: #0e1b5a;      /* fond principal */
  --m-bg-2: #0b164b;    /* fond sous-menus */
  --m-text: #e3ecff;    /* texte clair */
  --m-text-2: #c5d8ff;  /* texte secondaire */
  --m-hover: rgba(255,255,255,.08);
  --m-active: rgba(255,255,255,.12);
  --m-divider: rgba(255,255,255,.14);
}

/* Fond + texte de la barre latérale */
.sidenav{
  background:#fff !important;
  color:#212121 !important;
}

/* Lignes de séparation */
.sidenav .divider{
  background-color: var(--m-divider) !important;
}

/* Titres d’accordéon (groupes) */
.sidenav .collapsible-header{
  background: transparent !important;
  color:#212121 !important;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--m-divider);
}
.sidenav .collapsible > li.active > .collapsible-header{
  background: var(--m-active) !important;
}

/* Corps d’accordéon (liste des liens) */
.sidenav .collapsible-body{
  background:#f7f9fc !important;
  padding: 0 !important;
}
.sidenav .collapsible-body li a{
  display: block;
  padding: 10px 22px !important;
  color:#0d47a1 !important;
}
.sidenav .collapsible-body li a:hover{
 background:#e3f2fd !important;
  color: #fff !important;
}

/* Icône loupe et autres icônes dans la sidenav */
.sidenav i.material-icons{
  color:#0d47a1 !important;
}
/* ---- PATCH express : remet tout d'aplomb ---- */

#mobile-menu.sidenav{
  position: fixed;           /* ok */
  top:0; left:0; height:100vh; width:300px;
  background:#fff;
}
/* retire complètement la règle .sidenav-overlay */




@media (min-width:993px){
  #mobile-menu.sidenav{ display:none !important; } /* rien en desktop */
}

nav{ overflow:visible !important; background:#fff !important; }
.dropdown-content{ z-index:1005 !important; }

/* hamburger correctement placé en mobile */
@media (max-width:992px){
  nav .nav-wrapper{ min-height:56px; }
  nav .sidenav-trigger{ position:absolute; right:12px; top:50%; transform:translateY(-50%); }
}

/* =========================================================
   GRILLES DES CARTES (Home + Recherche)
   Objectif : 2 colonnes alignées, même sans Materialize.
   ========================================================= */
.home-grid, .cards-grid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.home-grid > .col,
.cards-grid > .col{
  /* Neutralise la largeur/padding imposés par Materialize dans ce contexte */
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;              /* permet à la carte de s'étirer */
}

/* Carte = flex pour pousser le bouton en bas et égaliser visuellement */
.home-grid .card, .cards-grid .card{
  display: flex; flex-direction: column; width: 100%;
}
.home-grid .card .card-content, .cards-grid .card .card-content{ flex: 1 1 auto; }
.home-grid .card .card-action,  .cards-grid .card .card-action { margin-top: auto; }

/* Image uniforme (évite les décalages) */
.home-grid .card .card-image img,
.cards-grid .card .card-image img{
  width:100%; height:220px; object-fit:cover; display:block;
}

/* Mobile : 1 colonne */
@media (max-width: 600px){
  .home-grid, .cards-grid{ grid-template-columns: 1fr; gap: 16px; }
  .home-grid .card .card-image img, .cards-grid .card .card-image img{ height:180px; }
}

/* =========================================================
   TYPO Petites aides
   ========================================================= */
.line-clamp-3{
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:3; overflow:hidden;
}


/* === NAV: logo à gauche, actions (loupe/privé) à droite === */
@media (min-width: 993px){
  nav .nav-wrapper{
    display:flex; align-items:center; justify-content:space-between; /* <-- pousse à droite */
  }
  nav .nav-wrapper > ul.right{ margin-left:auto; } /* ceinture + bretelles */
}

/* === CARTES: 2 colonnes "plus jolies" (moins étirées), centrées === */
.home-grid, .cards-grid{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(320px, 1fr)); /* au lieu de 1/2 plein pot */
  gap: 20px;
  align-items: stretch;
}
.home-grid .card, .cards-grid .card{
  max-width: 600px;               /* carte un peu moins large */
  margin-left: auto; margin-right: auto; /* centrée dans sa colonne */
}

/* Images uniformes (tu peux jouer sur la hauteur) */
.home-grid .card .card-image img,
.cards-grid .card .card-image img{
  width:100%; height:220px; object-fit:cover; display:block;
}

/* Assure la "cliquabilité" dans les dropdowns */
.dropdown-content{ pointer-events:auto; }
.dropdown-content li > a{ display:block; }
/* Fallback si :has() non supporté */
.container .row.auto-grid-cards{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 20px;
  align-items: stretch;
}
.container .row.auto-grid-cards > .col{ width:auto!important; max-width:none!important; padding:0!important; display:flex; }
.container .row.auto-grid-cards .card{ display:flex; flex-direction:column; width:100%; max-width:520px; margin:0 auto; }

/* === Cartes un peu plus grandes (Home + Recherche) === */
.home-grid,
.cards-grid,
.container .row:has(> .col .card),
.container .row.auto-grid-cards{
  grid-template-columns: repeat(2, minmax(360px, 1fr)) !important; /* avant 320px */
  gap: 20px !important;
}

.home-grid .card,
.cards-grid .card,
.container .row:has(> .col .card) .card,
.container .row.auto-grid-cards .card{
  max-width: 580px !important; /* avant 520px */
}

.home-grid .card .card-image img,
.cards-grid .card .card-image img,
.container .row:has(> .col .card) .card .card-image img,
.container .row.auto-grid-cards .card .card-image img{
  height: 240px !important; /* avant 220px */
}

/* Mobile inchangé : 1 colonne */
@media (max-width: 600px){
  .home-grid, .cards-grid,
  .container .row:has(> .col .card),
  .container .row.auto-grid-cards{
    grid-template-columns: 1fr !important; gap: 16px !important;
  }
  .home-grid .card .card-image img,
  .cards-grid .card .card-image img,
  .container .row:has(> .col .card) .card .card-image img,
  .container .row.auto-grid-cards .card .card-image img{
    height: 190px !important;
  }
}
@media (hover:hover) and (pointer:fine){
  #dropdown-groups .group-list{ display:none; }
  #dropdown-groups li:hover > .group-list{ display:block; }
}
@media (hover:hover) and (pointer:fine){
  #dropdown-groups .group-list{ display:none; }
  #dropdown-groups li:hover > .group-list{ display:block; }
}
/* Masquer toute top bar dupliquée au cas où une page la réinclurait */
#topbar ~ #topbar { display: none !important; }
/* === Recherche : 2 colonnes alignées, zéro masonry, zéro float === */
.cards-grid,
.cards-grid.row{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(360px, 1fr)) !important;
  gap: 22px !important;
  align-items: stretch !important;

  /* tue tout résidu de "masonry" */
  column-count: initial !important;
  column-gap: normal !important;
}

/* neutraliser Materialize .row/.col dans CE contexte */
.cards-grid > .col{
  float: none !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;    /* pour étirer la carte en hauteur */
}

/* carte pleine hauteur + centrée joliment */
.cards-grid .card{
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 580px;
  margin: 0 auto;              /* centre la carte dans sa colonne */
}
.cards-grid .card .card-content{ flex: 1 1 auto; }
.cards-grid .card .card-action { margin-top: auto; }

/* images uniformes (évite les décalages visuels) */
.cards-grid .card .card-image img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

/* Mobile : 1 colonne */
@media (max-width: 600px){
  .cards-grid{ grid-template-columns: 1fr !important; gap: 16px !important; }
  .cards-grid .card .card-image img{ height: 190px; }
}
/* Top-bar minimale et sûre */
.lr-nav { background:#fff; }
.lr-logo { height:54px; display:block; }

nav { overflow: visible; }               /* pour que le dropdown dépasse du nav */
.dropdown-content { z-index: 1005; }     /* par-dessus la page */

@media (max-width: 992px){
  nav .brand-logo { left:12px; transform:none; }
  nav .sidenav-trigger { position:absolute; right:12px; top:50%; transform:translateY(-50%); }
  nav .nav-wrapper { min-height:56px; }
}

/* la rangée devient un conteneur flex qui aligne et égalise la hauteur sur la ligne */
                 /* chaque colonne s'étire à la hauteur de la ligne */
.cards-row .card{ display:flex; flex-direction:column; width:100%; height:100%; }
.cards-row .card-content{ flex:1 1 auto; }         /* pousse l'action en bas */
.cards-row .card-image img{ display:block; width:100%; height:auto; }
/* Empêche l'effet escalier en 2 colonnes : chaque paire commence sous la précédente */
@media (min-width: 993px){
  .cards-row > .col:nth-child(odd){
    clear: left;  /* ou clear: both; */
  }
}
.cards-row { margin-bottom: 24px; } /* espace entre les lignes de 2 cartes */
/* neutralise la sous-barre en mobile sans la supprimer */
@media (max-width: 992px){
  nav.nav-sub{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  nav.nav-sub *{ display: none !important; } /* masque son contenu */
}
/* Accueil (cards-row) : image non étirée, garde son ratio */
.cards-row .card .card-image { height:auto; }
.cards-row .card .card-image img {
  width:100%;
  height:auto !important;   /* annule les height:180/190/220px */
  object-fit:contain;       /* pas de recadrage */
  display:block;
}
/* 2 colonnes propres + images recadrées sans déformation */
.cards-row { margin-left:-.75rem; margin-right:-.75rem; } /* marges Materialize */
.cards-row > .col { padding:1rem; margin-bottom:24px; }

.cards-row .card { display:flex; flex-direction:column; width:100%; } /* pour pousser le bas */
.cards-row .card-image { height:220px; overflow:hidden; }
.cards-row .card-image img { width:100%; height:100%; object-fit:cover; display:block; }

/