/*
 * Refresh visuel 2026 - pages publiques uniquement (chargé par Layout/layout.html.twig).
 * Surcharge style*.css sans toucher à la structure : couleurs, arrondis, ombres.
 * Pour revenir en arrière : retirer la balise <link> de refresh.css dans le layout.
 */

:root {
  --p-blue: #1843ab;
  --p-blue-dark: #12337f;
  --p-blue-soft: #eef2fb;
  --p-brick: #c4361b;
  --p-brick-dark: #a12b14;
  --p-brick-soft: #fbe8e2;
  --p-bg: #f3f4f5;
  --p-bg-strong: #eceef0;
  --p-card-soft: #f8f8f8;
  --p-border: #e6e6e6;
  --p-text: #363636;
  --p-font: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-family-sans-serif: var(--p-font);
  --p-radius: 10px;
  --p-radius-sm: 6px;
  --p-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px rgba(16, 24, 40, .06);
  --p-shadow-hover: 0 2px 4px rgba(16, 24, 40, .06), 0 10px 24px rgba(16, 24, 40, .10);
}

/* ---------- Police : Plus Jakarta Sans (comme parraindeconfiance.com) à la place de Roboto ---------- */
body, h1, h2, h3, h4, h5, h6, p, li, .h_1, .lead,
.btn, .form-control, input, select, textarea, button,
.navbar-brand, .pagination > li > a, .pagination > li > span, .readmore,
.page-title p, .code-modal .btn, .coupon-wrapper .coupon-code, .coupon-wrapper .show-code,
.custom-tab-nav.nav-tabs > li > a, .custom-tab-nav.nav-tabs > li.active > a, .nav-pills > li > a,
.navbar-default .navbar-nav > li > a, .navbar-default .dropdown-menu li a,
.well .dropdown-menu li a, .well .form-control {
  font-family: var(--p-font);
}

/* ---------- Bandeau du haut : brique ---------- */
.bd-announcement {
  background: var(--p-brick) !important;
  background-image: none !important;
}

/* ---------- Header ---------- */
.navbar {
  box-shadow: 0 1px 0 var(--p-border), 0 2px 8px rgba(16, 24, 40, .04) !important;
}
/* Sélecteur Offre / Parrain détaché du champ, option cochée en onglet blanc */
#searchForm .input-group-prepend {
  margin-right: 10px;
}
#searchForm .input-group-prepend .input-group-text {
  gap: 2px;
  padding: 4px;
  background-color: #f1f2f4;
  border-color: var(--p-border);
  border-radius: var(--p-radius-sm) !important;
}
#searchForm .form-check-inline {
  margin: 0 !important;
  padding: 5px 10px;
  border-radius: 5px;
  transition: background-color .15s ease, box-shadow .15s ease;
}
#searchForm .form-check-inline:has(.form-check-input:checked) {
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .10);
}
#searchForm .form-check-input {
  accent-color: var(--p-blue);
  cursor: pointer;
}
#searchForm .form-check-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #6b7280;
  cursor: pointer;
}
#searchForm .form-check-input:checked + .form-check-label {
  color: var(--p-blue);
}
#searchForm .form-control {
  border-color: var(--p-border);
  border-radius: var(--p-radius-sm) 0 0 var(--p-radius-sm) !important;
}
#searchForm .form-control:focus {
  border-color: var(--p-blue);
  box-shadow: 0 0 0 3px rgba(24, 67, 171, .12);
}
#searchForm .btn-outline-secondary {
  background-color: var(--p-blue);
  border-color: var(--p-blue);
  color: #fff;
  border-radius: 0 var(--p-radius-sm) var(--p-radius-sm) 0 !important;
}
#searchForm .btn-outline-secondary:hover,
#searchForm .btn-outline-secondary:focus {
  background-color: var(--p-blue-dark);
  border-color: var(--p-blue-dark);
  color: #fff !important;
}
/* Blog / Se connecter / S'inscrire toujours sur une seule ligne, calés à droite */
@media (min-width: 992px) {
  .header-actions {
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    column-gap: 4px;
  }
}
.header-actions a {
  flex-shrink: 0;
  white-space: nowrap;
}
#inscription,
#connexion.btn-blue {
  border-radius: var(--p-radius-sm);
  font-weight: 700;
}

