/* ==========================================================================
   Mille et une rues — style « Affiche collée » pour YOOtheme Pro
   Fichier du thème enfant : wp-content/themes/<thème-enfant>/css/custom.css
   (chargé automatiquement par YOOtheme, sans compilation Less)

   La typographie (polices, tailles des titres H1 à H6 et des styles « Heading »,
   texte courant, boutons, menu) se règle dans YOOtheme : Style.
   Ce fichier ne contient que les couleurs et les décors des classes « rues-… ».
   ========================================================================== */

/* Toutes les polices sont chargées par YOOtheme (Style), qui les héberge sur le site :
   aucun appel à Google Fonts. Les polices décoratives sont la police secondaire
   (marqueur) et la police tertiaire (bombe) de Style > Global > Typography. */

:root {
    --rues-encre: #141517;        /* asphalte */
    --rues-papier: #EFEBE2;       /* fond papier */
    --rues-papier-clair: #F7F4EE; /* affiches et cadres photo */
    --rues-creme: #F4F1EA;        /* texte sur asphalte */
    --rues-orange: #F8A54A;       /* couleur principale */
    --rues-bourgogne: #85343A;    /* couleur secondaire, en petites touches */
    --rues-gris: #45464B;
    /* --rues-titres, --rues-texte, --rues-marqueur et --rues-bombe suivent les polices
       choisies dans YOOtheme (Style). Elles sont définies dans YOOtheme :
       Settings > Custom Code > CSS/Less. */
}

/* La bande inclinée dépasse la largeur de l'écran : on coupe le débordement. */
.tm-page { overflow-x: clip; }

/* ==========================================================================
   STYLE GLOBAL — s'applique à toutes les pages, sans aucune classe à ajouter.

   Dans le constructeur, le « Style » d'une section donne sa couleur :
     Défaut = papier · Atténué (Muted) = papier clair
     Primaire = orangé · Secondaire = asphalte (texte clair)

   Classes facultatives à poser sur un élément (champ « Classe CSS ») :
     rues-marqueur        mot au marqueur            (élément Texte)
     rues-etiquette       étiquette collée           (élément Texte)
     rues-polaroid        photo collée               (élément Panel)
     rues-missions        cartes numérotées          (élément Grille)
     rues-chiffres        gros chiffres              (élément Grille)
     rues-equipe          portraits                  (élément Grille)
     rues-nouvelles       cartes de nouvelles        (élément Grille)
     rues-contacts        encadrés cliquables        (élément Grille)
     rues-plaques         plaques de rue             (élément Liste)
   Dans un titre : <span class="rues-hl">mot surligné</span>
   (variantes : rues-hl--encre, rues-hl--bourgogne).
   ========================================================================== */
body { background: var(--rues-papier); }
.tm-page {
    background: var(--rues-papier);
    color: #2B2C30;
}

/* Titres : police, graisse et tailles viennent de YOOtheme (Style > Base et Heading).
   Ici, seulement la couleur : un titre ou un texte « Lead » prend celle de sa section. */
.tm-page :where(h1, h2, h3, h4, h5, h6, .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, [class*="uk-heading-"], .el-title, .uk-card-title, .uk-text-lead) { color: inherit; }

/* Couleur des sections selon leur style */
.tm-page .uk-section-default   { background: var(--rues-papier);       color: var(--rues-encre); }
.tm-page .uk-section-muted     { background: var(--rues-papier-clair); color: var(--rues-encre); }
.tm-page .uk-section-primary   { background: var(--rues-orange);       color: var(--rues-encre); }
.tm-page .uk-section-secondary { background: var(--rues-encre);        color: var(--rues-creme); }
/* une section orangée garde un texte foncé, même si le thème la traite en « clair sur foncé » */
.tm-page .uk-section-primary:not(.uk-preserve-color) :is(h1, h2, h3, h4, h5, h6, p, li, .el-title, .el-meta, .el-content:not(.uk-button), .uk-text-meta, .uk-text-lead, a:not(.uk-button)) {
    color: var(--rues-encre);
}

/* Liens et texte courant */
.tm-page main :where(a) { color: var(--rues-bourgogne); }
.tm-page :where(.uk-section-primary, .uk-section-secondary) :where(a) { color: inherit; text-decoration: underline; }
.tm-page main :where(blockquote) {
    margin: 28px 0;
    padding: 18px 22px;
    background: var(--rues-orange);
    color: var(--rues-encre);
    font-family: var(--rues-titres);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.2;
    font-style: normal;
}

