/* ==========================================================================
   Réalisations Adarka — styles frontend
   Couleur principale : #00004F | Couleur secondaire (rare) : #E26600
   Police : Montserrat
   ========================================================================== */

.arw-grid-wrap, .arw-single, .arw-filters-zone {
  --arw-navy: #00004F;
  --arw-navy-2: #0E0E73;
  --arw-navy-tint: #ECECF6;
  --arw-orange: #E26600;
  --arw-bg-soft: #F7F8FB;
  --arw-border: #E4E6F0;
  --arw-text: #20222E;
  --arw-text-muted: #6B6E82;
  --arw-radius-lg: 0;
  --arw-radius-md: 0;
  --arw-radius-sm: 0;
  --arw-shadow: 0 1px 2px rgba(10,10,60,.05), 0 18px 30px -18px rgba(10,10,60,.24);
  font-family: 'Montserrat', sans-serif;
  color: var(--arw-text);
  box-sizing: border-box;
}
.arw-grid-wrap *, .arw-single *, .arw-filters-zone *,
.arw-related *, .arw-instance ~ .arw-filters-zone * { box-sizing: border-box; }

.arw-empty { color: var(--arw-text-muted); font-size: 15px; padding: 30px 0; }

/* ---------------------------------- Grille ---------------------------------- */
/* Le nombre de colonnes vient de --arw-cols, défini par un <style> propre à
   chaque instance de shortcode (voir ARW_Templates::grid). Valeur de repli
   à 3 si jamais la variable n'est pas fournie. */
.arw-grid {
  display: grid;
  grid-template-columns: repeat(var(--arw-cols, 3), 1fr);
  gap: 30px;
}
@media (max-width: 1024px) { .arw-grid { gap: 24px; } }
@media (max-width: 640px)  { .arw-grid { gap: 20px; } }

/* ------------------------------------------------------------- Carrousel */
.arw-carousel { position: relative; }
.arw-grid--carousel {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  /* masque discret de la barre de défilement native, la navigation se fait via les flèches ou le doigt */
  scrollbar-width: none;
}
.arw-grid--carousel::-webkit-scrollbar { display: none; }
.arw-grid--carousel .arw-card {
  flex: 0 0 calc((100% - (var(--arw-cols, 3) - 1) * 30px) / var(--arw-cols, 3));
  scroll-snap-align: center;
}
@media (max-width: 1024px) {
  .arw-grid--carousel { gap: 24px; }
  .arw-grid--carousel .arw-card { flex-basis: calc((100% - (var(--arw-cols, 3) - 1) * 24px) / var(--arw-cols, 3)); }
}
@media (max-width: 640px)  {
  .arw-grid--carousel {
    gap: 16px;
    /* Le padding "peek" (aperçu des cartes voisines) est désormais calculé
       par instance côté PHP (voir ARW_Templates::grid()), selon le nombre
       de colonnes réellement configuré à ce palier — pas figé ici. */
  }
  .arw-grid--carousel .arw-card { flex-basis: 86%; }
}

.arw-carousel__controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}
.arw-carousel__nav {
  position: static;
  width: 46px; height: 46px; border-radius: 0;
  background: #fff; border: 1px solid var(--arw-border); color: var(--arw-navy);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.arw-carousel__nav:hover { background: var(--arw-navy); color: #fff; border-color: var(--arw-navy); }
.arw-carousel__nav svg { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .arw-carousel__nav { width: 40px; height: 40px; }
}

/* ---------------------------------- Card ---------------------------------- */
.arw-card {
  background: #fff;
  border: 1px solid var(--arw-border);
  border-radius: 0;
  overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.arw-card:hover { transform: translateY(-5px); box-shadow: var(--arw-shadow); border-color: transparent; }

.arw-card__thumb-link { display: block; }
.arw-card__thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--arw-navy);
}
/* !important : de nombreux thèmes / Elementor appliquent une règle globale
   du type "img { height:auto; max-width:100% }" qui, si elle l'emporte,
   empêche l'image de remplir tout son cadre et laisse apparaître le fond
   navy de secours derrière elle. On verrouille ici pour ne jamais dépendre
   de l'ordre de chargement des styles du thème. */
