/*
 * Thème enfant « Kiosque » — styles chargés par src/Etiquettes.php::head().
 * Palette : design system Le Kiosque (HANDOFF §6).
 */

/* --- Étiquettes d'article : rubrique + mention « Publireportage » (2026-10-12) --- */

.tm-etiquettes {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* Mention « Publireportage » : pastille au contour gris, distincte de la pastille turquoise de rubrique.
   Réduite d'environ 25 % le 2026-10-12 (11 → 8,5 px, padding 3×11 → 2×8) : secondaire par rapport à la rubrique. */
.tm-etiquette-publi {
    display: inline-block;
    border: 1px solid #64748B;
    border-radius: 500px;
    padding: 2px 8px;
    color: #64748B;
    background: #FFFFFF;
    font-size: 8.5px;
    line-height: 1.6;
    white-space: nowrap;
    vertical-align: middle;
    /* Typographie du style h6 du thème, posée explicitement : sinon la pastille hérite du contexte
       (majuscules sur une carte, minuscules sur une ligne de date) et ne paraît pas de la même taille. */
    font-family: Inter, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
}

/* Sur les cartes, la pastille turquoise est portée par .el-meta (custom_less « etiquette de rubrique »).
   Quand il y a deux étiquettes, le conteneur s'efface et chaque étiquette porte sa propre pastille ;
   l'étiquette prend toute la largeur de la carte : rubrique à gauche, mention à droite. */
.tm-page .el-meta.uk-h6:has(.tm-etiquettes) {
    display: block;
    background: none;
    padding: 0;
}

.tm-page .el-meta .tm-etiquettes {
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.tm-page .el-meta .tm-etiquette-publi {
    margin-left: auto;
}

.tm-page .el-meta.uk-h6 .tm-etiquette-rubrique {
    display: inline-block;
    background: #E4F8FA;
    color: #029AAA;
    border-radius: 500px;
    padding: 4px 12px;
}

/* Fond sombre (bande « Vidéo / Podcasts ») */
.uk-light .tm-etiquette-publi {
    border-color: rgba(255, 255, 255, .55);
    color: #E3E8EF;
    background: transparent;
}

.uk-light .el-meta.uk-h6 .tm-etiquette-rubrique {
    background: rgba(3, 188, 207, .18);
    color: #79CFD9;
}

/* (réservé) ancienne mention en tête du chapô — remplacée par metaPubli */
.tm-mention-chapo {
    margin: 0 0 6px;
}

/* --- Titres des cartes (grilles en style h4 : pages de rubrique, blocs par rubrique de l'accueil) — 2026-10-13 ---
   Légèrement réduits (18 → 16,5 px), 3 lignes au plus avec « … », et une hauteur minimale de 3 lignes :
   dates et chapôs restent alignés d'une carte à l'autre. Les cartes h5 (« À suivre », 5 colonnes) ne sont pas
   limitées : trop étroites, la limite couperait la plupart des titres. */
.el-item .el-title.uk-h4 {
    font-size: 16.5px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    min-height: calc(3 * 1.35em);
}

/* --- Résultats de recherche (templates « Recherche » et « Live Search », 2026-10-27) ---
   Liste et non cartes : rien à aligner d'une colonne à l'autre, donc ni hauteur minimale ni coupe à 3 lignes. */
.kq-recherche-liste .el-item .el-title.uk-h4 {
    font-size: 18px;
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: none;
    min-height: 0;
}

/* --- Champ e-mail des formulaires newsletter YOOtheme sur fond turquoise ou marine (pied de page) — 2026-10-14 ---
   En contexte inversé, UIkit rend le champ quasi transparent (fond blanc à 10 %, texte d'aide #C9DCE9) : illisible
   sur le turquoise. Champ blanc plein, texte marine, texte d'aide gris ardoise (contraste AA), même pilule que le bouton.
   Sélecteurs renforcés : kiosque.css est chargé AVANT theme.css, à spécificité égale la règle inversée de UIkit gagne. */
.uk-light .js-form-newsletter.uk-form .uk-input.el-input,
.uk-section-primary .js-form-newsletter.uk-form .uk-input.el-input,
.uk-section-secondary .js-form-newsletter.uk-form .uk-input.el-input {
    background: #FFFFFF;
    color: #1E3A54;
    border: 1px solid #FFFFFF;
    border-radius: 500px;
    padding-left: 20px;
    padding-right: 20px;
}

.uk-light .js-form-newsletter.uk-form .uk-input.el-input::placeholder,
.uk-section-primary .js-form-newsletter.uk-form .uk-input.el-input::placeholder,
.uk-section-secondary .js-form-newsletter.uk-form .uk-input.el-input::placeholder {
    color: #64748B;
    opacity: 1;
}

.uk-light .js-form-newsletter.uk-form .uk-input.el-input:focus,
.uk-section-primary .js-form-newsletter.uk-form .uk-input.el-input:focus,
.uk-section-secondary .js-form-newsletter.uk-form .uk-input.el-input:focus {
    background: #FFFFFF;
    color: #1E3A54;
    border-color: #023859;
    outline: 2px solid #023859;
    outline-offset: 1px;
}

/* --- Formulaire d'abonnement Membership Pro (/je-mabonne) — 2026-10-14 ---------------------------------------
   Deux colonnes à partir de 960 px : à gauche le récapitulatif de l'offre (message « subscription_form_msg »,
   posé par _chantier/scripts/abonnement_formulaire.php), collant au défilement ; à droite le formulaire dans une
   carte de 560 px, libellés au-dessus des champs. Une colonne sur mobile, récapitulatif en premier.
   Tout est préfixé par #osm-signup-page : aucune autre page de Membership Pro n'est touchée. */
#osm-signup-page {
    max-width: 1040px;
    margin: 0 auto;
}

@media (min-width: 960px) {
    #osm-signup-page {
        display: grid;
        grid-template-columns: minmax(280px, 400px) minmax(0, 560px);
        gap: 48px;
        justify-content: center;
        align-items: start;
    }

    #osm-signup-page > .osm-message {
        position: sticky;
        top: 120px;
    }
}

