/* ==========================================================================
   Page AMEX – FDES / Empreinte carbone
   Scopé sous .fdes-amex.
   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-amex {
  --fdes-green: #75b82a;
  --fdes-green-dark: #5da912;
  --fdes-green-deep: #599117;
  --fdes-green-line: #4c7a12;
  --fdes-green-light: #bfe5bf;
  --fdes-grey-light: #efefef;
  --fdes-grey-box: #ebebeb;
  --fdes-text: #5d5d5d;
  --fdes-red: #f84b4b;
  --fdes-radius: 20px;
  --fdes-gutter: clamp(14px, 2vw, 24px);
  --fdes-badge-w: clamp(150px, 13vw, 185px);

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

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

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

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

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

.fdes-amex p { margin: 0 0 1em; }
.fdes-amex p:last-child { margin-bottom: 0; }
.fdes-amex img { max-width: 100%; height: auto; min-height: 0; }
.fdes-amex sub, .fdes-amex sup { font-size: .62em; line-height: 0; }

.fdes-amex .green { color: var(--fdes-green) !important; }

/* --------------------------------------------------------------------------
   1. Titre principal
   -------------------------------------------------------------------------- */
.fdes-amex 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-amex h1.green { color: var(--fdes-green-dark) !important; }

/* --------------------------------------------------------------------------
   2. Chapô + macaron FDES
   -------------------------------------------------------------------------- */
.fdes-amex .fdes-intro {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 60px);
  margin-bottom: clamp(32px, 4vw, 56px);
}
.fdes-amex .fdes-intro__text { flex: 1 1 auto; min-width: 0; }
.fdes-amex .fdes-intro__logo { flex: 0 0 auto; width: clamp(120px, 15vw, 220px); }
.fdes-amex .fdes-intro__logo img { display: block; width: 100%; }

/* --------------------------------------------------------------------------
   3. Encadré « Retrouvez les FDES… »
   -------------------------------------------------------------------------- */
.fdes-amex .fdes-list-wrap {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 34px);
  margin-bottom: clamp(32px, 4vw, 56px);
}
.fdes-amex .fdes-list-wrap__visual { flex: 0 0 auto; width: clamp(120px, 16vw, 230px); }
.fdes-amex .fdes-list-wrap__visual img { display: block; width: 100%; }

.fdes-amex .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-amex .fdes-list__intro { margin-bottom: 16px; }
.fdes-amex .fdes-list ul { margin: 0 !important; padding-left: 1.15em !important; list-style: disc !important; }
.fdes-amex .fdes-list li { margin-bottom: 8px; list-style: disc !important; }
.fdes-amex .fdes-list li:last-child { margin-bottom: 0; }
.fdes-amex .fdes-list a,
.fdes-amex .fdes-intro a {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  text-decoration: underline !important;
}
.fdes-amex .fdes-list a:hover,
.fdes-amex .fdes-list a:focus { color: var(--fdes-green-dark) !important; }

/* --------------------------------------------------------------------------
   4. Bandeau vert
   -------------------------------------------------------------------------- */
.fdes-amex .fdes-banner {
  background: var(--fdes-green) !important;
  color: #fff !important;
  text-transform: uppercase !important;
  text-align: left !important;
  letter-spacing: normal !important;
  font-size: clamp(15px, 1.45vw, 20px) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: clamp(28px, 4vw, 44px) 0 24px !important;
  padding: clamp(12px, 1.6vw, 18px) clamp(18px, 3vw, 46px) !important;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   5. En-tête de situation
   -------------------------------------------------------------------------- */
.fdes-amex .fdes-situation { margin-top: clamp(36px, 5vw, 64px); }

.fdes-amex .fdes-situation__head {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 34px);
  margin-bottom: clamp(20px, 3vw, 34px);
}
.fdes-amex .fdes-situation__icon { flex: 0 0 auto; width: clamp(72px, 10vw, 145px); }
.fdes-amex .fdes-situation__icon img { display: block; width: 100%; }
.fdes-amex .fdes-situation__title {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 60ch;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--fdes-text) !important;
  font-size: clamp(17px, 1.75vw, 25px) !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}
.fdes-amex .fdes-situation__title strong { font-weight: 700 !important; color: inherit !important; }

