/* EDOUARGOT CARTES ACCUEIL - SNAILETS RESPONSIVE DEBUT */

/*
  NOTE VERTE DANS L'ÉDITEUR :
  Les cartes sont centrées avec flex-wrap + justify-content:center.
  Si on ajoute ou retire des <article class="ih-card"> dans le PHP,
  les cartes restent centrées automatiquement, peu importe leur nombre.

  Pour augmenter la taille des titres :
  augmente --edo-ih-title-size.

  Pour diminuer la taille des titres :
  diminue --edo-ih-title-size.
*/

.indexhaut-cards {
  --edo-ih-title-size: clamp(1.75rem, 2.7vw, 2.35rem);
  --edo-ih-card-width: clamp(245px, 28vw, 340px);

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: clamp(18px, 3vw, 34px);

  width: 100%;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(10px, 2vw, 24px);
  padding-right: clamp(10px, 2vw, 24px);
  box-sizing: border-box;
}

.indexhaut-cards .ih-card {
  flex: 0 1 var(--edo-ih-card-width);
  width: var(--edo-ih-card-width);
  max-width: 340px;
  margin: 0;
}

.indexhaut-cards .ih-card > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: center;
}

.indexhaut-cards .ih-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.indexhaut-cards .ih-title {
  font-family: "Snailets BRK", "Snailets", cursive;
  font-size: var(--edo-ih-title-size);
  line-height: 1.05;
  letter-spacing: 0.03em;
  font-weight: normal;
  color: #301910;
  text-align: center;

  min-height: 2.7em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px 4px;
}

.indexhaut-cards .ih-price {
  margin-top: auto;
}

/* Tablette : 2 cartes par ligne si la place manque, toujours centrées */
@media (max-width: 900px) {
  .indexhaut-cards {
    --edo-ih-title-size: clamp(1.65rem, 4.5vw, 2.2rem);
    --edo-ih-card-width: clamp(245px, 42vw, 340px);
    max-width: 760px;
  }
}

/* Mobile : 1 carte par ligne, centrée */
@media (max-width: 620px) {
  .indexhaut-cards {
    --edo-ih-title-size: clamp(1.65rem, 7vw, 2.15rem);
    --edo-ih-card-width: min(100%, 420px);
    gap: 18px;
    max-width: 460px;
  }

  .indexhaut-cards .ih-card {
    max-width: 420px;
  }

  .indexhaut-cards .ih-title {
    min-height: auto;
  }
}

/* EDOUARGOT CARTES ACCUEIL - SNAILETS RESPONSIVE FIN */

/* EDOUARGOT RESTAURATION CARTES BLANCHES DEBUT */

/*
  NOTE VERTE :
  Ce bloc remet le fond blanc des cartes produits.
  Le fichier CSS correct est maintenant :
  /css/index-haut-cards.css

  Ne pas remettre ce CSS dans :
  /elements/accueil/
*/

.edo-produits-zone .ih-card,
.indexhaut.edo-produits-accueil .ih-card {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06) !important;
}

.edo-produits-zone .ih-card > a,
.indexhaut.edo-produits-accueil .ih-card > a {
  background: #ffffff !important;
  background-color: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  color: inherit !important;
}

.edo-produits-zone .ih-img,
.indexhaut.edo-produits-accueil .ih-img {
  background: #ffffff !important;
  background-color: #ffffff !important;
  display: block !important;
}