/* Récapitulatif */
#osm-signup-page > .osm-message {
    margin: 0 0 32px;
    padding: 0;
    border: 0;
    background: none;
}

#osm-signup-page .k-abo-recap {
    background: #023859;
    color: #C9DCE9;
    padding: 32px;
    font-size: 14px;
    line-height: 1.55;
}

#osm-signup-page .k-abo-recap p { margin: 0 0 12px; }

#osm-signup-page .k-abo-recap a { color: #FFFFFF; text-decoration: underline; }

#osm-signup-page .k-abo-recap__surtitre {
    font-family: Inter, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #4DD0DE;
}

#osm-signup-page .k-abo-recap__prix {
    font-family: Poppins, sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 1.1;
}

#osm-signup-page .k-abo-recap__prix strong {
    font-size: 56px;
    font-weight: 700;
    letter-spacing: -.02em;
}

#osm-signup-page .k-abo-recap__sous { color: #FFFFFF; font-weight: 600; }

#osm-signup-page .k-abo-recap .uk-list { margin: 20px 0; }

#osm-signup-page .k-abo-recap .uk-list > li { color: #FFFFFF; }

#osm-signup-page .k-abo-recap .uk-list-check > li::before {
    /* la coche UIkit hérite de la couleur du texte : turquoise clair pour ressortir sur le marine */
    color: #4DD0DE;
}

#osm-signup-page .k-abo-recap__secu,
#osm-signup-page .k-abo-recap__compte {
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .15);
}

#osm-signup-page .k-abo-recap__rgpd { font-size: 12px; color: #7FA8C2; margin-bottom: 0; }

#osm-signup-page .k-abo-recap__rgpd a { color: #C9DCE9; }

/* Carte du formulaire */
#osm-signup-page #os_form {
    display: block;
    margin: 0;
    padding: 32px;
    background: #FFFFFF;
    border: 1px solid #E3E8EF;
}

#osm-signup-page #os_form .form-group.row {
    display: block;
    margin: 0 0 18px;
}

#osm-signup-page #os_form .form-group.row > [class*="col-md-"] {
    width: 100%;
    max-width: 100%;
    flex: none;
    padding: 0;
}

