étiré via `object-fit:cover` (largeur
inchangée, seul le cadrage vertical de l'image est rogné). Override
scopé, ne touche pas .split-media-row ailleurs sur le site. ---- */
#contexte-du-projet {
background-color: rgba(0, 204, 255, 0.15);
}
/* .section-title-desc est à 18px (--font-size-base) partout ailleurs sur
le site — ici le texte doit rester à 16px (--body-size), retour Pierre
2026-09-16. Scopé à cette section, pas touché globalement. */
#contexte-du-projet .section-title-desc {
font-size: var(--body-size);
}
@media (min-width: 1024px) {
#contexte-du-projet .split-media-row {
align-items: stretch;
}
/* .split-media-media devient lui-même une colonne flex (image + liseré
media-stripe empilés) pour que l'image (flex:1) absorbe tout
l'espace vertical disponible sous le liseré, plutôt que de se baser
sur sa hauteur naturelle — sinon un simple height:100% sur l'image
déborderait de la hauteur du liseré de 10px sous elle. */
#contexte-du-projet .split-media-media {
display: flex;
flex-direction: column;
}
#contexte-du-projet .split-media-media img {
flex: 1;
min-height: 0;
-o-object-fit: cover;
object-fit: cover;
}
}
.nm-richtext p {
margin: 0 0 var(--spacing-sm);
font-family: var(--font-family-ui);
font-size: var(--ui-text-size);
line-height: 1.5;
}
.nm-richtext p:last-child {
margin-bottom: 0;
}
/* Retour Pierre, ticket "PAGES FLEXIBLES" : les liens dans un bloc de
texte classique étaient invisibles (même style que le texte autour) —
même correctif que `.accordion-body a`. `.nm-richtext` est le bloc de
texte générique réutilisé sur tout le site, donc règle globale plutôt
que scopée aux seules pages flexibles. */
.nm-richtext a {
font-weight: 700;
text-decoration: underline;
}
.nm-cta-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-sm);
margin-top: var(--spacing-md);
}
@media (min-width: 1024px) {
.nm-cta-row {
align-items: flex-end;
}
#nm-mission .nm-cta-row,
.oue-stand .nm-cta-row {
align-items: flex-start;
}
}
.nm-two-col {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
@media (min-width: 1024px) {
.nm-two-col {
flex-direction: row;
gap: var(--spacing-xl);
}
.nm-two-col > * {
flex: 1;
}
}
/* ---- callout-navy (fond bleu 1, texte blanc) ----
2 usages : titre custom sans icône ("Eaux pluviales : une priorité
croissante"), ou icône + titre fixe "Bon à savoir". */
.callout-navy {
padding: var(--spacing-md);
background-color: var(--color-blue-1);
border-radius: 16px;
color: var(--color-blanc);
}
.callout-navy-header {
display: flex;
align-items: center;
gap: var(--spacing-md);
margin-bottom: 4px;
}
.callout-navy-icon {
flex-shrink: 0;
width: 32px;
height: 29px;
}
.callout-navy-icon img {
display: block;
width: 100%;
height: 100%;
}
.callout-navy-title {
margin: 0;
font-family: var(--font-family-ui);
font-weight: 700;
font-size: var(--ui-text-size);
color: var(--color-blanc);
}
.callout-navy--icon .callout-navy-title {
font-family: var(--font-family-heading);
font-size: var(--h3-size-desktop);
}
.callout-navy p {
margin: 0 0 var(--spacing-sm);
font-family: var(--font-family-ui);
font-size: var(--ui-text-size);
line-height: 1.5;
color: var(--color-blanc);
}
.callout-navy a {
color: inherit;
text-decoration: underline;
}
.callout-navy p:last-child {
margin-bottom: 0;
}
.callout-navy ul {
margin: 0 0 var(--spacing-sm);
padding-left: 1.2em;
}
/* ---- stat-progress (jauge "Taux de rendement") ---- */
.stat-progress {
padding: var(--spacing-md);
border: 1px solid var(--color-noir);
border-radius: 16px;
}
.stat-progress-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-xs);
font-family: var(--font-family-ui);
font-weight: 700;
font-size: var(--ui-text-size);
}
.stat-progress-title {
flex: 1;
min-width: 0;
margin: 0;
}
.stat-progress-value {
white-space: nowrap;
}
.stat-progress-track {
position: relative;
height: 13px;
background-color: #d9d9d9;
border-radius: 50px;
overflow: hidden;
}
.stat-progress-fill {
position: absolute;
inset: 0;
width: 0;
background: linear-gradient(to right, var(--color-blue-3), var(--color-blue-1));
border-radius: 50px;
}
.stat-progress-caption {
margin: var(--spacing-xs) 0 0;
font-family: var(--font-family-ui);
font-size: 1.4rem;
}
/* ---- accordion, variante "filled" (Accords de Territoire, Axes NOS
ENGAGEMENTS) ---- le fond cyan clair ne s'applique QUE sur l'état ouvert
(cf. node 825:8967 : Axe 04 ouvert = fond rempli sans bordure, Axe 05
fermé = bordure blanche identique à .accordion-item de base) — piège
repéré le 2026-07-24 : la 1ère implémentation appliquait le fond rempli
en dur sur tous les items quel que soit l'état, ce qui aurait empêché
tout changement visuel réel à l'ouverture/fermeture au clic. */
.accordion-item--filled[open] {
background-color: rgba(0, 204, 255, 0.15);
border: none;
border-left: 4px solid var(--color-blue-3);
border-radius: 0 16px 16px 0;
}
.accordion--grid-3 {
gap: var(--spacing-md);
}
@media (min-width: 1024px) {
.accordion--grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: start;
}
}
.accordion-example-card {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 17rem;
}
.accordion--grid-3 .accordion-title {
min-height: 8.4rem;
line-height: 2.8rem;
}
/* ---- accordion, badge optionnel au-dessus du titre (ex. "Axe 04") ---- */
.accordion-header-text {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--spacing-xs);
min-width: 0;
}
.accordion-badge {
display: inline-flex;
align-self: flex-start;
padding: 4px 16px;
background-color: var(--color-blue-1);
border-radius: 50px;
font-family: var(--font-family-ui);
font-weight: 700;
font-size: 1.4rem;
text-transform: uppercase;
color: var(--color-blanc);
}
/* ---- pi-ppri-frame (encart "Les plans de prévention..." + grille PPRi),
Figma node 596:3346 — bordure noire 1px + radius 16px + 32px de padding
interne, wrappant le titre/texte ET la grille ensemble (pas 2 blocs
séparés). ---- */
.pi-ppri-frame {
border: 1px solid var(--color-noir);
border-radius: 16px;
padding: 32px;
}
/* Titre en
du texte d'intro PPRi (node 596:3119, Desktop/H3
24px) — normal sur mobile (défaut de .nm-richtext p), 24px + 50% de
large seulement à partir du desktop (retour Pierre 2026-09-16). */
@media (min-width: 1024px) {
.nm-richtext-title-half {
max-width: 50%;
}
.nm-richtext-title-half strong {
font-size: 24px;
}
}
/* ---- ppri-item (badge statut + titre + flèche externe) ---- */
.ppri-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-sm);
margin-top: var(--spacing-md);
}
.ppri-item {
display: flex;
align-items: stretch;
text-decoration: none;
color: var(--color-noir);
border-radius: 0 16px 16px 0;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
}
.ppri-item-bar {
flex-shrink: 0;
width: 4px;
background-color: var(--color-blue-3);
border-radius: 8px 0 0 8px;
}
.ppri-item-body {
display: flex;
flex: 1;
align-items: center;
justify-content: space-between;
gap: var(--spacing-md);
padding: var(--spacing-md);
border: 1px solid var(--color-noir);
border-left: none;
border-radius: 0 16px 16px 0;
}
.ppri-item-text {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--spacing-xs);
min-width: 0;
}
.ppri-item-badge {
display: inline-flex;
align-self: flex-start;
padding: 4px 16px;
background-color: var(--color-blue-1);
border-radius: 50px;
font-family: var(--font-family-ui);
font-weight: 700;
font-size: 1.4rem;
text-transform: uppercase;
color: var(--color-blanc);
}
.ppri-item-badge--approuve {
background-color: var(--color-blue-1);
color: var(--color-blanc);
}
.ppri-item-badge--en-cours {
background-color: var(--color-orange);
color: var(--color-noir);
}
.ppri-item-badge--en-projet {
background-color: var(--color-blue-3);
color: var(--color-noir);
}
.ppri-item-title {
margin: 0;
font-family: var(--font-family-ui);
font-weight: 700;
font-size: var(--ui-text-size);
}
.ppri-item-arrow {
flex-shrink: 0;
width: 14px;
height: 14px;
}
.ppri-item-arrow img {
display: block;
width: 100%;
height: 100%;
}
@media (min-width: 1024px) {
.ppri-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ==========================================================================
NOS ENGAGEMENTS
Figma: "Maquettes finales" > "NOS ENGAGEMENTS - RDE" (desktop node
486:3988 / mobile 896:5830). Réutilise .split-media-row, .callout-navy,
.accordion(-item--filled), .nm-cta-row, .cta-picto déjà existants.
========================================================================== */
.ne-intro-desc {
font-weight: 700;
}
.ne-demarches-titre {
margin-bottom: var(--spacing-sm);
}
/* ---- relation-card (badge + titre + texte, bordée) ----
node 825:4362 : 3 cartes empilées "Nos conseillers"/"Nos techniciens"/
"Dialogue & confiance" — bordée noire simple, PAS de liseré cyan à
gauche (contrairement à ppri-item/accordion-item), badge cyan clair. */
.relation-card {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
padding: var(--spacing-md);
border: 1px solid var(--color-noir);
border-radius: 16px;
}
.relation-card-badge {
display: inline-flex;
align-self: flex-start;
padding: 4px 16px;
margin-bottom: 4px;
background-color: rgba(0, 204, 255, 0.2);
border-radius: 50px;
font-family: var(--font-family-ui);
font-weight: 700;
font-size: 1.4rem;
text-transform: uppercase;
color: var(--color-noir);
}
.relation-card-title {
margin: 0;
font-family: var(--font-family-ui);
font-weight: 700;
font-size: var(--ui-text-size);
}
.relation-card-texte {
margin: 0;
font-family: var(--font-family-ui);
font-size: var(--ui-text-size);
line-height: 1.5;
}
/* ---- bullet-list (liste à puce "goutte d'eau", node 825:4341) ---- */
.bullet-list {
display: flex;
flex-direction: column;
gap: 4px;
margin: 0;
padding: 0;
list-style: none;
}
.bullet-list-item {
display: flex;
/* Aligné en haut par défaut (pas "center") : retour Pierre transverse,
"aligner en haut de la ligne quand la phrase est trop longue" — avec
`center`, une puce dont le texte passe sur 2 lignes+ retrouve son
icône flottant au milieu du bloc au lieu de rester à côté de la 1ʳᵉ
ligne. `.bullet-list--align-top` devient un no-op (gardé pour ne
pas casser les appels existants qui posent encore la classe). */
align-items: flex-start;
gap: var(--spacing-sm);
font-family: var(--font-family-ui);
font-size: var(--ui-text-size);
line-height: 1.5;
}
.bullet-list-item:not(:last-of-type) {
margin-bottom: 8px;
}
.bullet-list--align-top .bullet-list-item {
align-items: flex-start;
}
.bullet-list-icon {
flex-shrink: 0;
width: 17px;
height: 24px;
margin-top: 2px;
}
.bullet-list--align-top .bullet-list-icon {
margin-top: 2px;
}
.bullet-list-icon img {
display: block;
width: 100%;
height: 100%;
}
/* Texte de la puce dans un dédié (au lieu d'un texte brut au même
niveau que l'icône) — nécessaire pour pouvoir le contraindre : sans
min-width:0 un item contenant un lien/mot insécable (ex. une URL sans
espace comme "quefairedemesdechets.ademe.fr", cf. PRÉSERVER L'EAU
"Pour la limiter") ne peut pas rétrécir sous sa largeur intrinsèque et
dépasse le cadre de la carte — retour Pierre 2026-09-17. */
.bullet-list-item-text {
min-width: 0;
overflow-wrap: break-word;
}
/* ---- media-card (photo encadrée fond clair, ex. capture d'appli
PanneauPocket, node 606:4843) — variante de .split-media-media avec un
fond de carte au lieu d'un simple liseré sous une photo plein cadre. */
.media-card {
padding: var(--spacing-md);
background-color: #def0fc;
border-radius: 16px;
overflow: hidden;
}
.media-card.stripe-corner--left {
padding: var(--spacing-md);
border-radius: 0 16px 0 0;
overflow: visible;
}
.media-card.stripe-corner--left .media-stripe--vertical {
left: -10px;
height: calc(100% + 10px);
}
.media-card.stripe-corner--left .media-stripe:not(.media-stripe--vertical) {
left: -10px;
bottom: -10px;
width: calc(100% + 10px);
}
.media-card img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
/* ==========================================================================
NOTRE PATRIMOINE
Figma: "Maquettes finales" > "NOTRE PATRIMOINE - RDE" (desktop node
518:3465 / mobile 885:8073). Réutilise .split-media-row, .callout-navy,
.accordion(-item--filled + .accordion-badge), .bullet-list, .nm-cta-row,
.cta-picto, .media-stripe déjà existants.
========================================================================== */
/* ---- installation-card (photo + liseré + bloc fond cyan clair, node
825:4536) — réutilisée pour usines, station d'épuration, méthaniseur,
barrages. ---- */
.installation-card {
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 16px;
}
.installation-card > .media-stripe {
flex-shrink: 0;
}
.installation-card-media {
position: relative;
}
/* Hauteur fixe + object-fit:cover : les 7 photos (2026-09-16) ont des
ratios natifs différents (portrait/paysage), une hauteur figée évite
que les cartes d'une même grille (.nm-two-col) aient des tailles de
photo incohérentes selon l'image. 220px mobile, 233px desktop (valeur
Figma exacte, node 825:4536 et les cartes suivantes — toutes à 233px
malgré des crops sources différents). */
.installation-card-media img {
display: block;
width: 100%;
height: 220px;
-o-object-fit: cover;
object-fit: cover;
}
@media (min-width: 1024px) {
.installation-card-media img {
height: 233px;
}
}
.installation-card-credit {
position: absolute;
left: 16px;
bottom: 16px;
padding: 4px 16px;
background-color: var(--color-blanc);
border-radius: 50px;
font-family: var(--font-family-ui);
font-weight: 700;
font-size: 1rem;
text-transform: uppercase;
color: var(--color-noir);
}
.installation-card-body {
flex: 1;
padding: var(--spacing-md);
background-color: rgba(0, 204, 255, 0.15);
}
.installation-card-title {
margin: 0 0 var(--spacing-xs);
font-family: var(--font-family-heading);
font-weight: 700;
font-size: var(--h3-size-desktop);
}
.installation-card-ctas {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-sm);
margin-top: var(--spacing-md);
}
.installation-card-ctas .cta-picto {
max-width: 100%;
}
@media (min-width: 1024px) {
.installation-card-body {
padding: var(--spacing-lg);
}
}
/* ---- callout-bar (bandeau bordé + liseré cyan à gauche, texte + CTA en
ligne — ex. "Des visites gratuites de nos usines...", node 825:4592).
Différent de .accordion-item : pas de repli/dépli, juste un encart
statique. ---- */
.callout-bar {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
align-items: flex-start;
padding: var(--spacing-md);
border: 1px solid var(--color-noir);
border-left: 4px solid var(--color-blue-3);
border-radius: 4px 16px 16px 4px;
}
.callout-bar-texte {
flex: 1;
min-width: 0;
margin: 0;
font-family: var(--font-family-ui);
font-weight: 700;
font-size: var(--ui-text-size);
}
@media (min-width: 1024px) {
.callout-bar {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--spacing-lg);
}
}
/* ==========================================================================
FUTUR SIEGE
Figma: "Maquettes finales" > "FUTUR SIEGE - RDE" (desktop node 606:3743 /
mobile 879:6129). Réutilise .split-media-row, .bullet-list, .nm-two-col,
.section-title-* déjà existants.
========================================================================== */
/* ---- bullet-list-item-body (titre gras + texte empilés dans un item,
ex. "Repenser notre manière de travailler ensemble", node 634:3391 —
variante du bullet-list-item simple à une seule ligne) ---- */
.bullet-list-item-body {
display: flex;
flex-direction: column;
gap: 4px;
}
.bullet-list-item-body p {
margin: 0;
}
.bullet-list-item-titre {
font-weight: 700;
}
/* ==========================================================================
TRAVAILLER CHEZ NOUS
Figma: "Maquettes finales" > "TRAVAILLER CHEZ NOUS - RDE" (desktop node
606:2534 / mobile 879:6860). Réutilise .split-media-row, .bullet-list,
.accordion(-badge), .cta-picto, .nm-richtext déjà existants.
========================================================================== */
/* ---- split-media-credit (badge crédit photo, ex. "Vincent Poillet" —
toutes les photos de cette page sont créditées, annotation Figma sur
node 825:4726) — variante de .installation-card-credit appliquée sur
.split-media-media (rendue position:relative pour l'occasion, cf.
règle .split-media-media ci-dessus, sans effet sur les pages qui ne
l'utilisent pas). ---- */
.split-media-credit {
position: absolute;
left: 16px;
bottom: 16px;
padding: 4px 16px;
background-color: var(--color-blanc);
border-radius: 50px;
font-family: var(--font-family-ui);
font-weight: 700;
font-size: 1rem;
text-transform: uppercase;
color: var(--color-noir);
}
/* ---- tcn-stats (5 "chiffres clés" en cartes colorées, node 825:4750) —
dégradé à 5 paliers, DIFFÉRENT de .nm-stats (4 paliers, NOS MISSIONS) :
la 3ᵉ couleur (#00afdb) est une teinte intermédiaire propre à cette
maquette, absente de la palette de tokens (variables.css) — vérifiée
dans le design context Figma, pas une supposition. ---- */
.tcn-stats {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
margin-top: var(--spacing-lg);
}
.tcn-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: var(--spacing-sm);
border-radius: 16px;
text-align: center;
}
.tcn-stat-nombre {
font-family: var(--font-family-heading);
font-weight: 800;
font-size: 3rem;
}
.tcn-stat-label {
font-family: var(--font-family-ui);
font-size: var(--ui-text-size);
}
.tcn-stat--1 {
background-color: var(--color-blue-1);
color: var(--color-blanc);
}
.tcn-stat--2 {
background-color: var(--color-blue-2);
color: var(--color-blanc);
}
.tcn-stat--3 {
background-color: #00afdb;
color: var(--color-noir);
}
.tcn-stat--4 {
background-color: var(--color-blue-3);
color: var(--color-noir);
}
.tcn-stat--5 {
background-color: rgba(0, 204, 255, 0.15);
color: var(--color-noir);
}
@media (min-width: 1024px) {
.tcn-stats {
flex-direction: row;
justify-content: space-between;
}
.tcn-stat {
flex: 1;
}
}
/* ---- tcn-valeurs-grid (6 items titre gras + texte, sans bordure ni
fond, 3 colonnes en desktop, node 606:3716/606:3717) ---- */
.tcn-valeurs-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-lg) var(--spacing-md);
margin-top: var(--spacing-lg);
}
.tcn-valeur-card {
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
justify-content: center;
padding: 16px;
background-color: rgba(0, 204, 255, 0.15);
border-radius: 16px;
text-align: center;
}
.tcn-valeur-titre {
margin: 0;
font-family: var(--font-family-heading);
font-weight: 700;
font-size: 2.4rem;
line-height: 1.17;
}
.tcn-valeur-texte {
margin: 0;
font-family: var(--font-family-ui);
font-size: var(--ui-text-size);
line-height: 1.5;
}
@media (min-width: 1024px) {
.tcn-valeur-texte {
max-width: 55%;
}
}
@media (min-width: 1024px) {
.tcn-valeurs-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* ---- Avantages (TRAVAILLER CHEZ NOUS - RDE, node 606:3334) : fond cyan
15% + liens soulignés dans les 2 listes à puce (le reset global du
thème retire le soulignement des , ces liens externes réels —
CASDEN, CET, convention collective — doivent rester visibles comme
des liens). ---- */
#avantages {
background-color: rgba(0, 204, 255, 0.15);
}
#avantages .bullet-list-item a {
text-decoration: underline;
}
/* ---- Insertion professionnelle : le titre H2 collait directement au
texte en dessous (retour Pierre 2026-09-16). ---- */
#insertion-professionnelle .section-title-heading {
margin-bottom: 16px;
}
/* ---- accordion-toggle-icon--circle (variante ronde fond bleu 1 + croix
blanche, node 606:3497 "plus" / 606:3536 "Croix" — DIFFÉRENTE du
.accordion-toggle-icon de base, qui est une simple croix noire sans
fond. Réutilise le "+" tourné à 45° = "×" existant : seule la taille/
couleur changent, la rotation à l'ouverture ([open]) est déjà héritée
de la règle de base). Le +/× lui-même est réduit avec 4px d'espace de
chaque côté (calc(100% - 8px)) plutôt que de toucher les bords du rond
comme la base .accordion-toggle-icon — retour Pierre 2026-09-16, le
croix pleine largeur rendait l'icône "trop grande". ---- */
.accordion-toggle-icon--circle {
width: 29px;
height: 29px;
border-radius: 50%;
background-color: var(--color-blue-1);
}
.accordion-toggle-icon--circle::before,
.accordion-toggle-icon--circle::after {
background-color: var(--color-blanc);
}
.accordion-toggle-icon--circle::before {
left: 4px;
width: calc(100% - 8px);
}
.accordion-toggle-icon--circle::after {
top: 4px;
height: calc(100% - 8px);
}
/* À l'ouverture : rond bleu 1 + "+" blanc (fermé) → rond à bordure noire
fond transparent + croix noire (node Figma 632:2870 "Croix" sur NOTRE
ORGANISATION) — comportement général de la variante --circle partout où
elle est utilisée (NOTRE ORGANISATION, NOS MISSIONS depuis le
2026-09-16 — retour Pierre "même design que l'autre page" ; s'applique
aussi à TRAVAILLER CHEZ NOUS qui réutilise la même classe, cohérence
voulue plutôt qu'un cas isolé). */
.accordion-item[open] .accordion-toggle-icon--circle {
background-color: transparent;
border: 1px solid var(--color-noir);
}
.accordion-item[open] .accordion-toggle-icon--circle::before,
.accordion-item[open] .accordion-toggle-icon--circle::after {
background-color: var(--color-noir);
}
/* ==========================================================================
NOS DÉMARCHES (étapes 1 + 2, une seule page JS) et DÉMARCHE - RÉPONSE
(étape 3, page à part par sous-rubrique).
Figma: "Maquettes finales" > "NOS DÉMARCHES - RDE - ÉTAPE 1/2/3"
(desktop nodes 361:3999 / 361:4973 / 361:5483). Réutilise .hp-section,
.page-header-*, .bullet-list, .split-media-row, .callout-navy,
.accordion(-badge/-toggle-icon--circle), .cta-picto déjà existants.
========================================================================== */
/* ---- demarche-card (liseré cyan + titre H3 + flèche, node 361:4673
grille / 361:5389 liste) — ou