/* ==========================================================================
   Fiche produit Robot-Maker — style 100 % CSS appliqué à la sortie TinyMCE brute
   Aucune classe requise dans le HTML : tout est ciblé par sélecteurs structurels.

   Emplacement : themes/default-bootstrap/css/fiche-produit.css
   Chargé par header.tpl UNIQUEMENT sur les pages produit ($page_name == 'product').

   Portée : .product-description (div.rte de la description longue dans
   product.tpl) et .rm-fiche (alias pour les previews hors PrestaShop).
   Aucun autre élément de la boutique n'est affecté.

   Palette extraite des captures du site robot-maker.com :
     bleu navbar (dégradé)        #3C6FA4 → #28558B
     cyan boutons "Ajouter au panier"  #0096CD → #007EBA
     orange CTA "Vendez vos produits"  #FF8200
     vert badge "Disponible"      #55C65E
     sombre bandeau "Panier"      #333333
   ========================================================================== */

/* ── Palette ────────────────────────────────────────────────────────────── */
.product-description,
.rm-fiche {
  --rm-bleu:         #35649A;  /* bleu moyen navbar */
  --rm-bleu-clair:   #3C6FA4;  /* haut du dégradé navbar */
  --rm-bleu-fonce:   #28558B;  /* bas du dégradé navbar */
  --rm-cyan:         #0096CD;  /* haut du dégradé boutons boutique */
  --rm-cyan-fonce:   #007EBA;  /* bas du dégradé boutons boutique */
  --rm-orange:       #ee942e;  /* orange CTA du site */
  --rm-orange-fonce: #6f6f6f;
  --rm-vert:         #55C65E;  /* vert badge "Disponible" (réserve) */
  --rm-vert-patch:   #43b155;  /* vert des pastilles h5 */
  --rm-sombre:       #333333;  /* bandeau sombre du site */
  --rm-texte:        #3d4654;
  --rm-bordure:      #d4dde7;
  --rm-zebra:        #f4f7fa;
}

/* ── Conteneur général ──────────────────────────────────────────────────── */
.product-description,
.rm-fiche {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--rm-texte);
  font-size: 15px;
  line-height: 1.7;
}

/* ── Titres de section ──────────────────────────────────────────────────── */
.product-description h3,
.rm-fiche h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--rm-bleu-fonce);
  border-left: 4px solid var(--rm-bleu);
  padding: 2px 0 2px 12px;
  margin: 26px 0 12px;
}

/* Neutralise le soulignement que TinyMCE ajoute dans les titres
   (<span style="text-decoration: underline">) */
.product-description h3 span,
.rm-fiche h3 span {
  text-decoration: none !important;
}

/* ── Pastilles : h4 = bleue, h5 = verte ─────────────────────────────────
   Dans TinyMCE, passer un mot en "Titre 4" ou "Titre 5" crée une
   pastille colorée (ex. plots de sélection 3V3 / 5V0 / 12V d'une carte).
   inline-block : plusieurs pastilles peuvent se suivre sur une ligne,
   y compris dans une cellule de tableau. */
.product-description h4,
.product-description h5,
.rm-fiche h4,
.rm-fiche h5 {
  display: inline-block;
  margin: 2px 5px 2px 0;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.4;
  color: #ffffff;
  vertical-align: middle;
}

.product-description h4,
.rm-fiche h4 {
  background: var(--rm-bleu-fonce);
}

.product-description h5,
.rm-fiche h5 {
  background: var(--rm-vert-patch);
}

/* Le contenu d'une pastille reste blanc et sans soulignement, même si
   TinyMCE y glisse un <strong> ou un <span> stylé */
.product-description h4 *,
.product-description h5 *,
.rm-fiche h4 *,
.rm-fiche h5 * {
  color: inherit;
  text-decoration: none !important;
}

/* ── Paragraphes & mise en avant ────────────────────────────────────────── */
.product-description p,
.rm-fiche p {
  margin: 0 0 12px;
}

.product-description strong,
.rm-fiche strong {
  color: var(--rm-bleu-fonce);
}

/* ── Liens DANS le texte (description) ──────────────────────────────────
   Style inline discret : cyan des liens/boutons de la boutique,
   soulignement fin. (Les liens de la section "Liens utiles" sont
   transformés en boutons plus bas — la règle bouton prend le dessus.) */