#osm-signup-page #os_form .form-control-label,
#osm-signup-page #os_form .form-control-label label {
    display: block;
    margin: 0 0 6px;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #1E3A54;
    text-align: left;
}

#osm-signup-page #os_form .star,
#osm-signup-page #os_form .required { color: #029AAA; }

#osm-signup-page #os_form input.form-control:not([type="checkbox"]) {
    width: 100%;
    height: 46px;
    padding: 0 18px;
    border: 1px solid #CBD5E1;
    border-radius: 500px;
    background: #FFFFFF;
    color: #1E3A54;
    font-size: 15px;
    box-shadow: none;
}

#osm-signup-page #os_form input.form-control:focus {
    border-color: #03BCCF;
    outline: 2px solid rgba(3, 188, 207, .25);
    outline-offset: 0;
}

/* Mot de passe : champ + bouton « œil » dans la même pilule */
#osm-signup-page #os_form .password-group .input-group { display: flex; flex-wrap: nowrap; }

#osm-signup-page #os_form .password-group input.form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#osm-signup-page #os_form .input-password-toggle {
    flex: 0 0 52px;
    height: 46px;
    border: 1px solid #CBD5E1;
    border-left: 0;
    border-radius: 0 500px 500px 0;
    background: #F6F9FC;
    color: #1E3A54;
}

/* Paiement : le montant se lit comme du texte, pas comme un champ */
#osm-signup-page #os_form .osm-heading {
    margin: 28px 0 16px;
    padding-top: 24px;
    border-top: 1px solid #E3E8EF;
    font-family: Poppins, sans-serif;
    font-size: 18px;
    color: #1E3A54;
}

#osm-signup-page #os_form #osm-amount-container,
#osm-signup-page #os_form #payment_method_container {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
}

#osm-signup-page #os_form #osm-amount-container > [class*="col-md-"],
#osm-signup-page #os_form #payment_method_container > [class*="col-md-"] { width: auto; }

#osm-signup-page #os_form #osm-amount-container .osm-addon-container { display: inline-flex; justify-content: flex-end; }

#osm-signup-page #os_form #amount {
    width: auto;
    max-width: 5em;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    text-align: right;
    font-weight: 700;
    font-size: 16px;
}

#osm-signup-page #os_form #osm-amount-container .input-group-text {
    padding: 0 0 0 4px;
    border: 0;
    background: none;
    font-weight: 700;
    font-size: 16px;
    color: #1E3A54;
}

#osm-signup-page #os_form #payment_method_container .eb-form-control { font-weight: 600; color: #1E3A54; }

/* Case CGV : le libellé de gauche répète le texte de la case, on le masque */
#osm-signup-page #os_form .osm-terms-and-conditions-container { margin-top: 20px; }

#osm-signup-page #os_form .osm-terms-and-conditions-container > .form-control-label { display: none; }

#osm-signup-page #os_form .osm-terms-and-conditions-container label.checkbox {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    color: #1E3A54;
}

#osm-signup-page #os_form .osm-terms-and-conditions-container input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: #029AAA;
}

/* Bouton d'envoi : pleine largeur, turquoise, dans le style des boutons du site */
#osm-signup-page #os_form .form-actions { margin: 24px 0 0; padding: 0; background: none; border: 0; }

#osm-signup-page #os_form #btn-submit {
    width: 100%;
    height: 54px;
    border: 0;
    border-radius: 500px;
    background: #03BCCF;
    color: #FFFFFF;
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

#osm-signup-page #os_form #btn-submit:hover { background: #029AAA; }

@media (max-width: 639px) {
    #osm-signup-page .k-abo-recap,
    #osm-signup-page #os_form { padding: 24px 20px; }

    #osm-signup-page .k-abo-recap__prix strong { font-size: 44px; }
}

/* Retouches du 2026-10-14 : alignement des champs sur la carte (la classe .row de Membership Pro ajoute une
   gouttière aux enfants du formulaire), astérisque du mot de passe sur la même ligne, coches de la liste
   (uk-list-check n'existe pas dans UIkit : coche dessinée ici). */
