/* SEREPP Catalogue — styles des sorties de shortcodes (fiche système).
 * Alignés sur la charte ; surchargeable depuis Divi.
 */
:root{
	--serepp-cat-navy:#003C69;
	--serepp-cat-orange:#F47427;
	--serepp-cat-ink:#1D1D1B;
	--serepp-cat-muted:#6B6B6B;
	--serepp-cat-line:#E5E5E5;
	--serepp-cat-soft:#F4F4F6;
	--serepp-cat-stripe:#F9F9F9; /* ligne alternée (zébrage tableaux/listes) */
	/* Accent = couleur de la gamme courante si définie, sinon orange charte.
	   --serepp-gamme est injectée par le plugin sur chaque fiche. */
	--serepp-accent: var(--serepp-gamme, var(--serepp-cat-orange));
}

/* ── Chips (pictos / destinations) ──
 * !important pour neutraliser le style des <ul>/<li> imposé par Divi
 * (.et-l--body ul { padding:0 0 23px 1em; list-style:disc }) qui est plus
 * spécifique et ajoutait une marge gauche + des puces. */
ul.serepp-cat-chips{ list-style:none !important; margin:0 !important; padding:0 !important; display:flex; flex-wrap:wrap; gap:10px; }
.serepp-cat-chips li.serepp-cat-chip{ list-style:none !important; margin:0 !important; }
.serepp-cat-chip{
	display:inline-flex; align-items:center; gap:8px;
	background:var(--serepp-cat-soft); border:1px solid var(--serepp-cat-line);
	border-radius:8px; padding:8px 12px;
	font-family:'DM Sans',system-ui,sans-serif; font-size:14px; color:var(--serepp-cat-navy);
}
.serepp-cat-chip__icon{ width:24px; height:24px; object-fit:contain; flex:0 0 24px; }
.serepp-cat-chip__label{ font-weight:600; }
.serepp-cat-ph{ background:linear-gradient(135deg,#d0d0d0,#b0b0b0); border-radius:4px; display:inline-block; }

/* Variante « pictos / caractéristiques » — calquée sur le Groupe Divi/Figma :
 * pastille au fond de la couleur de gamme (var --serepp-gamme), icône BLANCHE
 * à gauche, libellé blanc DM Sans 14 à droite. Une seule icône blanche par
 * caractéristique suffit ; la couleur vient de la gamme, pas de l'image. */
.serepp-cat-chips--caracteristique{ gap:12px; }
.serepp-cat-chips--caracteristique .serepp-cat-chip{
	background:var(--serepp-gamme, var(--serepp-cat-orange)); /* couleur de la gamme */
	border:0; border-radius:8px; padding:0 20px 0 0; gap:10px; /* 20px à droite, icône à ras à gauche */
	width:auto; /* la pastille épouse la largeur du texte */
}
.serepp-cat-chips--caracteristique .serepp-cat-chip__icon{
	width:50px; height:50px; flex:0 0 50px; border-radius:8px; object-fit:cover;
}
.serepp-cat-chips--caracteristique .serepp-cat-chip__label{
	color:#fff; font-family:'DM Sans',system-ui,sans-serif;
	font-weight:400; font-size:14px; line-height:1.15; white-space:nowrap;
}

/* ── Tableau de composition ── (valeurs CALÉES SUR LA MAQUETTE Figma EP-ASW)
 * Pas d'arrondi, pas d'ombre, pas de séparateur de lignes : la lecture vient
 * uniquement de l'alternance de fond blanc / #F9F9F9.
 * !important pour neutraliser les styles <table>/<th>/<td> de Divi. */
.serepp-cat-tablewrap{ width:100%; }
.serepp-cat-compo{
	width:100% !important; border-collapse:collapse !important;
	/* Largeurs de colonnes maîtrisées : sinon « Étape » s'étale et « Produit »
	 * se retrouve écrasé sur 4 lignes. */
	table-layout:fixed !important;
	font-family:'DM Sans',system-ui,sans-serif; font-size:14px; color:var(--serepp-cat-ink);
	background:#fff; border:0 !important; border-radius:0 !important; box-shadow:none !important; margin:0;
}
.serepp-cat-compo th:nth-child(1), .serepp-cat-compo td:nth-child(1){ width:24%; }
.serepp-cat-compo th:nth-child(2), .serepp-cat-compo td:nth-child(2){ width:40%; }
.serepp-cat-compo th:nth-child(3), .serepp-cat-compo td:nth-child(3){ width:16%; }
.serepp-cat-compo th:nth-child(4), .serepp-cat-compo td:nth-child(4){ width:20%; }
.serepp-cat-compo thead th{
	text-align:left !important; background:var(--serepp-cat-navy) !important; color:#fff !important;
	padding:14px 20px !important; font-weight:700; font-size:12px;
	text-transform:uppercase; letter-spacing:.6px; line-height:18px; border:0 !important;
}
.serepp-cat-compo td{
	padding:13px 20px !important; border:0 !important;
	color:var(--serepp-cat-ink); font-size:14px; line-height:20px;
	vertical-align:middle; background:transparent;
}
.serepp-cat-compo tbody tr:nth-child(even) td{ background:var(--serepp-cat-stripe); }
/* Étape : pastille 12px + libellé navy gras. Cellule de tableau NORMALE :
 * le texte se coupe aux espaces. Surtout PAS de flex ni de word-break ici
 * (le flex réduit la cellule à sa largeur minimale = une lettre par ligne). */
.serepp-cat-compo__etape-cell{ white-space:normal; }
.serepp-cat-compo__swatch{
	display:inline-block; width:12px; height:12px; border-radius:2px;
	margin-right:10px; vertical-align:middle;
}
.serepp-cat-compo__etape{ color:var(--serepp-cat-navy); font-weight:700; font-size:14px; }
/* Coupure UNIQUEMENT aux espaces : un mot n'est jamais coupé en deux. */
.serepp-cat-compo td, .serepp-cat-vcompo td{ overflow-wrap:normal; word-break:normal; hyphens:none; }
/* Liens documents : DM Sans Regular 14, encre (pas navy/gras), flèche ↓ en texte */
.serepp-cat-compo a,
.serepp-cat-compo__doc{ color:var(--serepp-cat-ink) !important; font-weight:400 !important; text-decoration:none !important; }
.serepp-cat-compo__doc{ white-space:nowrap; }
/* Colonne Documents resserrée : padding réduit + 2 sous-colonnes FT | DoP alignées. */
.serepp-cat-compo td:nth-child(4){ padding-left:12px !important; padding-right:12px !important; }
.serepp-cat-compo__docs{ display:flex; gap:8px; font-size:13px; }
.serepp-cat-compo__slot{ flex:1 1 0; min-width:0; white-space:nowrap; display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.serepp-cat-compo__slot .serepp-cat-compo__doc:hover{ color:var(--serepp-cat-navy) !important; }
.serepp-cat-compo__doc--empty{ color:var(--serepp-cat-muted) !important; }
.serepp-cat-compo--mini thead{ display:none; }
.serepp-cat-compo--mini{ font-size:13px; }
/* Notes sous le tableau (astérisques de la brochure) */
.serepp-cat-compo-notes{
	margin:16px 0 0; font-family:'DM Sans',system-ui,sans-serif;
	font-size:12px; line-height:18px; color:var(--serepp-cat-muted);
}
/* Respiration avant le bloc Épaisseur — uniquement dans le bloc Composition
 * (les sélecteurs d'adjacence n'atteignent pas la carte Variante). */
.serepp-cat-tablewrap + .serepp-cat-ep,
.serepp-cat-compo-notes + .serepp-cat-ep{ margin-top:18px; }

/* ── Tableaux COMPACTS sur mobile ──
 * On garde la structure du tableau (comme la maquette), mais on le force à
 * rentrer dans l'écran : table-layout fixed + largeurs de colonnes en %,
 * texte et padding réduits, et coupure des mots trop longs. Zéro scroll. */
@media (max-width:768px){
	.serepp-cat-tablewrap{ overflow-x:visible; }
	.serepp-cat-compo, .serepp-cat-vcompo{
		table-layout:fixed !important; width:100% !important; font-size:11px;
	}
	.serepp-cat-compo thead th, .serepp-cat-vcompo thead th{
		padding:8px 6px !important; font-size:9px; letter-spacing:.3px; line-height:12px;
	}
	.serepp-cat-compo td, .serepp-cat-vcompo td{
		padding:8px 6px !important; font-size:11px; line-height:15px;
		overflow-wrap:normal; word-break:normal; hyphens:none;
	}
	/* Répartition des colonnes (4 pour la compo, 3 pour la variante) */
	.serepp-cat-compo th:nth-child(1), .serepp-cat-compo td:nth-child(1){ width:27%; }
	.serepp-cat-compo th:nth-child(2), .serepp-cat-compo td:nth-child(2){ width:30%; }
	.serepp-cat-compo th:nth-child(3), .serepp-cat-compo td:nth-child(3){ width:18%; }
	.serepp-cat-compo th:nth-child(4), .serepp-cat-compo td:nth-child(4){ width:25%; }
	.serepp-cat-vcompo th:nth-child(1), .serepp-cat-vcompo td:nth-child(1){ width:34%; }
	.serepp-cat-vcompo th:nth-child(2), .serepp-cat-vcompo td:nth-child(2){ width:40%; }
	.serepp-cat-vcompo th:nth-child(3), .serepp-cat-vcompo td:nth-child(3){ width:26%; }
	/* Étape : pastille plus petite, libellé qui peut passer à la ligne */
	.serepp-cat-compo__etape-cell{ white-space:normal !important; }
	.serepp-cat-compo__etape{ font-size:11px; }
	.serepp-cat-compo__swatch{ width:9px; height:9px; margin-right:6px; border-radius:2px; }
	/* Documents : FT et DoP empilés pour ne pas élargir la colonne */
	.serepp-cat-compo__doc{ display:block; margin:0 0 4px !important; font-size:11px; white-space:nowrap; }
	.serepp-cat-compo__doc:last-child{ margin-bottom:0 !important; }
	.serepp-cat-variante{ padding:20px; }
}

/* ── Liste détaillée (checklist) ── (CALÉE SUR LA MAQUETTE)
 * Reset !important contre le style <ul> de Divi. Carré orange NET (radius 0)
 * 24px + coche blanche ; texte 16px encre. Pas d'alternance (maquette = fond
 * transparent partout), gap 14px entre items. */
ul.serepp-cat-checklist{
	list-style:none !important; margin:0 !important; padding:0 !important;
	display:flex; flex-direction:column; gap:14px; font-family:'DM Sans',system-ui,sans-serif;
}
.serepp-cat-checklist li{
	display:flex; align-items:flex-start; gap:14px; padding:0; margin:0 !important;
	background:transparent; list-style:none !important;
}
.serepp-cat-check{
	flex:0 0 24px; width:24px; height:24px; border-radius:0;
	display:inline-flex; align-items:center; justify-content:center;
	/* Couleur de la GAMME (comme le numéro de section), repli orange charte. */
	background:var(--serepp-accent); color:#fff;
	font-family:'DM Sans',system-ui,sans-serif; font-weight:700; font-size:14px; line-height:1;
}
.serepp-cat-checklist .serepp-cat-check__txt{ color:var(--serepp-cat-ink) !important; font-size:16px; font-weight:400; line-height:22px; }

/* ── Fil d'Ariane de la fiche ── (maquette 215:176)
 * NOS SYSTÈMES › GAMME › CHIMIE. Liens en blanc (sur le hero navy) ; chevrons
 * et dernier niveau en couleur de la GAMME (var --serepp-gamme, repli orange). */
.serepp-cat-bc{
	display:flex; align-items:center; flex-wrap:wrap; gap:8px;
	background:transparent; margin:0; padding:0;
	font-family:'DM Sans',system-ui,sans-serif; font-weight:700; font-size:11px;
	line-height:normal; white-space:nowrap;
}
.serepp-cat-bc__link{
	color:#fff !important; letter-spacing:2px; text-transform:uppercase;
	text-decoration:none !important;
}
.serepp-cat-bc__link:hover{ color:var(--serepp-gamme, var(--serepp-cat-orange)) !important; }
.serepp-cat-bc__sep{
	color:var(--serepp-gamme, var(--serepp-cat-orange));
	font-weight:700; font-size:11px; letter-spacing:normal;
}
.serepp-cat-bc__current{
	color:var(--serepp-gamme, var(--serepp-cat-orange));
	letter-spacing:2px; text-transform:uppercase;
}

/* ── Rangée de pictos « tuiles navy » + badges ── (maquette 254:1501)
 * Sous la liste détaillée. Tuiles 40×40 radius 4 (icône seule, jeu navy
 * img-picto-<slug>), badges de certification (A+, FDES…) en hauteur 40. */
.serepp-cat-pictogrid{
	display:flex; flex-wrap:wrap; align-items:center;
	gap:12px 10px; /* row-gap 12 · column-gap 10 */
	margin:0; padding:0;
}
.serepp-cat-tile{
	width:40px; height:40px; flex:0 0 40px;
	border-radius:4px; object-fit:cover; display:block;
}
.serepp-cat-badge{
	height:40px; width:auto; display:block; border-radius:0; object-fit:contain;
}

/* ── Destinations ── (CALÉES SUR LA MAQUETTE, field-destinations 290:1096)
 * Chips à angles droits, fond #F4F4F4, icône 34px, libellé navy DM Sans Bold 14. */
/* Intro destinations : éditeur riche (phrase + liste à puces éventuelle). */
.serepp-cat-dest-intro{
	font-family:'DM Sans',system-ui,sans-serif; font-size:16px; line-height:22px;
	color:var(--serepp-cat-ink); margin:0 0 16px;
}
.serepp-cat-dest-intro p{
	margin:0 0 8px; font-size:16px; line-height:22px; color:var(--serepp-cat-ink);
}
.serepp-cat-dest-intro p:last-child{ margin-bottom:0; }
.serepp-cat-dest-intro ul,
.serepp-cat-dest-intro ol{
	margin:8px 0 0 !important; padding:0 0 0 20px !important; list-style:disc !important;
}
.serepp-cat-dest-intro ol{ list-style:decimal !important; }
.serepp-cat-dest-intro li{
	margin:0 0 4px !important; padding:0;
	font-size:16px; line-height:22px; color:var(--serepp-cat-ink); list-style:inherit !important;
}
.serepp-cat-dest-intro li::marker{ color:var(--serepp-cat-navy); }
.serepp-cat-chips--destination{ gap:12px; }
.serepp-cat-chips--destination .serepp-cat-chip{
	background:#F4F4F4; border:0; border-radius:0; box-shadow:none;
	padding:14px 16px; gap:12px;
}
.serepp-cat-chips--destination .serepp-cat-chip__icon{
	width:34px; height:34px; flex:0 0 34px; border-radius:0; object-fit:cover;
}
.serepp-cat-chips--destination .serepp-cat-chip__label{
	font-family:'DM Sans',system-ui,sans-serif; font-weight:700; font-size:14px;
	color:var(--serepp-cat-navy); white-space:nowrap;
}

/* ── Variantes ── (CALÉES SUR LA MAQUETTE, section-variantes 216:1434)
 * 2 colonnes, carte à bordure orange, angles droits, sans ombre, sans lien. */
.serepp-cat-variantes{
	display:grid; grid-template-columns:repeat(2,1fr); gap:20px 30px;
	font-family:'DM Sans',system-ui,sans-serif;
}
.serepp-cat-variante{
	background:#fff; border:1px solid var(--serepp-accent); border-radius:0; /* bordure = couleur de gamme */
	box-shadow:none; padding:28px;
	display:flex; flex-direction:column; align-items:flex-start; gap:12px;
}
.serepp-cat-variante__title{
	margin:0; font-family:'Barlow Condensed',system-ui,sans-serif; font-weight:700;
	font-size:24px; line-height:28px; color:var(--serepp-cat-navy);
}
/* Description : 16px, noir, et espace titre↔description resserré
 * (le conteneur a gap:12px → la marge négative ramène à ~6px). */
.serepp-cat-variante__desc{
	margin:-6px 0 0 !important; font-size:16px !important; line-height:22px;
	font-weight:400; color:var(--serepp-cat-ink) !important;
}
/* Section Variantes masquée si la fiche n'en a aucune (titre « 05 » compris).
 * Donne la classe CSS « serepp-sec-variantes » à la section dans Divi. */
body.serepp-no-variantes .serepp-sec-variantes{ display:none !important; }
/* Ligne « Classement R10 » + picto 40px (radius 4) */
.serepp-cat-variante__clst{ display:flex; align-items:center; gap:12px; }
.serepp-cat-variante__clst-txt{
	font-weight:700; font-size:16px; line-height:22px; color:var(--serepp-cat-ink); white-space:nowrap;
}
.serepp-cat-variante__clst-picto{ width:40px; height:40px; flex:0 0 40px; border-radius:4px; object-fit:cover; }
/* Mini-tableau de composition de la variante */
.serepp-cat-vcompo{
	width:100% !important; border-collapse:collapse !important;
	background:#fff; border:1px solid #E6E6E6 !important; border-radius:0;
	font-size:13px; color:var(--serepp-cat-ink);
}
.serepp-cat-vcompo thead th{
	background:var(--serepp-cat-navy) !important; color:#fff !important; text-align:left !important;
	padding:9px 14px !important; font-weight:700; font-size:13px; border:0 !important;
}
.serepp-cat-vcompo td{
	padding:8px 14px !important; border:0 !important; font-size:13px;
	color:var(--serepp-cat-ink); background:transparent;
}
.serepp-cat-vcompo tbody tr:nth-child(even) td{ background:var(--serepp-cat-stripe); }
.serepp-cat-vcompo__etape{ font-weight:700; color:var(--serepp-cat-navy); white-space:normal; }
.serepp-cat-vcompo__swatch{ display:inline-block; width:12px; height:12px; border-radius:2px; margin-right:10px; vertical-align:middle; }
/* Bloc Épaisseur (navy 10 %) */
.serepp-cat-ep{
	display:inline-flex; align-items:center; gap:8px; padding:10px 16px;
	background:rgba(0,60,105,.1); color:var(--serepp-cat-navy);
	white-space:nowrap; border-radius:0;
}
.serepp-cat-ep__label{ font-family:'DM Sans',system-ui,sans-serif; font-weight:700; font-size:10px; letter-spacing:1.5px; }
.serepp-cat-ep__val{ font-family:'Barlow Condensed',system-ui,sans-serif; font-weight:700; font-size:18px; }
@media (max-width:980px){ .serepp-cat-variantes{ grid-template-columns:1fr; } }

/* ── Numérotation automatique des sections (01, 02, 03…) ──
 * Mettre la classe .serepp-fiche sur le conteneur qui englobe toutes les
 * sections, et .serepp-sec-num sur l'élément « numéro » de chaque section.
 * Une section masquée (condition Divi) ne génère pas de boîte → elle n'est
 * pas comptée → la numérotation reste continue (pas de saut 01 → 03).
 * Saisir uniquement le libellé (« PRÉSENTATION DU SYSTÈME ») ; le numéro est
 * ajouté automatiquement par le compteur. */
.serepp-fiche{ counter-reset: serepp-sec; }
.serepp-sec-num::before{
	counter-increment: serepp-sec;
	content: counter(serepp-sec, decimal-leading-zero) " — ";
}

/* ─────────────────────────────────────────────────────────────────────────
   MASQUAGE AUTOMATIQUE DES BLOCS VIDES + COLLAPSE DES COLONNES
   Le plugin pose sur le <body> des classes serepp-has-<x> / serepp-no-<x>.
   Dans Divi, on tague chaque élément avec la classe indiquée :

   • Section 01 « Présentation » ....... section : serepp-sec-presentation
        - colonne du schéma ............. colonne : serepp-col-schema
        - colonne du descriptif ......... colonne : serepp-col-descriptif
   • Section 02/03 « Compo + Caract » .. section : serepp-sec-compo-caract
        - colonne composition ........... colonne : serepp-col-composition
        - colonne caractéristiques ...... colonne : serepp-col-caracteristiques
   • Section « Destinations » .......... section : serepp-sec-destinations
   • Section « Variantes » ............. section : serepp-sec-variantes
   (Le module « numéro » serepp-sec-num doit vivre À L'INTÉRIEUR de la section /
    colonne taguée, pour que le compteur saute quand c'est masqué.)
   ───────────────────────────────────────────────────────────────────────── */

/* Sections entières masquées quand tout leur contenu est absent. */
body.serepp-no-schema.serepp-no-descriptif .serepp-sec-presentation{ display:none !important; }
body.serepp-no-composition.serepp-no-caracteristiques .serepp-sec-compo-caract{ display:none !important; }
body.serepp-no-destinations .serepp-sec-destinations{ display:none !important; }
body.serepp-no-variantes   .serepp-sec-variantes{ display:none !important; }

/* Colonnes masquées individuellement (le bloc jumeau prend toute la largeur). */
body.serepp-no-schema           .serepp-col-schema{ display:none !important; }
body.serepp-no-caracteristiques .serepp-col-caracteristiques{ display:none !important; }
body.serepp-no-composition      .serepp-col-composition{ display:none !important; }

/* Collapse : forcer la colonne restante à 100 % et l'aligner à gauche.
   On neutralise les largeurs de colonne Divi (flex + width) avec !important. */
body.serepp-no-schema .serepp-col-descriptif,
body.serepp-no-caracteristiques .serepp-col-composition,
body.serepp-no-composition .serepp-col-caracteristiques{
	width:100% !important; max-width:100% !important;
	flex:0 0 100% !important; flex-basis:100% !important;
	margin-left:0 !important; margin-right:0 !important;
	text-align:left !important;
}
body.serepp-no-schema .serepp-col-descriptif *{ text-align:left !important; }
.serepp-cat-variante__desc{ color:var(--serepp-cat-muted); font-size:13px; margin:0 0 12px; }
.serepp-cat-variante__ep{ display:inline-block; margin-top:10px; font-size:12px; font-weight:600; color:var(--serepp-cat-navy); background:var(--serepp-cat-soft); padding:4px 10px; border-radius:4px; }

/* Titre d'un tableau de composition (ex. « Support béton ») */
.serepp-cat-compo-titre{
	margin:40px 0 12px; font-family:'Barlow Condensed',system-ui,sans-serif;
	font-weight:700; font-size:20px; line-height:24px; color:var(--serepp-cat-navy);
	text-transform:uppercase; letter-spacing:.5px;
}
.serepp-cat-compo-titre:first-child{ margin-top:0; }

/* ═══════════════════════════════════════════════════════════════════════════
   PAGES GAMME — calées sur la maquette Figma « Page Gamme » (388:1842)
   Tout l'accent part de var(--serepp-gamme), injectée par le plugin.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── En-tête de chimie (Époxy, Polyuréthane…) ── */
.serepp-gamme-chimie{
	display:inline-block; margin:0 0 24px;
	font-family:'Barlow Condensed',system-ui,sans-serif; font-weight:700;
	font-size:24px !important; line-height:normal; letter-spacing:2.4px; text-transform:uppercase;
	color:var(--serepp-accent) !important; /* !important : bat le H3 global Divi */
	padding:10px 18px;
	border:2px solid var(--serepp-accent);
	border-left:10px solid var(--serepp-accent);
	background:transparent;
}

/* Tous les H2 de section (rendus par [serepp_gamme_champ tag="h2"]).
   Taille fluide (adaptée mobile) via clamp, +10px d'écart avec le texte dessous. */
h2.serepp-gamme-champ{
	font-size:clamp(28px, 4vw, 48px) !important;
	line-height:1.15em !important;
	margin:0 0 10px !important;
}
/* Destinations principales : H2 sur fond navy → blanc. */
h2.serepp-gamme-champ--app_titre{ color:#fff !important; }
.serepp-gamme-sys > .serepp-gamme-chimie:not(:first-child){ margin-top:48px; }

/* ── Grille de cartes : 3 colonnes de 380px, gap 30px ── */
.serepp-gamme-cards{
	display:grid; grid-template-columns:repeat(3,1fr); gap:30px;
	align-items:start; margin:0 0 48px; /* chaque carte a sa hauteur propre */
}
@media (max-width:1100px){ .serepp-gamme-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px){ .serepp-gamme-cards{ grid-template-columns:1fr; } }

/* ── La carte : toute la carte est un lien ── */
.serepp-gamme-card{
	display:flex; flex-direction:column; gap:10px;
	background:#fff; border:0; border-radius:0; box-shadow:none;
	padding:0 0 20px; overflow:hidden; text-decoration:none !important;
	font-family:'DM Sans',system-ui,sans-serif;
	transition:transform .35s ease, box-shadow .35s ease; will-change:transform;
}
/* Survol : léger décalage vers le haut pour signaler l'interaction. */
.serepp-gamme-card:hover{ transform:translateY(-10px); box-shadow:0 16px 36px rgba(0,0,0,.10); }
.serepp-gamme-card__head{
	display:flex; align-items:center; justify-content:space-between; gap:12px;
	padding:25px 25px 20px;
}
.serepp-gamme-card__title{
	font-family:'Barlow Condensed',system-ui,sans-serif; font-weight:700;
	font-size:22px; line-height:26px; color:var(--serepp-cat-navy);
}
.serepp-gamme-card__arrow{
	font-weight:700; font-size:18px; color:var(--serepp-accent); flex:0 0 auto;
}
.serepp-gamme-card__desc{
	padding:0 25px; font-size:16px; line-height:22px; color:#3A3A3A;
}
/* Badges (pictos mis en avant) : fond couleur gamme, icône 50px radius 8 */
.serepp-gamme-card__badges{ display:flex; flex-direction:column; gap:10px; padding:0 25px; align-items:flex-start; }
.serepp-gamme-badge{
	display:inline-flex; align-items:center; gap:10px;
	background:var(--serepp-accent); border-radius:8px;
	padding:2px 20px 2px 2px;
}
.serepp-gamme-badge__icon{ width:50px; height:50px; flex:0 0 50px; border-radius:8px; object-fit:cover; display:block; }
.serepp-gamme-badge__label{ font-size:14px; color:#fff; white-space:nowrap; }
/* Schéma 3D : pleine largeur, entier (contain) */
.serepp-gamme-card__schema{
	width:100%; height:220px; object-fit:contain; display:block; margin-top:0;
}

/* ── Listes à coches (Points forts / Applications) ── */
ul.serepp-gamme-checks{
	list-style:none !important; margin:0 !important; padding:0 !important;
	display:grid; grid-template-columns:repeat(2,1fr); gap:20px 40px;
	font-family:'DM Sans',system-ui,sans-serif;
}
@media (max-width:700px){ ul.serepp-gamme-checks{ grid-template-columns:1fr; } }
.serepp-gamme-checks li{
	display:flex; align-items:flex-start; gap:14px;
	margin:0 !important; padding:0; list-style:none !important;
}
.serepp-gamme-checks__txt{ font-size:16px; line-height:22px; color:var(--serepp-cat-ink); }
/* Sur la section Applications (fond navy), le texte passe en blanc */
.serepp-gamme-checks--app .serepp-gamme-checks__txt{ color:#fff; }

/* ── FAQ (accordéons natifs, le « + » prend la couleur de gamme) ── */
.serepp-gamme-faq{ font-family:'DM Sans',system-ui,sans-serif; }
.serepp-gamme-faq__item{ border-bottom:1px solid var(--serepp-cat-line); padding:18px 0; }
.serepp-gamme-faq__q{
	display:flex; align-items:center; justify-content:space-between; gap:16px;
	cursor:pointer; list-style:none;
	font-family:'Barlow Condensed',system-ui,sans-serif; font-weight:700;
	font-size:20px; line-height:26px; color:var(--serepp-cat-navy);
}
.serepp-gamme-faq__q::-webkit-details-marker{ display:none; }
.serepp-gamme-faq__q::after{
	content:"+"; flex:0 0 auto; font-size:26px; line-height:1;
	color:var(--serepp-accent); font-weight:700;
	transition:transform .25s ease;
}
.serepp-gamme-faq__item[open] .serepp-gamme-faq__q::after{ content:"–"; transform:rotate(180deg); }
.serepp-gamme-faq__a{ margin-top:10px; font-size:16px; line-height:22px; color:var(--serepp-cat-ink); }
/* Ouverture en douceur (les <details> natifs n'animent pas seuls). */
@keyframes serepp-faq-reveal{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.serepp-gamme-faq__item[open] .serepp-gamme-faq__a{ animation:serepp-faq-reveal .28s ease; }
/* Le titre reste navy, ouvert comme fermé (seul le +/− change de couleur). */
.serepp-gamme-faq__a p{ margin:0 0 8px; }
.serepp-gamme-faq__a p:last-child{ margin-bottom:0; }

/* ─── Page gamme — carrousel (section 02) ─────────────────────────────────── */
.serepp-gamme-carrousel{position:relative}
.serepp-gamme-carrousel__track{
	display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;
	scrollbar-width:none;-ms-overflow-style:none;
}
.serepp-gamme-carrousel__track::-webkit-scrollbar{display:none}
.serepp-gamme-carrousel__slide{
	flex:0 0 100%;margin:0;scroll-snap-align:start;
}
.serepp-gamme-carrousel__slide img{
	display:block;width:100%;height:auto;aspect-ratio:500/357;object-fit:cover;
}
.serepp-gamme-carrousel__nav{
	position:absolute;top:50%;transform:translateY(-50%);z-index:2;
	width:44px;height:44px;padding:0;border:0;cursor:pointer;
	background:#FFF;color:var(--serepp-navy,#0B1F3A);
	font-size:26px;line-height:1;display:flex;align-items:center;justify-content:center;
	transition:opacity .2s;
}
.serepp-gamme-carrousel__nav--prev{left:0}
.serepp-gamme-carrousel__nav--next{right:0}
.serepp-gamme-carrousel__nav:hover{background:var(--serepp-accent);color:#FFF}
.serepp-gamme-carrousel__nav[disabled]{opacity:.3;cursor:default}
.serepp-gamme-carrousel__nav[disabled]:hover{background:#FFF;color:var(--serepp-navy,#0B1F3A)}
.serepp-gamme-carrousel__dots{display:flex;gap:8px;justify-content:center;margin-top:14px}
.serepp-gamme-carrousel__dot{
	width:9px;height:9px;padding:0;border:0;cursor:pointer;border-radius:50%;
	background:#D9D9D9;transition:background .2s,width .2s;
}
.serepp-gamme-carrousel__dot.is-active{background:var(--serepp-accent);width:22px;border-radius:5px}

/* ─── Page gamme — FAQ en 2 colonnes (image + accordéons) ─────────────────── */
.serepp-gamme-faq-wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.serepp-gamme-faq-wrap .serepp-gamme-faq__img{margin:0}
.serepp-gamme-faq-wrap .serepp-gamme-faq__img img{display:block;width:100%;height:auto}
@media (max-width:900px){
	.serepp-gamme-faq-wrap{grid-template-columns:1fr;gap:30px}
	.serepp-gamme-faq-wrap--left .serepp-gamme-faq__img{order:-1}
}

/* ── Card gamme : bloc « Certifications » (logos type CSTB) ──
   Collées au bord GAUCHE de la carte : pas le padding 25px des autres blocs. */
.serepp-gamme-card__certs{
	display:flex;flex-wrap:wrap;gap:14px;align-items:center;
	padding:10px 20px !important; margin:0;
}
.serepp-gamme-card__cert{
	display:block;width:auto;height:90px;max-width:100%;object-fit:contain;
	margin:0;
}

/* ── Certifications dans la FICHE ([serepp_sys_certifications]) ──
   Colonne droite de « 01 — Présentation », en haut. Même taille que sur la card,
   plusieurs logos alignés côte à côte. */
.serepp-cat-certs{
	display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:0 0 20px;
}
.serepp-cat-cert{
	display:block; width:auto; height:90px; max-width:100%; object-fit:contain; margin:0;
}

/* Indices / exposants (tableaux composition, variantes, caractéristiques) */
.serepp-cat-compo sub, .serepp-cat-compo sup,
.serepp-cat-vcompo sub, .serepp-cat-vcompo sup,
.serepp-cat-checklist sub, .serepp-cat-checklist sup{ font-size:.72em; line-height:0; }

/* ── Eyebrow des sections « page gamme » (ex. « 02 —— PRÉSENTATION DE LA GAMME »)
   À écrire dans un module Texte Divi :
   <p class="serepp-eyebrow"><span class="serepp-eyebrow__num">02</span>Présentation de la gamme</p>
   Le numéro prend la couleur de la gamme (var --serepp-accent) automatiquement. */
.serepp-eyebrow{
	display:flex; align-items:center; gap:16px; margin:0 0 24px;
	font-family:'DM Sans',system-ui,sans-serif; font-weight:700;
	font-size:12px; letter-spacing:3px; text-transform:uppercase;
	color:var(--serepp-accent); /* toute la ligne en couleur de gamme */
}
.serepp-eyebrow__num{ color:var(--serepp-accent); }
.serepp-eyebrow__num::after{
	content:''; display:inline-block; width:40px; height:1px; margin-left:16px;
	background:var(--serepp-accent); vertical-align:middle;
}
/* --light : conservé pour compat, mais l'eyebrow reste en couleur de gamme
   (sur la section Destinations navy, l'accent ressort très bien). */
.serepp-eyebrow--light{ color:var(--serepp-accent); }

/* ── HERO page gamme (shortcode [serepp_gamme_hero]) ──
   Image de fond (champ hero_image) + filtre navy #003C69 à 40 % + barre
   verticale répétant le nom. Textes blancs. */
.serepp-gamme-hero{
	position:relative; overflow:hidden;
	min-height:487px; display:flex; align-items:center;
	background-size:cover; background-position:center; background-repeat:no-repeat;
	background-color:var(--serepp-cat-navy);
}
.serepp-gamme-hero::before{           /* le filtre demandé : #003C69 opacité 40 % */
	content:''; position:absolute; inset:0; z-index:1;
	background:rgba(0,60,105,.4);
}
.serepp-gamme-hero__inner{
	position:relative; z-index:2; width:100%;
	max-width:1200px; margin:0 auto; padding:0 20px; color:#fff; /* wrapper 1200 centré, responsive */
}
.serepp-gamme-hero__eyebrow{
	display:flex; align-items:center; gap:16px; margin:0 0 18px;
	font-family:'Barlow Condensed',system-ui,sans-serif; font-weight:700;
	font-size:13px; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.85);
}
.serepp-gamme-hero__num::after{
	content:''; display:inline-block; width:40px; height:1px; margin-left:16px;
	background:#fff; opacity:.7; vertical-align:middle;
}
.serepp-gamme-hero__title{
	margin:0 0 16px; color:#fff !important; /* !important : bat le H1 global Divi/thème */
	font-family:'Barlow Condensed',system-ui,sans-serif; font-weight:700;
	font-size:64px; line-height:1.02; letter-spacing:.5px;
}
.serepp-gamme-hero__chapo{
	margin:0; max-width:600px; color:#fff;
	font-family:'DM Sans',system-ui,sans-serif; font-size:18px; line-height:26px;
}
/* Barre verticale : bande pleine hauteur au bord gauche, FOND couleur de gamme,
   nom répété en clair, écrit de bas en haut. */
.serepp-gamme-hero__side{
	position:absolute; left:0; top:0; bottom:0; z-index:2;
	width:46px; display:flex; align-items:center; justify-content:center;
	background:var(--serepp-gamme, var(--serepp-cat-navy));
	writing-mode:vertical-rl; transform:rotate(180deg);
	font-family:'Barlow Condensed',system-ui,sans-serif; font-weight:700;
	font-size:12px; letter-spacing:3px; text-transform:uppercase;
	color:rgba(255,255,255,.9); white-space:nowrap; overflow:hidden; pointer-events:none;
}
/* La bande reste visible tant que le wrapper 1200 centré la dégage (≥1300px). */
@media (max-width:1300px){
	.serepp-gamme-hero__side{ display:none; }
}
@media (max-width:980px){
	.serepp-gamme-hero__title{ font-size:44px; }
}

/* ── FAQ : visuel de droite en fond cover, pleine hauteur de colonne ──
   ([serepp_gamme_faq_image] dans une colonne 50 %, ligne à hauteurs égalisées) */
.serepp-gamme-faq-cover{
	display:block; width:100%; height:100%; min-height:460px;
	background-size:cover; background-position:center; background-repeat:no-repeat;
}
/* Colonne image (classe serepp-faq-right sur la COLONNE de droite) : l'image
   passe en absolu et remplit TOUJOURS la hauteur de la colonne — donc elle suit
   en direct l'ouverture des accordéons (pur CSS, sans dépendre du JS Divi).
   Prérequis : désactiver « égaliser la hauteur des colonnes » sur la ligne. */
.serepp-faq-right{ position:relative; align-self:stretch; }
.serepp-faq-right .serepp-gamme-faq-cover{
	position:absolute; inset:0; height:100%; min-height:0;
}

/* ── FAQ pleine largeur : caler la colonne GAUCHE sur le conteneur 1200 ──
   La section FAQ est full-width (l'image déborde à droite). Cette classe, posée
   sur la COLONNE GAUCHE, aligne son contenu EXACTEMENT sur le bord du conteneur
   1200 px, comme toutes les autres sections — sans padding % approximatif.
   Retire ton padding 7 % et mets simplement la classe serepp-faq-left. */
.serepp-faq-left{
	box-sizing:border-box;
	padding-left: max(24px, calc((100vw - 1200px) / 2)) !important;
	padding-right: 56px !important;
}
@media (max-width:980px){
	.serepp-faq-left{ padding-right:24px !important; }
}

/* ── FAQ « split » : une seule grille CSS, 2 colonnes toujours à la même hauteur
   ([serepp_gamme_faq_split], section pleine largeur sans padding) ── */
.serepp-faq-split{
	display:grid; grid-template-columns:1fr 1fr; align-items:stretch;
}
.serepp-faq-split__left{
	box-sizing:border-box;
	padding: 80px 56px 80px max(24px, calc((100vw - 1200px) / 2)); /* calé sur le conteneur 1200 */
}
.serepp-faq-split__right{
	background-size:cover; background-position:center; background-repeat:no-repeat;
	min-height:100%; /* stretch de la grille → suit la hauteur de la colonne gauche */
}
@media (max-width:900px){
	.serepp-faq-split{ grid-template-columns:1fr; }
	.serepp-faq-split__left{ padding:48px 24px; }
	.serepp-faq-split__right{ min-height:320px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGES SECTEUR — calées sur la maquette Figma « Secteur - Tertiaire » (423:4340)
   Accent = orange charte au niveau page ; en section 03, chaque accordéon
   injecte --serepp-gamme (couleur de sa gamme) → labels chimie, flèches, badges.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 01 Hero : bandeau navy compact, sans image ── */
.serepp-secteur-hero{ background:var(--serepp-cat-navy); color:#fff; }
.serepp-secteur-hero__inner{ max-width:1200px; margin:0 auto; padding:0; } /* padding géré dans la section Divi */
.serepp-secteur-hero__title{
	margin:0 0 14px; color:#fff !important;
	font-family:'Barlow Condensed',system-ui,sans-serif; font-weight:700;
	font-size:clamp(34px,4.5vw,60px); line-height:1.02; letter-spacing:.5px;
}
.serepp-secteur-hero__chapo{
	margin:0; max-width:900px; color:#fff;
	font-family:'DM Sans',system-ui,sans-serif; font-size:16px; line-height:24px; opacity:.92;
}

/* ── 02 Contexte : 2 colonnes (texte | photo) ── */
.serepp-secteur-ctx{ display:grid; grid-template-columns:1.55fr 1fr; gap:48px; align-items:start; }
.serepp-secteur-ctx__titre,
h2.serepp-secteur-champ{
	margin:0 0 16px; color:var(--serepp-cat-navy);
	font-family:'Barlow Condensed',system-ui,sans-serif; font-weight:700 !important;
	font-size:clamp(32px,5vw,56px) !important; line-height:1.1 !important;
}
/* Titre FAQ : marge basse réduite pour se rapprocher des accordéons. */
h2.serepp-secteur-champ--faq_titre{ margin-bottom:6px !important; }
.serepp-secteur-ctx__texte{ font-family:'DM Sans',system-ui,sans-serif; font-size:16px; line-height:24px; color:#1D1D1B; }
.serepp-secteur-ctx__texte p{ margin:0 0 10px; }
.serepp-secteur-ctx__img{ margin:0; }
.serepp-secteur-ctx__img img{ display:block; width:100%; height:auto; object-fit:cover; }
@media (max-width:900px){ .serepp-secteur-ctx{ grid-template-columns:1fr; gap:24px; } }

/* ── 02 Problématiques : 4 cartes gris clair ── */
.serepp-secteur-probs{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
@media (max-width:900px){ .serepp-secteur-probs{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .serepp-secteur-probs{ grid-template-columns:1fr; } }
.serepp-secteur-prob{ background:var(--serepp-cat-stripe); padding:24px; }
.serepp-secteur-prob__bar{ display:block; width:32px; height:3px; background:#D5001B; margin-bottom:14px; }
.serepp-secteur-prob__titre{
	margin:0 0 10px; color:var(--serepp-cat-navy);
	font-family:'Barlow Condensed',system-ui,sans-serif; font-weight:700 !important;
	font-size:20px !important; line-height:24px !important; /* !important : bat le H3 global Divi */
}
.serepp-secteur-prob__desc{ margin:0; font-family:'DM Sans',system-ui,sans-serif; font-size:14px; line-height:20px; color:#1D1D1B; }

/* ── 03 Systèmes : accordéons par gamme (couleur de gamme injectée inline) ── */
.serepp-secteur-acc{ border:1px solid var(--serepp-cat-line); border-radius:6px; overflow:hidden; margin-bottom:16px; background:#fff; }
.serepp-secteur-acc__head{
	display:flex; align-items:center; justify-content:space-between; gap:16px;
	padding:20px 24px; cursor:pointer; list-style:none; background:var(--serepp-cat-soft);
}
.serepp-secteur-acc__head::-webkit-details-marker{ display:none; }
.serepp-secteur-acc__title{
	font-family:'Barlow Condensed',system-ui,sans-serif; font-weight:700;
	font-size:22px; line-height:1; color:var(--serepp-cat-navy);
}
.serepp-secteur-acc__chev{ color:var(--serepp-cat-navy); flex:0 0 auto; transition:transform .25s ease; }
.serepp-secteur-acc[open] .serepp-secteur-acc__chev{ transform:rotate(180deg); }
.serepp-secteur-acc__body{ padding:24px; }
/* Noms de chimie : DM Sans Bold 18, couleur de la gamme, letter-spacing 6%
   (!important : bat le H4 global Divi). */
.serepp-secteur-acc__chim{
	margin:28px 0 16px; color:var(--serepp-accent) !important;
	font-family:'DM Sans',system-ui,sans-serif !important; font-weight:700 !important;
	font-size:18px !important; line-height:1 !important; letter-spacing:0.06em !important; text-transform:uppercase;
}
.serepp-secteur-acc__body .serepp-gamme-cards:first-of-type,
.serepp-secteur-acc__chim:first-child{ margin-top:0; }
/* Cards du secteur : contour 1px #D9D9D9, radius 6px (comme la maquette). */
.serepp-secteur-acc .serepp-gamme-card{ border:1px solid #D9D9D9; border-radius:6px; }

/* ── 04 FAQ : liste pleine largeur (réutilise .serepp-gamme-faq) ──
   Questions en DM Sans Bold 17px. */
.serepp-secteur-faq .serepp-gamme-faq__q{
	font-family:'DM Sans',system-ui,sans-serif !important; font-weight:700 !important; font-size:17px !important;
}

/* ── Accents ROUGE (#D5001B) sur toute la page secteur — sauf les cards ──
   (cards = badges/flèches/chimie, qui gardent la couleur de leur gamme). */
body.serepp-tax-secteur .serepp-eyebrow{ color:var(--serepp-cat-navy); }        /* eyebrow neutre : libellé navy */
body.serepp-tax-secteur .serepp-eyebrow__num{ color:#D5001B; }                  /* numéro rouge */
body.serepp-tax-secteur .serepp-eyebrow__num::after{ background:#D9D9D9; }       /* filet gris */
body.serepp-tax-secteur .serepp-secteur-faq .serepp-gamme-faq__q::after{ color:#D5001B; } /* +/− rouge */

/* Bouton « Fiche technique (PDF) » : masqué automatiquement sur les fiches
   sans PDF (champ fiche_pdf vide). Poser la classe serepp-sec-fiche-pdf
   sur le module bouton dans Divi. */
body.serepp-no-fiche-pdf .serepp-sec-fiche-pdf{ display:none !important; }

/* Interrupteur « Afficher les boutons de téléchargement » (onglet Affichage de la
   fiche, coché par défaut). Décoché → masque les DEUX boutons.
   Donner la classe CSS « serepp-sec-downloads » aux deux modules bouton
   (Fiche technique + Fiche système), ou à la ligne/section qui les contient. */
body.serepp-hide-downloads .serepp-sec-downloads{ display:none !important; }

/* ─────────────────────────────────────────────────────────────────────────
 * RÉSULTATS DE RECHERCHE — [serepp_recherche]
 * ───────────────────────────────────────────────────────────────────────── */
.serepp-search{ max-width:1200px; margin:0 auto; }

/* En-tête « N résultats pour … » */
.serepp-search__head{
	font-family:'DM Sans',system-ui,sans-serif; font-size:16px; line-height:24px;
	color:var(--serepp-cat-muted); margin:0 0 28px;
}
.serepp-search__count{
	font-family:'Barlow Condensed','DM Sans',sans-serif; font-weight:700;
	font-size:22px; color:var(--serepp-cat-navy); margin-right:4px;
}
.serepp-search__head strong{ color:var(--serepp-cat-navy); font-weight:700; }
.serepp-search__empty{
	font-family:'DM Sans',system-ui,sans-serif; font-size:16px; color:var(--serepp-cat-muted);
	background:var(--serepp-cat-soft); border:1px solid var(--serepp-cat-line);
	border-radius:8px; padding:22px 26px; margin:0;
}

/* Titres de sections (Fiches produits / Autres pages) */
.serepp-search__title{
	display:flex; align-items:center; gap:10px;
	font-family:'Barlow Condensed','DM Sans',sans-serif; font-weight:700;
	font-size:26px; line-height:1.1; color:var(--serepp-cat-navy);
	text-transform:uppercase; letter-spacing:.02em;
	margin:38px 0 20px; padding-bottom:12px; border-bottom:1px solid var(--serepp-cat-line);
}
.serepp-search__title:first-child{ margin-top:0; }
.serepp-search__n{
	font-family:'DM Sans',system-ui,sans-serif; font-weight:600; font-size:13px;
	letter-spacing:0; text-transform:none;
	color:var(--serepp-cat-navy); background:var(--serepp-cat-soft);
	border-radius:999px; padding:2px 11px; line-height:1.6;
}

/* Grille de cartes : réutilise .serepp-gamme-cards ; le wrapper ne crée pas de
   boîte (display:contents) → l'<a> reste l'item de la grille, mais hérite de
   la variable --serepp-gamme posée sur le wrapper (coloration par gamme). */
.serepp-search__cards .serepp-search__cardwrap{ display:contents; }
/* Contour gris légèrement arrondi (cohérent avec les cartes secteur). */
.serepp-search__cards .serepp-gamme-card{
	border:1px solid #D9D9D9; border-radius:6px;
}
.serepp-search__cards .serepp-gamme-card:hover{ border-color:var(--serepp-accent); }

/* Liste des autres contenus */
.serepp-search__list{ list-style:none; margin:0; padding:0; }
.serepp-search__item{ margin:0; padding:0; }
.serepp-search__link{
	display:block; text-decoration:none !important;
	padding:18px 20px; border:1px solid var(--serepp-cat-line);
	border-radius:8px; margin-bottom:12px; background:#fff;
	transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.serepp-search__link:hover{
	border-color:var(--serepp-cat-navy);
	box-shadow:0 10px 26px rgba(0,0,0,.07); transform:translateY(-3px);
}
.serepp-search__item-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.serepp-search__item-title{
	font-family:'DM Sans',system-ui,sans-serif; font-weight:700; font-size:18px;
	line-height:24px; color:var(--serepp-cat-navy);
}
.serepp-search__link:hover .serepp-search__item-title{ color:var(--serepp-cat-orange); }
.serepp-search__item-type{
	font-family:'DM Sans',system-ui,sans-serif; font-weight:600; font-size:11px;
	text-transform:uppercase; letter-spacing:.06em; color:var(--serepp-cat-muted);
	background:var(--serepp-cat-soft); border-radius:4px; padding:2px 8px;
}
.serepp-search__item-desc{
	display:block; margin-top:6px;
	font-family:'DM Sans',system-ui,sans-serif; font-size:15px; line-height:22px;
	color:var(--serepp-cat-ink);
}
.serepp-search__item-url{
	display:block; margin-top:8px;
	font-family:'DM Sans',system-ui,sans-serif; font-size:12px; color:var(--serepp-cat-muted);
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width:700px){
	.serepp-search__title{ font-size:22px; }
}

/* ── Autosuggestion (panneau flottant sous le champ de recherche) ── */
.serepp-suggest{
	position:absolute; z-index:100000;
	background:#fff; border:1px solid #D9D9D9; border-radius:8px;
	box-shadow:0 18px 44px rgba(0,0,0,.14);
	overflow:hidden; max-height:70vh; overflow-y:auto;
	font-family:'DM Sans',system-ui,sans-serif;
}
.serepp-suggest__group{
	font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
	color:var(--serepp-cat-muted); background:var(--serepp-cat-soft);
	padding:8px 16px; border-bottom:1px solid var(--serepp-cat-line);
}
.serepp-suggest__item{
	display:flex; align-items:center; gap:12px;
	padding:11px 16px; text-decoration:none !important;
	border-bottom:1px solid #F0F0F2;
}
.serepp-suggest__item:hover,
.serepp-suggest__item.is-active{ background:var(--serepp-cat-soft); }
.serepp-suggest__dot{
	flex:0 0 auto; width:12px; height:12px; border-radius:50%;
}
.serepp-suggest__txt{ display:flex; flex-direction:column; min-width:0; }
.serepp-suggest__title{
	font-size:15px; font-weight:600; color:var(--serepp-cat-navy);
	line-height:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.serepp-suggest__meta{
	font-size:12px; color:var(--serepp-cat-muted); line-height:16px;
}
.serepp-suggest__empty{
	padding:16px; font-size:14px; color:var(--serepp-cat-muted);
}
.serepp-suggest__all{
	display:block; padding:12px 16px; text-decoration:none !important;
	font-size:13px; font-weight:700; color:var(--serepp-cat-navy);
	background:var(--serepp-cat-soft);
}
.serepp-suggest__all:hover,
.serepp-suggest__all.is-active{ color:var(--serepp-cat-orange); }

/* ─────────────────────────────────────────────────────────────────────────
 * DÉCLARATIONS DE PERFORMANCE — [serepp_dop] (liste alphabétique)
 * ───────────────────────────────────────────────────────────────────────── */
.serepp-dop-list{
	max-width:1200px; margin:0 auto;
	column-count:var(--serepp-dop-cols, 2); column-gap:48px;
	font-family:'DM Sans',system-ui,sans-serif;
}
@media (max-width:820px){ .serepp-dop-list{ column-count:1; } }
.serepp-dop-item{
	display:flex; align-items:center; gap:12px;
	break-inside:avoid; -webkit-column-break-inside:avoid;
	padding:13px 4px; border-bottom:1px solid var(--serepp-cat-line);
	text-decoration:none !important; color:var(--serepp-cat-navy);
	transition:color .15s ease, padding-left .15s ease;
}
.serepp-dop-item:hover{ color:#D5001B; padding-left:8px; }
.serepp-dop-ico{ flex:0 0 auto; color:var(--serepp-cat-navy); transition:color .15s ease; }
.serepp-dop-item:hover .serepp-dop-ico{ color:#D5001B; }
.serepp-dop-name{
	flex:1 1 auto; font-size:16px; line-height:22px; font-weight:600;
}
.serepp-dop-dl{
	flex:0 0 auto; font-size:16px; font-weight:700;
	opacity:0; transform:translateY(2px); transition:opacity .15s ease, transform .15s ease;
}
.serepp-dop-item:hover .serepp-dop-dl{ opacity:1; transform:translateY(0); }
.serepp-dop-empty{
	font-family:'DM Sans',system-ui,sans-serif; color:var(--serepp-cat-muted);
	background:var(--serepp-cat-soft); border:1px solid var(--serepp-cat-line);
	border-radius:8px; padding:20px 24px; max-width:1200px; margin:0 auto;
}

/* ─────────────────────────────────────────────────────────────────────────
 * CARTE DE CONTACTS — [serepp_carte_contacts]
 * ───────────────────────────────────────────────────────────────────────── */
.serepp-cc{
	display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center;
	max-width:1100px; margin:0 auto; font-family:'DM Sans',system-ui,sans-serif;
}
@media (max-width:820px){ .serepp-cc{ grid-template-columns:1fr; gap:28px; } }

.serepp-cc__map{ width:100%; }
.serepp-cc-map{ width:100%; height:auto; display:block; }

/* Zones (quartiers de l'hexagone + pastille export) */
.serepp-cc-zone{
	fill:#EAF0F5; stroke:#fff; stroke-width:3;
	cursor:pointer; transition:fill .18s ease;
}
.serepp-cc-zone:hover{ fill:#CBD8E4; }
.serepp-cc-zone:focus-visible{ outline:none; fill:#CBD8E4; }
.serepp-cc-zone.is-active{ fill:var(--serepp-cat-navy); }
.serepp-cc-zone--export{ fill:#EAF0F5; }
.serepp-cc-zone--export.is-active{ fill:#D5001B; }

/* Libellés sur la carte */
.serepp-cc-lab{
	font-family:'Barlow Condensed','DM Sans',sans-serif; font-weight:700;
	font-size:16px; fill:var(--serepp-cat-navy); text-transform:uppercase;
	letter-spacing:.02em; pointer-events:none; user-select:none;
}
.serepp-cc-zone.is-active + .serepp-cc-lab,
.serepp-cc-lab[data-zone].is-active{ fill:#fff; }
/* le libellé passe en blanc quand sa zone est active (via JS toggle is-active sur le texte) */
.serepp-cc-lab.is-active{ fill:#fff; }
.serepp-cc-lab--export{ font-size:13px; }

/* Panneau contact */
.serepp-cc__panel{
	background:#fff; border:1px solid #D9D9D9; border-radius:10px;
	padding:28px 30px; min-height:220px;
	display:flex; gap:20px; align-items:flex-start;
	box-shadow:0 12px 30px rgba(0,0,0,.05);
}
.serepp-cc-card__photo{ flex:0 0 auto; }
.serepp-cc-card__photo img{ width:92px; height:92px; object-fit:cover; border-radius:8px; display:block; }
.serepp-cc-card__body{ display:flex; flex-direction:column; min-width:0; }
.serepp-cc-card__zone{
	font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
	color:#D5001B; margin-bottom:4px;
}
.serepp-cc-card__name{
	font-family:'Barlow Condensed','DM Sans',sans-serif; font-weight:700;
	font-size:26px; line-height:1.1; color:var(--serepp-cat-navy);
}
.serepp-cc-card__role{ font-size:14px; color:var(--serepp-cat-muted); margin-top:2px; }
.serepp-cc-card__lines{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.serepp-cc-line{
	display:inline-flex; align-items:center; gap:10px; text-decoration:none !important;
	font-size:16px; font-weight:600; color:var(--serepp-cat-navy);
}
.serepp-cc-line:hover{ color:var(--serepp-cat-orange); }
.serepp-cc-line__ic{
	flex:0 0 auto; width:26px; height:26px; border-radius:50%;
	background:var(--serepp-cat-soft); color:var(--serepp-cat-navy);
	display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700;
}
.serepp-cc-card__ass{
	margin-top:16px; padding-top:14px; border-top:1px solid var(--serepp-cat-line);
	font-size:14px; color:var(--serepp-cat-ink);
}
.serepp-cc-card__ass a{ color:var(--serepp-cat-navy); text-decoration:none; }
.serepp-cc-card__ass a:hover{ color:var(--serepp-cat-orange); }
.serepp-cc-card__asslabel{
	display:block; font-size:11px; font-weight:700; text-transform:uppercase;
	letter-spacing:.06em; color:var(--serepp-cat-muted); margin-bottom:3px;
}
.serepp-cc-card__dep{ margin-top:12px; font-size:13px; color:var(--serepp-cat-muted); }
@media (max-width:820px){ .serepp-cc__panel{ min-height:0; } }

/* Carte départementale précise (SVG pygal recoloré par zone) */
.serepp-cc-map .departement{ stroke:#fff; stroke-width:1; cursor:pointer; transition:fill .15s ease, filter .15s ease; }
.serepp-cc-map .departement.is-hover{ filter:brightness(.88); }
.serepp-cc-map .departement.is-active{ fill:var(--serepp-cat-navy) !important; }
.serepp-cc-map .departement--neutre{ pointer-events:none; opacity:.5; }

/* Légende / sélecteur de zones */
.serepp-cc__legend{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.serepp-cc-leg{
	display:inline-flex; align-items:center; gap:8px; padding:6px 12px;
	border:1px solid #D9D9D9; border-radius:999px; background:#fff;
	font-family:inherit; font-size:13px; font-weight:600; color:var(--serepp-cat-navy);
	cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.serepp-cc-leg:hover{ border-color:var(--serepp-cat-navy); }
.serepp-cc-leg.is-active{ background:var(--serepp-cat-navy); color:#fff; border-color:var(--serepp-cat-navy); }
.serepp-cc-leg__sw{ width:12px; height:12px; border-radius:3px; flex:0 0 auto; }
.serepp-cc-leg.is-active .serepp-cc-leg__sw{ box-shadow:0 0 0 2px rgba(255,255,255,.85) inset; }

/* ─── Composition : composant alternatif « OU » (2e ligne par couche) ───── */
.serepp-cat-compo__row--alt td { vertical-align: top; }
.serepp-cat-compo__stack { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.serepp-cat-compo__opt { display: block; width: 100%; }
.serepp-cat-compo__opt .serepp-cat-compo__docs { width: 100%; }
.serepp-cat-compo__ou {
	font-size: 11px;
	font-weight: 700;
	color: #6B6B6B;
	letter-spacing: 0.04em;
	line-height: 1;
	text-transform: uppercase;
}
.serepp-cat-compo__ou--ghost { visibility: hidden; }

/* ─── Bouton « Fiche système (PDF) » auto ([serepp_fiche_systeme_btn]) ───── */
.serepp-cat-fsbtn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	background: var(--serepp-cat-navy, #003C69);
	color: #fff !important;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none !important;
	border-radius: 6px;
	transition: background 0.2s ease;
}
.serepp-cat-fsbtn:hover,
.serepp-cat-fsbtn:focus-visible {
	background: #002A4A;
	color: #fff !important;
}