.product-description p a,
.product-description li a,
.rm-fiche p a,
.rm-fiche li a {
  color: var(--rm-cyan-fonce);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.product-description p a:hover,
.product-description li a:hover,
.rm-fiche p a:hover,
.rm-fiche li a:hover {
  color: var(--rm-orange-fonce);
}

/* ── Images insérées dans la description ────────────────────────────────── */
.product-description img,
.rm-fiche img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 16px;
  border: 1px solid var(--rm-bordure);
  padding: 6px;
  background: #ffffff;
  box-sizing: border-box;
}

/* ── Encart "Important" ─────────────────────────────────────────────────
   Déclenché par un <em> dans TinyMCE (l'italique devient un encart).
   Teinte ambrée assortie à l'orange CTA du site.
   font-style: normal annule l'italique visuel. */
.product-description em,
.rm-fiche em {
  display: block;
  background: #fff6e6;
  border-left: 4px solid var(--rm-orange);
  padding: 12px 16px;
  margin: 0 0 14px;
  font-style: normal;
}

.product-description em::before,
.rm-fiche em::before {
  content: "Important : ";
  font-weight: bold;
  color: #8a5a00;
}

.product-description em strong,
.rm-fiche em strong {
  color: #8a5a00;
}

/* ── Listes à puces ──────────────────────────────────────────────────────
   Simple liste propre, puces rondes bleues aux couleurs du site.
   (L'ancien habillage "pseudo-tableau" des listes est retiré : les
   caractéristiques passent par de vrais tableaux, voir plus bas.) */
.product-description ul,
.rm-fiche ul {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.product-description ul li,
.rm-fiche ul li {
  position: relative;
  padding: 3px 0 3px 20px;
}

.product-description ul li::before,
.rm-fiche ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rm-bleu);
}

/* Listes imbriquées : puce creuse pour marquer le niveau */
.product-description ul ul,
.rm-fiche ul ul {
  margin: 4px 0 0;
}

.product-description ul ul li::before,
.rm-fiche ul ul li::before {
  width: 6px;
  height: 6px;
  background: #ffffff;
  border: 2px solid var(--rm-bleu);
}

/* Clé mise en gras dans TinyMCE : ressort en libellé bleu */
.product-description ul li strong,
.rm-fiche ul li strong {
  font-weight: 600;
  color: var(--rm-bleu-fonce);
}

/* ── Tableaux (caractéristiques techniques) ─────────────────────────────
   Habillage automatique de TOUT tableau de la description : un simple
   <table> nu inséré dans TinyMCE suffit, aucun style inline requis.
   En-tête au dégradé bleu de la navbar, lignes zébrées,
   1re colonne en libellé bleu — mêmes codes que le reste de la fiche. */
.product-description table,
.rm-fiche table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  border: 1px solid var(--rm-bordure);
  margin: 0 0 16px;
}

.product-description table th,
.rm-fiche table th {
  background: linear-gradient(to bottom, var(--rm-bleu-clair), var(--rm-bleu-fonce));
  color: #ffffff;
  padding: 12px 14px;
  text-align: left;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: .5px;
  text-transform: uppercase;
  border: none;
}

.product-description table td,
.rm-fiche table td {
  padding: 10px 14px;
  border-bottom: 1px solid #e3e8ef;
  vertical-align: top;
}

/* 1re colonne = libellé de la caractéristique */
.product-description table td:first-child,
.rm-fiche table td:first-child {
  font-weight: 600;
  color: var(--rm-bleu-fonce);
}

/* Zébrage */
.product-description table tbody tr:nth-child(odd) td,
.rm-fiche table tbody tr:nth-child(odd) td {
  background: #ffffff;
}

.product-description table tbody tr:nth-child(even) td,
.rm-fiche table tbody tr:nth-child(even) td {
  background: var(--rm-zebra);
}

.product-description table tbody tr:last-child td,
.rm-fiche table tbody tr:last-child td {
  border-bottom: none;
}

/* ── Section "Liens utiles" : liens → boutons ───────────────────────────
   "Liens utiles" est TOUJOURS la dernière section : on cible donc tout
   paragraphe situé après le DERNIER h3 (h3:last-of-type ~ p).
   Robuste quel que soit le nombre de sections au-dessus. */
.product-description h3:last-of-type ~ p a,
.rm-fiche h3:last-of-type ~ p a {
  display: inline-block;
  /* Même dégradé cyan que les boutons "Ajouter au panier" de la boutique */
  background: linear-gradient(to bottom, var(--rm-cyan), var(--rm-cyan-fonce));
  color: #ffffff !important;   /* évite l'override des liens du thème */
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  padding: 11px 20px;
  margin: 2px 6px 2px 0;
}

