/* ==========================================================================
   RIDÉAL — FINITIONS DES PAGES CATÉGORIE
   Ajouté le 07/08/2026.

   Elementor pose la structure et reste modifiable. Cette feuille apporte les
   traitements fins repris du modèle d'article : filet d'accent à gauche des
   encadrés, listes à filets horizontaux, numérotation en DIN, accordéon sobre.

   Les couleurs, elles, sont posées dans Elementor et non ici : un widget sans
   couleur explicite retombe sur la teinte « Principal » du kit, un #6EC1E4 qui
   n'appartient pas à la charte.
   ========================================================================== */

.tax-product_cat {
    --rdlc-titre: #0E1236;
    --rdlc-corps: #6B6F8A;
    --rdlc-accent: #1C00FF;
    --rdlc-lime: #CEFF00;
    --rdlc-blanc: #FFFFFF;
    --rdlc-clair: #F5F5F7;
    --rdlc-filet: #E5E7EB;
    --rdlc-din: 'DIN Condensed light', 'DIN Condensed', 'Arial Narrow', sans-serif;
    --rdlc-sans: 'Akzidenz-Grotesk Next', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   ESPACEMENT
   Elementor pose une marge basse par défaut sous chaque widget, qui s'ajoute
   à l'espacement du conteneur flex. D'où des blancs irréguliers, plus larges
   entre deux widgets qu'entre deux cartes. On neutralise la marge et on laisse
   le seul flex-gap commander.
   ========================================================================== */

.rdlc-bloc .elementor-widget { margin-block-end: 0 !important; }
.rdlc-bloc .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* ==========================================================================
   PHOTO DE CARTE
   Les visuels du catalogue sont tous en 1200 × 900. On garde ce cadrage et on
   colle la photo aux bords de la carte.
   ========================================================================== */

.rdlc-carte--photo { overflow: hidden; }

.rdlc-photo { line-height: 0; }

.rdlc-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0;
}

/* ==========================================================================
   NUMÉRO EN FILIGRANE
   La couleur vient d'Elementor. Ici, seulement la taille et la fonte.
   ========================================================================== */

.rdlc-num {
    font-family: var(--rdlc-din) !important;
    font-size: 68px !important;
    line-height: 0.85 !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em;
}

/* ==========================================================================
   CHIFFRE CLÉ
   ========================================================================== */