/* Boutons */
/* police, taille et marges de côté : YOOtheme, Style > Button */
.tm-page .uk-button {
    text-decoration: none;
    border-radius: 0;
    border: 2px solid transparent;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
/* hauteur souple : un libellé trop long passe sur deux lignes sans donner un bouton géant */
.tm-page .uk-button:not(.uk-button-text, .uk-button-link, .uk-button-small, .uk-button-large) { padding-top: 17px; padding-bottom: 17px; line-height: 1.1; }
.tm-page .uk-button:hover { transform: translate(-2px, -2px); }
.tm-page .uk-button-primary   { background: var(--rues-encre); color: var(--rues-creme); box-shadow: 6px 6px 0 var(--rues-orange); }
.tm-page .uk-button-secondary { background: var(--rues-orange); color: var(--rues-encre); box-shadow: 6px 6px 0 var(--rues-encre); }
.tm-page .uk-button-default   { background: transparent; color: var(--rues-encre); border-color: var(--rues-encre); }
.tm-page .uk-section-secondary .uk-button-primary { background: var(--rues-orange); color: var(--rues-encre); box-shadow: 6px 6px 0 var(--rues-creme); }
.tm-page .uk-section-secondary .uk-button-default { background: transparent; color: var(--rues-creme); border-color: var(--rues-creme); }
.tm-page .uk-section-primary .uk-button-primary   { background: var(--rues-encre); color: var(--rues-creme); box-shadow: 6px 6px 0 var(--rues-bourgogne); }
.tm-page .uk-section-primary .uk-button-default   { background: transparent; color: var(--rues-encre); border-color: var(--rues-encre); }

/* Cartes (style « Carte » d'un Panel ou d'une Grille) */
.tm-page .uk-card { border-radius: 0; }
.tm-page .uk-card-default   { background: var(--rues-papier-clair); color: var(--rues-encre); box-shadow: 8px 8px 0 var(--rues-encre); }
.tm-page .uk-card-primary   { background: var(--rues-orange); color: var(--rues-encre); box-shadow: 8px 8px 0 var(--rues-encre); }
.tm-page .uk-card-secondary { background: var(--rues-encre); color: var(--rues-creme); box-shadow: 8px 8px 0 var(--rues-orange); }
.tm-page .uk-card-primary :is(h1, h2, h3, h4, h5, h6, p, li, .uk-card-title, .el-title, .el-meta, .el-content:not(.uk-button), .uk-text-meta) { color: var(--rues-encre); }

/* Champs de formulaire */
.tm-page :where(.uk-input, .uk-select, .uk-textarea) {
    border: 2px solid var(--rues-encre);
    border-radius: 0;
    background: #FFFFFF;
    color: var(--rues-encre);
}

/* --------------------------------------------------------------------------
   En-tête et menu principal
   Le bouton téléphone apparaît dès qu'un élément du menu pointe vers tel:…
   (Apparence > Menus > Liens personnalisés, URL tel:+15143494749).
   -------------------------------------------------------------------------- */
.tm-header .uk-navbar-container,
.tm-header-mobile .uk-navbar-container {
    background: var(--rues-papier);
    border-bottom: 2px solid var(--rues-encre);
}
/* Le thème met 32px au-dessus et en dessous de la barre (écrans de 960px et plus) :
   on resserre. Le sélecteur est doublé exprès pour passer devant la règle du thème. */
.tm-header .uk-navbar-container.uk-navbar-container:not(.uk-navbar) { padding-top: 16px; padding-bottom: 16px; }
/* Logo lettrage « Mille et une rues » (deux lignes). */
.tm-header .uk-logo img {
    width: auto;
    height: 140px;
}
.tm-header-mobile .uk-logo img {
    width: auto;
    height: 90px;
}
/* Un peu d'air au-dessus et en dessous du logo dans la barre mobile. */
.tm-header-mobile .uk-navbar-container.uk-navbar-container:not(.uk-navbar) { padding-top: 8px; padding-bottom: 8px; }
/* Ancien logo JPG : un peu plus grand, et son fond blanc se fond dans le papier. */
.tm-header .uk-logo img[src$=".jpg"],
.tm-header-mobile .uk-logo img[src$=".jpg"] {
    height: 80px;
    mix-blend-mode: multiply;
}
.tm-header .uk-navbar-nav > li > a {
    min-height: 84px;
    padding: 0;
    text-decoration: none;
    color: var(--rues-encre);
}
.tm-header .uk-navbar-nav > li > a::before { display: none; }
.tm-header .uk-navbar-nav > li > a:hover,
.tm-header .uk-navbar-nav > li.uk-active > a {
    color: var(--rues-encre);
    text-decoration: underline;
    text-decoration-color: var(--rues-orange);
    text-decoration-thickness: 4px;
    text-underline-offset: 8px;
}
.tm-header .uk-navbar-nav > li:has(> a[href^="tel:"]) { align-self: center; }
.tm-header .uk-navbar-nav > li > a[href^="tel:"] {
    min-height: 48px;
    padding: 0 20px;
    background: var(--rues-encre);
    color: var(--rues-creme);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: 0.04em;
    text-decoration: none;
}

/* Le menu mobile prend le relais sous 1200px (YOOtheme : Layout > Mobile)
   et l'écart entre les liens du menu se règle dans Style (Navbar). */

/* --------------------------------------------------------------------------
   Base des sections
   -------------------------------------------------------------------------- */
.rues {
    position: relative;
}
.rues.rues-papier   { background: var(--rues-papier); color: var(--rues-encre); }
.rues.rues-asphalte { background: var(--rues-encre);  color: var(--rues-creme); }
.rues.rues-orange   { background: var(--rues-orange); color: var(--rues-encre); }

.rues h1, .rues h2, .rues h3, .rues .el-title { color: inherit; }

.rues p { margin: 0 0 16px; }
.rues p:last-child { margin-bottom: 0; }
.rues-papier p { color: #2B2C30; }
.rues a { color: inherit; }
.rues .el-meta { color: inherit; }

/* Mot surligné dans un titre : <span class="rues-hl">…</span> */
.rues-hl {
    display: inline-block;
    background: var(--rues-orange);
    color: var(--rues-encre);
    padding: 0 0.14em 0.05em;
    margin-left: -0.06em;
    rotate: -1.5deg;
}
.rues-hl--encre     { background: var(--rues-encre);     color: var(--rues-orange); }
.rues-hl--bourgogne { background: var(--rues-bourgogne); color: #FFFFFF; }

/* Mots au marqueur */
.tm-page .rues-marqueur {
    display: inline-block;
    font-family: var(--rues-marqueur);
    font-size: 28px;
    line-height: 1;
    rotate: -2deg;
    margin-bottom: 0;
}
.tm-page .rues-marqueur--bourgogne { color: var(--rues-bourgogne); }

/* Étiquettes */
.tm-page .rues-etiquette {
    display: inline-block;
    background: var(--rues-papier-clair);
    color: var(--rues-encre);
    padding: 8px 14px;
    font-family: var(--rues-marqueur);
    font-size: 26px;
    line-height: 1;
    rotate: -2deg;
}
.tm-page .rues-etiquette--orange {
    background: var(--rues-orange);
    padding: 6px 14px;
    font-family: var(--rues-titres);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    rotate: -1.5deg;
}

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */
.rues .uk-button:hover { transform: translate(-2px, -2px); }

.rues.rues-papier .uk-button-primary   { background: var(--rues-encre); color: var(--rues-creme); box-shadow: 6px 6px 0 var(--rues-orange); }
.rues.rues-papier .uk-button-default   { background: transparent; color: var(--rues-encre); border-color: var(--rues-encre); }
.rues.rues-asphalte .uk-button-primary { background: var(--rues-orange); color: var(--rues-encre); box-shadow: 6px 6px 0 var(--rues-creme); }
.rues.rues-asphalte .uk-button-default { background: transparent; color: var(--rues-creme); border-color: var(--rues-creme); }
.rues.rues-orange .uk-button-primary   { background: var(--rues-encre); color: var(--rues-creme); box-shadow: 6px 6px 0 var(--rues-bourgogne); }

/* --------------------------------------------------------------------------
   Photos collées (élément Panel avec la classe rues-polaroid)
   -------------------------------------------------------------------------- */
.tm-page .rues-polaroid {
    background: var(--rues-papier-clair);
    color: var(--rues-encre);
    padding: 12px 12px 14px;
    box-shadow: 8px 8px 0 var(--rues-encre);
    rotate: -2deg;
}
.tm-page .rues-polaroid .el-image,
.tm-page .rues-polaroid video {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: cover;
}
/* Tant qu'aucune photo n'est choisie, on affiche un gabarit hachuré. */
.tm-page .rues-polaroid:not(:has(img, video))::before {
    content: "Photo";
    display: flex;
    align-items: center;
    justify-content: center;
    height: 420px;
    background: repeating-linear-gradient(135deg, #D9D4C8 0 14px, #CEC8BB 14px 28px);
    color: #3A3B3F;
    font-family: var(--rues-titres);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.tm-page .rues-polaroid .el-content {
    margin-top: 10px;
    font-family: var(--rues-marqueur);
    font-size: 22px;
    line-height: 1.1;
}
.tm-page :is(.rues-asphalte, .uk-section-secondary) .rues-polaroid {
    box-shadow: 10px 10px 0 var(--rues-orange);
    rotate: 1.5deg;
}
.tm-page :is(.rues-asphalte, .uk-section-secondary) .rues-polaroid .el-image,
.tm-page :is(.rues-asphalte, .uk-section-secondary) .rues-polaroid video { height: auto; aspect-ratio: 16 / 10; }

/* Affiche bourgogne qui chevauche la photo du haut de page */
.tm-page .rues-affiche {
    position: relative;
    z-index: 1;
    width: 58%;
    margin: -56px 0 0 auto !important;
    padding: 22px 24px 24px;
    background: var(--rues-bourgogne);
    color: #FFFFFF;
    box-shadow: 8px 8px 0 var(--rues-encre);
    rotate: -1deg;
}
.tm-page .rues-affiche .el-meta {
    font-family: var(--rues-titres);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.tm-page .rues-affiche .el-title { margin-top: 6px; }
@media (max-width: 639px) { .tm-page .rues-affiche { width: 82%; margin-top: -14px !important; } }

/* --------------------------------------------------------------------------
   Bande inclinée des verbes
   -------------------------------------------------------------------------- */
.rues.rues-bande {
    z-index: 2;
    width: 106%;
    margin-left: -3%;
    margin-top: -18px;
    margin-bottom: -18px;
    padding: 16px 0 !important;
    background: var(--rues-orange);
    color: var(--rues-encre);
    rotate: -1.2deg;
    font-family: var(--rues-titres);
    font-weight: 800;
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
}
.rues.rues-bande .uk-margin { margin: 0; }

/* --------------------------------------------------------------------------
   Quatre missions (élément Grid, classe rues-missions)
   -------------------------------------------------------------------------- */
.tm-page .rues-missions .el-item {
    position: relative;
    height: 100%;
    box-sizing: border-box;
    padding: 30px 26px 32px;
    background: var(--rues-papier-clair);
    color: var(--rues-encre);
    box-shadow: 8px 8px 0 var(--rues-encre);
}
/* bout de ruban adhésif */
.tm-page .rues-missions .el-item::before {
    content: "";
    position: absolute;
    top: -12px;
    left: 36%;
    width: 90px;
    height: 24px;
    background: rgba(20, 21, 23, 0.2);
    rotate: -3deg;
}
.tm-page .rues-missions .el-meta {
    margin: 0;
    font-family: var(--rues-bombe);
    font-size: 68px;
    line-height: 1;
    color: var(--rues-bourgogne);
}
.tm-page .rues-missions .el-title   { margin-top: 18px; }
.tm-page .rues-missions .el-content { margin-top: 12px; font-size: 17px; }

.tm-page .rues-missions div:nth-child(4n+1) > .el-item { background: var(--rues-orange); rotate: -1.5deg; }
.tm-page .rues-missions div:nth-child(4n+1) > .el-item .el-meta { color: var(--rues-encre); }
.tm-page .rues-missions div:nth-child(4n+2) > .el-item { rotate: 1deg; }
.tm-page .rues-missions div:nth-child(4n+3) > .el-item { background: var(--rues-encre); color: var(--rues-creme); box-shadow: 8px 8px 0 var(--rues-orange); rotate: -0.8deg; }
.tm-page .rues-missions div:nth-child(4n+3) > .el-item .el-meta { color: var(--rues-orange); }
.tm-page .rues-missions div:nth-child(4n+3) > .el-item p { color: #D9D5CC; }
.tm-page .rues-missions div:nth-child(4n+4) > .el-item { rotate: 1.4deg; }

/* --------------------------------------------------------------------------
   Chiffres (élément Grid, classe rues-chiffres)
   -------------------------------------------------------------------------- */
.tm-page .rues-chiffres .el-title {
    font-family: var(--rues-bombe);
    font-weight: 400;
    font-size: clamp(64px, 8vw, 112px);
    text-transform: none;
    color: var(--rues-orange);
}
.tm-page .rues-chiffres .el-content {
    margin-top: 8px;
    font-family: var(--rues-titres);
    font-weight: 800;
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Plaques des municipalités (élément List, classe rues-plaques)
   <strong> = plaque mise en valeur ; <s> = ville non desservie (barrée)
   -------------------------------------------------------------------------- */
ul.rues-plaques, .rues-plaques ul {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tm-page .rues-plaques li {
    position: relative;
    margin: 0 !important;
    padding: 10px 18px;
    background: var(--rues-encre);
    color: var(--rues-creme);
    border-radius: 4px;
    font-family: var(--rues-titres);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.5;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.tm-page .rues-plaques li::before { content: none; }
.tm-page .rues-plaques li:nth-child(4n+1) { rotate: -1deg; }
.tm-page .rues-plaques li:nth-child(4n+3) { rotate: 1deg; }
.tm-page .rues-plaques li strong { font-weight: 800; color: inherit; }
.tm-page .rues-plaques li:has(strong) {
    padding: 7px 16px;
    background: var(--rues-orange);
    color: var(--rues-encre);
    border: 3px solid var(--rues-encre);
    rotate: none;
}
.tm-page .rues-plaques li:has(s) {
    padding: 8px 16px;
    background: transparent;
    color: #55565A;
    border: 2px dashed #6B6C70;
    rotate: none;
}
.tm-page .rues-plaques li:has(s) s { text-decoration: none; }
.tm-page .rues-plaques li:has(s)::after {
    content: "";
    position: absolute;
    left: -8px;
    right: -8px;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    background: var(--rues-bourgogne);
    rotate: -5deg;
}
.tm-page .rues-plaques li:has(s):last-child::after { rotate: 4deg; }

/* --------------------------------------------------------------------------
   Équipe (élément Grid, classe rues-equipe)
   -------------------------------------------------------------------------- */
.tm-page .rues-equipe .el-image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1.1;
    object-fit: cover;
    box-sizing: border-box;
    padding: 10px 10px 12px;
    background: var(--rues-papier-clair);
    box-shadow: 8px 8px 0 var(--rues-orange);
}
.tm-page .rues-equipe .el-item:not(:has(img))::before {
    content: "Photo";
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1.1;
    border: 10px solid var(--rues-papier-clair);
    border-bottom-width: 12px;
    margin-bottom: 26px;
    background: repeating-linear-gradient(135deg, #D9D4C8 0 14px, #CEC8BB 14px 28px);
    box-shadow: 8px 8px 0 var(--rues-orange);
    color: #3A3B3F;
    font-family: var(--rues-titres);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.tm-page .rues-equipe div:nth-child(odd)  > .el-item .el-image,
.tm-page .rues-equipe div:nth-child(odd)  > .el-item::before { rotate: -1.5deg; }
.tm-page .rues-equipe div:nth-child(even) > .el-item .el-image,
.tm-page .rues-equipe div:nth-child(even) > .el-item::before { rotate: 1.2deg; }
.tm-page .rues-equipe .el-title   { margin-top: 26px; }
.tm-page .rues-equipe .el-content { margin-top: 6px; font-size: 16px; line-height: 1.4; color: #B9B6AE; }

/* Ligne pointillée de chaussée sous une section : classe rues-ligne */
.rues.rues-ligne::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: repeating-linear-gradient(90deg, var(--rues-orange) 0 56px, transparent 56px 112px);
}

/* --------------------------------------------------------------------------
   Nouvelles (élément Grid, classe rues-nouvelles)
   -------------------------------------------------------------------------- */
.tm-page .rues-nouvelles .el-item {
    display: block;
    height: 100%;
    box-sizing: border-box;
    padding: 14px 14px 26px;
    background: var(--rues-papier-clair);
    color: var(--rues-encre);
    box-shadow: 8px 8px 0 var(--rues-encre);
    text-decoration: none;
}
.tm-page .rues-nouvelles div:nth-child(3n+1) > .el-item { rotate: -0.8deg; }
.tm-page .rues-nouvelles div:nth-child(3n+2) > .el-item { rotate: 0.6deg; }
.tm-page .rues-nouvelles div:nth-child(3n+3) > .el-item { rotate: -0.4deg; }
.tm-page .rues-nouvelles .el-image { display: block; width: 100%; height: 200px; object-fit: cover; }
.tm-page .rues-nouvelles .el-item:not(:has(img))::before {
    content: "Image de la nouvelle";
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    background: repeating-linear-gradient(135deg, #D9D4C8 0 14px, #CEC8BB 14px 28px);
    color: #3A3B3F;
    font-family: var(--rues-titres);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.tm-page .rues-nouvelles .el-meta {
    display: inline-block;
    margin: 18px 10px 0;
    padding: 3px 10px;
    background: var(--rues-orange);
    color: var(--rues-encre);
    font-family: var(--rues-titres);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.tm-page .rues-nouvelles .el-title   { margin: 10px 10px 0; color: var(--rues-encre); }
.tm-page .rues-nouvelles .el-content { margin: 10px 10px 0; font-size: 17px; color: var(--rues-gris); }
.tm-page .rues-nouvelles .el-content p { color: var(--rues-gris); }

/* --------------------------------------------------------------------------
   Nous joindre (élément Grid, classe rues-contacts)
   Le panneau cliquable est rendu ainsi : div.el-item > a.uk-panel
   -------------------------------------------------------------------------- */
.tm-page .rues-contacts .uk-grid > * { width: 100%; }
.tm-page .rues-contacts .uk-grid > .uk-grid-margin { margin-top: 20px; }
.tm-page .rues-contacts .el-item {
    display: flex;
    min-height: 72px;
    box-sizing: border-box;
    background: var(--rues-papier-clair);
    color: var(--rues-encre);
    box-shadow: 8px 8px 0 var(--rues-encre);
}
.tm-page .rues-contacts .el-item > a,
.tm-page .rues-contacts a.el-item {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 12px 28px;
    text-decoration: none;
}
.tm-page .rues-contacts .el-meta {
    margin: 0 !important;
    font-family: var(--rues-titres);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rues-gris);
}
.tm-page .rues-contacts .el-title {
    margin: 0 !important;
    font-weight: 700;
    text-transform: none;
    overflow-wrap: anywhere;
    color: var(--rues-encre);
}
.tm-page .rues-contacts div:first-child > .el-item {
    min-height: 96px;
    background: var(--rues-encre);
    box-shadow: 8px 8px 0 var(--rues-bourgogne);
}
.tm-page .rues-contacts div:first-child > .el-item .el-meta  { color: var(--rues-creme); }
.tm-page .rues-contacts div:first-child > .el-item .el-title { font-weight: 800; font-size: 44px; line-height: 1; color: var(--rues-orange); }

/* --------------------------------------------------------------------------
   Pied de page (layout du Footer Builder, classe rues-pied)
   -------------------------------------------------------------------------- */
.rues.rues-pied { background: var(--rues-encre); color: var(--rues-creme); font-size: 17px; }
.rues.rues-pied h3 { color: var(--rues-orange); }
.rues.rues-pied ul { margin: 0; padding: 0; list-style: none; }
.rues.rues-pied li { padding: 6px 0; }
.rues.rues-pied a { text-decoration: none; }
.rues.rues-pied a:hover { text-decoration: underline; }
.tm-page .rues-logo { display: flex; align-items: center; gap: 12px; }
.tm-page .rues-logo-1001 {
    padding: 4px 10px;
    background: var(--rues-orange);
    color: var(--rues-encre);
    font-family: var(--rues-titres);
    font-weight: 800;
    font-size: 38px;
    line-height: 1;
}
.tm-page .rues-logo-nom {
    font-family: var(--rues-titres);
    font-weight: 800;
    font-size: 26px;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.tm-page .rues-copyright {
    padding-top: 24px;
    border-top: 1px solid #2A2C30;
    font-size: 15px;
    color: #9A978F;
}

/* --------------------------------------------------------------------------
   Page d'un article (gabarit YOOtheme « Article »)
   -------------------------------------------------------------------------- */
.tm-page .rues-retour {
    font-family: var(--rues-titres);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.tm-page .rues-retour a { text-decoration: none; border-bottom: 3px solid var(--rues-orange); padding-bottom: 2px; }
.tm-page .rues-retour a:hover { border-bottom-color: var(--rues-bourgogne); }
.tm-page .rues-photo-article img,
.tm-page img.rues-photo-article {
    display: block;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 12px;
    background: var(--rues-papier-clair);
    box-shadow: 8px 8px 0 var(--rues-encre);
    rotate: -1deg;
}
.tm-page .rues-article { font-size: 19px; line-height: 1.65; }
.tm-page .rues-article h2 { margin: 44px 0 16px; }
.tm-page .rues-article h3 { margin: 32px 0 12px; }
.tm-page .rues-article a { color: var(--rues-bourgogne); text-decoration: underline; }
.tm-page .rues-article img { max-width: 100%; height: auto; }
.tm-page .rues-article ul,
.tm-page .rues-article ol { margin: 0 0 16px; padding-left: 1.2em; }
.tm-page .rues-article blockquote {
    margin: 28px 0;
    padding: 18px 22px;
    background: var(--rues-orange);
    color: var(--rues-encre);
    font-family: var(--rues-titres);
    font-weight: 700;
    font-size: 26px;
    line-height: 1.2;
    font-style: normal;
}

/* Nouvelle précédente / suivante, au bas d'un article (élément Panel, classe rues-nav-article) */
.tm-page .rues-nav-article {
    background: var(--rues-papier-clair);
    box-shadow: 8px 8px 0 var(--rues-encre);
    transition: transform 0.12s ease;
}
.tm-page .rues-nav-article:hover { transform: translate(-2px, -2px); }
.tm-page .rues-nav-article > a { padding: 18px 22px 20px; text-decoration: none; }
.tm-page .rues-nav-article .el-meta {
    margin: 0 !important;
    font-family: var(--rues-titres);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rues-bourgogne);
}
.tm-page .rues-nav-article .el-title {
    margin: 6px 0 0 !important;
    color: var(--rues-encre);
}
.tm-page .rues-nav-article { max-width: 640px; }
.tm-page .rues-nav-article--suivante { margin-left: auto; text-align: right; }

/* Gabarit affiché à gauche de l'article quand il n'a pas d'image mise en avant.
   Dès qu'une image existe (élément .rues-photo-article juste avant), il disparaît. */
.tm-page .rues-photo-gabarit {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    box-sizing: border-box;
    border: 12px solid var(--rues-papier-clair);
    background: repeating-linear-gradient(135deg, #D9D4C8 0 14px, #CEC8BB 14px 28px);
    box-shadow: 8px 8px 0 var(--rues-encre);
    rotate: -1deg;
    color: #3A3B3F;
    font-family: var(--rues-titres);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.tm-page .rues-photo-article ~ .rues-photo-gabarit { display: none; }

/* --------------------------------------------------------------------------
   Vidéo collée (élément Vidéo, classe rues-video)
   Proportions d'origine, commandes du navigateur et son. L'image d'affiche, l'icône
   de lecture et le chargement au clic sont les réglages natifs de l'élément Vidéo.
   -------------------------------------------------------------------------- */
.tm-page .rues-video {
    position: relative;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
    padding: 12px;
    background: var(--rues-papier-clair);
    box-shadow: 8px 8px 0 var(--rues-encre);
    rotate: -1.5deg;
}
.tm-page .rues-video .el-image,
.tm-page .rues-video a[uk-toggle] { display: block; }
/* L'affiche et la vidéo remplissent le cadre : même taille avant et après le clic,
   même si le fichier vidéo n'est pas encore chargé. La hauteur vient des proportions
   (réglages Width et Height de l'élément Vidéo). Pour une vidéo verticale, limiter la
   largeur du cadre dans l'élément : Advanced > CSS, .el-element { max-width: 384px; } */
.tm-page .rues-video video,
.tm-page .rues-video picture,
.tm-page .rues-video picture img {
    display: block;
    width: 100%;
    height: auto;
    background: #000000;
}
.tm-page .rues-video a[uk-toggle] { cursor: pointer; }
.tm-page .rues-video a[uk-toggle] .uk-position-center { transition: scale 0.12s ease; }
.tm-page .rues-video a[uk-toggle]:hover .uk-position-center { scale: 1.06; }
.tm-page :is(.rues-asphalte, .uk-section-secondary) .rues-video {
    box-shadow: 10px 10px 0 var(--rues-orange);
    rotate: 1.5deg;
}
/* L'affiche ne chevauche pas une vidéo : ses commandes sont en bas */
.tm-page .rues-video ~ .rues-affiche { margin-top: 24px !important; }

/* --------------------------------------------------------------------------
   Pastille ronde (élément Panel, classe rues-pastille)
   À placer juste AVANT une photo ou une vidéo : elle se pose sur son coin.
   -------------------------------------------------------------------------- */
.tm-page .rues-pastille {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 124px;
    height: 124px;
    box-sizing: border-box;
    margin: 0 0 -92px -20px !important;
    border: 4px solid #000000;
    border-radius: 50%;
    background: var(--rues-bourgogne);
    color: #FFFFFF;
    box-shadow: 5px 5px 0 var(--rues-encre);
    rotate: -12deg;
    text-align: center;
}
.tm-page .rues-pastille .el-meta {
    margin: 0 !important;
    font-family: var(--rues-titres);
    font-weight: 800;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rues-creme);
}
.tm-page .rues-pastille .el-title { margin: 2px 0 0 !important; font-size: 46px; line-height: 1; color: #FFFFFF; }
@media (max-width: 639px) { .tm-page .rues-pastille { margin-left: 0 !important; } }

/* --------------------------------------------------------------------------
   Conseil d'administration, en texte seulement (élément Grille, classe rues-ca)
   Générique « rôle — nom » : une ligne par personne.
   Champ Titre = nom, champ Contenu = rôle. Grille réglée à 1 colonne.
   -------------------------------------------------------------------------- */
.tm-page .rues-ca > .uk-grid { margin-top: 0; }
.tm-page .rues-ca > .uk-grid > * { margin-top: 0 !important; }
.tm-page .rues-ca .el-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 28px;
    row-gap: 2px;
    padding: 16px 0 14px;
    border-bottom: 2px dashed rgba(20, 21, 23, 0.25);
}
.tm-page .rues-ca > .uk-grid > :first-child .el-item { padding-top: 0; }
.tm-page .rues-ca .el-content {
    order: -1;
    flex: 0 0 180px;
    margin: 0 !important;
    font-family: var(--rues-titres);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rues-bourgogne);
}
.tm-page .rues-ca .el-title { margin: 0 !important; line-height: 1; }
.tm-page :is(.rues-asphalte, .uk-section-secondary) .rues-ca .el-item { border-bottom-color: rgba(244, 241, 234, 0.24); }
.tm-page :is(.rues-asphalte, .uk-section-secondary) .rues-ca .el-content { color: var(--rues-orange); }

/* --------------------------------------------------------------------------
   Lien surligné dans un titre :
   Question ?<br><a class="rues-hl" href="#joindre">Réponse.</a>
   -------------------------------------------------------------------------- */
.tm-page a.rues-hl {
    margin-top: 0.14em;
    color: var(--rues-encre);
    text-decoration: none;
    transition: background-color 0.15s ease, rotate 0.15s ease;
}
.tm-page a.rues-hl:hover,
.tm-page a.rues-hl:focus-visible { background: var(--rues-creme); color: var(--rues-encre); rotate: 0deg; }

/* --------------------------------------------------------------------------
   Liste avec icônes (élément Liste, classe rues-liste-icones)
   Chaque ligne : une icône orangée et son texte.
   -------------------------------------------------------------------------- */
.tm-page .rues-liste-icones .el-image { margin-top: 3px; color: var(--rues-orange); }
.tm-page .rues-liste-icones .el-content { overflow-wrap: anywhere; }
.tm-page .rues-liste-icones a { color: inherit; text-decoration: none; }
.tm-page .rues-liste-icones a:hover .el-content { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Offres d'emploi
   Liste : élément Grille, classe rues-emplois (Méta = type de poste).
   Message sans offre : élément Texte, classe rues-aucun-poste, placé juste
   après la grille ; il ne s'affiche que si la grille est vide.
   Fiche : élément Liste, classe rues-fiche ; le libellé de chaque ligne est
   en gras (<strong>) devant la valeur.
   -------------------------------------------------------------------------- */
.tm-page .rues-emplois .el-item {
    box-sizing: border-box;
    background: var(--rues-papier-clair);
    color: var(--rues-encre);
    box-shadow: 8px 8px 0 var(--rues-encre);
    transition: transform 0.12s ease;
}
.tm-page .rues-emplois .el-item:hover { transform: translate(-2px, -2px); }
.tm-page .rues-emplois .el-item > a,
.tm-page .rues-emplois .el-item > .uk-panel { display: block; padding: 26px 30px 30px; text-decoration: none; }
.tm-page .rues-emplois .el-meta {
    display: inline-block;
    margin: 0 !important;
    padding: 3px 10px;
    background: var(--rues-orange);
    color: var(--rues-encre);
    font-family: var(--rues-titres);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.tm-page .rues-emplois .el-title   { margin: 14px 0 0 !important; color: var(--rues-encre); }
.tm-page .rues-emplois .el-content { margin: 10px 0 0 !important; font-size: 17px; color: var(--rues-gris); }
.tm-page .rues-emplois .el-content p { color: var(--rues-gris); }

.tm-page .rues-aucun-poste { max-width: 720px; padding: 26px 30px; border: 2px dashed var(--rues-encre); font-size: 20px; }
.tm-page .rues-aucun-poste strong { font-family: var(--rues-titres); font-weight: 800; font-size: 30px; line-height: 1.1; text-transform: uppercase; }
.tm-page .rues-emplois ~ .rues-aucun-poste { display: none; }

.tm-page ul.rues-fiche {
    margin: 0;
    padding: 8px 26px;
    list-style: none;
    background: var(--rues-papier-clair);
    color: var(--rues-encre);
    box-shadow: 8px 8px 0 var(--rues-encre);
}
.tm-page .rues-fiche > li { margin: 0 !important; padding: 16px 0; border-bottom: 2px dashed rgba(20, 21, 23, 0.25); }
.tm-page .rues-fiche > li:last-child { border-bottom: 0; }
.tm-page .rues-fiche strong {
    display: block;
    margin-bottom: 2px;
    font-family: var(--rues-titres);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rues-bourgogne);
}

/* --------------------------------------------------------------------------
   Zones tactiles : sur téléphone et tablette, un lien doit faire au moins
   44px de haut pour être facile à toucher.
   -------------------------------------------------------------------------- */
.tm-page .uk-pagination > * > * {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    box-sizing: border-box;
}
@media (max-width: 959px) {
    .rues.rues-pied .uk-list > li:has(a) { padding: 0; }
    .rues.rues-pied .uk-list a { display: block; padding: 9px 0; }
    .rues.rues-pied .uk-list .el-content a { padding: 11px 0; }
}

/* --------------------------------------------------------------------------
   Menu mobile (panneau plein écran sur fond asphalte)
   Fond, largeur, police et taille se règlent dans YOOtheme : Style > Offcanvas
   et Style > Nav (Primary). Ici, seulement les décors : mot au marqueur,
   pointillés, élément actif surligné, téléphone en bouton, ligne de chaussée.
   -------------------------------------------------------------------------- */
#tm-dialog-mobile .uk-offcanvas-bar { padding-top: 64px; }
#tm-dialog-mobile .uk-offcanvas-bar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: repeating-linear-gradient(90deg, var(--rues-orange) 0 56px, transparent 56px 112px);
}
#tm-dialog-mobile .uk-offcanvas-close { top: 16px; right: 16px; padding: 12px; color: var(--rues-creme); }
#tm-dialog-mobile .uk-offcanvas-close svg { width: 22px; height: 22px; }
#tm-dialog-mobile .uk-nav-primary::before {
    content: "on va vers vous";
    display: inline-block;
    margin-bottom: 18px;
    font-family: var(--rues-marqueur);
    font-size: 26px;
    line-height: 1;
    color: var(--rues-orange);
    rotate: -2deg;
}
#tm-dialog-mobile .uk-nav-primary > li { border-bottom: 2px dashed rgba(244, 241, 234, 0.22); }
#tm-dialog-mobile .uk-nav-primary > li > a { padding-top: 12px; padding-bottom: 12px; }
#tm-dialog-mobile .uk-nav-primary > li.uk-active > a {
    display: inline-block;
    margin: 8px 0 8px -6px;
    padding: 4px 12px 6px;
    background: var(--rues-orange);
    color: var(--rues-encre);
    rotate: -1.5deg;
}
#tm-dialog-mobile .uk-nav-primary > li:has(> a[href^="tel:"]) { margin-top: 28px; border-bottom: 0; }
#tm-dialog-mobile .uk-nav-primary > li > a[href^="tel:"] {
    display: block;
    padding: 16px 20px;
    background: var(--rues-orange);
    color: var(--rues-encre);
    text-align: center;
    box-shadow: 6px 6px 0 var(--rues-creme);
}

/* --------------------------------------------------------------------------
   Barre de défilement aux couleurs du site : curseur orangé sur fond asphalte.
   La première règle sert aux navigateurs récents, le bloc suivant aux autres.
   -------------------------------------------------------------------------- */
html { scrollbar-color: var(--rues-orange) var(--rues-encre); }
@supports not (scrollbar-color: auto) {
    ::-webkit-scrollbar { width: 14px; height: 14px; }
    ::-webkit-scrollbar-track { background: var(--rues-encre); }
    ::-webkit-scrollbar-thumb { background: var(--rues-orange); border: 3px solid var(--rues-encre); }
    ::-webkit-scrollbar-thumb:hover { background: var(--rues-bourgogne); }
}

/* --------------------------------------------------------------------------
   Animations du builder YOOtheme (réglage « Animation » de chaque section)
   Les inclinaisons des décors utilisent la propriété « rotate » plutôt que
   « transform: rotate() » : elles restent en place pendant qu'une animation
   d'apparition fait glisser l'élément.
   Les personnes qui ont demandé moins d'animations à leur appareil voient le
   contenu apparaître sans mouvement.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    [class*="uk-animation-"] { animation: none !important; }
    [uk-parallax] { transform: none !important; }
}

/* === Section 10 ans — ajout 2026-10-12 (retirer ce bloc pour revenir en arrière) === */
.tm-page .rues-10ans {
    background:
        url(/wp-content/uploads/2026/10/dix-ans-motif-losanges.svg) 0 0 / 48px 48px repeat,
        var(--rues-papier);
}

/* Phrase d'introduction (style Lead) agrandie. */
.tm-page .rues-10ans .uk-text-lead { font-size: clamp(1.4rem, 1.05rem + 1vw, 1.9rem); line-height: 1.35; }

/* Grand chiffre. */
.tm-page .rues-10ans-total {
    color: var(--rues-encre);
    line-height: 0.9;
    text-shadow: 6px 6px 0 var(--rues-orange);
    white-space: nowrap;
}
.tm-page .rues-10ans-sous-total strong { font-size: 1.25rem; }

/* Jambes et espadrilles. */
.tm-page .rues-10ans-jambes img { display: block; width: min(100%, 360px); height: auto; }

/* Ligne du temps : une borne orange par année. */
.tm-page .rues-ligne-temps { position: relative; padding-left: 36px; }
.tm-page .rues-ligne-temps > li { position: relative; margin-top: 0; padding: 7px 0; }
.tm-page .rues-ligne-temps > li::before {
    content: "";
    position: absolute;
    left: -36px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border-radius: 50%;
    background: var(--rues-orange);
    border: 2px solid var(--rues-encre);
}
.tm-page .rues-ligne-temps .el-content { display: flex; align-items: baseline; gap: 14px; }
.tm-page .rues-ligne-temps strong {
    font-family: var(--rues-titres);
    font-size: 1.5rem;
    line-height: 1;
    min-width: 3.2ch;
    color: var(--rues-encre);
}
.tm-page .rues-ligne-temps span { color: #2B2C30; }
.tm-page .rues-ligne-temps > li:last-child strong {
    background: var(--rues-orange);
    padding: 2px 6px;
    margin-left: -6px;
}

@media (max-width: 959px) {
    .tm-page .rues-10ans-jambes img { width: min(70%, 260px); margin-left: auto; margin-right: auto; }
}
@media (max-width: 639px) {
    .tm-page .rues-10ans-total { text-shadow: 4px 4px 0 var(--rues-orange); }
    .tm-page .rues-ligne-temps strong { font-size: 1.25rem; }
}


/* === Fin section 10 ans === */