/* ============================================
   JOORNAL X ONDULINE - Custom CSS articles
   ============================================
   À coller dans le custom CSS de Joornal (admin)
   ou intégrer au bundle theme.

   Couvre :
   1. Lede (premier paragraphe sous H1)
   2. Hiérarchie H2 / H3 + demi-rond rouge
   3. Mini-résumés H2 (premier p après H2)
   4. Mini-résumés H3 (premier p après H3, plus discret)
   5. Tableaux (header anthracite + alternance + hover)
   6. Légendes images (italique, gris, marge bottom)
   7. Images (largeur 80% conteneur, centrées, sans bordure)

   Couleurs Onduline :
   - Rouge brique principal : #DC2E34
   - Rouge pâle (background lede) : #fde8e9
   - Anthracite texte/header : #2a2a2a
   - Gris doux H3 et légendes : #4a4a4a / #6a6a6a
   - Gris pâle alternance / résumés H3 : #f5f6f8 / #fafafa
   - Border subtle : #e0e3e8
============================================ */


/* === Italique : appliqué uniquement aux mots explicitement balisés <em>, <i> ou .italic === */
/* Par défaut, aucun bloc (lede, figcaption, etc.) n'est en italique global. */
/* Mais si un rédacteur encadre un mot par <em>, <i>, ou span.italic, il reste en italique. */

.paragraph--type--text em,
.paragraph--type--text i,
.paragraph--type--text cite,
.paragraph--type--text [class*="italic"] {
  font-style: italic !important;
}


/* === 1. Lede : premier paragraphe d'introduction sous H1 === */

.col-12.col-md-8.offset-md-2 > .paragraph.paragraph--type--text:first-of-type > div > p:first-child {
  font-size: 1.1em;
  line-height: 1.7;
  font-style: normal;
  color: #2a2a2a;
  background: #fde8e9;
  padding: 20px 24px;
  border-left: 4px solid #DC2E34;
  border-radius: 4px;
  margin-top: 32px;
  margin-bottom: 32px;
  display: block;
}

.col-12.col-md-8.offset-md-2 > .paragraph.paragraph--type--text:first-of-type > div > section:first-of-type {
  margin-top: 16px;
}


/* === 2. Hiérarchie H2 / H3 + demi-rond rouge === */

/* H2 : sans barre rouge en bas, marge top augmentée pour aérer le décorateur demi-rond */
.paragraph--type--text h2 {
  color: #2a2a2a;
  font-size: 1.7em;
  font-weight: 700;
  border: none;
  padding-bottom: 0;
  margin-top: 80px;
  margin-bottom: 16px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  position: relative;
}

/* Demi-rond rouge au-dessus du H2 : rapprocher (variantes selon DOM) */
.paragraph--type--text h2::before {
  margin-bottom: 4px;
  vertical-align: bottom;
}

.paragraph--type--text [class*="deco"] + h2,
.paragraph--type--text [class*="ornament"] + h2 {
  margin-top: 4px;
}

.paragraph--type--text [class*="deco"],
.paragraph--type--text [class*="ornament"] {
  margin-bottom: 4px;
  margin-top: 64px;
}

/* H3 : gris plus clair, sans bordure, plus petit */
.paragraph--type--text h3 {
  color: #4a4a4a;
  font-size: 1.18em;
  font-weight: 600;
  border: 0;
  padding: 0;
  margin-top: 32px;
  margin-bottom: 10px;
  line-height: 1.35;
  letter-spacing: 0;
}


/* === 3. (SUPPRIMÉ 2026-06-23) Mini-résumés H2 ===
   Le 1er paragraphe après un H2 était stylé en encadré (fond gris #f5f6f8 + barre
   rouge à gauche + gras), ce qui le faisait passer pour un "résumé de section".
   Or dans le texte rédigé (gold standard Mara), ces paragraphes sont de simples
   débuts de section en prose, pas des résumés. Styling retiré → le 1er paragraphe
   après un H2 rend désormais comme un paragraphe normal.
   (Décision Yann 2026-06-23, comparaison S1-02 prod vs texte source Mara.)
   Si un vrai mini-résumé volontaire est souhaité un jour, l'expliciter via une
   classe dédiée plutôt qu'un sélecteur structurel h2 + p, qui attrape TOUS les
   débuts de section. */

