/*
Theme Name: Magic Clean Top Theme
Theme URI: https://example.com
Description: Thème enfant optimisé pour Divi
Author: Magic Clean
Author URI: https://example.com
Template: Divi
Version: 1.0.0
*/

/* === CUSTOM CSS START === */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

#menu-principal li {
  padding-left: 20px;
  padding-right: 20px;
}
.col-service {row-gap:0;}

/* === CUSTOM CSS END === */


/* ============================================================
   MODULE PORTEFEUILLE GRILLE — DIVI 5
   Miniatures 300 × 400 px + extrait sous le titre

   Sélecteurs couverts :
     - Divi 5  : .et_pb_portfolio_grid  (module natif Divi 5)
     - Divi 4  : .et_pb_portfolio       (filtré grid)
   ============================================================ */

/* ----------------------------------------------------------
   1. CONTENEUR DE CHAQUE CARTE
   ---------------------------------------------------------- */

.et_pb_portfolio_item .et_portfolio_image,
.et_pb_portfolio_item .et_portfolio_image img {
  height: 400px;
  max-width: 100%;
  max-height: 100%;
}

.et_pb_portfolio_item .et_portfolio_image img {
    object-fit: cover; /* recadre sans déformer */
    object-position: center;
}

.et_pb_portfolio_grid .et_pb_portfolio_item,
.et_pb_portfolio.et_pb_portfolio_grid .et_pb_portfolio_item {
  display:        flex;
  flex-direction: column;
  background:     var(--color-white);
  border-radius:  var(--border-radius-lg);
  overflow:       hidden;
  box-shadow:     var(--shadow-sm);
  transition:     box-shadow var(--transition-base), transform var(--transition-base);
}

.et_pb_portfolio_grid .et_pb_portfolio_item:hover,
.et_pb_portfolio.et_pb_portfolio_grid .et_pb_portfolio_item:hover {
  box-shadow: var(--shadow-lg);
  transform:  translateY(-5px);
}

/* ----------------------------------------------------------
   2. MINIATURE — DIMENSIONS FIXES 300 × 400 px
      L'image est recadrée (object-fit: cover) pour toujours
      remplir exactement ce rectangle, quelle que soit la taille
      de l'image source.
   ---------------------------------------------------------- */
.et_pb_portfolio_grid .et_pb_portfolio_item .et_portfolio_image,
.et_pb_portfolio.et_pb_portfolio_grid .et_pb_portfolio_item .et_portfolio_image {
  width:     100%;          /* s'adapte à la largeur de la colonne */
  height:    400px !important;         /* hauteur fixe de la miniature        */
  overflow:  hidden;
  flex-shrink: 0;
  position:  relative;
}

/* Image elle-même */
.et_pb_portfolio_grid .et_pb_portfolio_item .et_portfolio_image img,
.et_pb_portfolio.et_pb_portfolio_grid .et_pb_portfolio_item .et_portfolio_image img {
  width:      100%;
  height:     100%;
  object-fit: cover;         /* recadrage centré                    */
  object-position: center;
  display:    block;
  transition: transform var(--transition-slow);
}

/* Zoom doux au survol */
.et_pb_portfolio_grid .et_pb_portfolio_item:hover .et_portfolio_image img,
.et_pb_portfolio.et_pb_portfolio_grid .et_pb_portfolio_item:hover .et_portfolio_image img {
  transform: scale(1.05);
}

/* Overlay au survol (facultatif — commentez pour désactiver) */
.et_pb_portfolio_grid .et_pb_portfolio_item .et_portfolio_image::after,
.et_pb_portfolio.et_pb_portfolio_grid .et_pb_portfolio_item .et_portfolio_image::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(26, 26, 46, .55) 100%
  );
  opacity:    0;
  transition: opacity var(--transition-base);
}

.et_pb_portfolio_grid .et_pb_portfolio_item:hover .et_portfolio_image::after,
.et_pb_portfolio.et_pb_portfolio_grid .et_pb_portfolio_item:hover .et_portfolio_image::after {
  opacity: 1;
}

/* ----------------------------------------------------------
   3. CORPS DE LA CARTE (titre + extrait + catégorie)
   ---------------------------------------------------------- */
.et_pb_portfolio_grid .et_pb_portfolio_item .et_pb_portfolio_image + *,
.et_pb_portfolio_grid .et_pb_portfolio_item .et_portfolio_image + *,
.et_pb_portfolio_grid .et_pb_portfolio_item .et_pb_portfolio_item_description,
.et_pb_portfolio.et_pb_portfolio_grid .et_pb_portfolio_item .et_pb_portfolio_item_description {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-xs);
  padding:        var(--space-lg) var(--space-lg) var(--space-xl);
  flex:           1;
}

/* ----------------------------------------------------------
   4. TITRE DE L'ÉLÉMENT DE PORTEFEUILLE
   ---------------------------------------------------------- */
.et_pb_portfolio_grid .et_pb_portfolio_item h3,
.et_pb_portfolio_grid .et_pb_portfolio_item .et_pb_module_header,
.et_pb_portfolio.et_pb_portfolio_grid .et_pb_portfolio_item h3,
.et_pb_portfolio.et_pb_portfolio_grid .et_pb_portfolio_item .et_pb_module_header {
  font-family:   var(--font-heading);
  font-size:     var(--font-size-lg);
  font-weight:   700;
  color:         var(--color-primary);
  line-height:   var(--line-height-tight);
  margin:        0 0 var(--space-sm);
  transition:    color var(--transition-fast);
}

