/* ══════════════════════════════════════════
   BOUTON CLUSIER
══════════════════════════════════════════ */
.btn-clusier {
  display: inline-flex;
  align-items: stretch;
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
  gap: 0;
}

/* Override fill:none défini dans les <style> internes des SVGs */
.btn-clusier svg .cls-1 {
  fill: var(--white, #ffffff) !important;
  stroke: none !important;
}

/* Conteneur SVG — positionné pour empiler default/hover */
.btn-clusier__svg {
  display: flex;
  align-items: stretch;
  position: relative;
  margin: 0;
  padding: 0;
  font-size: 0;
}

.btn-clusier__svg-default,
.btn-clusier__svg-hover {
  display: flex;
  align-items: stretch;
  transition: opacity 0.25s ease;
}

/* SVG hover caché par défaut, positionné par-dessus */
.btn-clusier__svg-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.btn-clusier__svg svg {
  display: block;
  height: 100%;
  min-height: 32px;
  width: auto;
}

/* Partie centrale */
.btn-clusier__text {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  border-top: 1px solid var(--white, #ffffff);
  border-bottom: 1px solid var(--white, #ffffff);
  transition: background 0.25s ease, color 0.25s ease;
}


/* ══════════════════════════════════════════
   --white : contour par défaut → plein au hover
══════════════════════════════════════════ */
.btn-clusier--white .btn-clusier__text {
  background: transparent;
  color: var(--white, #ffffff);
}

.btn-clusier--white:hover .btn-clusier__svg-default { 
  opacity: 0;
}

.btn-clusier--white:hover .btn-clusier__svg-hover   { 
  opacity: 1; 
}

.btn-clusier--white:hover .btn-clusier__text {
  background: var(--white, #ffffff);
  color: var(--navy-clusier, #172535);
  border-color: var(--white, #ffffff);
}

/* Au hover, les coins pleins doivent être blancs avec fill navy pour le cls-1 */
.btn-clusier--white:hover .btn-clusier__svg-hover svg .cls-1 {
  fill: var(--white, #ffffff) !important;
}

/* ══════════════════════════════════════════
   --navy  (pages intérieures — fond clair)
   Défaut : contour navy, centre transparent
   Hover  : plein navy, texte blanc
══════════════════════════════════════════ */
.btn-clusier--navy svg .cls-1 {
  fill: var(--navy-clusier, #172535) !important;
}

.btn-clusier--navy .btn-clusier__text {
  background: transparent;
  color: var(--navy-clusier, #172535);
  border-color: var(--navy-clusier, #172535);
}

.btn-clusier--navy:hover .btn-clusier__svg-default { 
  opacity: 0; 
}

.btn-clusier--navy:hover .btn-clusier__svg-hover   { 
  opacity: 1;
}

.btn-clusier--navy:hover .btn-clusier__text {
  background: var(--navy-clusier, #172535);
  color: var(--white, #ffffff);
}

/* ══════════════════════════════════════════
   --solid : plein par défaut → contour au hover
══════════════════════════════════════════ */
.btn-clusier--solid .btn-clusier__svg-default { 
  opacity: 0;
}

.btn-clusier--solid .btn-clusier__svg-hover   { opacity: 1; }

.btn-clusier--solid .btn-clusier__text {
  background: var(--white, #ffffff);
  color: var(--navy-clusier, #172535);
  border-color: var(--white, #ffffff);
}

.btn-clusier--solid:hover .btn-clusier__svg-default { 
  opacity: 1;
}

.btn-clusier--solid:hover .btn-clusier__svg-hover   {
  opacity: 0;
}

.btn-clusier--solid:hover .btn-clusier__text {
  background: transparent;
  color: var(--white, #ffffff);
  border-color: var(--white, #ffffff);
}