#osm-signup-page #os_form > * { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; }

#osm-signup-page #os_form .form-control-label label { display: inline; }

#osm-signup-page #os_form .form-control-label .required { margin-left: 4px; }

#osm-signup-page .k-abo-recap .uk-list-check > li {
    position: relative;
    padding-left: 28px;
}

#osm-signup-page .k-abo-recap .uk-list-check > li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .3em;
    width: 12px;
    height: 7px;
    border-left: 2px solid #4DD0DE;
    border-bottom: 2px solid #4DD0DE;
    transform: rotate(-45deg);
}

/* Formule récurrente (2026-10-14) : « Modalités de paiement — 3,00 € tous les mois » suffit ; le champ
   « Tarif régulier » de Membership Pro le répète, on le masque (il reste dans le formulaire envoyé). */
#osm-signup-page #os_form #osm-regular-amount-container { display: none; }

#osm-signup-page #os_form .form-group.row.osm-payment-terms {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
}

#osm-signup-page #os_form .form-group.row.osm-payment-terms > [class*="col-md-"] { width: auto; }

#osm-signup-page #os_form .osm-payment-terms #payment-terms { font-weight: 700; font-size: 16px; color: #1E3A54; text-align: right; }

/* --- Pastille « Publireportage » seule (sans date ni rubrique à côté) — 2026-10-14 ---------------------------
   Blocs par rubrique de l'accueil (plus de date depuis le 2026-10-14) et « Autres Actualités » : la mention est
   seule dans .tm-etiquettes ; le margin-left:auto prévu pour la placer à droite d'une date ou d'une rubrique la
   collait au bord droit de la carte. Seule, elle se place au début de la ligne, au-dessus du titre. */
.tm-page .el-meta .tm-etiquettes > .tm-etiquette-publi:only-child {
    margin-left: 0;
}

/* --- Vidéos réservées aux abonné(e)s (2026-10-15) — grilles « kq-grille-videos », emplacement du lecteur,
   écran « réservée aux abonné(e)s » (overlay « kq-video-verrou »). Voir src/Abonnes.php et _chantier/scripts/videos_abonnes.php. */

/* Bouton lecture sur les vignettes (accueil, page Vidéos, « Autres vidéos ») */
.kq-grille-videos .el-item .uk-inline-clip { position: relative; }

.kq-grille-videos .el-item .uk-inline-clip::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23023859' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") 55% 50% / 30px no-repeat;
    box-shadow: 0 4px 16px rgba(2, 56, 89, .35);
    transition: transform .2s;
    pointer-events: none;
}

.kq-grille-videos .el-item:hover .uk-inline-clip::after { transform: scale(1.08); }