.arw-card__thumb img {
  width: 100% !important; height: 100% !important; object-fit: cover !important;
  max-width: none !important; display: block;
  transition: transform .5s ease;
}
.arw-card:hover .arw-card__thumb img { transform: scale(1.045); }
.arw-card__thumb-fallback {
  position: absolute; inset: 0;
  background: linear-gradient(155deg, var(--arw-navy), #2B2BAE);
}

.arw-card__year {
  position: absolute; top: 14px; right: 14px;
  background: rgba(255,255,255,.92); color: var(--arw-navy);
  font-weight: 700; font-size: 12px;
  padding: 5px 10px; border-radius: 0;
}
.arw-card__cat {
  position: absolute; left: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--arw-navy); color: #fff;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  padding: 6px 12px 6px 10px; border-radius: 0;
}
.arw-card__cat i { width: 6px; height: 6px; border-radius: 0; background: var(--arw-orange); flex: none; }

.arw-card__body { padding: 22px 22px 20px; }
.arw-card__client {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--arw-text-muted); font-weight: 500;
  margin-bottom: 8px;
}
.arw-card__client svg { width: 13px; height: 13px; flex: none; opacity: .7; }

.arw-card__title { font-size: 19px; font-weight: 700; margin: 0 0 10px; line-height: 1.3; }
.arw-card__title a { color: var(--arw-text); }
.arw-card__title a:hover { color: var(--arw-navy); }

.arw-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--arw-border);
}
.arw-card__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.arw-card__tags span {
  font-size: 11px; color: var(--arw-text-muted); background: var(--arw-bg-soft);
  padding: 4px 9px; border-radius: 0; font-weight: 600;
}
.arw-card__arrow {
  width: 32px; height: 32px; border-radius: 0;
  border: 1px solid var(--arw-border);
  display: flex; align-items: center; justify-content: center;
  flex: none; transition: background .2s, border-color .2s;
}
.arw-card__arrow svg { width: 14px; height: 14px; color: var(--arw-navy); }
.arw-card:hover .arw-card__arrow { background: var(--arw-navy); border-color: var(--arw-navy); }
.arw-card:hover .arw-card__arrow svg { color: #fff; }

/* ------------------------------ Card v2 (mise en avant) ------------------------------ */
/* Pensée pour 1-2 colonnes ou un carrousel qui montre peu de réalisations à
   la fois : sur PC, image à gauche / informations à droite (layout plus
   éditorial) ; en dessous de 641px, retour à un empilement vertical classique
   (image en haut) pour rester lisible sur petit écran. Espacements resserrés
   volontairement pour garder une card compacte en hauteur, même avec le
   layout horizontal. Extrait de description visible et CTA toujours affiché
   (pas seulement au survol comme la flèche de la v1). */
.arw-card--v2 .arw-card__body { padding: 20px 24px 22px; }
.arw-card__cat-inline {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; color: var(--arw-navy);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 8px;
}
.arw-card__cat-inline i { width: 6px; height: 6px; border-radius: 50%; background: var(--arw-orange); flex: none; }
.arw-card__title--lg { font-size: 20px; line-height: 1.3; margin-bottom: 8px; }
.arw-card--v2 .arw-card__client { margin-bottom: 10px; }
.arw-card__excerpt {
  font-size: 13.5px; line-height: 1.6; color: var(--arw-text-muted);
  margin: 0 0 14px;
}
.arw-card__cta {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 700; color: var(--arw-navy);
  padding-top: 12px; border-top: 1px solid var(--arw-border);
  width: 100%;
}
.arw-card__cta svg { width: 15px; height: 15px; transition: transform .2s; }
.arw-card--v2:hover .arw-card__cta svg { transform: translateX(4px); }

/* Empilement vertical par défaut (mobile) : image en haut, comme la v1. */
.arw-card--v2 .arw-card__thumb { aspect-ratio: 3 / 2; }

/* PC / tablette large : image à gauche, contenu à droite. Largeur plafonnée
   et centrée dans sa cellule (sinon, en colonnes="1" ou en carrousel « une
   carte à la fois », la card s'étire sur presque toute la largeur de
   l'écran). L'image garde un cadre fixe (aspect-ratio) au lieu de s'étirer
   sur toute la hauteur de la colonne de texte, pour rester bien contenue
   quelle que soit la longueur de la description — et pour que la card entière
   reste compacte en hauteur plutôt que de s'étirer verticalement. */
@media (min-width: 641px) {
  .arw-card--v2 {
    display: flex; align-items: stretch;
    max-width: 760px; margin: 0 auto;
    /* Réglable via l'attribut de shortcode hauteur="" (px) ; 380px par
       défaut si non précisé. C'est une hauteur ferme (pas un plancher) :
       une valeur plus petite que le contenu naturel doit bien réduire la
       card, quitte à masquer le débordement plutôt que l'ignorer. */
    height: var( --arw-v2-height, 380px );
    overflow: hidden;
  }
  .arw-card--v2 .arw-card__thumb-link { flex: 0 0 40%; }
  .arw-card--v2 .arw-card__thumb { height: 100%; aspect-ratio: auto; min-height: 0; }
  .arw-card--v2 .arw-card__body {
    flex: 1 1 auto;
    display: flex; flex-direction: column; justify-content: center;
    min-width: 0;
    overflow: hidden;
  }
}

@media (max-width: 640px) {
  .arw-card--v2 .arw-card__body { padding: 18px 18px 20px; }
  .arw-card__title--lg { font-size: 19px; }
}

/* ---------------------------------- Pagination ---------------------------------- */
.arw-pager { display: flex; justify-content: center; gap: 8px; margin-top: 44px; flex-wrap: wrap; }
.arw-pager button {
  width: 38px; height: 38px; border-radius: 0; border: 1px solid var(--arw-border);
  background: #fff; font-family: 'Montserrat', sans-serif; font-size: 13.5px; font-weight: 700;
  color: var(--arw-text-muted); cursor: pointer; transition: .2s;
}
.arw-pager button.active { background: var(--arw-navy); border-color: var(--arw-navy); color: #fff; }
.arw-pager button:hover:not(.active) { border-color: var(--arw-navy); color: var(--arw-navy); }

/* ---------------------------------- Filtres ---------------------------------- */
.arw-filters-zone { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; flex-wrap: wrap; }

.arw-filters-trigger {
  display: none;
  align-items: center; gap: 8px;
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14px;
  padding: 12px 20px; border-radius: 0;
  border: 1px solid var(--arw-navy); color: var(--arw-navy);
  background: #fff; cursor: pointer;
}
.arw-filters-trigger svg { width: 15px; height: 15px; }

.arw-filters__backdrop { display: none; }

.arw-filters {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--arw-bg-soft); border: 1px solid var(--arw-border);
  border-radius: 0; padding: 14px 18px; flex: 1 1 auto;
}
.arw-filters__panel { display: contents; }
.arw-filters__head { display: none; }
.arw-filters__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.arw-select { position: relative; display: flex; flex-direction: column; gap: 4px; }
.arw-select > span { display: none; }
.arw-select select {
  appearance: none; -webkit-appearance: none;
  font-family: 'Montserrat', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--arw-text);
  background: #fff; border: 1px solid var(--arw-border); border-radius: 0;
  padding: 10px 34px 10px 16px; cursor: pointer; min-width: 170px;
}
.arw-select::after {
  content: ""; position: absolute; right: 14px; top: 18px;
  width: 7px; height: 7px; border-right: 1.6px solid var(--arw-text-muted); border-bottom: 1.6px solid var(--arw-text-muted);
  transform: rotate(45deg); pointer-events: none;
}