/* --------------------------------------------------------------------------
   6. Tableau comparatif
   Colonnes calées sur la maquette : libellé 31 %, durée 1fr, empreinte 1.3fr.
   -------------------------------------------------------------------------- */
.fdes-amex .fdes-compare {
  --col-label: 31%;
  --col-dv: 1fr;
  --col-ec: 1.3fr;
  --fdes-col-gap: clamp(40px, 4.5vw, 70px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--fdes-badge-w);
  grid-template-rows: auto auto;
  column-gap: var(--fdes-col-gap);
}

/* --- En-têtes : placement explicite (classes) + repli par position --- */
.fdes-amex .fdes-compare__head {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  display: grid;
  grid-template-columns: var(--col-label) var(--col-dv) var(--col-ec);
  align-items: stretch;
  gap: 10px;
  padding: 0 var(--fdes-gutter);
  margin-bottom: -16px;
}
/* Repli : fonctionne que le <span> vide de la colonne 1 soit présent ou non. */
.fdes-amex .fdes-compare__head-cell:nth-last-child(2) { grid-column: 2; grid-row: 1; }
.fdes-amex .fdes-compare__head-cell:last-child        { grid-column: 3; grid-row: 1; }
/* Placement nominal, prioritaire. */
.fdes-amex .fdes-compare__head-cell--dv { grid-column: 2 !important; grid-row: 1 !important; }
.fdes-amex .fdes-compare__head-cell--ec { grid-column: 3 !important; grid-row: 1 !important; }

.fdes-amex .fdes-compare__head-cell {
  text-align: center !important;
  border: 1px solid #3e3e3e;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: #fff;
  padding: 16px 12px 30px !important;
  line-height: 1.3;
}
.fdes-amex .fdes-compare__head-cell strong {
  display: block;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  font-size: clamp(14px, 1.4vw, 20px) !important;
  letter-spacing: normal !important;
  color: #3e3e3e !important;
}
.fdes-amex .fdes-compare__head-cell em {
  display: block;
  font-style: normal !important;
  text-transform: uppercase !important;
  font-size: clamp(11px, 1.1vw, 15px) !important;
  letter-spacing: normal !important;
  color: #3e3e3e !important;
}

.fdes-amex .fdes-compare__body {
  grid-column: 1;
  grid-row: 2;
  position: relative; /* ancre pour la flèche, dont la containing-block
                          doit être ce bloc (largeur = colonne 1 seule,
                          hauteur = du haut du bloc gris au bas du pavé
                          total), et non toute la grille badge compris. */
  z-index: 1;
  min-width: 0;
}

.fdes-amex .fdes-block { border-radius: var(--fdes-radius); }
.fdes-amex .fdes-block--grey { background: var(--fdes-grey-light); }
.fdes-amex .fdes-block--green { background: var(--fdes-green-light); margin-top: 6px; }

.fdes-amex .fdes-row {
  display: grid;
  grid-template-columns: var(--col-label) var(--col-dv) var(--col-ec);
  gap: 6px 10px;
  align-items: center;
  padding: clamp(18px, 2.2vw, 28px) var(--fdes-gutter);
}
.fdes-amex .fdes-row__label {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  text-align: center !important;
  line-height: 1.4 !important;
  font-size: clamp(14px, 1.3vw, 18px) !important;
}
.fdes-amex .fdes-row__label p { margin: 0 !important; font-size: inherit !important; }
.fdes-amex .fdes-row__label strong { font-weight: 700 !important; font-size: inherit !important; }
.fdes-amex .fdes-row__label u { text-decoration: underline !important; }

.fdes-amex .fdes-cell { text-align: center !important; min-width: 0; }
.fdes-amex .fdes-cell--dv { grid-column: 2 !important; grid-row: 1 !important; }
.fdes-amex .fdes-cell--ec { grid-column: 3 !important; grid-row: 1 !important; }

