/*components.css – Composants spécifiques (hero, boutons...)*/

#announcement-bar:hover{
    background-color: #e4f865;
}

.off-canvas{
    color: #273445;
    background-color: #eab53a1d;
    padding: 1.2rem 0 1.2rem;
}
.off-canvas h4 {
    color: #8eb73e;
    font-size: 1.4rem;
}
#offCanvasLeftPush{
    background-color: #2a4b43;
    color: white;
    overflow-y: hidden;
}
#offCanvasLeftPush a{ 
    color: white;
}
 
#offCanvasLeftPush ul li:hover a{ 
    color: #e9fba5; 
}
#offCanvasLeftPush ul li:hover >a >span,
#offCanvasLeftPush ul li >a.activated >span{  
    box-shadow: 0 2px 0 currentcolor;
}

form fieldset{
    padding: 1.2rem;
    border: 1px solid;
    margin-bottom: 2rem;
}
/*1. Section d'Entête (Hero Section)*/

.hero-section:not(.home) .grid-x {
  position: relative;
  min-height: 380px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero-section.products .grid-x {
    color: white;
    background-image: url(../images/static/fresh-locally-grown-products.avif);
}
.hero-section.agriculture .grid-x {
    color: white;
    background-color: #446147;
    background-image: url(../images/wallpapers/rural-farming.jpg);
}
.hero-section.projects .grid-x {
    color: white;
    background-color: #446147;
    background-image: url(../images/wallpapers/vegetables-basket.avif);
    background-position: bottom;
}


.hero-section.contacts .grid-x {
    color: white;
    background-color: #446147;
    background-image: url(../images/wallpapers/coffee-beans-top-view.avif);
}

/* Ajoute les autres sections ici... */

.hero-section:not(.home) .grid-x:after {
    content: attr(data-section);
    position: absolute;
    text-align: center;
    color: black;
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
    bottom: -1px;
    right: -1px;
    background: var(--body-background-primary);
    box-shadow: 0 2px var(--body-background-primary);
    padding: 1rem 6rem;
}

#global-nav a.active span {
    box-shadow: inset 0 -4px currentColor;
}
svg {
    vertical-align: middle;
}

.bg-blue{
    color: #fff;
    background-color: #00458c;
}





/*CUSTOM CURSOR*/
/* ---------- Custom cursor styles ---------- */
#custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none; /* laisse les clics passer */
  z-index: 2147483646; /* très au-dessus */
  mix-blend-mode: normal;
}

/* petit point central */
#custom-cursor .cursor-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 0;
  left: 0;
  background: #0b74ff; /* couleur du point */
  box-shadow: 0 0 8px rgba(11,116,255,0.6);
  transition: transform 120ms ease, background 150ms ease, opacity 120ms ease;
  will-change: transform, opacity;
  opacity: 1;
}

/* anneau autour du point */
#custom-cursor .cursor-ring {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 0;
  left: 0;
  border: 2px solid rgba(11,116,255,0.85);
  background: transparent;
  transition: transform 200ms cubic-bezier(.2,.8,.2,1), width 200ms, height 200ms, border-color 120ms;
  will-change: transform, width, height;
  opacity: .95;
}

/* cacher le curseur natif */
html.has-custom-cursor, body.has-custom-cursor {
  cursor: none !important;
}

/* survol d'élément cliquable (link, button, .is-clickable...) */
.has-custom-cursor .cursor-ring.link-hover {
  transform: translate(-50%, -50%) scale(1.38);
  border-color: rgba(255, 80, 80, 0.95);
}

/* clique : effet court */
#custom-cursor .cursor-dot.click {
  transform: translate(-50%, -50%) scale(.66);
  opacity: .8;
}

/* sur mobile on cache le custom cursor (touch devices) */
@media (hover: none), (pointer: coarse) {
  #custom-cursor { display: none; }
  html.has-custom-cursor, body.has-custom-cursor { cursor: auto !important; }
}