/* Mini-résumé de section EXPLICITE : à poser via class="section-sum" sur le
   1er <p> d'une section quand on VEUT un encadré récap (articles repromptés
   S1-01, S1-03 à S1-06). NE PAS utiliser sur S1-02 (texte Mara = prose). */

/* AJOUT 2026-07-27 (arbitrage Yann) : le contenu réellement en ligne ne porte
   AUCUN .section-sum (vérifié : 0 occurrence sur les 22 articles audités), mais
   139 paragraphes class="answer", un par H2, qui sont les réponses directes de la
   cascade Q/R. C'est eux que le sélecteur structurel h2 + p encadrait en prod.
   On branche donc le même style sur .answer : rendu visuellement identique à ce
   qui est servi aujourd'hui, mais via une classe explicite et non un sélecteur
   structurel qui attrapait TOUS les débuts de section. Cf [OND-078]. */
.paragraph--type--text p.section-sum,
.paragraph--type--text p.answer {
  background: #f5f6f8;
  padding: 16px 20px;
  border-radius: 4px;
  border-left: 4px solid #DC2E34;
  font-weight: 500;
  color: #2a2a2a;
  font-size: 1.02em;
  line-height: 1.6;
  margin-top: 24px;
  margin-bottom: 28px;
}
/* Variante après figure : pas de barre rouge à gauche (fond seul) */
.paragraph--type--text figure + p.section-sum,
.paragraph--type--text figure + p.answer { border-left: none; }


/* === 4. (réservé) Mini-résumés H3 - désactivé car pas de mini-résumés sous les H3 dans les articles S1 === */
/* Les premiers paragraphes après H3 sont des développements normaux, pas des résumés. */
/* Si des mini-résumés H3 explicites apparaissent un jour, ré-activer un bloc h3 + p ici. */


/* === 5. Tableaux : header anthracite + alternance + hover === */

.paragraph--type--text table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0 36px;
  font-size: 0.95em;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.paragraph--type--text thead {
  background: #2a2a2a;
}

.paragraph--type--text thead th {
  color: #ffffff;
  text-align: left;
  padding: 12px 14px;
  font-weight: 600;
  font-size: 0.95em;
  border: 0;
  vertical-align: middle;
}

.paragraph--type--text tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid #e0e3e8;
  color: #1a1a1a;
  vertical-align: top;
}

.paragraph--type--text tbody tr:nth-child(even) td {
  background: #f5f6f8;
}

.paragraph--type--text tbody tr:hover td {
  background: #fde8e9;
  transition: background 0.15s ease;
}

.paragraph--type--text tbody tr:last-child td {
  border-bottom: 0;
}

/* Responsivité tableaux : scroll horizontal sur mobile */
@media (max-width: 720px) {
  .paragraph--type--text table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}


/* === 6. Légendes images : italique, gris, marge bottom plus grande === */

.paragraph--type--text figcaption {
  font-style: normal;
  color: #6a6a6a;
  font-size: 0.92em;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 48px;
  line-height: 1.5;
}


/* === 7. Images : largeur réduite, centrées, sans aucune bordure parasite === */

/* Reset bordure rouge agressif sur figure, ses wrappers possibles et l'image */
.paragraph--type--text figure,
.paragraph--type--text figure *,
.paragraph--type--text figure img,
.paragraph--type--text figure picture,
.paragraph--type--text [class*="field"] figure,
.paragraph--type--text [class*="image"] figure,
.paragraph--type--text > div > figure,
.paragraph--type--text > div > div > figure,
.paragraph--type--text figure[class] {
  border: 0 !important;
  border-left: 0 !important;
  border-left-width: 0 !important;
  border-left-style: none !important;
  border-left-color: transparent !important;
  border-right: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding-left: 0 !important;
}

/* Supprimer d'éventuels pseudo-elements décoratifs qui simulent une barre */
.paragraph--type--text figure::before,
.paragraph--type--text figure::after,
.paragraph--type--text figure img::before,
.paragraph--type--text figure img::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
}

.paragraph--type--text figure {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.paragraph--type--text figure img {
  max-width: 80%;
  width: 80%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 8px;
}


/* === 8. CTAs Onduline pleine largeur avec visuel (doctrine C009 - Tony Ragot) ===
   Pattern : carte horizontale fond rouge Onduline, image à gauche (40 %),
   titre + sous-titre + bouton à droite, responsive (stack en mobile).
   Destinations canoniques : Store Locator / fiche produit / page valeur / vidéo / FAQ. */

.paragraph--type--text .cta-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: #DC2E34;
  color: #ffffff;
  border-radius: 6px;
  overflow: hidden;
  margin: 40px 0;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  text-decoration: none;
}