.arw-filters__actions { display: none; }

.arw-filters-count {
  margin-left: auto; font-size: 13px; color: var(--arw-text-muted); font-weight: 500;
}
.arw-filters-count b { color: var(--arw-navy); }

/* Popup mobile pour les filtres */
@media (max-width: 700px) {
  .arw-filters-trigger { display: inline-flex; }

  .arw-filters-zone { justify-content: space-between; }

  .arw-filters { display: none; }
  .arw-filters.is-open { display: block; position: fixed; inset: 0; z-index: 9999; padding: 0; background: none; border: none; }

  .arw-filters.is-open .arw-filters__backdrop {
    display: block; position: fixed; inset: 0; background: rgba(10,10,40,.45);
  }
  .arw-filters.is-open .arw-filters__panel {
    display: block;
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(92vw, 420px); max-height: 82vh; overflow-y: auto;
    background: #fff; border-radius: 0;
    box-shadow: 0 30px 60px -20px rgba(0,0,20,.35);
    padding: 22px 22px 24px;
  }
  .arw-filters__head {
    display: flex; align-items: center; justify-content: space-between;
    font-weight: 700; font-size: 15.5px; color: var(--arw-navy); margin-bottom: 18px;
  }
  .arw-filters__close {
    width: 30px; height: 30px; border-radius: 0; border: none; background: var(--arw-bg-soft);
    font-size: 20px; line-height: 1; cursor: pointer; color: var(--arw-text-muted);
  }
  .arw-filters__row { flex-direction: column; align-items: stretch; gap: 14px; }
  .arw-select > span { display: block; font-size: 12px; font-weight: 700; color: var(--arw-text-muted); margin-bottom: 2px; }
  .arw-select select { width: 100%; }
  .arw-filters__actions {
    display: flex; gap: 10px; margin-top: 20px;
  }
  .arw-filters__reset {
    flex: 1; border: 1px solid var(--arw-border); background: #fff; color: var(--arw-text-muted);
    border-radius: 0; padding: 12px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13.5px; cursor: pointer;
  }
  .arw-filters__apply {
    flex: 1.4; border: none; background: var(--arw-navy); color: #fff;
    border-radius: 0; padding: 12px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13.5px; cursor: pointer;
  }
  body.arw-no-scroll { overflow: hidden; }
}