/* ---------- Titres : bleu ---------- */
h1, h2, h3, h4,
.section-title h2,
.widget-title h1,
.widget-title h2,
.widget-title h3,
.widget-title h4 {
  color: var(--p-blue);
}
h1, .section-title h2 {
  font-weight: 700 !important;
}
/* Les titres blancs étaient posés sur les anciens fonds bleus */
.annonces h1.white,
.annonces h2.white,
.annonces h3.white {
  color: var(--p-blue) !important;
}
h1 .accent,
h2 .accent {
  color: var(--p-brick);
}
/* Le footer reste en texte clair sur fond bleu */
.footer h1, .footer h2, .footer h3, .footer h4,
.footer .widget-title h4 {
  color: #fff;
}

/* ---------- Fonds de section : gris clair au lieu des dégradés bleus ---------- */
.annonces {
  background: var(--p-bg) !important;
  background-image: none !important;
}
.accueil {
  background-color: var(--p-bg);
}
.aide {
  background-color: var(--p-bg);
}

/* Accueil et page marchand : alternance blanc / gris (classes posées via block body_class) */
.page-home .accueil,
.page-home .aide {
  background-color: #fff;
}
.page-home .blocAutre,
.page-offre .descOffre {
  background-color: var(--p-bg);
}
/* Bloc "offre promo du moment" en blanc sur le fond gris */
.page-offre .coupon-wrapper.grey {
  background-color: #fff !important;
}
.annonces .btn-outline-white {
  background-color: #fff !important;
  border-color: var(--p-blue) !important;
  color: var(--p-blue) !important;
  border-radius: var(--p-radius-sm);
  font-weight: 700;
}
.annonces .btn-outline-white:hover,
.annonces .btn-outline-white:focus {
  background-color: var(--p-blue) !important;
  color: #fff !important;
}
a.sociaux {
  box-shadow: var(--p-shadow);
}

/* ---------- Cartes ---------- */
.list-wrapper,
.list-wrapper.grey {
  background-color: #fff !important;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  box-shadow: var(--p-shadow);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.list-wrapper:hover {
  border: 1px solid #c9d3ec;
  box-shadow: var(--p-shadow-hover);
  transform: translateY(-1px);
}
.parrainVisuel {
  border-color: var(--p-border);
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--p-border);
}
.aide .widget {
  border-color: var(--p-border);
  border-radius: var(--p-radius);
  box-shadow: var(--p-shadow);
}
.featured,
.featuredLeft {
  background-color: var(--p-blue) !important;
}
.featured::before,
.featuredLeft::before {
  border-color: var(--p-blue-dark) transparent transparent var(--p-blue-dark);
}
.category {
  background-color: #fff;
  border-color: var(--p-border);
  border-radius: var(--p-radius);
}