.paragraph--type--text .cta-card-visual {
  flex: 0 0 40%;
  background: #2a2a2a;
  min-height: 220px;
  position: relative;
  overflow: hidden;
}

.paragraph--type--text .cta-card-visual img {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.paragraph--type--text .cta-card-content {
  flex: 1;
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #DC2E34;
}

.paragraph--type--text .cta-card-eyebrow {
  text-transform: uppercase;
  font-size: 0.75em;
  letter-spacing: 1.2px;
  font-weight: 700;
  color: #ffe9ea;
  margin: 0 0 8px 0;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.paragraph--type--text .cta-card-title {
  color: #ffffff !important;
  font-size: 1.35em;
  font-weight: 700;
  margin: 0 0 12px 0;
  line-height: 1.3;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  font-style: normal !important;
}

.paragraph--type--text .cta-card-text {
  color: #ffe9ea;
  font-size: 0.95em;
  line-height: 1.55;
  margin: 0 0 22px 0;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  font-style: normal !important;
}

/* Liens produits DANS le texte du CTA (pas le bouton).
   Fix "Rendre Onduline 9S visible" (retour Mara 15/07, S1-08) : le 9S est le seul
   produit encapsule dans un <a>. Aucune couleur n'etant definie pour les liens de
   .cta-card-text, il herite d'une teinte sombre/rouge et devient invisible sur le
   fond #DC2E34. On force une couleur claire + soulignement. Le :not() preserve le
   bouton .cta-card-link, qui garde son style blanc sur rouge inverse. */
.paragraph--type--text .cta-card-text a,
.paragraph--type--text .cta-card-content a:not(.cta-card-link) {
  color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  font-weight: 600;
}

.paragraph--type--text .cta-card-text a:hover,
.paragraph--type--text .cta-card-content a:not(.cta-card-link):hover {
  color: #ffe9ea !important;
  text-decoration: underline !important;
}

.paragraph--type--text .cta-card-link,
.paragraph--type--text a.cta-card-link {
  display: inline-block;
  align-self: flex-start;
  background: #ffffff !important;
  color: #DC2E34 !important;
  padding: 12px 28px;
  font-weight: 700;
  font-size: 0.95em;
  text-decoration: none !important;
  border-radius: 2px;
  letter-spacing: 0.3px;
  border: 0;
  line-height: 1.3;
  transition: background 0.15s ease, color 0.15s ease;
}

.paragraph--type--text .cta-card-link:hover,
.paragraph--type--text a.cta-card-link:hover {
  background: #2a2a2a !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

@media (max-width: 720px) {
  .paragraph--type--text .cta-card {
    flex-direction: column;
  }
  .paragraph--type--text .cta-card-visual {
    flex: 0 0 180px;
    min-height: 180px;
  }
  .paragraph--type--text .cta-card-content {
    padding: 24px 22px;
  }
}


/* === 9. Listes ol/ul du corps d'article : rendu liste standard ===
   Fix "grands espaces blancs entre les mots" (retour Mara 10/07, S1-06).
   Le thème rendait le <strong> en tête de <li> comme une colonne flottée à
   largeur fixe (terme à gauche, description décalée, numéros de liste absents,
   espaces étirés). On force ici un rendu de liste classique : puce/numéro +
   gras inline + texte au fil. Vérifié via rendu Edge headless (before/after). */
.paragraph--type--text ol,
.paragraph--type--text ul {
  display: block !important;
  padding-left: 1.6em !important;
  margin: 16px 0 28px !important;
}
.paragraph--type--text ol { list-style: decimal outside !important; }
.paragraph--type--text ul { list-style: disc outside !important; }
.paragraph--type--text ol > li,
.paragraph--type--text ul > li {
  display: list-item !important;
  float: none !important;
  width: auto !important;
  clear: none !important;
  text-align: left !important;
  margin: 0 0 10px 0 !important;
  padding-left: 0 !important;
  line-height: 1.7;
}
.paragraph--type--text ol li strong,
.paragraph--type--text ul li strong {
  display: inline !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}