/* ==========================================================================
   Orvantyx — jeu d'icônes

   Usage, identique à Font Awesome :
       <i class="orv orv-securite"></i>

   L'icône hérite de la couleur du texte (currentColor) et se dimensionne
   avec font-size. Aucun fichier de police à téléverser.
   ========================================================================== */

.orv {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;   /* aligne l'icône sur la ligne de base du texte */
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  flex-shrink: 0;
}

/* Sécurité */
.orv-securite {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22currentColor%22><path d=%22M3.3 6.4 19 3.1a1.6 1.6 0 0 1 1.9 1.2l.9 4.2a1.6 1.6 0 0 1-1.2 1.9 L4.9 13.7a1.6 1.6 0 0 1-1.9-1.2l-.9-4.2A1.6 1.6 0 0 1 3.3 6.4Z%22/><circle cx=%227.4%22 cy=%229.1%22 r=%222.1%22 fill=%22%23000%22 fill-opacity=%22.35%22/><path d=%22M11.6 13.1 12.3 16a3.4 3.4 0 0 1-3.3 4.2H7.7v-2h1.3a1.4 1.4 0 0 0 1.4-1.7l-.6-2.6 1.8-.8Z%22/><path d=%22M5 20.2h6.6v1.8H5z%22/></svg>");
          mask-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22currentColor%22><path d=%22M3.3 6.4 19 3.1a1.6 1.6 0 0 1 1.9 1.2l.9 4.2a1.6 1.6 0 0 1-1.2 1.9 L4.9 13.7a1.6 1.6 0 0 1-1.9-1.2l-.9-4.2A1.6 1.6 0 0 1 3.3 6.4Z%22/><circle cx=%227.4%22 cy=%229.1%22 r=%222.1%22 fill=%22%23000%22 fill-opacity=%22.35%22/><path d=%22M11.6 13.1 12.3 16a3.4 3.4 0 0 1-3.3 4.2H7.7v-2h1.3a1.4 1.4 0 0 0 1.4-1.7l-.6-2.6 1.8-.8Z%22/><path d=%22M5 20.2h6.6v1.8H5z%22/></svg>");
}

/* Solaire & LED */
.orv-solaire {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22currentColor%22><circle cx=%2212%22 cy=%2212%22 r=%225%22/><path d=%22M12 1.4a1 1 0 0 1 1 1v2.2a1 1 0 0 1-2 0V2.4a1 1 0 0 1 1-1Z%22/><path d=%22M12 18.4a1 1 0 0 1 1 1v2.2a1 1 0 0 1-2 0v-2.2a1 1 0 0 1 1-1Z%22/><path d=%22M22.6 12a1 1 0 0 1-1 1h-2.2a1 1 0 0 1 0-2h2.2a1 1 0 0 1 1 1Z%22/><path d=%22M5.6 12a1 1 0 0 1-1 1H2.4a1 1 0 0 1 0-2h2.2a1 1 0 0 1 1 1Z%22/><path d=%22M19.5 4.5a1 1 0 0 1 0 1.4l-1.6 1.6a1 1 0 1 1-1.4-1.4l1.6-1.6a1 1 0 0 1 1.4 0Z%22/><path d=%22M7.5 16.5a1 1 0 0 1 0 1.4l-1.6 1.6a1 1 0 0 1-1.4-1.4l1.6-1.6a1 1 0 0 1 1.4 0Z%22/><path d=%22M19.5 19.5a1 1 0 0 1-1.4 0l-1.6-1.6a1 1 0 0 1 1.4-1.4l1.6 1.6a1 1 0 0 1 0 1.4Z%22/><path d=%22M7.5 7.5a1 1 0 0 1-1.4 0L4.5 5.9a1 1 0 0 1 1.4-1.4l1.6 1.6a1 1 0 0 1 0 1.4Z%22/></svg>");
          mask-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22currentColor%22><circle cx=%2212%22 cy=%2212%22 r=%225%22/><path d=%22M12 1.4a1 1 0 0 1 1 1v2.2a1 1 0 0 1-2 0V2.4a1 1 0 0 1 1-1Z%22/><path d=%22M12 18.4a1 1 0 0 1 1 1v2.2a1 1 0 0 1-2 0v-2.2a1 1 0 0 1 1-1Z%22/><path d=%22M22.6 12a1 1 0 0 1-1 1h-2.2a1 1 0 0 1 0-2h2.2a1 1 0 0 1 1 1Z%22/><path d=%22M5.6 12a1 1 0 0 1-1 1H2.4a1 1 0 0 1 0-2h2.2a1 1 0 0 1 1 1Z%22/><path d=%22M19.5 4.5a1 1 0 0 1 0 1.4l-1.6 1.6a1 1 0 1 1-1.4-1.4l1.6-1.6a1 1 0 0 1 1.4 0Z%22/><path d=%22M7.5 16.5a1 1 0 0 1 0 1.4l-1.6 1.6a1 1 0 0 1-1.4-1.4l1.6-1.6a1 1 0 0 1 1.4 0Z%22/><path d=%22M19.5 19.5a1 1 0 0 1-1.4 0l-1.6-1.6a1 1 0 0 1 1.4-1.4l1.6 1.6a1 1 0 0 1 0 1.4Z%22/><path d=%22M7.5 7.5a1 1 0 0 1-1.4 0L4.5 5.9a1 1 0 0 1 1.4-1.4l1.6 1.6a1 1 0 0 1 0 1.4Z%22/></svg>");
}