.rdlc-cle {
    font-family: var(--rdlc-sans) !important;
    font-size: 30px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   ENCADRÉ D'ACCENT — repris de .rdl-reponse du modèle d'article
   ========================================================================== */

.rdlc-encadre {
    border-left-width: 2px !important;
    border-left-color: var(--rdlc-accent) !important;
    background: var(--rdlc-clair) !important;
}

.rdlc-encadre--lime { border-left-color: var(--rdlc-lime) !important; }

.rdlc-sombre .rdlc-encadre {
    background: rgba(255, 255, 255, 0.05) !important;
    border-left-color: var(--rdlc-lime) !important;
}

/* ==========================================================================
   LISTE À FILETS — reprise de .rdl-puce
   ========================================================================== */

.rdlc-puces .elementor-widget-text-editor {
    border-top: 1px solid var(--rdlc-filet);
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.rdlc-puces .elementor-widget-text-editor:last-child {
    border-bottom: 1px solid var(--rdlc-filet);
}

.rdlc-puces strong:first-child { color: var(--rdlc-titre); }

.rdlc-sombre .rdlc-puces .elementor-widget-text-editor { border-color: rgba(255, 255, 255, 0.18); }
.rdlc-sombre .rdlc-puces strong:first-child { color: var(--rdlc-lime); }

/* ==========================================================================
   CARTE DE CHOIX — la photo se rapproche au survol, le bouton se remplit
   ========================================================================== */

.rdlc-carte { transition: border-color 0.25s ease; }
.rdlc-carte--photo img { transition: transform 0.4s ease; }
.rdlc-carte--photo:hover img { transform: scale(1.04); }
.rdlc-carte--photo:hover { border-color: var(--rdlc-accent) !important; }

/* ==========================================================================
   FAQ — les valeurs exactes du modèle d'article
   Là-bas c'est un <details> natif ; ici l'accordéon d'Elementor, pour que la
   FAQ reste modifiable dans le back. Même filets, même échelle, même chevron
   qui pivote à l'ouverture.
   ========================================================================== */

.rdl-faq .elementor-accordion { border: 0 !important; }

.rdl-faq .elementor-accordion-item {
    border: 0 !important;
    border-top: 1px solid var(--rdlc-filet) !important;
}

.rdl-faq .elementor-accordion-item:last-of-type {
    border-bottom: 1px solid var(--rdlc-filet) !important;
}

.rdl-faq .elementor-tab-title {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 1.125rem 0 !important;
    background: transparent !important;
    border: 0 !important;
}

/* Elementor place l'icone avant le libelle : on la renvoie a droite, comme le
   chevron du modele d'article. */
.rdl-faq .elementor-tab-title .elementor-accordion-title { order: 1; flex: 1; }
.rdl-faq .elementor-tab-title .elementor-accordion-icon { order: 2; margin: 0 !important; }

.rdl-faq .elementor-accordion-icon svg,
.rdl-faq .elementor-accordion-icon i {
    width: 0.75rem;
    height: 0.75rem;
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.rdl-faq .elementor-tab-title.elementor-active .elementor-accordion-icon svg,
.rdl-faq .elementor-tab-title.elementor-active .elementor-accordion-icon i {
    transform: rotate(180deg);
}

/* Elementor masque l'une des deux icones : on les garde toutes deux visibles,
   puisqu'elles portent le meme chevron et que seule la rotation change. */
.rdl-faq .elementor-accordion-icon-closed,
.rdl-faq .elementor-accordion-icon-opened { display: inline-flex !important; }
.rdl-faq .elementor-tab-title.elementor-active .elementor-accordion-icon-closed { display: none !important; }
.rdl-faq .elementor-tab-title:not(.elementor-active) .elementor-accordion-icon-opened { display: none !important; }

.rdl-faq .elementor-tab-content {
    border: 0 !important;
    padding: 0 0 1.25rem !important;
    background: transparent !important;
}

.rdl-faq .elementor-tab-content p { margin: 0; }

/* ==========================================================================
   TYPOGRAPHIE DE PARAGRAPHE
   Règle de Tim : aucun paragraphe au-dessus de 18 px.
   ========================================================================== */

.tax-product_cat .elementor-widget-text-editor,
.tax-product_cat .elementor-widget-text-editor p,
.tax-product_cat .elementor-widget-icon-list .elementor-icon-list-text {
    font-size: 18px !important;
    line-height: 1.6 !important;
}

.tax-product_cat .rdlc-num,
.tax-product_cat .rdlc-cle {
    line-height: inherit !important;
}

@media (max-width: 767px) {
    .tax-product_cat .elementor-widget-text-editor,
    .tax-product_cat .elementor-widget-text-editor p { font-size: 17px !important; }
    .rdlc-num { font-size: 48px !important; }
    .rdlc-cle { font-size: 24px !important; }
}

/* ==========================================================================
   BOUTONS DES SECTIONS AJOUTÉES
   Les réglages d'Elementor se faisaient battre par la couleur « Accentué » du
   kit, un vert #61CE70 hors charte, avec du texte bleu dessus : illisible.
   On épingle ici, en couvrant aussi le survol.

   Contrastes vérifiés :
     bleu #1C00FF sur blanc      8,1:1   AA large et AAA petit texte
     blanc sur bleu #1C00FF      8,1:1
     blanc sur bleu foncé        16,4:1
     bleu foncé sur lime #CEFF00 13,9:1
   ========================================================================== */

.rdlc-bloc .elementor-button,
.rdlc-bloc .elementor-button:visited {
    background-color: transparent !important;
    color: var(--rdlc-accent) !important;
    border: 1px solid var(--rdlc-accent) !important;
    border-radius: 0 !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.rdlc-bloc .elementor-button:hover,
.rdlc-bloc .elementor-button:focus-visible {
    background-color: var(--rdlc-accent) !important;
    color: var(--rdlc-blanc) !important;
    border-color: var(--rdlc-accent) !important;
}

/* Sur fond sombre, le bleu vif ne se lit pas : on passe au blanc, et au lime
   au survol avec du texte bleu foncé dessus. */
.rdlc-sombre .elementor-button,
.rdlc-sombre .elementor-button:visited {
    color: var(--rdlc-blanc) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
}

.rdlc-sombre .elementor-button:hover,
.rdlc-sombre .elementor-button:focus-visible {
    background-color: var(--rdlc-lime) !important;
    color: var(--rdlc-titre) !important;
    border-color: var(--rdlc-lime) !important;
}

.rdlc-bloc .elementor-button:focus-visible {
    outline: 2px solid var(--rdlc-lime);
    outline-offset: 2px;
}

/* ==========================================================================
   RESPIRATION AVANT « VOTRE SITUATION, ET LE BON CHOIX »
   Le titre intermédiaire collait à la grille du dessus.
   ========================================================================== */

.rdlc-bloc .elementor-widget-heading + .elementor-element > .e-con-inner,
.rdlc-bloc h3.elementor-heading-title { scroll-margin-top: 8rem; }

.rdlc-bloc .elementor-widget-heading:not(:first-child) { margin-block-start: 1.5rem !important; }

/* ==========================================================================
   MENU PRODUITS — uniquement le menu foncé du bandeau, widget 204b805.
   La version précédente visait tous les menus du site et étirait le sous-menu
   sur toute la largeur du bandeau : elle recouvrait l'en-tête. Corrigée le
   07/08/2026.

   Contrastes : blanc sur #0E1236 = 16,4:1 · #0E1236 sur #CEFF00 = 13,9:1.
   ========================================================================== */

.elementor-element-204b805 .elementor-item,
.elementor-element-204b805 .elementor-sub-item {
    color: #FFFFFF !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.elementor-element-204b805 .elementor-item:hover,
.elementor-element-204b805 .elementor-item:focus-visible,
.elementor-element-204b805 .elementor-item.elementor-item-active,
.elementor-element-204b805 .elementor-item.highlighted,
.elementor-element-204b805 .elementor-sub-item:hover,
.elementor-element-204b805 .elementor-sub-item:focus-visible,
.elementor-element-204b805 .elementor-sub-item.elementor-item-active {
    background-color: #CEFF00 !important;
    color: #0E1236 !important;
}

/* Le sous-menu fait exactement la largeur de son entrée parente, et son texte
   est centré comme celui du bandeau.
   Le !important sur position est nécessaire : Elementor pose position:static
   sur les <li>, ce qui empêchait le 100% de se caler sur le parent. */
.elementor-element-204b805 .elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children {
    position: relative !important;
}

.elementor-element-204b805 .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu {
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    left: 0 !important;
    right: auto !important;
    background: #0E1236;
    box-shadow: 0 12px 32px rgba(14, 18, 54, 0.28);
}

.elementor-element-204b805 .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu .elementor-sub-item {
    padding: 0.75rem 1rem !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: normal;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.elementor-element-204b805 .elementor-nav-menu--dropdown .elementor-sub-item {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* En replié mobile, le sous-menu reprend le flux normal. */
.elementor-element-204b805 .elementor-nav-menu--dropdown ul.sub-menu {
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

.elementor-element-204b805 .elementor-nav-menu--dropdown .elementor-item,
.elementor-element-204b805 .elementor-nav-menu--dropdown .elementor-sub-item {
    white-space: normal;
}

/* ==========================================================================
   BLOC « UNE QUESTION ? » — seule l'image descend
   Les essais précédents alignaient toute la rangée, ce qui décalait l'encadré
   sombre par rapport au bloc bleu. Ici, un simple margin-top: auto pousse la
   photo vers le bas de SA colonne, sans toucher à ses voisines.
   ========================================================================== */

.tax-product_cat .elementor-widget-image:has(img[src*="Alexis-Biajoui"]) {
    margin-top: auto !important;
    margin-bottom: 0 !important;
    line-height: 0;
}

.tax-product_cat .elementor-widget-image img[src*="Alexis-Biajoui"] {
    display: block;
    margin-bottom: 0 !important;
    vertical-align: bottom;
}

/* ==========================================================================
   NUMÉRO EN FILIGRANE
   La couleur vient d'Elementor. Ici, seulement la taille et la fonte.
   ========================================================================== */

.rdlc-num {
    font-family: var(--rdlc-din) !important;
    font-size: 68px !important;
    line-height: 0.85 !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em;
}

/* ==========================================================================
   CHIFFRE CLÉ
   ========================================================================== */

.rdlc-cle {
    font-family: var(--rdlc-sans) !important;
    font-size: 30px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   ENCADRÉ D'ACCENT — repris de .rdl-reponse du modèle d'article
   ========================================================================== */

.rdlc-encadre {
    border-left-width: 2px !important;
    border-left-color: var(--rdlc-accent) !important;
    background: var(--rdlc-clair) !important;
}

.rdlc-encadre--lime { border-left-color: var(--rdlc-lime) !important; }

.rdlc-sombre .rdlc-encadre {
    background: rgba(255, 255, 255, 0.05) !important;
    border-left-color: var(--rdlc-lime) !important;
}

/* ==========================================================================
   LISTE À FILETS — reprise de .rdl-puce
   ========================================================================== */

.rdlc-puces .elementor-widget-text-editor {
    border-top: 1px solid var(--rdlc-filet);
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.rdlc-puces .elementor-widget-text-editor:last-child {
    border-bottom: 1px solid var(--rdlc-filet);
}

.rdlc-puces strong:first-child { color: var(--rdlc-titre); }

.rdlc-sombre .rdlc-puces .elementor-widget-text-editor { border-color: rgba(255, 255, 255, 0.18); }
.rdlc-sombre .rdlc-puces strong:first-child { color: var(--rdlc-lime); }

/* ==========================================================================
   CARTE DE CHOIX — la photo se rapproche au survol, le bouton se remplit
   ========================================================================== */

.rdlc-carte { transition: border-color 0.25s ease; }
.rdlc-carte--photo img { transition: transform 0.4s ease; }
.rdlc-carte--photo:hover img { transform: scale(1.04); }
.rdlc-carte--photo:hover { border-color: var(--rdlc-accent) !important; }

/* ==========================================================================
   FAQ — les valeurs exactes du modèle d'article
   Là-bas c'est un <details> natif ; ici l'accordéon d'Elementor, pour que la
   FAQ reste modifiable dans le back. Même filets, même échelle, même chevron
   qui pivote à l'ouverture.
   ========================================================================== */

.rdl-faq .elementor-accordion { border: 0 !important; }

.rdl-faq .elementor-accordion-item {
    border: 0 !important;
    border-top: 1px solid var(--rdlc-filet) !important;
}

.rdl-faq .elementor-accordion-item:last-of-type {
    border-bottom: 1px solid var(--rdlc-filet) !important;
}

.rdl-faq .elementor-tab-title {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 1.125rem 0 !important;
    background: transparent !important;
    border: 0 !important;
}

/* Elementor place l'icone avant le libelle : on la renvoie a droite, comme le
   chevron du modele d'article. */
.rdl-faq .elementor-tab-title .elementor-accordion-title { order: 1; flex: 1; }
.rdl-faq .elementor-tab-title .elementor-accordion-icon { order: 2; margin: 0 !important; }

.rdl-faq .elementor-accordion-icon svg,
.rdl-faq .elementor-accordion-icon i {
    width: 0.75rem;
    height: 0.75rem;
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.rdl-faq .elementor-tab-title.elementor-active .elementor-accordion-icon svg,
.rdl-faq .elementor-tab-title.elementor-active .elementor-accordion-icon i {
    transform: rotate(180deg);
}

/* Elementor masque l'une des deux icones : on les garde toutes deux visibles,
   puisqu'elles portent le meme chevron et que seule la rotation change. */
.rdl-faq .elementor-accordion-icon-closed,
.rdl-faq .elementor-accordion-icon-opened { display: inline-flex !important; }
.rdl-faq .elementor-tab-title.elementor-active .elementor-accordion-icon-closed { display: none !important; }
.rdl-faq .elementor-tab-title:not(.elementor-active) .elementor-accordion-icon-opened { display: none !important; }

.rdl-faq .elementor-tab-content {
    border: 0 !important;
    padding: 0 0 1.25rem !important;
    background: transparent !important;
}

.rdl-faq .elementor-tab-content p { margin: 0; }

/* ==========================================================================
   TYPOGRAPHIE DE PARAGRAPHE
   Règle de Tim : aucun paragraphe au-dessus de 18 px.
   ========================================================================== */

.tax-product_cat .elementor-widget-text-editor,
.tax-product_cat .elementor-widget-text-editor p,
.tax-product_cat .elementor-widget-icon-list .elementor-icon-list-text {
    font-size: 18px !important;
    line-height: 1.6 !important;
}

.tax-product_cat .rdlc-num,
.tax-product_cat .rdlc-cle {
    line-height: inherit !important;
}

@media (max-width: 767px) {
    .tax-product_cat .elementor-widget-text-editor,
    .tax-product_cat .elementor-widget-text-editor p { font-size: 17px !important; }
    .rdlc-num { font-size: 48px !important; }
    .rdlc-cle { font-size: 24px !important; }
}

/* ==========================================================================
   BOUTONS DES SECTIONS AJOUTÉES
   Les réglages d'Elementor se faisaient battre par la couleur « Accentué » du
   kit, un vert #61CE70 hors charte, avec du texte bleu dessus : illisible.
   On épingle ici, en couvrant aussi le survol.

   Contrastes vérifiés :
     bleu #1C00FF sur blanc      8,1:1   AA large et AAA petit texte
     blanc sur bleu #1C00FF      8,1:1
     blanc sur bleu foncé        16,4:1
     bleu foncé sur lime #CEFF00 13,9:1
   ========================================================================== */

.rdlc-bloc .elementor-button,
.rdlc-bloc .elementor-button:visited {
    background-color: transparent !important;
    color: var(--rdlc-accent) !important;
    border: 1px solid var(--rdlc-accent) !important;
    border-radius: 0 !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.rdlc-bloc .elementor-button:hover,
.rdlc-bloc .elementor-button:focus-visible {
    background-color: var(--rdlc-accent) !important;
    color: var(--rdlc-blanc) !important;
    border-color: var(--rdlc-accent) !important;
}

/* Sur fond sombre, le bleu vif ne se lit pas : on passe au blanc, et au lime
   au survol avec du texte bleu foncé dessus. */
.rdlc-sombre .elementor-button,
.rdlc-sombre .elementor-button:visited {
    color: var(--rdlc-blanc) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
}

.rdlc-sombre .elementor-button:hover,
.rdlc-sombre .elementor-button:focus-visible {
    background-color: var(--rdlc-lime) !important;
    color: var(--rdlc-titre) !important;
    border-color: var(--rdlc-lime) !important;
}

.rdlc-bloc .elementor-button:focus-visible {
    outline: 2px solid var(--rdlc-lime);
    outline-offset: 2px;
}

/* ==========================================================================
   RESPIRATION AVANT « VOTRE SITUATION, ET LE BON CHOIX »
   Le titre intermédiaire collait à la grille du dessus.
   ========================================================================== */

.rdlc-bloc .elementor-widget-heading + .elementor-element > .e-con-inner,
.rdlc-bloc h3.elementor-heading-title { scroll-margin-top: 8rem; }

.rdlc-bloc .elementor-widget-heading:not(:first-child) { margin-block-start: 1.5rem !important; }

/* ==========================================================================
   MENU PRODUITS — uniquement le menu foncé du bandeau, widget 204b805.
   La version précédente visait tous les menus du site et étirait le sous-menu
   sur toute la largeur du bandeau : elle recouvrait l'en-tête. Corrigée le
   07/08/2026.

   Contrastes : blanc sur #0E1236 = 16,4:1 · #0E1236 sur #CEFF00 = 13,9:1.
   ========================================================================== */

.elementor-element-204b805 .elementor-item,
.elementor-element-204b805 .elementor-sub-item {
    color: #FFFFFF !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.elementor-element-204b805 .elementor-item:hover,
.elementor-element-204b805 .elementor-item:focus-visible,
.elementor-element-204b805 .elementor-item.elementor-item-active,
.elementor-element-204b805 .elementor-item.highlighted,
.elementor-element-204b805 .elementor-sub-item:hover,
.elementor-element-204b805 .elementor-sub-item:focus-visible,
.elementor-element-204b805 .elementor-sub-item.elementor-item-active {
    background-color: #CEFF00 !important;
    color: #0E1236 !important;
}

/* Le sous-menu fait exactement la largeur de son entrée parente, et son texte
   est centré comme celui du bandeau.
   Le !important sur position est nécessaire : Elementor pose position:static
   sur les <li>, ce qui empêchait le 100% de se caler sur le parent. */
.elementor-element-204b805 .elementor-nav-menu--main .elementor-nav-menu > li.menu-item-has-children {
    position: relative !important;
}

.elementor-element-204b805 .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu {
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    left: 0 !important;
    right: auto !important;
    background: #0E1236;
    box-shadow: 0 12px 32px rgba(14, 18, 54, 0.28);
}

.elementor-element-204b805 .elementor-nav-menu--main .elementor-nav-menu ul.sub-menu .elementor-sub-item {
    padding: 0.75rem 1rem !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: normal;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.elementor-element-204b805 .elementor-nav-menu--dropdown .elementor-sub-item {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* En replié mobile, le sous-menu reprend le flux normal. */
.elementor-element-204b805 .elementor-nav-menu--dropdown ul.sub-menu {
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

.elementor-element-204b805 .elementor-nav-menu--dropdown .elementor-item,
.elementor-element-204b805 .elementor-nav-menu--dropdown .elementor-sub-item {
    white-space: normal;
}

/* ==========================================================================
   BLOC « UNE QUESTION ? »
   Ma première version alignait toute la rangée sur sa base, ce qui décalait
   l'encadré sombre par rapport au bloc bleu voisin. On laisse donc la mise en
   page d'origine intacte et on se contente de supprimer l'espace sous l'image,
   qui est la seule cause du décrochement.
   ========================================================================== */

.tax-product_cat .elementor-widget-image img[src*="Alexis-Biajoui"] {
    display: block;
    margin-bottom: 0 !important;
    vertical-align: bottom;
}

.tax-product_cat .elementor-widget-image:has(img[src*="Alexis-Biajoui"]) {
    line-height: 0;
    margin-block-end: 0 !important;
}

/* ==========================================================================
   NUMÉRO EN FILIGRANE — lisibilité sur fond blanc
   Le #E6E6EE prévu pour le dégradé clair disparaît sur une section blanche.
   On passe au bleu gris de la charte, qui reste discret tout en se lisant.
   ========================================================================== */

.rdlc-bloc .rdlc-num { color: #B9BDCC !important; }
.rdlc-sombre .rdlc-num { color: #454A67 !important; }

/* ==========================================================================
   SOUS-MENU EN CAPITALES, comme les entrées du bandeau
   ========================================================================== */

.elementor-element-204b805 .elementor-sub-item {
    text-transform: uppercase !important;
    letter-spacing: 0.04em;
}

/* ==========================================================================
   RESPONSIVE DU HÉRO DE CATÉGORIE
   Ajouté le 10/08/2026.

   Les 14 modèles de catégorie déclarent leur H1 à 52 px sans aucune valeur
   tablette ni mobile. Sur un téléphone, un titre de deux lignes en 52 px
   occupe la moitié de l'écran avant même le premier paragraphe.

   Les identifiants de widget changent d'un modèle à l'autre, on passe donc
   par la classe de body, qui vaut pour les quatorze. Le !important est
   nécessaire pour battre la règle par widget écrite par Elementor.
   ========================================================================== */

@media (max-width: 1024px) {
    .tax-product_cat h1.elementor-heading-title {
        font-size: 36px !important;
        line-height: 1.15 !important;
    }
}

@media (max-width: 767px) {
    .tax-product_cat h1.elementor-heading-title {
        font-size: 27px !important;
        line-height: 1.2 !important;
        /* le titre respire au-dessus, il colle au fil d'ariane sinon */
        margin-top: 0.35rem !important;
    }
}

/* ==========================================================================
   ARCHIVES D'ARTICLES
   Ajouté le 10/08/2026.

   Les dix-sept pages /category/ ne passent par aucun modèle Elementor : les
   modèles d'archive existants sont tous liés à des catégories produit. Elles
   tombent donc sur le gabarit du thème, sans mise en page.

   Conséquence mesurée : l'en-tête est en position fixe et occupe 227 px en
   grand écran, 214 px en tablette, 107 px en téléphone, alors que le contenu
   démarre à 0. Le H1 et le premier article passaient entièrement dessous,
   donc invisibles. Les pages construites sous Elementor n'avaient pas le
   problème, leur bandeau d'ouverture absorbant la hauteur de l'en-tête.
   ========================================================================== */

body.category,
body.tag,
body.search,
body.blog {
    --rdla-titre: #0E1236;
    --rdla-corps: #6B6F8A;
    --rdla-accent: #1C00FF;
    --rdla-lime: #CEFF00;
    --rdla-clair: #F5F5F7;
    --rdla-filet: #E5E7EB;
    --rdla-din: 'DIN Condensed light', 'DIN Condensed', 'Arial Narrow', sans-serif;
}

/* --- Dégager la hauteur de l'en-tête fixe --------------------------------- */

body.category main.site-main,
body.tag main.site-main,
body.search main.site-main,
body.blog main.site-main {
    padding-top: 267px;
    padding-bottom: 88px;
}

body.category .page-content,
body.tag .page-content,
body.search .page-content,
body.blog .page-content {
    max-width: 880px;
    margin-inline: auto;
    padding-inline: 24px;
}

/* --- Titre de la page ----------------------------------------------------- */

body.category .page-header,
body.tag .page-header,
body.search .page-header,
body.blog .page-header {
    max-width: 880px;
    margin: 0 auto 40px;
    padding-inline: 24px;
}

/* Une règle globale, `h1.entry-title { display: none !important; }`, masque le
   titre sur toutes les archives. Elle sert aux pages construites sous Elementor,
   qui portent leur propre titre. Les archives d'articles, elles, n'en ont aucun
   autre : leurs dix-sept pages de silo s'affichaient donc sans H1 visible. On le
   rétablit ici seulement, la règle d'origine reste en place. */

body.category .page-header h1.entry-title,
body.tag .page-header h1.entry-title,
body.search .page-header h1.entry-title,
body.blog .page-header h1.entry-title {
    display: block !important;
}

body.category .page-header h1,
body.tag .page-header h1,
body.search .page-header h1,
body.blog .page-header h1 {
    font-size: 40px;
    line-height: 1.1;
    color: var(--rdla-titre);
    margin: 0;
}

body.category .page-header h1::before,
body.tag .page-header h1::before,
body.blog .page-header h1::before {
    content: 'NOS ARTICLES';
    display: block;
    font-family: var(--rdla-din);
    font-size: 15px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rdla-accent);
    margin-bottom: 10px;
}

/* --- La liste ------------------------------------------------------------
   Filets horizontaux plutôt que cartes, et un fond alterné pour que la liste
   ne soit pas une suite de blocs identiques. Pas de liseré d'accent.
   ------------------------------------------------------------------------- */

body.category article.post:not(.elementor-post),
body.tag article.post:not(.elementor-post),
body.search article.post:not(.elementor-post),
body.blog article.post:not(.elementor-post) {
    padding: 26px 20px;
    margin: 0;
    border-top: 1px solid var(--rdla-filet);
}

body.category article.post:not(.elementor-post):first-of-type,
body.tag article.post:not(.elementor-post):first-of-type,
body.search article.post:not(.elementor-post):first-of-type,
body.blog article.post:not(.elementor-post):first-of-type {
    border-top: 0;
}

body.category article.post:not(.elementor-post):nth-of-type(even),
body.tag article.post:not(.elementor-post):nth-of-type(even),
body.search article.post:not(.elementor-post):nth-of-type(even),
body.blog article.post:not(.elementor-post):nth-of-type(even) {
    background: var(--rdla-clair);
}

body.category article.post:not(.elementor-post) .entry-title,
body.category article.post:not(.elementor-post) h2,
body.tag article.post:not(.elementor-post) h2,
body.search article.post:not(.elementor-post) h2,
body.blog article.post:not(.elementor-post) h2 {
    font-size: 24px;
    line-height: 1.3;
    margin: 0 0 8px;
    color: var(--rdla-titre);
}

body.category article.post:not(.elementor-post) h2 a,
body.tag article.post:not(.elementor-post) h2 a,
body.search article.post:not(.elementor-post) h2 a,
body.blog article.post:not(.elementor-post) h2 a {
    color: var(--rdla-titre);
    text-decoration: none;
}

body.category article.post:not(.elementor-post) h2 a:hover,
body.tag article.post:not(.elementor-post) h2 a:hover,
body.search article.post:not(.elementor-post) h2 a:hover,
body.blog article.post:not(.elementor-post) h2 a:hover {
    color: var(--rdla-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
}

body.category article.post:not(.elementor-post) p,
body.tag article.post:not(.elementor-post) p,
body.search article.post:not(.elementor-post) p,
body.blog article.post:not(.elementor-post) p {
    font-size: 17px;
    line-height: 1.6;
    color: var(--rdla-corps);
    margin: 0;
}

/* --- Pagination ----------------------------------------------------------- */

body.category .pagination,
body.tag .pagination,
body.search .pagination,
body.blog .pagination {
    max-width: 880px;
    margin: 40px auto 0;
    padding-inline: 24px;
}

body.category .page-numbers,
body.tag .page-numbers,
body.search .page-numbers,
body.blog .page-numbers {
    display: inline-block;
    padding: 8px 14px;
    margin-right: 6px;
    font-size: 16px;
    color: var(--rdla-titre);
    text-decoration: none;
    border: 1px solid var(--rdla-filet);
}

body.category .page-numbers.current,
body.tag .page-numbers.current,
body.search .page-numbers.current,
body.blog .page-numbers.current {
    background: var(--rdla-titre);
    border-color: var(--rdla-titre);
    color: #FFFFFF;
}

/* --- Tablette ------------------------------------------------------------- */

@media (max-width: 1024px) {

    body.category main.site-main,
    body.tag main.site-main,
    body.search main.site-main,
    body.blog main.site-main {
        padding-top: 254px;
        padding-bottom: 64px;
    }

    body.category .page-header h1,
    body.tag .page-header h1,
    body.search .page-header h1,
    body.blog .page-header h1 {
        font-size: 34px;
    }
}

/* --- Téléphone ------------------------------------------------------------ */

@media (max-width: 767px) {

    body.category main.site-main,
    body.tag main.site-main,
    body.search main.site-main,
    body.blog main.site-main {
        padding-top: 143px;
        padding-bottom: 56px;
    }

    body.category .page-header,
    body.tag .page-header,
    body.search .page-header,
    body.blog .page-header {
        margin-bottom: 28px;
        padding-inline: 18px;
    }

    body.category .page-header h1,
    body.tag .page-header h1,
    body.search .page-header h1,
    body.blog .page-header h1 {
        font-size: 27px;
    }

    body.category .page-content,
    body.tag .page-content,
    body.search .page-content,
    body.blog .page-content {
        padding-inline: 0;
    }

    body.category article.post:not(.elementor-post),
    body.tag article.post:not(.elementor-post),
    body.search article.post:not(.elementor-post),
    body.blog article.post:not(.elementor-post) {
        padding: 22px 18px;
    }

    body.category article.post:not(.elementor-post) h2,
    body.category article.post:not(.elementor-post) .entry-title,
    body.tag article.post:not(.elementor-post) h2,
    body.tag article.post:not(.elementor-post) .entry-title,
    body.search article.post:not(.elementor-post) h2,
    body.search article.post:not(.elementor-post) .entry-title,
    body.blog article.post:not(.elementor-post) h2,
    body.blog article.post:not(.elementor-post) .entry-title {
        font-size: 20px;
    }

    body.category article.post:not(.elementor-post) p,
    body.tag article.post:not(.elementor-post) p,
    body.search article.post:not(.elementor-post) p,
    body.blog article.post:not(.elementor-post) p {
        font-size: 16px;
    }
}


/* ==========================================================================
   ARCHIVE D'ARTICLES SOUS ELEMENTOR
   Modèle « Archive — Catégories d'articles » (#4947), lié à include/archive/category.

   Le modèle porte la mise en page : une colonne, vignette à gauche, extrait,
   lien de lecture, pagination numérotée. Ces réglages sont modifiables dans
   Elementor. Les contrôles de style du skin, eux, ne sont exposés que dans
   l'éditeur : tant qu'ils ne sont pas posés à la main, un widget sans couleur
   explicite retombe sur la teinte « Principal » du kit, un bleu qui n'appartient
   pas à la charte. D'où cet habillage, volontairement sans `!important` sauf
   pour défaire le cadrage en ratio, afin qu'un réglage fait dans Elementor
   l'emporte toujours.
   ========================================================================== */

.elementor-location-archive {
    --rdle-titre: #0E1236;
    --rdle-corps: #6B6F8A;
    --rdle-accent: #1C00FF;
    --rdle-filet: #E5E7EB;
}

/* --- La vignette prend une colonne fixe, pas toute la largeur -------------- */

.elementor-location-archive .elementor-posts--thumbnail-left .elementor-post__thumbnail__link {
    flex: 0 0 248px;
    width: 248px;
    margin-right: 26px;
    align-self: flex-start;
}

.elementor-location-archive .elementor-posts--thumbnail-left .elementor-post__thumbnail {
    padding-bottom: 0 !important;
    height: 168px;
    overflow: hidden;
}

.elementor-location-archive .elementor-posts--thumbnail-left .elementor-post__thumbnail img {
    position: static !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none !important;
    left: auto !important;
    top: auto !important;
}

/* --- Le texte -------------------------------------------------------------- */

.elementor-location-archive .elementor-post__title {
    font-size: 22px;
    line-height: 1.3;
    margin: 0 0 10px;
}

.elementor-location-archive .elementor-post__title a {
    color: var(--rdle-titre);
    text-decoration: none;
}

.elementor-location-archive .elementor-post__title a:hover {
    color: var(--rdle-accent);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.elementor-location-archive .elementor-post__excerpt p {
    font-size: 17px;
    line-height: 1.6;
    color: var(--rdle-corps);
    margin: 0 0 12px;
}

.elementor-location-archive .elementor-post__read-more {
    font-size: 16px;
    font-weight: 600;
    color: var(--rdle-accent);
    text-decoration: none;
}

.elementor-location-archive .elementor-post__read-more:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* --- Un filet entre deux articles, plutôt qu'une carte --------------------- */

.elementor-location-archive .elementor-post {
    padding-bottom: 30px;
    border-bottom: 1px solid var(--rdle-filet);
}

.elementor-location-archive .elementor-posts-container > .elementor-post:last-child {
    border-bottom: 0;
}

/* --- Pagination ------------------------------------------------------------ */

.elementor-location-archive .elementor-pagination {
    margin-top: 36px;
}

.elementor-location-archive .page-numbers {
    display: inline-block;
    padding: 8px 14px;
    margin-right: 6px;
    font-size: 16px;
    color: var(--rdle-titre);
    text-decoration: none;
    border: 1px solid var(--rdle-filet);
}

.elementor-location-archive .page-numbers.current {
    background: var(--rdle-titre);
    border-color: var(--rdle-titre);
    color: #FFFFFF;
}

/* --- Téléphone : la vignette repasse au-dessus ----------------------------- */

@media (max-width: 767px) {

    .elementor-location-archive .elementor-posts--thumbnail-left .elementor-post {
        flex-direction: column;
    }

    .elementor-location-archive .elementor-posts--thumbnail-left .elementor-post__thumbnail__link {
        flex: 0 0 auto;
        width: 100%;
        margin-right: 0;
        margin-bottom: 14px;
    }

    .elementor-location-archive .elementor-posts--thumbnail-left .elementor-post__thumbnail {
        height: 190px;
    }

    .elementor-location-archive .elementor-post__title {
        font-size: 20px;
    }

    .elementor-location-archive .elementor-post__excerpt p {
        font-size: 16px;
    }
}

/* ==========================================================================
   LISIBILITÉ MOBILE DU CORPS DE TEXTE, TOUT LE SITE
   Ajouté le 11/08/2026.

   Relevé à 375 px avant correction : les fiches produit étaient à 17 px, les
   archives à 16 px, mais les articles à 20 px et les pages statiques mélangeaient
   16, 18 et 20,8 px. Un même site ne peut pas avoir quatre corps de texte.

   La règle maison plafonne un paragraphe à 18 px, et à 17 px sur téléphone.
   On la fait respecter ici pour les blocs de texte courant d'Elementor, sans
   toucher aux titres, aux surtitres ni aux chiffres mis en avant, qui ont le
   droit d'être grands.
   ========================================================================== */

@media (max-width: 767px) {

    .elementor-widget-text-editor p,
    .elementor-widget-text-editor li,
    .elementor-widget-theme-post-content p,
    .elementor-widget-theme-post-content li {
        font-size: 17px !important;
        line-height: 1.6 !important;
    }

    /* Un paragraphe déjà plus petit que le plafond n'est pas remonté : on
       ne fait que rabattre ce qui dépasse. */
    .elementor-widget-text-editor p:has(> small),
    .elementor-widget-text-editor .rdl-mention {
        font-size: 15px !important;
    }
}

/* ==========================================================================
   PRIX DES CARTES PRODUIT
   Le centrage est réglé à la source, dans `rideal-archive-produits.css`, sur
   la règle `ul.products li.product .price` qui porte déjà `display: flex`
   avec un `!important`. Les règles empilées ici ne pouvaient pas la battre
   par spécificité, elles ont été retirées le 11/08/2026.
   ========================================================================== */