.edo-produits-zone .ih-title,
.indexhaut.edo-produits-accueil .ih-title,
.edo-produits-zone .ih-price,
.indexhaut.edo-produits-accueil .ih-price {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* EDOUARGOT RESTAURATION CARTES BLANCHES FIN */

/* EDOUARGOT REGLAGE POLICE SNAILET CARTES DEBUT */

/*
  NOTE VERTE :
  Zone de réglage simple pour la police Snailet des titres produits.

  Taille actuelle demandée :
  150% = police augmentée de 50%.

  Pour agrandir encore :
  remplace 150% par 160%, 170%, etc.

  Pour réduire :
  remplace 150% par 140%, 130%, etc.

  Ne pas déplacer ce bloc dans /elements/accueil/.
  Le bon fichier est :
  /css/index-haut-cards.css
*/

:root {
  --edo-taille-snailet-cartes-produits: 300%;
}

.edo-produits-zone .ih-title,
.indexhaut.edo-produits-accueil .ih-title {
  font-family: "Snailets BRK", "Snailets", cursive !important;
  font-size: var(--edo-taille-snailet-cartes-produits) !important;
  line-height: 1.08 !important;
  color: #301910 !important;
  font-weight: 700 !important;
}

/* EDOUARGOT REGLAGE POLICE SNAILET CARTES FIN */

/* EDOUARGOT SURVOL BOUTON DETAIL CARTES DEBUT */

/*
  NOTE VERTE :
  Zone de réglage du survol et du bouton "Voir le détail".

  Pour augmenter l'effet au survol :
  - augmente translateY(-6px) vers -8px ;
  - augmente scale(1.015) vers scale(1.025).

  Pour réduire l'effet :
  - remplace -6px par -3px ;
  - remplace scale(1.015) par scale(1.005).
*/

.edo-produits-zone .ih-card,
.indexhaut.edo-produits-accueil .ih-card {
  position: relative !important;
  cursor: pointer !important;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease,
    filter 0.22s ease !important;
}

.edo-produits-zone .ih-card::after,
.indexhaut.edo-produits-accueil .ih-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  border-radius: inherit !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(245, 192, 99, 0.28), transparent 42%),
    linear-gradient(135deg, rgba(245, 192, 99, 0.16), transparent 55%) !important;
  transition: opacity 0.22s ease !important;
}

.edo-produits-zone .ih-card:hover,
.edo-produits-zone .ih-card:focus-within,
.indexhaut.edo-produits-accueil .ih-card:hover,
.indexhaut.edo-produits-accueil .ih-card:focus-within {
  transform: translateY(-6px) scale(1.015) !important;
  box-shadow: 0 18px 38px rgba(51, 7, 5, 0.18) !important;
  border-color: rgba(245, 192, 99, 0.85) !important;
  filter: saturate(1.04) !important;
}

.edo-produits-zone .ih-card:hover::after,
.edo-produits-zone .ih-card:focus-within::after,
.indexhaut.edo-produits-accueil .ih-card:hover::after,
.indexhaut.edo-produits-accueil .ih-card:focus-within::after {
  opacity: 1 !important;
}

.edo-produits-zone .ih-card > a,
.indexhaut.edo-produits-accueil .ih-card > a {
  position: relative !important;
  z-index: 1 !important;
}

.edo-produits-zone .ih-img,
.indexhaut.edo-produits-accueil .ih-img {
  transition: transform 0.22s ease, filter 0.22s ease !important;
}

.edo-produits-zone .ih-card:hover .ih-img,
.edo-produits-zone .ih-card:focus-within .ih-img,
.indexhaut.edo-produits-accueil .ih-card:hover .ih-img,
.indexhaut.edo-produits-accueil .ih-card:focus-within .ih-img {
  transform: scale(1.035) !important;
  filter: contrast(1.03) saturate(1.03) !important;
}

.edo-produits-zone .ih-action,
.indexhaut.edo-produits-accueil .ih-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  width: fit-content !important;
  max-width: calc(100% - 28px) !important;
  margin: 10px auto 16px auto !important;
  padding: 9px 15px !important;

  border-radius: 999px !important;
  background: #301910 !important;
  color: #F5C063 !important;
  border: 1px solid rgba(245, 192, 99, 0.85) !important;
  box-shadow: 0 8px 18px rgba(51, 7, 5, 0.16) !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-decoration: none !important;

  transition:
    background-color 0.22s ease,
    color 0.22s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease !important;
}

.edo-produits-zone .ih-action-arrow,
.indexhaut.edo-produits-accueil .ih-action-arrow {
  display: inline-block !important;
  font-size: 1.05em !important;
  line-height: 1 !important;
  transform: translateX(0) !important;
  transition: transform 0.22s ease !important;
}

.edo-produits-zone .ih-card:hover .ih-action,
.edo-produits-zone .ih-card:focus-within .ih-action,
.indexhaut.edo-produits-accueil .ih-card:hover .ih-action,
.indexhaut.edo-produits-accueil .ih-card:focus-within .ih-action {
  background: #F5C063 !important;
  color: #301910 !important;
  box-shadow: 0 11px 22px rgba(51, 7, 5, 0.22) !important;
  transform: translateY(-1px) !important;
}