/* Auto */
.orv-auto {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22currentColor%22><path d=%22M5.6 5.5A2.4 2.4 0 0 1 7.9 4h8.2a2.4 2.4 0 0 1 2.3 1.5L20 10h.6 A1.4 1.4 0 0 1 22 11.4v4.2a1.4 1.4 0 0 1-1.4 1.4H20v1.6a1.4 1.4 0 0 1-1.4 1.4h-1.2 a1.4 1.4 0 0 1-1.4-1.4V17H8v1.6A1.4 1.4 0 0 1 6.6 20H5.4A1.4 1.4 0 0 1 4 18.6 V17h-.6A1.4 1.4 0 0 1 2 15.6v-4.2A1.4 1.4 0 0 1 3.4 10H4l1.6-4.5Z%22/><path d=%22M6.5 10 7.7 6.6a.8.8 0 0 1 .8-.6h7a.8.8 0 0 1 .8.6L17.5 10h-11Z%22 fill=%22%23000%22 fill-opacity=%22.35%22/><circle cx=%226.6%22 cy=%2213.4%22 r=%221.3%22 fill=%22%23000%22 fill-opacity=%22.35%22/><circle cx=%2217.4%22 cy=%2213.4%22 r=%221.3%22 fill=%22%23000%22 fill-opacity=%22.35%22/></svg>");
          mask-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22currentColor%22><path d=%22M5.6 5.5A2.4 2.4 0 0 1 7.9 4h8.2a2.4 2.4 0 0 1 2.3 1.5L20 10h.6 A1.4 1.4 0 0 1 22 11.4v4.2a1.4 1.4 0 0 1-1.4 1.4H20v1.6a1.4 1.4 0 0 1-1.4 1.4h-1.2 a1.4 1.4 0 0 1-1.4-1.4V17H8v1.6A1.4 1.4 0 0 1 6.6 20H5.4A1.4 1.4 0 0 1 4 18.6 V17h-.6A1.4 1.4 0 0 1 2 15.6v-4.2A1.4 1.4 0 0 1 3.4 10H4l1.6-4.5Z%22/><path d=%22M6.5 10 7.7 6.6a.8.8 0 0 1 .8-.6h7a.8.8 0 0 1 .8.6L17.5 10h-11Z%22 fill=%22%23000%22 fill-opacity=%22.35%22/><circle cx=%226.6%22 cy=%2213.4%22 r=%221.3%22 fill=%22%23000%22 fill-opacity=%22.35%22/><circle cx=%2217.4%22 cy=%2213.4%22 r=%221.3%22 fill=%22%23000%22 fill-opacity=%22.35%22/></svg>");
}