.product-description h3:last-of-type ~ p a:hover,
.rm-fiche h3:last-of-type ~ p a:hover {
  background: var(--rm-bleu-fonce);
  color: #ffffff !important;
}

/* ── BLOC FORUM forcé en bas de la fiche ────────────────────────────────
   La fiche passe en flex colonne (rendu identique au flux normal) : tous
   les enfants gardent l'ordre du document (order: 0 par défaut), sauf le
   paragraphe-encart forum qui reçoit order: 1 → il est repoussé tout en
   bas, sous les autres boutons, où qu'il soit placé dans TinyMCE. */
.product-description:has(h3:last-of-type ~ p a[href*="forum/138-demandes-dinformations"]),
.rm-fiche:has(h3:last-of-type ~ p a[href*="forum/138-demandes-dinformations"]) {
  display: flex;
  flex-direction: column;
}

/* En flex les marges verticales ne fusionnent plus : on compense pour
   garder le même espacement visuel entre sections (12 + 14 ≈ 26px) */
.product-description:has(h3:last-of-type ~ p a[href*="forum/138-demandes-dinformations"]) h3:not(:first-child),
.rm-fiche:has(h3:last-of-type ~ p a[href*="forum/138-demandes-dinformations"]) h3:not(:first-child) {
  margin-top: 14px;
}

.product-description h3:last-of-type ~ p:has(a[href*="forum/138-demandes-dinformations"]),
.rm-fiche h3:last-of-type ~ p:has(a[href*="forum/138-demandes-dinformations"]) {
  order: 1;
}

/* ── BLOC FORUM ──────────────────────────────────────────────────────────
   Le paragraphe qui contient le lien vers le forum "Demandes
   d'informations" devient un encart dédié (équivalent du bloc forum du
   template : fond gris clair, bordure, bouton vert sur sa propre ligne).
   Détection par l'URL du lien, même avec résidus TinyMCE (%20style=…).
   Nécessite :has() (tous navigateurs depuis fin 2023) ; sans support,
   le lien reste un simple bouton vert — dégradation propre. */
.product-description h3:last-of-type ~ p:has(a[href*="forum/138-demandes-dinformations"]),
.rm-fiche h3:last-of-type ~ p:has(a[href*="forum/138-demandes-dinformations"]) {
  background: #eef2f6;
  border: 1px solid var(--rm-bordure);
  padding: 14px 18px;
  margin: 14px 0 0;
  color: var(--rm-texte);
}

/* Bouton forum : variante verte, forcée sur sa propre ligne sous le texte */
.product-description h3:last-of-type ~ p a[href*="forum/138-demandes-dinformations"],
.rm-fiche h3:last-of-type ~ p a[href*="forum/138-demandes-dinformations"] {
  display: table;            /* à la ligne, largeur ajustée au contenu */
  margin: 10px 0 0;
  background: var(--rm-orange);
  padding: 10px 18px;
}

.product-description h3:last-of-type ~ p a[href*="forum/138-demandes-dinformations"]:hover,
.rm-fiche h3:last-of-type ~ p a[href*="forum/138-demandes-dinformations"]:hover {
  background: var(--rm-orange-fonce);
}

/* Les paragraphes de la section liens : espacement réduit entre boutons */
.product-description h3:last-of-type ~ p,
.rm-fiche h3:last-of-type ~ p {
  margin: 0 0 10px;
}

/* Masque les paragraphes réellement vides (TinyMCE en laisse parfois) */
.product-description p:empty,
.rm-fiche p:empty {
  display: none;
}

/* ==========================================================================
   LIMITES DU 100 % CSS (à connaître)
   - "Liens utiles" doit rester la DERNIÈRE section de la fiche : c'est ce
     qui déclenche le style bouton (h3:last-of-type).
   - Pour les caractéristiques techniques, insérer un VRAI tableau dans
     TinyMCE (sans aucun style inline) : il est habillé automatiquement.
     Les fiches en liste "Clé : Valeur" restent de simples listes à
     puces ; pour les passer en tableau, les convertir dans TinyMCE.
   - Les anciennes fiches dont le tableau a été stylé EN INLINE dans
     TinyMCE gardent leurs styles inline (ils priment sur ce fichier) :
     pour les harmoniser, retirer les style="…" dans TinyMCE.
   - CSS ne peut pas dédupliquer des liens répétés ni corriger une URL
     cassée (ex. "…/%20style=") : à corriger dans TinyMCE.
   - Les <p> contenant seulement une espace ne sont pas masqués par :empty.
   ========================================================================== */