/* ---------- Carrousel marchands ---------- */
.popular-stores .owl-item {
  background-color: transparent;
}
.store {
  border: 1px solid var(--p-border);
  border-radius: 12px;
  box-shadow: var(--p-shadow);
  padding: 18px 8px 16px;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.store:hover {
  border: 1px solid #c9d3ec;
  box-shadow: var(--p-shadow-hover);
  transform: translateY(-2px);
}
.store-thumb {
  margin-bottom: 14px;
}
.store-name {
  line-height: 1.4;
}
.store-name span.blue {
  font-size: 12.5px;
  letter-spacing: -.01em; /* Plus Jakarta Sans est plus large que Roboto : évite les retours à la ligne */
}
.store-gain {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 12px;
  border-radius: 999px;
  background-color: var(--p-brick-soft);
  color: var(--p-brick);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.owl-nav .owl-prev,
.owl-nav .owl-next,
.owl-controls .owl-prev,
.owl-controls .owl-next {
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid var(--p-border) !important;
  box-shadow: var(--p-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: box-shadow .2s ease;
}
.owl-nav .owl-prev:hover,
.owl-nav .owl-next:hover {
  box-shadow: var(--p-shadow-hover);
}
.owl-nav .owl-prev img,
.owl-nav .owl-next img {
  display: none;
}
.owl-nav .owl-prev::before,
.owl-nav .owl-next::before {
  font-family: 'Font Awesome 7 Free';
  font-weight: 900;
  font-size: 16px;
  color: var(--p-blue);
}
.owl-nav .owl-prev::before {
  content: "\f053";
}
.owl-nav .owl-next::before {
  content: "\f054";
}
/* Flèches écartées des cartes, à égale distance */
.popular-stores .owl-nav .owl-prev,
.popular-stores .owl-controls .owl-prev {
  left: -47px;
}
.popular-stores .owl-nav .owl-next,
.popular-stores .owl-controls .owl-next {
  right: -47px;
}
/* Libellé sur une ligne : un retour à la ligne agrandit tout le carrousel et décentre les flèches.
   Pas sous 1080px : entre 1000 et 1079px owlCarousel affiche 7 cartes étroites, presque tout serait tronqué */
@media (min-width: 1080px) {
  .popular-stores .store-name span.blue {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .popular-stores .store-name br {
    display: none;
  }
}

/* ---------- Blog : intro sur fond blanc ---------- */
.blog-intro p {
  color: #000;
}

/* ---------- Boutons ---------- */
/* "J'en profite" : texte et flèche sur une ligne, même dans la colonne étroite des annonces */
.btn-profite {
  padding-left: 8px;
  padding-right: 8px;
  white-space: nowrap;
}
.btn-orange,
.btn-blue {
  border-radius: var(--p-radius-sm);
  font-weight: 700;
}
.btn-orange {
  background-color: var(--p-brick) !important;
  border-color: var(--p-brick) !important;
}
.btn-orange:hover,
.btn-orange:focus {
  background-color: var(--p-brick-dark) !important;
  border-color: var(--p-brick-dark) !important;
}
.btn-blue {
  background-color: var(--p-blue) !important;
  border-color: var(--p-blue) !important;
}
.btn-blue:hover,
.btn-blue:focus {
  background-color: var(--p-blue-dark) !important;
  border-color: var(--p-blue-dark) !important;
}
.bg_orange {
  background-color: var(--p-brick) !important;
  border-radius: var(--p-radius-sm);
}
.border_orange {
  border-color: var(--p-brick) !important;
}

/* ---------- FAQ (accordéon) ---------- */
.accordion > .card {
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius-sm) !important;
  margin-bottom: 8px;
  box-shadow: var(--p-shadow);
}
.accordion .card-header {
  background-color: var(--p-bg-strong) !important;
  border-bottom: 0;
}
.accordion .card-header:hover {
  background-color: #e3e6e9 !important;
}
.btn-header-link,
.btn-header-link:hover {
  color: var(--p-blue);
  font-size: 15px;
  font-weight: 500;
}

/* ---------- Footer : bleu ---------- */
.footer {
  background-color: var(--p-blue) !important;
  border-color: var(--p-blue) !important;
}
.footer li:hover a,
.footer a:hover {
  color: #fff !important;
  text-decoration: underline !important;
}

/* Les boutons d'accueil ont une largeur fixe (300px en inline) : le gras les faisait passer sur 2 lignes */
.accueil .btn {
  font-size: 15px;
  padding-left: 12px !important;
  padding-right: 12px !important;
  white-space: nowrap;
}

/* Grille marchands mobile (remplace le carrousel sur smartphone) */
.accueil .post-media {
  border: 1px solid var(--p-border);
  border-radius: 12px;
  box-shadow: var(--p-shadow);
}
.accueil .post-media .store-gain {
  margin-top: 6px;
}

/* ---------- Accueil : 5 dernières offres + catégories populaires (refonte 2026-10-25) ---------- */
.page-home .home-last-offers {
  background-color: #fff;
}
.last-offers {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.last-offer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 26px 16px 20px;
  background-color: #fff;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  box-shadow: var(--p-shadow);
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.last-offer:hover,
.last-offer:focus {
  border-color: #c9d3ec;
  box-shadow: var(--p-shadow-hover);
  transform: translateY(-2px);
  text-decoration: none;
}
.last-offer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
}
.last-offer-logo img {
  max-width: 100%;
  max-height: 48px;
  width: auto;
  height: auto;
}
.last-offer-count {
  color: #777;
  font-size: 13px;
}

.home-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.home-cat {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 18px;
  background-color: #fff;
  border: 1px solid var(--p-border);
  border-radius: var(--p-radius);
  box-shadow: var(--p-shadow);
  color: var(--p-text);
  font-weight: 700;
  font-size: 15px;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.home-cat:hover,
.home-cat:focus {
  border-color: #c9d3ec;
  box-shadow: var(--p-shadow-hover);
  color: var(--p-blue) !important; /* style_home.css force a:hover en rouge */
  text-decoration: none;
}
.home-cat-ico {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--p-blue-soft);
  color: var(--p-blue);
}
.home-cat-ico svg {
  width: 20px;
  height: 20px;
}
.home-cat-more {
  justify-content: center;
  background-color: var(--p-brick);
  border-color: var(--p-brick);
  color: #fff;
}
.home-cat-more {
  transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.home-cat-more i {
  transition: transform .2s ease;
}
.home-cat-more:hover,
.home-cat-more:focus {
  background-color: var(--p-brick-dark);
  border-color: var(--p-brick-dark);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(196, 54, 27, .28);
}
.home-cat-more:hover i,
.home-cat-more:focus i {
  transform: translateX(4px);
}