/* Pastille « Vidéo · abonné(e)s » avec un cadenas */
.kq-grille-videos .el-meta::before {
    content: "";
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 6px;
    vertical-align: -1px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Emplacement provisoire du lecteur (abonné(e)s), en attendant l'élément Adilo */
.kq-video-emplacement {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    background: #023859;
    color: #C9DCE9;
    text-align: center;
}

.kq-video-emplacement p { margin: 12px 0 0; font-weight: 600; }

/* Écran « réservée aux abonné(e)s » : vignette assombrie, cadenas, message */
.kq-video-verrou .uk-overlay-default {
    background: rgba(2, 56, 89, .78);
}

.kq-video-verrou .uk-overlay .el-title::before {
    content: "";
    display: block;
    width: 44px;
    height: 44px;
    margin: 0 auto 14px;
    background: #4DD0DE;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1zm2 0h6V7a3 3 0 0 0-6 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.kq-video-verrou .uk-overlay .el-title { color: #FFFFFF; font-size: clamp(20px, 2.4vw, 30px); line-height: 1.25; }

.kq-video-verrou .uk-overlay .el-content { color: #E3E8EF; font-size: 16px; }

/* Élément Builder « Vidéo Adilo » (2026-10-25, builder/pixim_adilo) : le cadre porte le format (aspect-ratio en
   style), l'iframe ou la vignette le remplit. Bouton lecture au même dessin que sur les grilles de vignettes. */
.kq-adilo__cadre {
    position: relative;
    overflow: hidden;
    background: #023859;
}

.kq-adilo__lecteur,
.kq-adilo__lancer,
.kq-adilo__vignette {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.kq-adilo__vignette { object-fit: cover; }

.kq-adilo__bouton {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 84px;
    height: 84px;
    margin: -42px 0 0 -42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23023859' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") 55% 50% / 40px no-repeat;
    box-shadow: 0 4px 16px rgba(2, 56, 89, .35);
    transition: transform .2s;
}

.kq-adilo__lancer:hover .kq-adilo__bouton,
.kq-adilo__lancer:focus-visible .kq-adilo__bouton { transform: scale(1.08); }

.kq-adilo__lancer:focus-visible { outline: 3px solid #03BCCF; outline-offset: -3px; }

@media (max-width: 639px) {
    .kq-adilo__bouton { width: 64px; height: 64px; margin: -32px 0 0 -32px; background-size: 30px; }
}

/* ── Connexion (2026-10-20) : on se connecte avec son e-mail (plugin « Authentification - Pixim E-mail ») :
      le lien « Identifiant perdu ? » de /connexion n'a plus d'objet. ── */
.com-users-login__remind { display: none; }

/* ── Espace abonné (2026-10-20, module mod_piximespace) : panneau latéral clair, carte d'abonnement ── */
.kq-espace .uk-offcanvas-bar.kq-espace__barre {
    width: 360px; max-width: 100vw; padding: 32px 28px; box-sizing: border-box;
    background: #FFFFFF; color: #1E3A54; font-family: Inter, sans-serif;
}
.kq-espace__barre .uk-offcanvas-close { color: #64748B; top: 18px; right: 18px; }
.kq-espace__titre { font-family: Poppins, sans-serif; font-size: 22px; font-weight: 600; color: #023859; margin: 0 0 20px; }
.kq-espace__barre .uk-form-label { display: block; color: #1E3A54; font-weight: 600; font-size: 14px; margin: 14px 0 6px; }
.kq-espace__barre .uk-input { background: #FFFFFF; color: #1E3A54; border: 1px solid #CBD5E1; border-radius: 10px; height: 46px; }
.kq-espace__barre .uk-input:focus { border-color: #03BCCF; outline: 2px solid #E4F8FA; }
.kq-espace__barre .uk-checkbox { border-color: #CBD5E1; }
.kq-espace__souvenir { display: flex; align-items: center; gap: 8px; margin: 14px 0 18px; font-size: 14px; color: #1E3A54; }
.kq-espace__barre .uk-button { border-radius: 500px; }
.kq-espace__barre .uk-button-default { color: #023859; border-color: #023859; background: transparent; }
.kq-espace__barre .uk-button-default:hover { background: #023859; color: #FFFFFF; }
.kq-espace__oubli { margin: 12px 0 0; font-size: 14px; text-align: center; }
.kq-espace__barre a:not(.uk-button) { color: #029AAA; }
.kq-espace__offre { margin-top: 28px; padding-top: 22px; border-top: 1px solid #E3E8EF; text-align: center; }
.kq-espace__offre-titre { margin: 0; font-weight: 600; color: #023859; }
.kq-espace__offre-prix { margin: 4px 0 14px; color: #64748B; font-size: 14px; }

.kq-carte { padding: 16px 18px; border: 1px solid #C9DCE9; border-radius: 14px; background: #F6F9FC; margin-bottom: 18px; }
.kq-carte p { margin: 0; }
.kq-carte__formule { font-weight: 600; color: #023859; }
.kq-carte__statut { display: flex; align-items: center; gap: 8px; margin-top: 6px !important; font-weight: 600; color: #1E3A54; }
.kq-carte__detail { margin-top: 4px !important; font-size: 14px; color: #64748B; }
.kq-pastille { width: 10px; height: 10px; border-radius: 50%; background: #16A34A; flex: none; }
.kq-carte--arret .kq-pastille { background: #F59E0B; }
.kq-carte--actif, .kq-carte--arret { background: #E4F8FA; border-color: #4DD0DE; }
.kq-carte__bouton { margin-top: 14px; }

.kq-espace__liens { margin: 0 0 18px; }
.kq-espace__liens > li > a { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid #E3E8EF; color: #1E3A54 !important; font-weight: 500; }
.kq-espace__liens > li > a:hover { color: #029AAA !important; }
.kq-espace__sortie .uk-button-link { color: #64748B; text-transform: none; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }

/* Page « Mon espace abonné » : la carte en tête, au-dessus des onglets Membership Pro */
.kq-resume { max-width: 560px; margin: 0 auto; }
.kq-resume__bonjour { font-family: Poppins, sans-serif; font-size: 22px; font-weight: 600; color: #023859; margin: 0 0 12px; }
/* Libellés du panneau : lisibles, sans capitales espacées du thème */
.kq-espace__barre .uk-form-label { text-transform: none; letter-spacing: 0; font-size: 14px; }
/* Page « Mon espace abonné » : la carte alignée sur les onglets, sans grand vide au-dessus */
.kq-resume { max-width: 560px; margin: 0; }
#tm-top:has(.kq-resume), .tm-top:has(.kq-resume) { padding-bottom: 0; }
/* « Arrêter mon abonnement » (Membership Pro) : bouton discret, sur une ligne — l'arrêt reste facile à trouver
   (obligation légale) sans être présenté comme une alerte */
.osm-btn-cancel-subscription.btn,
.osm-btn-cancel-subscription.uk-button {
    display: inline-block; margin-top: 8px; padding: 6px 14px; line-height: 1.4; white-space: nowrap;
    background: transparent !important; color: #64748B !important; border: 1px solid #CBD5E1 !important;
    border-radius: 500px; font-size: 13px; text-transform: none; box-shadow: none;
}
.osm-btn-cancel-subscription.btn:hover,
.osm-btn-cancel-subscription.uk-button:hover { color: #023859 !important; border-color: #023859 !important; }

/* ── Bouton « Revenir en haut » flottant (2026-10-20, js/kiosque.js) ── */
footer a[uk-totop]:not(.kq-totop) { display: none; }     /* l'ancien bouton du pied de page */
a.kq-totop.uk-totop {   /* sélecteur renforcé : le style .uk-totop du thème passe après kiosque.css */
    position: fixed; right: 24px; bottom: 24px; z-index: 970;   /* sous les panneaux, fenêtres et lightbox UIkit */
    display: flex; align-items: center; justify-content: center;
    box-sizing: border-box; width: 46px; height: 46px; padding: 0 !important; border-radius: 50%;
    background: #03BCCF; color: #FFFFFF !important; border: 2px solid #FFFFFF;   /* lisible sur fond clair ET bleu nuit */
    box-shadow: 0 6px 18px rgba(2, 56, 89, .30);
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px);
    transition: opacity .2s, transform .2s, visibility 0s linear .2s;
}
a.kq-totop.uk-totop:hover { background: #029AAA; }
a.kq-totop.uk-totop svg { width: 18px; height: 18px; }
.kq-totop:focus-visible { outline: 3px solid #4DD0DE; outline-offset: 3px; }
a.kq-totop.kq-totop--mesure { visibility: visible; pointer-events: auto; transition: none; }   /* mesure, sans affichage (opacité 0) */
a.kq-totop.kq-totop--visible { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .2s, transform .2s; }
@media (max-width: 639px) { a.kq-totop.uk-totop { right: 16px; bottom: 16px; width: 42px; height: 42px; } }
@media (prefers-reduced-motion: reduce) { a.kq-totop.uk-totop, a.kq-totop.kq-totop--visible { transition: none; } }

/* ── Exprimez-vous (2026-10-20) : champ piège anti-robots, invisible pour les humains et les lecteurs d'écran ── */
.rsform-block-siteweb { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* Espace abonné (2026-10-22, retour de Zach : liens trop serrés) : le style .uk-nav du thème passe après
   kiosque.css et annulait l'espacement des liens ; sélecteur renforcé, lignes un peu plus aérées */
.kq-espace .kq-espace__liens > li > a { padding: 14px 0; line-height: 1.4; }
.kq-espace .kq-espace__sortie { margin-top: 6px; }
.kq-espace .kq-espace__sortie .uk-button-link { padding: 8px 0; }

/* ── Exprimez-vous (2026-10-27, retour client) : boutons radio et cases alignés sur leur texte, avec un espace ;
   « Précédent » en bouton secondaire (le thème affichait btn-warning en rose, comme une alerte) ── */
.rsform-block .form-check { display: inline-flex; align-items: center; gap: 10px; min-height: 0; margin: 2px 28px 8px 0; padding-left: 0; }
.rsform-block .form-check:not(.form-check-inline) { display: flex; align-items: flex-start; margin-right: 0; }
.rsform-block .form-check .form-check-input { float: none; flex: none; margin: 0; }
.rsform-block .form-check:not(.form-check-inline) .form-check-input { margin-top: 3px; }
.rsform-block .form-check .form-check-label { line-height: 1.5; }
.rsform-type-radiogroup .formControls, .rsform-type-checkboxgroup .formControls { padding-top: 0; }
.rsform-block .rsform-button-prev.btn { background: transparent; border: 1px solid #023859; color: #023859; margin-right: 8px; }
.rsform-block .rsform-button-prev.btn:hover { background: #023859; color: #FFFFFF; }
/* libellé de gauche des groupes radio / cases aligné sur la ligne des choix (Bootstrap « pt-0 » est en !important) */
.rsform-type-radiogroup > .formControlLabel, .rsform-type-checkboxgroup > .formControlLabel { padding-top: 12px !important; }

/* ── Mention « Lecture offerte » (2026-10-27, réunion client) : même pastille que « Publireportage », en turquoise,
   à droite de la rubrique sur la même ligne (src/Etiquettes.php). Avec les deux mentions, elles restent côte à côte. ── */
.tm-etiquette-offerte {
    display: inline-block;
    border: 1px solid #029AAA;
    border-radius: 500px;
    padding: 2px 8px;
    color: #029AAA;
    background: #FFFFFF;
    font-size: 8.5px;
    line-height: 1.6;
    white-space: nowrap;
    vertical-align: middle;
    font-family: Inter, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
}
.tm-page .el-meta .tm-etiquette-offerte { margin-left: auto; }
.tm-page .el-meta .tm-etiquette-publi + .tm-etiquette-offerte { margin-left: 0; }
.tm-page .el-meta .tm-etiquettes > .tm-etiquette-offerte:only-child { margin-left: 0; }
.uk-light .tm-etiquette-offerte { border-color: rgba(121, 207, 217, .7); color: #79CFD9; background: transparent; }

/* ── Champs « fichier » habillés (2026-10-27, js/kiosque.js) : même allure que les autres champs, textes en français ── */
.kq-fichier { position: relative; display: flex; align-items: center; min-height: 46px; border: 1px solid #E3E8EF; border-radius: 500px; background: #FFFFFF; overflow: hidden; }
.kq-fichier > input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; z-index: 2; font-size: 0; }
.kq-fichier__bouton { flex: none; align-self: stretch; display: flex; align-items: center; padding: 0 20px; background: #E3E8EF; color: #1E3A54; font-size: 14px; white-space: nowrap; }
.kq-fichier__nom { flex: 1; min-width: 0; padding: 0 18px; color: #64748B; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kq-fichier--choisi .kq-fichier__nom { color: #1E3A54; }
.kq-fichier:hover .kq-fichier__bouton { background: #CBD5E1; }
.kq-fichier:focus-within { outline: 2px solid #03BCCF; outline-offset: 2px; }
.kq-fichier:has(> input.rsform-error), .kq-fichier:has(> input.is-invalid) { border-color: #E5484D; }

/* ── Exprimez-vous : éditeur du texte (2026-10-27, jeu TinyMCE « Simple ») : pas de bouton « Activer/Désactiver l'éditeur »
   pour les lecteurs (il basculerait vers le code HTML) ; même bordure que les autres champs ── */
.rsform-block-texte .toggle-editor { display: none; }
.rsform-block-texte .tox-tinymce { border-color: #E3E8EF; }