/* ============================================================
   Régénération Agroécologique — couche custom au-dessus du
   bundle CSS compilé d'Odoo (frontend.css).
   Palette : o-color-1 #966622 / 2 #275933 / 3 #1F3F1D / 4 #FFF / 5 #1B1C01
   ============================================================ */

/* Font Awesome 4.7 : le bundle Odoo pointe vers des fichiers de police
   absents de ce déploiement statique — on rebranche la famille en local. */
@font-face {
  font-family: 'FontAwesome';
  src: url('/assets/fonts/fontawesome-webfont.woff2') format('woff2'),
       url('/assets/fonts/fontawesome-webfont.woff') format('woff'),
       url('/assets/fonts/fontawesome-webfont.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --rege-green: #275933;
  --rege-green-dark: #1F3F1D;
  --rege-brown: #966622;
  --rege-dark: #1B1C01;
}

html { scroll-behavior: smooth; }
/* overflow-x:hidden casse position:sticky → on utilise clip (pas de conteneur
   de défilement) pour garder le header collant tout en bloquant le scroll H. */
body { overflow-x: clip; }
#wrapwrap { overflow-x: clip !important; overflow-y: visible !important; }

/* ---------- Fix grille Odoo : o_grid_mode doit battre .d-flex ----------
   Certains conteneurs ont les classes "row d-flex o_grid_mode" ; .d-flex
   (display:flex!important) et .o_grid_mode (display:grid!important) ont la
   même spécificité, on force donc la grille en ≥992px avec 2 classes. */
@media (min-width: 992px) {
  .row.o_grid_mode,
  .o_grid_mode.d-flex {
    display: grid !important;
    grid-auto-rows: 50px;
    grid-template-columns: repeat(12, 1fr);
  }
}

/* ---------- Header (logo centré + menu dessous, fond vert) ---------- */
#top.o_header_standard {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: var(--rege-green) !important; /* fond vert TOUJOURS, même scrollé */
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
#top .navbar-nav .nav-link {
  font-weight: 600;
  padding: .35rem 1rem;
  border-radius: 999px;
  transition: background-color .15s ease, color .15s ease;
}
#top .navbar-nav .nav-link:hover,
#top .navbar-nav .nav-link:focus,
#top .navbar-nav .nav-link.active,
#top .navbar-nav .nav-item.active .nav-link {
  background: rgba(0,0,0,.22) !important;
  color: #fff !important;
}
#top .navbar-nav .nav-link:hover *,
#top .navbar-nav .nav-link.active * { color: #fff !important; }
#top .navbar-toggler:focus { box-shadow: none; }

/* Pas de transition : on veut 2 états nets du header (pas d'animation entre les deux) */
#top, #top * { transition: none !important; }

/* --- Transformation au scroll (desktop) : logo centré + menu dessous
       devient une barre compacte logo à GAUCHE / menu à DROITE --- */
@media (min-width: 992px) {
  #top.rege-scrolled .container.flex-column {
    flex-direction: row !important;
    align-items: center;
    flex-wrap: nowrap;
  }
  #top.rege-scrolled .navbar-brand {
    margin: 0 !important;   /* logo à gauche */
    height: auto !important; min-height: 0 !important;  /* sinon le lien logo reste à 7.5rem */
    display: flex !important; align-items: center !important;
  }
  #top.rege-scrolled .navbar-brand img { height: 2.2rem !important; }
  #top.rege-scrolled .navbar-collapse { flex-grow: 1 !important; align-items: center !important; }
  #top.rege-scrolled .navbar-nav {
    justify-content: flex-end !important;   /* menu poussé à droite */
    width: 100%;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  #top.rege-scrolled .o_navbar { padding-top: .3rem !important; padding-bottom: .3rem !important; min-height: 0 !important; }
  #top.rege-scrolled .container.flex-column { min-height: 0 !important; align-items: center !important; }
  #top.rege-scrolled .navbar-nav .nav-link { padding-top: .25rem !important; padding-bottom: .25rem !important; }
}

/* ---------- Animations au scroll (o_animate) ----------
   Le CSS d'Odoo met .o_animate en visibility:hidden et c'est son runtime JS
   (non chargé ici) qui révèle. On garantit donc la visibilité, puis on
   rejoue une entrée douce nous-mêmes via .o_rege_reveal (ajoutée en JS). */
.o_animate {
  visibility: visible !important;
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}
/* Entrée douce gérée par notre JS (IntersectionObserver) */
.o_rege_anim { opacity: 0; transform: translateY(24px); }
.o_rege_anim.o_rege_reveal {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s ease;
}
@media (prefers-reduced-motion: reduce) {
  .o_rege_anim, .o_rege_anim.o_rege_reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Footer ---------- */
#footer a { text-decoration: none; }
#footer a:hover { text-decoration: underline; }
#footer .s_social_media a { display: inline-block; }

/* ---------- Bannière formulaire désactivé (statique) ---------- */
[data-disabled-form] { position: relative; }

/* ---------- Petits ajustements images grille ---------- */
.o_grid_item_image img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Responsive : header sur mobile ---------- */
@media (max-width: 991.98px) {
  #top .container.flex-column { flex-direction: row !important; flex-wrap: wrap; }
  #top .navbar-brand { margin: 0 auto 0 0 !important; }
  #top .navbar-brand img { height: 3.5rem !important; }
  #top .navbar-nav .nav-link { text-align: center; }
}