.edo-produits-zone .ih-card:hover .ih-action-arrow,
.edo-produits-zone .ih-card:focus-within .ih-action-arrow,
.indexhaut.edo-produits-accueil .ih-card:hover .ih-action-arrow,
.indexhaut.edo-produits-accueil .ih-card:focus-within .ih-action-arrow {
  transform: translateX(4px) !important;
}

.edo-produits-zone .ih-card a:focus-visible,
.indexhaut.edo-produits-accueil .ih-card a:focus-visible {
  outline: 3px solid #F5C063 !important;
  outline-offset: 4px !important;
  border-radius: 18px !important;
}

@media (prefers-reduced-motion: reduce) {
  .edo-produits-zone .ih-card,
  .indexhaut.edo-produits-accueil .ih-card,
  .edo-produits-zone .ih-img,
  .indexhaut.edo-produits-accueil .ih-img,
  .edo-produits-zone .ih-action,
  .indexhaut.edo-produits-accueil .ih-action,
  .edo-produits-zone .ih-action-arrow,
  .indexhaut.edo-produits-accueil .ih-action-arrow {
    transition: none !important;
  }

  .edo-produits-zone .ih-card:hover,
  .edo-produits-zone .ih-card:focus-within,
  .indexhaut.edo-produits-accueil .ih-card:hover,
  .indexhaut.edo-produits-accueil .ih-card:focus-within,
  .edo-produits-zone .ih-card:hover .ih-img,
  .edo-produits-zone .ih-card:focus-within .ih-img,
  .indexhaut.edo-produits-accueil .ih-card:hover .ih-img,
  .indexhaut.edo-produits-accueil .ih-card:focus-within .ih-img {
    transform: none !important;
  }
}

/* EDOUARGOT SURVOL BOUTON DETAIL CARTES FIN */


/* EDOUARGOT LIEN DETAIL STYLE MENU FINAL DEBUT */

/*
  NOTE VERTE :
  Réglage du lien "Voir le détail →".

  Objectif :
  - pas de bouton arrondi ;
  - pas de contour ;
  - soulignement complet comme le menu ;
  - au survol : texte jaune, soulignement marron ;
  - animation de carte plus discrète ;
  - lien aligné en bas des cartes.

  Couleurs :
  - marron : #301910
  - jaune : #F5C063
*/

/* Animation de survol plus calme sur les cartes */
.edo-produits-zone .ih-card:hover,
.edo-produits-zone .ih-card:focus-within,
.indexhaut.edo-produits-accueil .ih-card:hover,
.indexhaut.edo-produits-accueil .ih-card:focus-within {
  transform: translateY(-2px) scale(1.005) !important;
  box-shadow: 0 12px 24px rgba(51, 7, 5, 0.14) !important;
  border-color: rgba(245, 192, 99, 0.55) !important;
  filter: none !important;
}

.edo-produits-zone .ih-card:hover .ih-img,
.edo-produits-zone .ih-card:focus-within .ih-img,
.indexhaut.edo-produits-accueil .ih-card:hover .ih-img,
.indexhaut.edo-produits-accueil .ih-card:focus-within .ih-img {
  transform: scale(1.012) !important;
  filter: none !important;
}

/* Le lien principal de la carte reste une colonne pour aligner le lien détail en bas */
.edo-produits-zone .ih-card > a,
.indexhaut.edo-produits-accueil .ih-card > a {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Prix : évite les écarts trop différents selon les titres */
.edo-produits-zone .ih-price,
.indexhaut.edo-produits-accueil .ih-price {
  margin-bottom: 0 !important;
}

/* Voir le détail : texte simple, pas bouton */
.edo-produits-zone .ih-action,
.indexhaut.edo-produits-accueil .ih-action {
  position: relative !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;

  width: max-content !important;
  max-width: calc(100% - 28px) !important;

  /* Aligne le lien en bas des cartes */
  margin: auto auto 16px auto !important;
  padding: 0 0 6px 0 !important;

  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  color: #301910 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 0.94rem !important;
  font-weight: 950 !important;
  line-height: 1.15 !important;
  text-decoration: none !important;

  transform: none !important;
  transition: color 0.18s ease !important;
}

/* Soulignement complet sous Voir le détail + flèche */
.edo-produits-zone .ih-action::after,
.indexhaut.edo-produits-accueil .ih-action::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;

  width: 100% !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: #F5C063 !important;

  transform: scaleX(1) !important;
  transform-origin: center !important;
  transition: background-color 0.18s ease, height 0.18s ease !important;
}

