/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/

/* Cartes de ressources pédagogiques : pastilles des formats ([rp_formats]) */
.cj-rp-formats{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.cj-rp-formats__pastille{padding:2px 7px;border-radius:3px;background:#E3EAF0;font-family:"Miranda Sans",sans-serif;font-size:14px;font-weight:500;color:#02508C}

/* Mega menu : icônes de section grises au repos, en couleur au survol / actif
   (intention du design ; les SVG étant des images, on passe par un filtre). */
.aponia-mm-tab .aponia-mm-icon img{filter:grayscale(1) opacity(.7);transition:filter .15s ease}
.aponia-mm-tab:hover .aponia-mm-icon img,
.aponia-mm-row.is-active > .aponia-mm-tab .aponia-mm-icon img,
.aponia-mm-tab:focus-visible .aponia-mm-icon img{filter:none}

/* Menu de partage (UE Social Buttons), retour rencontre 2026-10-06 (tâche #368) :
   1. le row-gap de 8px laissait un vide entre chaque bouton au survol (pastilles
      détachées + le hover meurt en traversant le trou) → boutons collés, coins
      arrondis seulement en tête et en pied pour former un seul bloc ;
   2. la case d'icône épousait la largeur du glyphe (Facebook 10px, X 16px), donc
      les libellés partaient en escalier → case fixe de 16px, glyphe centré. */
/* !important : UE imprime son CSS inline avec des sélecteurs #uc_social_share_buttons_…
   (spécificité d'identifiant), impossible à battre proprement depuis le thème. */
.ue-social-buttons-share-list{row-gap:0!important}
/* Chaque bouton est seul dans son wrapper .ue-social-buttons-item :
   les :first/:last-child se jugent sur le wrapper, pas sur le bouton. */
.ue-social-buttons-share-list-item{border-radius:0!important}
.ue-social-buttons-share-list > .ue-social-buttons-item:first-child .ue-social-buttons-share-list-item{border-radius:4px 4px 0 0!important}
.ue-social-buttons-share-list > .ue-social-buttons-item:last-child .ue-social-buttons-share-list-item{border-radius:0 0 4px 4px!important}
.ue-social-buttons-share-list-item-icon{width:16px;min-width:16px;display:inline-flex;justify-content:center}


/* Section « Infographies » des pages Vos droits / thèmes (gabarits 3206 et 952) :
   masquée quand la grille n'a aucune infographie, avec son bouton d'ancre dans l'entête. */
#infographies-section:not(:has(.e-loop-item)),
#inphographies-section:not(:has(.e-loop-item)){display:none}
body:not(:has(#infographies-section .e-loop-item, #inphographies-section .e-loop-item)) .elementor-element-11f4927{display:none}

/* Archive Infographies (gabarit 1310) : l'image des cartes (loop 604) est montrée au complet
   dans le cadre 1/1.4 au lieu d'être étirée (retour JS 2026-10-22, « pour l'instant »).
   Les pages Vos droits / thèmes, qui utilisent aussi le loop 604, ne changent pas. */
.elementor-1310 .elementor-604 .elementor-element-1157eed img{object-fit:contain;object-position:center bottom}

/* Sommaire des articles (widget Table des matières, option « points de suspension ») :
   le titre s'affiche au complet, jamais coupé (retour JS 2026-09-29). */
.elementor-toc--content-ellipsis .elementor-toc__list-item-text{
	white-space:normal;
	overflow:visible;
	text-overflow:clip;
}

/* Selects des formulaires (GF « Nous joindre » + infolettres mc4wp) : le
   « Faire un choix » non fait se lit comme un placeholder, nettement plus
   pâle que du texte saisi (retours client 2026-10-06). Les autres champs
   n'ont plus de placeholder du tout — les labels suffisent. */
.gfield_select:has(option.gf_placeholder:checked),
.newsletter-form select:has(option[value=""]:checked){color:#9AA9B5!important} /* !important : le thème GF « orbital » gagne autrement */
.gfield_select option,
.newsletter-form select option{color:#001424}
.gfield_select option.gf_placeholder{color:#9AA9B5}

/* Articles : H3 rapetissé pour mieux le distinguer du H2 (42px) — retour
   client 2026-10-06 (« Connaissez vos droits » passait inaperçu). Scopé au
   contenu d'article; le kit garde 34px ailleurs. */
.elementor-widget-theme-post-content h3{font-size:28px}
@media (max-width:767px){
	.elementor-widget-theme-post-content h3{font-size:22px}
}

/* Single infographie (#370, retours JS 2026-10-09) — colonne de droite :
   deux boîtes jumelles au design de l'ancienne liste « Infographies »
   (bandeau bleu-gris en en-tête, fond blanc, ombre douce) :
   - « Article lié » : la carte de l'article source à l'intérieur ;
   - « Dans la même catégorie » : titres seuls + « Voir tous les articles ». */
.cj-infographie-lie,
.cj-infographie-memes{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 14px rgba(0,20,36,.07)}
.cj-infographie-lie__titre,
.cj-infographie-memes__titre{margin:0;padding:14px 20px;background:var(--e-global-color-ab1a9fa,#e3eaf0);color:var(--e-global-color-00088b9,#587084);font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.4px}

.cj-infographie-lie .cj-cartes{grid-template-columns:1fr}
.cj-infographie-lie .cj-carte__media{border-radius:0}
.cj-infographie-lie .cj-carte__titre,
.cj-infographie-lie .cj-carte__desc{padding-left:16px;padding-right:16px}
.cj-infographie-lie .cj-carte__desc{padding-bottom:16px}

.cj-infographie-memes{margin-top:32px;margin-bottom:32px} /* 32px aussi avant le carré pub */
.cj-infographie-memes__liste{list-style:none;margin:0;padding:8px 0}
.cj-infographie-memes__liste li{margin:0}
.cj-infographie-memes__lien{display:block;padding:9px 20px;color:var(--e-global-color-primary,#001424);font-size:15px;font-weight:500;line-height:1.4;text-decoration:none}
.cj-infographie-memes__lien:hover,
.cj-infographie-memes__lien:focus-visible{background:var(--e-global-color-ab1a9fa,#e3eaf0);color:var(--e-global-color-primary,#001424)}
.cj-infographie-memes__tous{display:block;padding:12px 20px 16px;font-size:14px;font-weight:600;color:var(--e-global-color-primary,#001424)}

/* Archives avec colonne de filtres (infographies, vidéos, ressources pédago,
   Trouver de l'aide, Vos droits, thèmes, Actualités) — sur mobile, les
   filtres passent AU-DESSUS des résultats (retour JS 2026-10-19); l'encadré
   « Besoin d'aide juridique ? » et la pub restent en dessous. La colonne
   (classe cj-archive-filtres dans Elementor) devient display:contents : ses
   widgets deviennent des cases de la grille, qu'on ordonne. On rejoue le
   padding 10px et l'espacement de la colonne (--row-gap, hérité) : les
   filtres empilés gardent leur gap 0. Repli des filtres : inc/archives-mobile.php. */
@media (max-width:767px){
	.e-con-inner:has(> .cj-archive-filtres){row-gap:0}
	.cj-archive-filtres{display:contents}
	.cj-archive-filtres > *{order:2;margin-top:var(--row-gap,20px);margin-inline:10px!important;max-width:calc(100% - 20px)!important} /* !important : marges et largeurs par widget dans Elementor */
	.cj-archive-filtres > .elementor-widget-ucaddon_ue_checkboxes_filter,
	.cj-archive-filtres > :has(.cj-sous-themes){order:0}
	.cj-archive-filtres > :first-child{margin-top:0}
	.e-con-inner:has(> .cj-archive-filtres) > :not(.cj-archive-filtres){order:1;margin-top:24px}

	html.cj-filtres-attente .cj-archive-filtres .uc-checkbox-filter-accordion-container,
	html.cj-filtres-attente .cj-archive-filtres .cj-sous-themes__liste{display:none!important}
}

/* Liens dans le texte courant soulignés (audit WCAG 2026-10-22, 1.4.1) :
   la couleur seule ne suffit pas, #001424 contre le texte #3a434a = 1,85:1
   (3:1 exigé). Limité aux liens dans les paragraphes, listes et tableaux du
   contenu, donc ni les boutons ni les cartes. */
.elementor-widget-theme-post-content :is(p,li,td,dd) a:not(.elementor-button),
.elementor-widget-text-editor :is(p,li,td,dd) a:not(.elementor-button){text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px}

/* Focus clavier visible sur les cartes (retour JS 2026-10-22, WCAG 2.4.7).
   Le lien de ces cartes remplit un conteneur en overflow:hidden à coins
   arrondis : son contour, dessiné à l'extérieur, était rogné au complet.
   L'anneau passe donc sur la carte elle-même, qui n'est pas coupée par son
   propre overflow et dont le contour suit l'arrondi. */
.elementor-widget-call-to-action:has(.elementor-cta:focus-visible),
.ue_post_grid_item:has(a:focus-visible),
.ue-grid-item:has(:is(a,button):focus-visible),
.elementor-post__card:has(a:focus-visible),
.search-filter-input-text:has(input:focus-visible){outline:3px solid #001424;outline-offset:3px}
/* Le carrousel coupe ses diapositives à ras : 5px de marge intérieure,
   repris par une marge négative (la mise en page ne bouge pas), laissent
   la place à l'anneau. Sur mobile, le carrousel déborde déjà (aperçu de la
   carte suivante, réglé dans Elementor) : rien à faire. */
@media (min-width:768px){.elementor-widget-loop-carousel .swiper{padding:5px;margin:-5px}}
.swiper-slide:has(a:focus-visible){outline:3px solid #001424;outline-offset:1px}
/* Ces listes sont coupées par leur encadré : l'anneau passe à l'intérieur. */
.cj-infographie-memes a:focus-visible,
.cj-infographie-lie a:focus-visible,
.elementor-toc__list-item-text:focus-visible{outline:3px solid #001424;outline-offset:-3px}
/* Le contour du lien lui-même, rogné de toute façon, n'apparaît plus en double. */
@supports selector(:has(*)){
	.elementor-widget-call-to-action .elementor-cta:focus-visible,
	.ue_post_grid_item a:focus-visible,
	.ue-grid-item :is(a,button):focus-visible,
	.elementor-post__card a:focus-visible,
	.swiper-slide a:focus-visible,
	.search-filter-input-text input:focus-visible{outline:none}
}

/* Vidéos (inc/videos.php) — titre en vrai bouton et fenêtre <dialog>
   (audit WCAG 2026-10-22). Le bouton reprend le style de l'ancien lien et
   annule le reset de Hello (bordure et fond #c36 au survol). */
.vdo-title button.cj-video-ouvrir,
.vdo-title button.cj-video-ouvrir:hover,
.vdo-title button.cj-video-ouvrir:focus{background:none;border:0;border-radius:0;padding:0;margin:0;color:#001424;font-family:"Miranda Sans",sans-serif;font-size:18px;font-weight:600;line-height:1.2;text-align:left;cursor:pointer;white-space:normal}
.vdo-title button.cj-video-ouvrir:hover{text-decoration:underline}
.cj-video-dialog{width:min(992px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 32px);padding:0;border:0;border-radius:16px;background:#001424;color:#fff;overflow:auto}
.cj-video-dialog::backdrop{background:rgb(0 0 0 / .6)}
.cj-video-dialog__tete{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 12px 12px 20px}
/* dialog + h2 : passe devant le style global des H2 du kit Elementor (texte foncé). */
dialog.cj-video-dialog h2.cj-video-dialog__titre{margin:0;color:#fff;font-size:18px;line-height:1.3}
.cj-video-dialog__fermer,
.cj-video-dialog__fermer:hover,
.cj-video-dialog__fermer:focus{flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#edb52c;color:#001424;font-size:28px;line-height:1;cursor:pointer}
.cj-video-dialog__fermer:focus-visible{outline:3px solid #fff;outline-offset:2px}
.cj-video-dialog__cadre{aspect-ratio:16/9}
.cj-video-dialog__cadre iframe{display:block;width:100%;height:100%;border:0}

/* Page d'une vidéo ([cj_video_lecteur], gabarit copié des infographies) : lecteur 16:9 aux
   coins de l'image d'infographie (16px), description sous le lecteur. */
.cj-video-lecteur{aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#001424}
.cj-video-lecteur iframe{display:block;width:100%;height:100%;border:0}
.cj-video-description{margin-top:24px}
.cj-video-description p:last-child{margin-bottom:0}