/* =========================================================
   Sidebar "Nos solutions" — Arterris Emballages
   Desktop : rail deploye, centre verticalement.
   Mobile  : bouton loupe, se deplie au clic, croix pour replier.
   ========================================================= */

:root{
  --c-brun:      #390A09;   /* icone au repos, brun de la charte */
  --c-vert:      #AFCA0B;   /* icone de la section active */
  --c-rouge:     #E4003A;   /* croix de fermeture */
  --header-h:    96px;      /* !! hauteur reelle de ton header sticky */
  --rail-w:      52px;      /* largeur du rail */
  --rail-hit:    50px;      /* hauteur d'un bouton = espacement vertical */
  --rail-icon:   24px;      /* taille d'affichage des icones */
  --rail-stroke: 2;         /* epaisseur du trait, en px reels */
  --rail-anim:   .25s;      /* duree du depliage */
}

/* Le header mobile est plus bas : la variable sert au scroll-margin
   des sections ET au positionnement du rail. Le JS la relit au resize. */
@media (max-width:767px){
  :root{
    --header-h: 88px;       /* !! hauteur reelle de ton header en mobile */
  }
}

/* ---------- le rail ---------- */
.solutions-rail{
  position:fixed;
  right:61px;
  top:50%;
  transform:translateY(-50%);
  z-index:90;

  display:flex;
  flex-direction:column;
  align-items:center;

  width:var(--rail-w);
  background:#fff;
  border-radius:calc(var(--rail-w) / 2);   /* pilule parfaite */
  box-shadow:0 4px 24px rgba(0,0,0,.12);
}

.solutions-rail__items{
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* ---------- un bouton ---------- */
.solutions-rail__link,
.solutions-rail__toggle{
  position:relative;
  display:grid;
  place-items:center;
  width:var(--rail-hit);
  height:var(--rail-hit);
  padding:0;
  border:0;
  background:none;
  border-radius:50%;
  color:var(--c-brun);          /* <-- pilote la couleur de l'icone */
  text-decoration:none;
  cursor:pointer;
  transition:color .25s ease;
}

.solutions-rail__link:hover{
  color:var(--c-vert);
}

.solutions-rail__link:focus-visible,
.solutions-rail__toggle:focus-visible{
  outline:2px solid var(--c-vert);
  outline-offset:2px;
}

/* etat actif, ajoute/retire par le JS */
.solutions-rail__link.is-active{
  color:var(--c-vert);
}

/* ---------- l'icone ---------- */
/* Les symbols n'ont ni couleur ni epaisseur : tout vient d'ici.
   vector-effect:non-scaling-stroke sur les traces fait que
   --rail-stroke vaut des px reels, quel que soit le viewBox
   du symbol (certaines icones sont en 24, d'autres en 96). */
.solutions-rail__icon{
  width:var(--rail-icon);
  height:var(--rail-icon);
  display:block;
  fill:none;
  stroke:currentColor;          /* <-- herite du color du lien */
  stroke-width:var(--rail-stroke);
  stroke-linecap:round;
  stroke-linejoin:round;
  overflow:visible;             /* evite le rognage du trait sur les bords */
  pointer-events:none;          /* les clics vont au lien, pas au SVG */
}

.solutions-rail__icon--close{
  color:var(--c-rouge);
  display:none;                 /* jamais visible par defaut */
}

/* Le bouton loupe n'existe qu'en mobile. Masque par defaut plutot que
   masque par une media query desktop : en cas de CSS partiellement
   charge, il reste invisible au lieu d'apparaitre a tort. */
.solutions-rail__toggle{display:none}

/* ---------- libelle au survol ---------- */
.solutions-rail__link::after{
  content:attr(data-label);
  position:absolute;
  right:calc(100% + 12px);
  top:50%;
  transform:translateY(-50%) translateX(6px);
  white-space:nowrap;
  font-size:12px;
  letter-spacing:.04em;
  padding:6px 10px;
  border-radius:6px;
  background:var(--c-brun);
  color:#fff;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.solutions-rail__link:hover::after,
.solutions-rail__link:focus-visible::after{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}

/* ---------- texte lecteur d'ecran ---------- */
.solutions-rail__sr{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

/* =========================================================
   MOBILE ET TABLETTE : rail repliable
   ========================================================= */
@media (max-width:767px){

  /* Ancre en haut a droite, sous le header, et non plus centre :
     le rail deplie est trop haut pour tenir centre sur un telephone. */
  .solutions-rail{
    right:20px;
    top:calc(var(--header-h) + 48px);
    transform:none;
    max-height:calc(100vh - var(--header-h) - 48px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }

  .solutions-rail__toggle{display:grid}

  /* Replie : seul le bouton reste. display:none retire aussi
     les liens du parcours au clavier. */
  .solutions-rail__items{display:none}

  .solutions-rail.is-open .solutions-rail__items{
    display:flex;
    animation:solutions-rail-in var(--rail-anim) ease both;
  }

  /* Le bouton montre la loupe, ou la croix une fois ouvert. */
  .solutions-rail.is-open .solutions-rail__icon--search{display:none}
  .solutions-rail.is-open .solutions-rail__icon--close{display:block}

  /* Pas d'infobulle au doigt : il n'y a pas de survol. */
  .solutions-rail__link::after{content:none}
}

@keyframes solutions-rail-in{
  from{opacity:0; transform:translateY(-8px)}
  to  {opacity:1; transform:none}
}

/* =========================================================
   Sections : compense la hauteur du header sticky.
   Une regle par classe de section, listees ensemble.
   ========================================================= */
.section-verre,
.section-caisse,
.section-cube,
.section-bac,
.section-impression,
.section-coffret,
.section-calage,
.section-surmesure{
  scroll-margin-top:var(--header-h);
}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .solutions-rail.is-open .solutions-rail__items{animation:none}
}

button:not([class*="elementor"]):not(.wp-block-button__link):hover{
  background-color:inherit;
  color:inherit;
}