.fdes-amex .fdes-cell__label {
  display: none;
  text-transform: uppercase !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: normal !important;
  color: #3e3e3e !important;
  margin-bottom: 4px;
}
.fdes-amex .fdes-value {
  margin: 0 !important;
  font-size: clamp(19px, 2.1vw, 30px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  color: #4a4a4a !important;
}
.fdes-amex .fdes-value small { display: block; font-size: .5em !important; font-weight: 400 !important; }
.fdes-amex .fdes-value--red { color: var(--fdes-red) !important; }
.fdes-amex .fdes-value--light { font-weight: 400 !important; }

/* --- Encart source --- */
.fdes-amex .fdes-source {
  grid-column: 2 / -1 !important;
  grid-row: 2 !important;
  justify-self: center;
  max-width: 100%;
  margin: 12px 0 0 !important;
  background: #fff;
  border-radius: 999px;
  padding: 9px 24px !important;
  text-align: center !important;
  font-size: clamp(11px, 1vw, 13px) !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: var(--fdes-text) !important;
}
.fdes-amex .fdes-source strong { font-weight: 700 !important; font-size: inherit !important; }
.fdes-amex .fdes-source a {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: 400 !important;
  line-height: inherit !important;
  text-decoration: underline !important;
}
.fdes-amex .fdes-source a:hover,
.fdes-amex .fdes-source a:focus { color: var(--fdes-green-dark) !important; }

/* --- Opérateurs + et = : centrés sur la colonne « empreinte carbone » --- */
.fdes-amex .fdes-op {
  position: relative;
  height: 3px;
  background: var(--fdes-green-line);
  margin: 12px var(--fdes-gutter);
}
.fdes-amex .fdes-op__mark {
  position: absolute;
  top: 50%;
  left: 80%;
  transform: translate(-50%, -50%);
  width: clamp(40px, 3.6vw, 52px) !important;
  height: clamp(40px, 3.6vw, 52px) !important;
  border-radius: 50%;
  background: var(--fdes-green-deep);
  color: #fff !important;
  font-size: clamp(24px, 2.3vw, 33px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Pastille total : alignée sur la colonne « empreinte carbone » --- */
.fdes-amex .fdes-total {
  display: grid;
  grid-template-columns: var(--col-label) var(--col-dv) var(--col-ec);
  gap: 0 10px;
  padding: 16px var(--fdes-gutter) clamp(18px, 2.2vw, 26px) !important;
}
.fdes-amex .fdes-total p {
  grid-column: 3;
  justify-self: center;
  margin: 0 !important;
  background: var(--fdes-green-deep);
  color: #fff !important;
  border-radius: 14px;
  padding: clamp(13px, 1.7vw, 20px) clamp(18px, 2.4vw, 32px) !important;
  font-size: clamp(18px, 1.95vw, 27px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  text-align: center !important;
  white-space: nowrap;
}

/* --- Badge --- */
.fdes-amex .fdes-badge {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  text-align: center !important;
}
.fdes-amex .fdes-badge__icon {
  display: block;
  width: clamp(28px, 2.6vw, 38px);
  height: auto;
  margin: 0 auto 12px;
  color: var(--fdes-green-dark);
}
.fdes-amex .fdes-badge__label {
  margin: 0 0 14px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: normal !important;
  font-size: clamp(16px, 1.6vw, 23px) !important;
  color: var(--fdes-green-dark) !important;
  text-align: center !important;
}
.fdes-amex .fdes-badge__value {
  margin: 0 auto !important;
  width: clamp(120px, 11vw, 158px);
  background: linear-gradient(180deg, #e3d81c 0%, #74b114 100%);
  border-radius: 10px;
  clip-path: polygon(0 0, 100% 0, 100% 74%, 50% 100%, 0 74%);
  color: #fff !important;
  font-size: clamp(30px, 3.1vw, 45px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-align: center !important;
  padding: clamp(22px, 2.4vw, 34px) 8px clamp(40px, 4.4vw, 60px) !important;
}

/* --- Flèche : ancrée sur la même zone de grille que le corps du tableau
   (grid-row:2 / grid-column:1), donc son sommet correspond toujours au haut
   du bloc gris (valeur rouge) et sa base au bas du bloc vert (pavé total).
   La pointe est positionnée à la fraction exacte où se termine la courbe
   (14/60 = 23.3% en largeur, 384/400 = 96% en hauteur du viewBox), ce qui
   garantit qu'elle reste soudée à la courbe quelle que soit la hauteur du
   tableau (Situation 1 à 4 lignes vs Situation 2 à 3 lignes). --- */
.fdes-amex .fdes-compare__arrow {
  display: none;
  position: absolute;
  left: 100%;   /* colle au bord droit de .fdes-compare__body (colonne 1) */
  top: 0;
  bottom: 0;    /* le tracé encode lui-même, en interne (0–100% de sa hauteur),
                   le départ proche de la valeur rouge et l'arrivée près du
                   pavé total : voir le path ci-dessous, calculé à partir des
                   coordonnées vectorielles réelles du PDF source. */
  width: var(--fdes-col-gap);
  color: var(--fdes-green-dark);
  pointer-events: none;
  z-index: 2;
}
.fdes-amex .fdes-arrow__line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.fdes-amex .fdes-arrow__head {
  position: absolute;
  left: 28%;
  top: 91%;   /* atterrit sur le pavé total (~86%-96% de la hauteur du
                 tableau) plutôt qu'après lui : au-delà de 100% la pointe
                 chevauchait la note de bas de page qui suit le tableau. */
  width: clamp(26px, 2.4vw, 34px);
  height: clamp(26px, 2.4vw, 34px);
  /* Le triangle pointe vers la gauche (180°) dans son propre repère, mais
     la tangente réelle de la courbe à ce point descend surtout vers le bas
     (~124° en repère écran) : sans rotation, la pointe formait un angle
     d'environ 55° avec le trait, d'où l'impression de pointe « de travers ».
     transform-origin place le pivot exactement sur le sommet du triangle
     (5%,67.5% de son propre viewBox 40x40) pour que la rotation tourne la
     pointe SANS déplacer son sommet, qui reste ancré sur la courbe. */
  transform-origin: 5% 67.5%;
  transform: translate(-5%, -67.5%) rotate(-56deg);
  display: block;
}

/* --- Notes --- */
.fdes-amex .fdes-footnote {
  margin: clamp(14px, 2vw, 22px) 0 0 !important;
  font-size: clamp(11px, 1vw, 13px) !important;
  line-height: 1.6 !important;
  text-align: left !important;
}
.fdes-amex .fdes-outro { margin-top: clamp(28px, 4vw, 48px); }
.fdes-amex .fdes-outro em { font-style: italic !important; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width: 1200px) {
  .fdes-amex .fdes-compare__arrow { display: block; }
}

@media (max-width: 991px) {
  .fdes-amex .fdes-compare { display: block; }
  .fdes-amex .fdes-compare__head { display: none !important; }

  .fdes-amex .fdes-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fdes-amex .fdes-row__label { grid-column: 1 / -1 !important; grid-row: 1 !important; margin-bottom: 14px; }
  .fdes-amex .fdes-cell--dv { grid-column: 1 !important; grid-row: 2 !important; }
  .fdes-amex .fdes-cell--ec { grid-column: 2 !important; grid-row: 2 !important; }
  .fdes-amex .fdes-cell__label { display: block; }
  .fdes-amex .fdes-source { grid-column: 1 / -1 !important; grid-row: 3 !important; border-radius: 14px; }

  .fdes-amex .fdes-op__mark { left: 50%; }

  .fdes-amex .fdes-total { display: flex; justify-content: center; }
  .fdes-amex .fdes-total p { white-space: normal; }

  .fdes-amex .fdes-badge { margin-top: 32px; }
  .fdes-amex .fdes-badge__label { font-size: 20px !important; }
  .fdes-amex .fdes-badge__value { width: 175px; font-size: 40px !important; padding: 28px 8px 52px !important; }
}

@media (max-width: 599px) {
  .fdes-amex .fdes-intro { flex-direction: column-reverse; align-items: center; }
  .fdes-amex .fdes-intro__logo { width: 150px; }

  .fdes-amex .fdes-list-wrap { flex-direction: column; align-items: center; }
  .fdes-amex .fdes-list-wrap__visual { width: 165px; }

  .fdes-amex .fdes-situation__head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .fdes-amex .fdes-situation__icon { width: 88px; }

  .fdes-amex .fdes-row { grid-template-columns: minmax(0, 1fr); }
  .fdes-amex .fdes-cell--dv { grid-column: 1 !important; grid-row: 2 !important; }
  .fdes-amex .fdes-cell--ec { grid-column: 1 !important; grid-row: 3 !important; margin-top: 16px; }
  .fdes-amex .fdes-source { grid-row: 4 !important; }

  .fdes-amex .fdes-total p { width: 100%; }
}