.et_pb_portfolio_grid .et_pb_portfolio_item:hover h3,
.et_pb_portfolio_grid .et_pb_portfolio_item:hover .et_pb_module_header,
.et_pb_portfolio.et_pb_portfolio_grid .et_pb_portfolio_item:hover h3 {
  color: var(--color-accent);
}

/* ----------------------------------------------------------
   5. EXTRAIT — VISIBLE SOUS LE TITRE
      La classe .et_pb_portfolio_excerpt est injectée par le
      filtre PHP dans functions.php (section 11).
      Le sélecteur .et_pb_portfolio_description couvre la
      classe native Divi quand l'extrait est activé dans
      les réglages du module.
   ---------------------------------------------------------- */
.et_pb_portfolio_grid .et_pb_portfolio_item .et_pb_portfolio_excerpt,
.et_pb_portfolio_grid .et_pb_portfolio_item .et_pb_portfolio_description,
.et_pb_portfolio.et_pb_portfolio_grid .et_pb_portfolio_item .et_pb_portfolio_excerpt,
.et_pb_portfolio.et_pb_portfolio_grid .et_pb_portfolio_item .et_pb_portfolio_description {
  display:     block !important;  /* force l'affichage (Divi le masque par défaut) */
  font-size:   var(--font-size-sm);
  color:       var(--color-text-light);
  line-height: var(--line-height-loose);
  margin:      0;
  /* Limite à 3 lignes avec ellipsis */
  display:            -webkit-box !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

/* ----------------------------------------------------------
   6. CATÉGORIE / META sous l'extrait
   ---------------------------------------------------------- */
.et_pb_portfolio_grid .et_pb_portfolio_item .post-meta,
.et_pb_portfolio_grid .et_pb_portfolio_item .et_pb_portfolio_meta,
.et_pb_portfolio.et_pb_portfolio_grid .et_pb_portfolio_item .post-meta {
  font-size:      var(--font-size-xs);
  color:          var(--color-medium-gray);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top:     var(--space-sm);
}

.et_pb_portfolio_grid .et_pb_portfolio_item .post-meta a,
.et_pb_portfolio.et_pb_portfolio_grid .et_pb_portfolio_item .post-meta a {
  color: var(--color-accent);
}

/* ----------------------------------------------------------
   7. FILTRE DE CATÉGORIES (barre de navigation du module)
   ---------------------------------------------------------- */
.et_pb_portfolio_grid .et_pb_filterable_portfolio .et_pb_portfolio_filters,
.et_pb_portfolio_grid ul.et_pb_portfolio_filters {
  display:         flex;
  flex-wrap:       wrap;
  gap:             var(--space-sm);
  justify-content: center;
  margin-bottom:   var(--space-2xl);
  padding:         0;
  list-style:      none;
}

.et_pb_portfolio_grid .et_pb_portfolio_filters li a,
.et_pb_portfolio_grid .et_pb_portfolio_filters li span {
  display:        inline-flex;
  align-items:    center;
  padding:        .4em 1.1em;
  font-size:      var(--font-size-xs);
  font-weight:    700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius:  var(--border-radius-full);
  border:         2px solid var(--color-light-gray);
  color:          var(--color-text);
  background:     transparent;
  cursor:         pointer;
  transition:     border-color var(--transition-fast),
                  background  var(--transition-fast),
                  color       var(--transition-fast);
  text-decoration: none;
}

.et_pb_portfolio_grid .et_pb_portfolio_filters li a:hover,
.et_pb_portfolio_grid .et_pb_portfolio_filters li.et_pb_portfolio_filter_active a,
.et_pb_portfolio_grid .et_pb_portfolio_filters li.et_pb_portfolio_filter_active span {
  background:   var(--color-accent);
  border-color: var(--color-accent);
  color:        var(--color-white);
}

/* ----------------------------------------------------------
   8. GRILLE — ALIGNEMENT DES HAUTEURS
      Force toutes les cartes d'une même ligne à la même
      hauteur grâce à CSS Grid natif.
   ---------------------------------------------------------- */
.et_pb_portfolio_grid .et_pb_portfolio_grid_items,
.et_pb_portfolio.et_pb_portfolio_grid .et_pb_portfolio_grid_items {
  display:               grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap:                   var(--space-xl);
  align-items:           start;
}

/* ----------------------------------------------------------
   9. RESPONSIVE
   ---------------------------------------------------------- */
@media (max-width: 980px) {
  /* Miniature légèrement moins haute sur tablette */
  .et_pb_portfolio_grid .et_pb_portfolio_item .et_portfolio_image,
  .et_pb_portfolio.et_pb_portfolio_grid .et_pb_portfolio_item .et_portfolio_image {
    height: 320px;
  }

  .et_pb_portfolio_grid .et_pb_portfolio_grid_items,
  .et_pb_portfolio.et_pb_portfolio_grid .et_pb_portfolio_grid_items {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .et_pb_portfolio_grid .et_pb_portfolio_item .et_portfolio_image,
  .et_pb_portfolio.et_pb_portfolio_grid .et_pb_portfolio_item .et_portfolio_image {
    height: 260px;
  }

  .et_pb_portfolio_grid .et_pb_portfolio_grid_items,
  .et_pb_portfolio.et_pb_portfolio_grid .et_pb_portfolio_grid_items {
    grid-template-columns: 1fr;
  }
}