/* ---------------------------------- Page unique ---------------------------------- */
.arw-single { padding-top: 6px; max-width: 100%; }

.arw-single__breadcrumb {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--arw-text-muted);
  margin-bottom: 22px; flex-wrap: wrap;
}
.arw-single__breadcrumb a:hover { color: var(--arw-navy); }
.arw-single__breadcrumb svg { width: 11px; height: 11px; opacity: .6; }
.arw-single__breadcrumb .is-current { color: var(--arw-navy); font-weight: 700; }

.arw-single__meta-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.arw-badge-cat {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--arw-navy); color: #fff; font-size: 12.5px; font-weight: 700;
  padding: 7px 14px 7px 11px; border-radius: 0;
}
.arw-badge-cat i { width: 6px; height: 6px; border-radius: 0; background: var(--arw-orange); }
.arw-year { font-size: 13.5px; color: var(--arw-text-muted); font-weight: 600; }

.arw-single__hero {
  position: relative; border-radius: 0; overflow: hidden;
  aspect-ratio: 16 / 8; background: var(--arw-navy);
}
.arw-single__hero img { width: 100% !important; height: 100% !important; object-fit: cover !important; max-width: none !important; display: block; }

.arw-single__infocard {
  background: #fff; border: 1px solid var(--arw-border); border-radius: 0;
  box-shadow: var(--arw-shadow);
  margin: -56px 32px 0; position: relative; z-index: 2;
  padding: 26px 30px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
}
@media (max-width: 820px) { .arw-single__infocard { grid-template-columns: repeat(2, 1fr); margin: -40px 16px 0; padding: 22px; } }
@media (max-width: 480px) { .arw-single__infocard { margin: -30px 10px 0; } }

.arw-infocard__item h4 {
  margin: 0 0 6px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--arw-text-muted); font-weight: 700;
}
.arw-infocard__item p { margin: 0; font-size: 16.5px; font-weight: 700; color: var(--arw-navy); }
.arw-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.arw-tags span {
  font-size: 11.5px; font-weight: 700; color: var(--arw-navy);
  background: var(--arw-navy-tint); padding: 5px 10px; border-radius: 0;
}

.arw-single__body { max-width: 760px; margin: 56px auto 0; padding: 0 12px; }
.arw-single__body p { font-size: 16.5px; line-height: 1.85; color: #3A3D4D; margin: 0 0 20px; }
.arw-single__body p:last-child { margin-bottom: 0; }

.arw-single__section-title {
  font-size: 22px; font-weight: 700; color: var(--arw-navy);
  margin: 64px auto 22px; max-width: 760px; padding: 0 12px;
}

.arw-gallery {
  max-width: 760px; margin: 0 auto; padding: 0 12px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.arw-g-item { position: relative; border-radius: 0; overflow: hidden; aspect-ratio: 1/1; cursor: zoom-in; display: block; }
.arw-g-item.big { grid-column: span 2; grid-row: span 2; }
.arw-g-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arw-g-item::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,79,0); transition: background .25s; }
.arw-g-item:hover::after { background: rgba(0,0,79,.18); }
.arw-g-item svg {
  position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; color: #fff;
  transform: translate(-50%, -50%) scale(.8); opacity: 0; transition: .25s; z-index: 1;
}
.arw-g-item:hover svg { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.arw-g-item__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0; padding: 20px 12px 10px;
  background: linear-gradient(to top, rgba(0,0,20,.75), rgba(0,0,20,0));
  color: #fff; font-size: 12px; font-weight: 500; line-height: 1.4;
  opacity: 0; transform: translateY(6px); transition: .25s;
}
.arw-g-item:hover .arw-g-item__cap, .arw-g-item:focus .arw-g-item__cap { opacity: 1; transform: translateY(0); }
@media (max-width: 640px) { .arw-gallery { grid-template-columns: repeat(2, 1fr); } .arw-g-item.big { grid-column: span 2; } }