/* Animaux */
.orv-animaux {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22currentColor%22><ellipse cx=%226.2%22 cy=%229.6%22 rx=%222.5%22 ry=%223.1%22 transform=%22rotate(-18 6.2 9.6)%22/><ellipse cx=%2210.6%22 cy=%226.2%22 rx=%222.3%22 ry=%223%22 transform=%22rotate(-7 10.6 6.2)%22/><ellipse cx=%2215.6%22 cy=%226.4%22 rx=%222.3%22 ry=%223%22 transform=%22rotate(9 15.6 6.4)%22/><ellipse cx=%2219.4%22 cy=%2210.2%22 rx=%222.4%22 ry=%223%22 transform=%22rotate(22 19.4 10.2)%22/><path d=%22M12.7 12.2c2.6 0 4.4 1.5 5.6 3.2 1.5 2.1.7 4.9-1.8 5.4-1.2.2-2.4-.2 -3.8-.2s-2.6.4-3.8.2c-2.5-.5-3.3-3.3-1.8-5.4 1.2-1.7 3-3.2 5.6-3.2Z%22/></svg>");
          mask-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22currentColor%22><ellipse cx=%226.2%22 cy=%229.6%22 rx=%222.5%22 ry=%223.1%22 transform=%22rotate(-18 6.2 9.6)%22/><ellipse cx=%2210.6%22 cy=%226.2%22 rx=%222.3%22 ry=%223%22 transform=%22rotate(-7 10.6 6.2)%22/><ellipse cx=%2215.6%22 cy=%226.4%22 rx=%222.3%22 ry=%223%22 transform=%22rotate(9 15.6 6.4)%22/><ellipse cx=%2219.4%22 cy=%2210.2%22 rx=%222.4%22 ry=%223%22 transform=%22rotate(22 19.4 10.2)%22/><path d=%22M12.7 12.2c2.6 0 4.4 1.5 5.6 3.2 1.5 2.1.7 4.9-1.8 5.4-1.2.2-2.4-.2 -3.8-.2s-2.6.4-3.8.2c-2.5-.5-3.3-3.3-1.8-5.4 1.2-1.7 3-3.2 5.6-3.2Z%22/></svg>");
}

/* Maison */
.orv-maison {
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22currentColor%22><path d=%22M11.3 2.4a1.1 1.1 0 0 1 1.4 0l9 7.3a1.1 1.1 0 0 1-.7 2H20v8.2 a1.1 1.1 0 0 1-1.1 1.1h-4.3v-5.5a1 1 0 0 0-1-1h-3.2a1 1 0 0 0-1 1V21H5.1 A1.1 1.1 0 0 1 4 19.9v-8.2H2.9a1.1 1.1 0 0 1-.7-2l9.1-7.3Z%22/></svg>");
          mask-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22currentColor%22><path d=%22M11.3 2.4a1.1 1.1 0 0 1 1.4 0l9 7.3a1.1 1.1 0 0 1-.7 2H20v8.2 a1.1 1.1 0 0 1-1.1 1.1h-4.3v-5.5a1 1 0 0 0-1-1h-3.2a1 1 0 0 0-1 1V21H5.1 A1.1 1.1 0 0 1 4 19.9v-8.2H2.9a1.1 1.1 0 0 1-.7-2l9.1-7.3Z%22/></svg>");
}

/* --- Tailles ------------------------------------------------------------ */
.orv-sm { font-size: 1rem; }
.orv-md { font-size: 1.5rem; }
.orv-lg { font-size: 2rem; }

/* --- Barre de raccourcis mobile ----------------------------------------- */
/* À placer dans le header. Masquée au-dessus de 768 px : sur desktop,
   c'est le menu principal qui joue ce rôle. */

.orv-quicknav {
  display: none;
}

@media (max-width: 768px) {
  .orv-quicknav {
    display: flex;
    justify-content: space-between;
    gap: 0;
    padding: 10px 0;
    background: #00ABC5;
  }

  .orv-quicknav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 6px 2px;
    color: #fff;
    text-decoration: none;
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    /* 44 px de hauteur tactile minimum, recommandation WCAG */
    min-height: 44px;
    transition: background-color .18s ease, color .18s ease;
  }

  .orv-quicknav a .orv {
    font-size: 23px;
    color: #fff;
  }

  .orv-quicknav a:hover,
  .orv-quicknav a:focus-visible {
    background: rgba(255, 255, 255, .18);
  }

  /* Catégorie en cours : pastille blanche, icône cyan. */
  .orv-quicknav a[aria-current="page"] {
    background: #fff;
    color: #00ABC5;
    font-weight: 600;
  }
  .orv-quicknav a[aria-current="page"] .orv {
    color: #00ABC5;
  }
}

/* Repli pour les navigateurs sans support des masques CSS : l'icône
   disparaît proprement au lieu d'afficher un carré plein. */
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
  .orv { background-color: transparent; }
}