/* ==========================================================================
   Page FDES Travaux Publics – Produits drainants & voirie
   Scopé sous .fdes-tp. Même architecture que .fdes-amex (page FDES Aménagement
   Extérieur), recolorée en bleu #36B2C2 et sans tableau comparatif (page plus
   courte : titre, chapô + macaron, deux blocs visuel + liste FDES).
   IMPORTANT : le thème Alkern définit html { font-size: 62.5% } (1rem = 10px).
   Toutes les tailles sont donc exprimées en px, jamais en rem.
   Les propriétés typographiques portent !important car le thème applique
   des règles plus spécifiques sur le contenu.
   ========================================================================== */

.fdes-tp {
  --fdes-blue: #36B2C2;
  --fdes-blue-dark: #2A8B97;
  --fdes-blue-deep: #216E78;
  --fdes-grey-light: #efefef;
  --fdes-grey-box: #ebebeb;
  --fdes-text: #5d5d5d;
  --fdes-radius: 20px;
  --fdes-gutter: clamp(14px, 2vw, 24px);

  color: var(--fdes-text);
}

.fdes-tp *,
.fdes-tp *::before,
.fdes-tp *::after { box-sizing: border-box; }

/* BLINDAGE 1 : WordPress injecte des <p>/<span> vides (wpautop). */
.fdes-tp p:empty,
.fdes-tp span:empty,
.fdes-tp div:empty,
.fdes-tp br + br { display: none !important; }

/* BLINDAGE 2 : pseudo-éléments décoratifs du thème. */
.fdes-tp h1::before, .fdes-tp h1::after,
.fdes-tp h2::before, .fdes-tp h2::after,
.fdes-tp .fdes-list li::before,
.fdes-tp .fdes-list li::after { content: none !important; display: none !important; }

/* BLINDAGE 3 : floats et paddings hérités. */
.fdes-tp section,
.fdes-tp div,
.fdes-tp p,
.fdes-tp h1 { float: none !important; }

.fdes-tp p { margin: 0 0 1em; }
.fdes-tp p:last-child { margin-bottom: 0; }
.fdes-tp img { max-width: 100%; height: auto; min-height: 0; }

.fdes-tp .blue { color: var(--fdes-blue) !important; }

/* --------------------------------------------------------------------------
   1. Titre principal
   -------------------------------------------------------------------------- */
.fdes-tp h1 {
  font-size: clamp(26px, 2.7vw, 38px) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  margin: clamp(28px, 3.5vw, 48px) 0 clamp(24px, 3vw, 40px) !important;
  padding: 0 !important;
}
.fdes-tp h1.blue { color: var(--fdes-blue) !important; }

/* --------------------------------------------------------------------------
   2. Chapô + macaron FDES
   -------------------------------------------------------------------------- */
.fdes-tp .fdes-intro {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 60px);
  margin-bottom: clamp(40px, 5vw, 64px);
}
.fdes-tp .fdes-intro__text { flex: 1 1 auto; min-width: 0; }
.fdes-tp .fdes-intro__logo { flex: 0 0 auto; width: clamp(120px, 15vw, 220px); }
.fdes-tp .fdes-intro__logo img { display: block; width: 100%; }
.fdes-tp .fdes-intro a {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  text-decoration: underline !important;
}

/* --------------------------------------------------------------------------
   3. Bloc visuel + encadré FDES (produits drainants / produits de voirie)
   -------------------------------------------------------------------------- */
.fdes-tp .fdes-list-wrap {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  margin-bottom: clamp(32px, 4.5vw, 56px);
}
.fdes-tp .fdes-list-wrap__visual { flex: 0 0 auto; }
.fdes-tp .fdes-list-wrap__visual img { display: block; width: 100%; border-radius: 10px; }
.fdes-tp .fdes-list-wrap__visual--portrait  { width: clamp(180px, 23vw, 309px); }
.fdes-tp .fdes-list-wrap__visual--landscape { width: clamp(210px, 27vw, 358px); }

.fdes-tp .fdes-list {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--fdes-grey-box);
  border-radius: var(--fdes-radius);
  padding: clamp(20px, 3vw, 34px) clamp(18px, 3vw, 40px);
}
.fdes-tp .fdes-list__intro { margin-bottom: 16px !important; }
.fdes-tp .fdes-list ul { margin: 0 !important; padding-left: 1.15em !important; list-style: disc !important; }
.fdes-tp .fdes-list li { margin-bottom: 8px; list-style: disc !important; font-size: inherit; }
.fdes-tp .fdes-list li:last-child { margin-bottom: 0; }
.fdes-tp .fdes-list li.fdes-list__gap { margin-top: 18px; }
.fdes-tp .fdes-list a {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  text-decoration: underline !important;
}
.fdes-tp .fdes-list a:hover,
.fdes-tp .fdes-list a:focus { color: var(--fdes-blue-dark) !important; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
  .fdes-tp .fdes-intro { flex-direction: column-reverse; align-items: center; }
  .fdes-tp .fdes-intro__logo { width: 150px; }

  /* L'image passe toujours avant l'encadré FDES, quel que soit l'ordre
     dans le DOM (utile notamment pour le bloc « voirie », où le visuel
     est après l'encadré en desktop). */
  .fdes-tp .fdes-list-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  .fdes-tp .fdes-list { order: 2; }

  /* Visuel en plein écran (pleine largeur du viewport, en dehors du
     conteneur) : évite l'image riquiqui et recadrée façon vignette.
     Hauteur plafonnée + object-fit:cover pour éviter que la photo
     portrait (drainants, ratio 0,6) n'étire le bloc sur ~1,7x sa largeur :
     les deux visuels deviennent des bandeaux de même hauteur. */
  .fdes-tp .fdes-list-wrap__visual {
    order: 1;
    width: 100vw;
    max-width: 100vw;
    height: 280px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow: hidden;
  }
  .fdes-tp .fdes-list-wrap__visual--portrait,
  .fdes-tp .fdes-list-wrap__visual--landscape { width: 100vw; }
  .fdes-tp .fdes-list-wrap__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    border-radius: 0;
  }
}

@media (max-width: 420px) {
  .fdes-tp .fdes-list-wrap__visual { height: 220px; }
}