.arw-video-wrap {
  max-width: 760px; margin: 0 auto; padding: 0 12px;
}
.arw-video-cover {
  border-radius: 0; overflow: hidden; position: relative; aspect-ratio: 16/9;
  background-color: var(--arw-navy); background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.arw-video-cover::before {
  content: ""; position: absolute; inset: 0; background: rgba(0,0,25,.28);
}
.arw-playbtn {
  position: relative; z-index: 1;
  width: 74px; height: 74px; border-radius: 0; background: rgba(255,255,255,.16);
  border: 1.5px solid rgba(255,255,255,.55);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s, background .2s;
}
.arw-video-cover:hover .arw-playbtn { transform: scale(1.06); background: rgba(255,255,255,.26); }
.arw-playbtn svg { width: 24px; height: 24px; color: #fff; margin-left: 3px; }
.arw-video-wrap iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 0; display: block; }

.arw-share {
  max-width: 760px; margin: 52px auto 0; padding: 30px 12px 0;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--arw-border);
}
.arw-share__label { font-size: 13.5px; font-weight: 700; color: var(--arw-text-muted); margin-right: 6px; }
.arw-share__btn {
  width: 42px; height: 42px; border-radius: 0; border: 1px solid var(--arw-border);
  display: flex; align-items: center; justify-content: center; background: #fff; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.arw-share__btn svg { width: 17px; height: 17px; color: var(--arw-navy); transition: color .2s; }
.arw-share__btn:hover { background: var(--arw-navy); border-color: var(--arw-navy); }
.arw-share__btn:hover svg { color: #fff; }
.arw-share__btn.arw-copy:hover { background: var(--arw-orange); border-color: var(--arw-orange); }
.arw-share__btn.arw-copy:hover svg { color: #fff; }

.arw-related { max-width: 100%; margin: 80px auto 0; }
.arw-related h3 { font-size: 20px; color: var(--arw-navy); margin: 0 0 26px; font-weight: 700; }
/* Ce bloc n'est pas un shortcode configurable (pas de <style> d'instance
   avec --arw-cols) : les paliers responsives sont donc fixés ici en dur,
   sinon la grille reste au nombre de colonnes par défaut (3) même sur mobile. */
.arw-related .arw-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .arw-related .arw-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .arw-related .arw-grid { grid-template-columns: 1fr; } }

/* ---------------------------------- Toast ---------------------------------- */
.arw-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: var(--arw-navy); color: #fff; padding: 12px 20px; border-radius: 0;
  font-family: 'Montserrat', sans-serif; font-size: 13.5px; font-weight: 600; opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s; z-index: 99999;
}
.arw-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------------------------------- Lightbox ---------------------------------- */
.arw-lightbox {
  position: fixed; inset: 0; z-index: 99998; display: none;
  align-items: center; justify-content: center;
  background: rgba(6, 6, 24, .92); padding: 30px;
}
.arw-lightbox.is-open { display: flex; }
.arw-lightbox__frame {
  display: flex; flex-direction: column; align-items: center;
  max-width: 100%; max-height: 100%;
}
.arw-lightbox img { max-width: 100%; max-height: 78vh; border-radius: 0; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.arw-lightbox__caption {
  margin: 16px 0 0; max-width: 640px; text-align: center;
  color: #fff; font-family: 'Montserrat', sans-serif; font-size: 14px; line-height: 1.6;
}
.arw-lightbox__caption[hidden] { display: none; }
.arw-lightbox__close {
  position: absolute; top: 22px; right: 26px; width: 44px; height: 44px; border-radius: 0;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer; z-index: 2;
}
.arw-lightbox__close:hover { background: rgba(255,255,255,.2); }
.arw-lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 0;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2;
}
.arw-lightbox__nav:hover { background: rgba(255,255,255,.22); }
.arw-lightbox__nav svg { width: 20px; height: 20px; }
.arw-lightbox__nav[hidden] { display: none; }
.arw-lightbox__prev { left: 16px; }
.arw-lightbox__next { right: 16px; }
.arw-lightbox__count {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.75); font-family: 'Montserrat', sans-serif; font-size: 12.5px; font-weight: 600;
}
@media (max-width: 640px) {
  .arw-lightbox { padding: 16px; }
  .arw-lightbox__nav { width: 44px; height: 44px; }
  .arw-lightbox__prev { left: 6px; }
  .arw-lightbox__next { right: 6px; }
  .arw-lightbox__close { top: 12px; right: 12px; }
}

/* ---------------------------------- Chargement AJAX ---------------------------------- */
.arw-grid-wrap.is-loading { opacity: .45; pointer-events: none; transition: opacity .2s; }

/* Respect des préférences de réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
  .arw-card, .arw-card__thumb img, .arw-card__arrow, .arw-g-item svg, .arw-video-cover .arw-playbtn, .arw-toast { transition: none !important; }
}