.edo-produits-zone .ih-action-arrow,
.indexhaut.edo-produits-accueil .ih-action-arrow {
  display: inline-block !important;
  color: inherit !important;
  font-size: 1.05em !important;
  line-height: 1 !important;
  transform: translateX(0) !important;
  transition: transform 0.18s ease !important;
}

/* Survol : switch couleur texte jaune / soulignement marron */
.edo-produits-zone .ih-card:hover .ih-action,
.edo-produits-zone .ih-card:focus-within .ih-action,
.indexhaut.edo-produits-accueil .ih-card:hover .ih-action,
.indexhaut.edo-produits-accueil .ih-card:focus-within .ih-action {
  color: #F5C063 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

.edo-produits-zone .ih-card:hover .ih-action::after,
.edo-produits-zone .ih-card:focus-within .ih-action::after,
.indexhaut.edo-produits-accueil .ih-card:hover .ih-action::after,
.indexhaut.edo-produits-accueil .ih-card:focus-within .ih-action::after {
  background: #301910 !important;
  height: 4px !important;
}

.edo-produits-zone .ih-card:hover .ih-action-arrow,
.edo-produits-zone .ih-card:focus-within .ih-action-arrow,
.indexhaut.edo-produits-accueil .ih-card:hover .ih-action-arrow,
.indexhaut.edo-produits-accueil .ih-card:focus-within .ih-action-arrow {
  transform: translateX(3px) !important;
}

/* Accessibilité clavier */
.edo-produits-zone .ih-card a:focus-visible,
.indexhaut.edo-produits-accueil .ih-card a:focus-visible {
  outline: 3px solid #F5C063 !important;
  outline-offset: 4px !important;
  border-radius: 18px !important;
}

/* EDOUARGOT LIEN DETAIL STYLE MENU FINAL FIN */


/* EDOUARGOT LIEN DETAIL COULEURS EXACTES DEBUT */

/*
  NOTE VERTE :
  Couleurs exactes du lien "Voir le détail →".

  Sans survol :
  - texte orange : #F5C063
  - soulignement marron : #301910

  Au survol :
  - texte marron : #301910
  - soulignement orange : #F5C063
*/

.edo-produits-zone .ih-action,
.indexhaut.edo-produits-accueil .ih-action {
  color: #F5C063 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

.edo-produits-zone .ih-action::after,
.indexhaut.edo-produits-accueil .ih-action::after {
  background: #301910 !important;
  height: 3px !important;
  box-shadow: none !important;
  filter: none !important;
}

.edo-produits-zone .ih-action-arrow,
.indexhaut.edo-produits-accueil .ih-action-arrow {
  color: inherit !important;
}

/* Survol : texte marron, soulignement orange */
.edo-produits-zone .ih-card:hover .ih-action,
.edo-produits-zone .ih-card:focus-within .ih-action,
.indexhaut.edo-produits-accueil .ih-card:hover .ih-action,
.indexhaut.edo-produits-accueil .ih-card:focus-within .ih-action {
  color: #301910 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

.edo-produits-zone .ih-card:hover .ih-action::after,
.edo-produits-zone .ih-card:focus-within .ih-action::after,
.indexhaut.edo-produits-accueil .ih-card:hover .ih-action::after,
.indexhaut.edo-produits-accueil .ih-card:focus-within .ih-action::after {
  background: #F5C063 !important;
  height: 4px !important;
}

/* EDOUARGOT LIEN DETAIL COULEURS EXACTES FIN */


/* EDOUARGOT SURVOL STABLE ALIGNEMENT FINAL DEBUT */

/*
  NOTE VERTE :
  Survol stable des cartes produits.

  Objectifs :
  - garder un effet visible au survol ;
  - ne plus faire bouger les textes ;
  - ne plus zoomer les images ;
  - aligner Tapenade aux noisettes avec les autres cartes ;
  - garder 8,50 € et Voir le détail au même niveau.

  Réglage alignement :
  - si Tapenade descend trop : diminue 126px ;
  - si Tapenade est encore trop haute : augmente 126px.
*/

/* Base carte stable */
.edo-produits-zone .ih-card,
.indexhaut.edo-produits-accueil .ih-card {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  transform: none !important;
  transition:
    box-shadow 0.20s ease,
    border-color 0.20s ease,
    background-color 0.20s ease !important;
}

/* Effet lumineux interne sans déplacer le contenu */
.edo-produits-zone .ih-card::before,
.indexhaut.edo-produits-accueil .ih-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(180deg, rgba(245, 192, 99, 0.16), rgba(255,255,255,0) 42%),
    radial-gradient(circle at 50% 0%, rgba(245, 192, 99, 0.22), transparent 48%) !important;
  transition: opacity 0.20s ease !important;
}

/* Le contenu reste au-dessus du voile */
.edo-produits-zone .ih-card > a,
.indexhaut.edo-produits-accueil .ih-card > a {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Survol visible, mais aucune translation/aucun zoom */
.edo-produits-zone .ih-card:hover,
.edo-produits-zone .ih-card:focus-within,
.indexhaut.edo-produits-accueil .ih-card:hover,
.indexhaut.edo-produits-accueil .ih-card:focus-within {
  transform: none !important;
  box-shadow: 0 14px 30px rgba(51, 7, 5, 0.18) !important;
  border-color: rgba(245, 192, 99, 0.90) !important;
  background-color: #ffffff !important;
  filter: none !important;
}

.edo-produits-zone .ih-card:hover::before,
.edo-produits-zone .ih-card:focus-within::before,
.indexhaut.edo-produits-accueil .ih-card:hover::before,
.indexhaut.edo-produits-accueil .ih-card:focus-within::before {
  opacity: 1 !important;
}

/* Image stable : pas de zoom, pas de flou */
.edo-produits-zone .ih-card:hover .ih-img,
.edo-produits-zone .ih-card:focus-within .ih-img,
.indexhaut.edo-produits-accueil .ih-card:hover .ih-img,
.indexhaut.edo-produits-accueil .ih-card:focus-within .ih-img {
  transform: none !important;
  filter: none !important;
}

/* Zone titre identique pour les 3 cartes */
.edo-produits-zone .ih-title,
.indexhaut.edo-produits-accueil .ih-title {
  min-height: 126px !important;
  height: 126px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;
  margin-bottom: 0 !important;
  padding: 10px 14px 0 14px !important;
  overflow: visible !important;
}

/* Prix aligné sous la zone titre */
.edo-produits-zone .ih-price,
.indexhaut.edo-produits-accueil .ih-price {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Voir le détail aligné sous le prix */
.edo-produits-zone .ih-action,
.indexhaut.edo-produits-accueil .ih-action {
  margin: 8px auto 16px auto !important;
}

/* Mobile : titre un peu moins haut */
@media (max-width: 700px) {
  .edo-produits-zone .ih-title,
  .indexhaut.edo-produits-accueil .ih-title {
    min-height: 104px !important;
    height: 104px !important;
  }
}

/* EDOUARGOT SURVOL STABLE ALIGNEMENT FINAL FIN */

/* EDOUARGOT SURVOL CONTOUR COMMUN GRILLES DEBUT */

/*
  NOTE VERTE :
  Survol commun pour les grilles produits.

  Objectif :
  - même contour sur index.php et articles/article.php ;
  - pas de déplacement de carte ;
  - pas de zoom image ;
  - pas de texte qui bouge ;
  - effet visible mais stable.

  Couleur contour :
  #F5C063
*/

.edo-produits-zone .ih-card,
.indexhaut.edo-produits-accueil .ih-card {
  border: 2px solid transparent !important;
  transform: none !important;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease !important;
}

.edo-produits-zone .ih-card:hover,
.edo-produits-zone .ih-card:focus-within,
.indexhaut.edo-produits-accueil .ih-card:hover,
.indexhaut.edo-produits-accueil .ih-card:focus-within {
  transform: none !important;
  border-color: #F5C063 !important;
  box-shadow:
    0 0 0 3px rgba(245, 192, 99, 0.22),
    0 12px 26px rgba(51, 7, 5, 0.14) !important;
  background-color: #ffffff !important;
  filter: none !important;
}

.edo-produits-zone .ih-card:hover .ih-img,
.edo-produits-zone .ih-card:focus-within .ih-img,
.indexhaut.edo-produits-accueil .ih-card:hover .ih-img,
.indexhaut.edo-produits-accueil .ih-card:focus-within .ih-img {
  transform: none !important;
  filter: none !important;
}

/* EDOUARGOT SURVOL CONTOUR COMMUN GRILLES FIN */
