/* Corrections generiques du theme yr_themes -- ne doit contenir QUE du CSS
   applicable a n'importe quel site du parc. Toute personnalisation propre
   a un client (contenu, gabarit specifique) va dans le sous-theme de ce
   client (ex. af_malzieu_theme/assets/css/af-malzieu.css), pas ici. Voir
   products/drupal-yrelay/docs/cadrage-style-par-site.md. */
form .form-actions.btn-primary.btn-effect input[type=submit]{
    background-color: transparent;
    margin: 0;
}
.section-comment ul .indented{
    margin-left: 138px;
}
@media (max-width: 480px){
    .section-comment ul .indented{
        margin-left: 30px;
    }
}
.entry-meta__item > a{
	color: inherit;
	transition: all 0.3s;
}
.yr_themes-video-post-format > .entry-media{
    margin-bottom: 47px;
}
.video-embed-field-responsive-video{
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* ratio 16:9 */
    height: 0;
}

/* Item de menu "Démos" (gabarits de démonstration réservés aux
   utilisateurs autorisés, voir yr_themes_access.module) -- rendu en
   <span> par Drupal (route:<nolink>, pas de <a> car aucune page cible
   propre), donc absent du sélecteur générique ".yamm .nav > li > a" qui
   donne aux autres items leur padding/couleur -- répliqué ici pour que
   "Démos" ait exactement le même gabarit visuel que ses voisins.
   Différencié seulement par une icône discrète après le texte (pas
   avant, pour ne pas décaler la hauteur de ligne comme le faisait la
   version précédente et casser la position du sous-menu déroulant).

   Piège rencontré (2026-09-12, www.yrgestion.fr) : le header n'a pas de
   background-color propre (l'image/overlay sombre visible derrière les 4
   liens d'origine vient du slider en dessous, pas du header), donc du
   texte blanc sur "Démos" (5e lien, hors de la largeur du slider) tombe
   sur le fond blanc réel de <nav class="navbar yamm"> -- invisible.
   Chaque style de header (header-1 à header-6) surcharge sa propre
   couleur de lien (#333 sur fond clair pour 2/3/4/5, #fff par défaut
   pour 1/6) -- répliqué ici pour chacun plutôt que de deviner une seule
   couleur qui ne conviendrait qu'à un style. */
.yamm .nav > li > .menu-link--demo {
    position: relative;
    display: block;
    padding: 25px 28px;
    font-size: 12px;
    line-height: 31px; /* mesuré sur les <a> voisins (Contact) -- un
        <span> ne récupère pas le même line-height hérité qu'un <a>,
        provoquant une hauteur de <li> différente (69.8px vs 81px) qui
        décalait le point d'ancrage vertical du sous-menu déroulant. */
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    cursor: default;
}
/* Ancêtre confirmé (2026-09-12, trade.yrelay.fr, inspection DOM réelle) :
   ".header-N .yamm .nav" est correct -- NAV.navbar.yamm est bien un
   descendant direct de HEADER.header.header-N. Fausse piste initiale :
   `document.querySelectorAll('.menu-link--demo')` retourne PLUSIEURS
   éléments sur la page (dont des `<span>` non visibles, résidus d'un
   autre gabarit/contexte de rendu) -- inspecter l'élément [0] par défaut
   sans vérifier sa visibilité réelle (`getBoundingClientRect`) a fait
   croire à tort que ".header-N" n'était pas ancêtre du menu visible. */
.header-2 .yamm .nav > li > .menu-link--demo {
    padding: 25px 25px 25px;
    color: #333;
}
.header-3 .yamm .nav > li > .menu-link--demo {
    padding: 32px 24px 34px;
    color: #333;
}
.header-4 .yamm .nav > li > .menu-link--demo {
    padding: 34px 21px 34px;
    color: #333;
}
.header-5 .yamm .nav > li > .menu-link--demo {
    padding: 34px 24px;
    color: #333;
}
/* Menu sidebar mobile ([data-off-canvas], template
   menu--slidebar-menu.html.twig) : contexte CSS totalement distinct du
   menu desktop ci-dessus. La vraie règle de gabarit ici est
   "[data-off-canvas] li a" (display/padding/color en !important) --
   elle ne cible que les <a>, jamais le <span> de "Démos" (route
   <nolink>), qui restait donc sans aucun style (padding:0, inline).
   Répliquée ici avec les mêmes valeurs et la même spécificité. */
[data-off-canvas] li .menu-link--demo {
    display: inline-block !important;
    margin: 0 !important;
    width: 100% !important;
    color: #fff !important;
    float: none !important;
    padding: 12px 27px !important;
    background: transparent !important;
}
.menu-link--demo::after {
    content: "\f06e"; /* Font Awesome fa-eye, déjà chargé dans le thème */
    font-family: "FontAwesome";
    margin-left: 6px;
    opacity: 0.5;
    font-size: 0.75em;
    line-height: 1; /* empêche l'icône d'agrandir légèrement la hauteur
        de ligne du <span> parent (writ. 1.3px observés) par rapport aux
        <a> voisins du menu, qui n'ont pas de pseudo-élément. */
    vertical-align: middle;
}
.video-embed-field-responsive-video iframe{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.video-embed-field-responsive-video .replacement-img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Badge play sur les miniatures issues d'une video (sidebar, listes) :
   ciblage par chemin de fichier, aucun template a dupliquer. L'image
   video n'est pas toujours entouree d'un <a> (cas de la liste homepage_1),
   donc on cible directement le conteneur, pas un lien intermediaire. */
.post-widget__media:has(img[src*="video_thumbnails"]),
.entry-media:has(img[src*="video_thumbnails"]){
    position: relative;
}
/* 2026-08-31 : la vignette video en listing (formateur Views
   "video_embed_field_thumbnail", style image_780x420) n'a pas la classe
   img-responsive -- contrairement aux autres formats d'article -- donc
   s'affichait a sa taille native (780px), debordant l'ecran sur mobile.
   Ciblage par chemin de fichier comme les regles voisines, sans dependre
   d'une classe absente cote Views. */
.entry-media img[src*="video_thumbnails"],
.post-widget__media img[src*="video_thumbnails"]{
    max-width: 100%;
    height: auto;
}
/* Le badge play/musique centré posé ici par ::before/::after a été
   retiré le 2026-09-09 (TA-85 bis) : il faisait doublon avec
   .blog-format-badge (ajouté le 2026-09-08, voir plus bas dans ce
   fichier), posé explicitement par node--blog-post.html.twig et la vue
   _yr_themes_sidebar_widgets sur ces mêmes miniatures -- deux triangles
   play superposés sur la même image. .blog-format-badge est conservé
   seul : couvre aussi l'audio (icône ♪, absente ici), et son ciblage par
   classe explicite (posée par le template) est plus lisible que le
   ciblage par chemin de fichier utilisé ci-dessus. Vérifié le 2026-09-09
   que le badge .blog-format-badge est bien présent sur toutes les
   vignettes vidéo actuelles du site (accueil, sidebar, listing blog),
   y compris celles sans <a> autour de l'image -- le cas "homepage_1
   sans lien" qui justifiait ce ciblage alternatif au 2026-08-31 n'est
   plus observé. */
.entry-media.zoom-gallery .media-col-left{
	width: 360px;
}
.entry-media.zoom-gallery .yr_themes-gallery-full{
	width: 472px;
}
@media (max-width: 1199px){
	.entry-media.zoom-gallery .yr_themes-gallery-full {
    	width: 50%;
	}
}
.post-full .entry-media .blockquote__author{
	color: #fff;
}
.main-content_mod-a.yr_themes-listing-blog-full{
    margin-right: 0;
}
#yr_themes-pager > li{
    float: initial;
}
.pager > li > a{
    color: #fff;
}
.pager > li.active > a{
    background-color: #fff;

}
.yr_themes-padding-5px{
    padding: 5px;
}
#yr_themes-pager{
    padding-bottom: 45px;
}
.footer .footer-main .simplenews-subscriber-form .field--type-email input[type=email]{
    width: 100%;
}
/* 2026-09-01 : refonte design footer -- la legende du fieldset Simplenews
   ("Gerez vos abonnements aux lettres d'information") heritait du style
   HTML natif du navigateur pour <legend> (18px, sans reduction), plus
   grande et plus visible que .footer__title (12px uppercase orange) qui
   structure les 3 autres colonnes -- alors qu'il s'agit d'un texte d'aide
   de formulaire, pas d'un titre de section. */
.footer .footer-main .simplenews-subscriber-form .fieldset-legend{
    font-size: 13px;
    font-weight: 400;
    color: #777;
    text-transform: none;
    letter-spacing: normal;
}
/* Texte d'aide technique jamais traduit (chaine par defaut du module
   Simplenews / Form API core, non couverte par les traductions du theme)
   -- masque plutot que traduit : redondant avec le label "Courriel" juste
   au-dessus, n'apporte rien au visiteur. */
.footer .footer-main .simplenews-subscriber-form #edit-mail-0-value--description{
    display: none;
}
/* 2026-09-03 : #edit-message (reglage "message" du bloc, ex. "Restez
   informes...") etait masque avec le meme lot que la description
   technique ci-dessus -- mais ce champ porte le texte d'accroche
   editorial de la newsletter ("Recevez les actualites..."), utile au
   visiteur des lors qu'il est renseigne. Remis visible ; reste a sa
   position naturelle dans le DOM (apres le champ email, avant le
   bouton) pour ne pas toucher au flow du formulaire. */
.footer .footer-main .simplenews-subscriber-form #edit-message{
    font-size: 13px;
    color: #777;
    margin: 8px 0 12px;
}
.footer .footer-main .simplenews-subscriber-form .form-actions{
    float: right;
}
/* 2026-08-31 : le conteneur .form-actions du formulaire newsletter porte a
   la fois le bouton "S'abonner" (input submit) et le lien "Gerer mon
   abonnement" (<a>) -- la classe .btn-effect (theme.css) est concue pour
   un bouton unique : son pseudo-element ::after grandit a 500% au survol
   et, combine a l'overflow:hidden du conteneur partage par les deux
   elements, masque visuellement le lien voisin. Corrige en detachant le
   lien de l'effet de survol du bouton et en l'affichant comme action
   secondaire distincte sous le bouton. */
.footer .footer-main .simplenews-subscriber-form .form-actions{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    overflow: visible;
    background: none;
    padding: 0;
    margin-top: 16px;
}
.footer .footer-main .simplenews-subscriber-form .form-actions:after{
    display: none;
}
/* 2026-09-01 : ramene au meme registre visuel discret que les boutons
   "Afficher le numero"/"Afficher l'email" du bloc contact voisin -- avant
   ce correctif, "S'abonner" etait le seul bouton plein-couleur du footer
   et dominait visuellement toute la section alors qu'il ne s'agit que
   d'une action secondaire (inscription newsletter). */
.footer .footer-main .simplenews-subscriber-form .form-actions .form-submit{
    position: relative;
    overflow: hidden;
    display: inline-block;
    padding: 8px 20px;
    font-size: 13px;
    background-color: #fff3e0;
    color: var(--color-accent-dark, #a2151c);
    border: 1px solid #f0d9b0;
    border-radius: var(--radius-s, 4px);
}
.footer .footer-main .simplenews-subscriber-form .form-actions .form-submit:after{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 50%;
    opacity: 0;
    z-index: -1;
    content: '';
    background-color: #fff;
    transition: all 0.3s ease 0s;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.footer .footer-main .simplenews-subscriber-form .form-actions .form-submit:hover:after{
    height: 500%;
    opacity: 1;
}
.footer .footer-main .simplenews-subscriber-form .form-actions #edit-manage{
    position: static;
    display: inline-block;
    color: #333;
    font-size: 12px;
    text-decoration: underline;
    z-index: 2;
}
.footer .footer-main .simplenews-subscriber-form .form-actions #edit-manage:hover{
    color: var(--color-accent, #E08A1E);
}
.header .contextual-region > .contextual button{
    float: initial;
    position: initial;
    padding: 0;
    left: 0;
    margin: 0;
}
.header button.toggle-menu-button{

    z-index: 1;
}
.header a.search-open{
    z-index: 1;
}
.search-global__input.form-search{
    position: initial;
    border:0;
    border-bottom: 1px solid #919191;
}
.search-global .form-actions.btn-primary.btn-effect{
    background-color: initial;
    position: initial;
    margin: initial !important;
    overflow: initial;
    z-index: initial;
    color: initial;
}
.search-global .form-actions.btn-primary.btn-effect input[type=submit]{
    background-color: initial;
    margin: initial;
    border: initial;
    width: 33px;
    z-index: 2;
}
.search-global .form-actions.btn-primary.btn-effect:after{
    position: initial;
    top: initial;
    left: initial;
    width: initial;
    height: initial;
    opacity: initial;
    z-index: initial;
    content: initial;
    transition: initial;
    transform: initial;
}
.search-global .form-actions.btn-primary.btn-effect:hover{
    color: initial;
}
.search-global .form-actions.btn-primary.btn-effect i.fa-search{
    position: absolute;

    right: 0;
    font-size: 30px;
    color: #fff;
}
.header-search.open-search.contextual-region > .contextual{
    right: initial;
    left: 0;
}
.contextual-region.wrap-fixed-menu > .contextual{
    right: initial;
    left: 0;
}

/*.contextual-links > li > a{
    color: #333 !important;
}*/
.list-widget.list-unstyled .list-widget__item > a{
    display: block;
    padding: 13px 0 4px 5px;
    font-size: 13px;
    font-weight: 700;
    color: #333;
    border-bottom: 1px solid #ddd;
    transition: all 0.3s;
    letter-spacing: 0.05em;
}
.list-tags > .list-tags__item > a{
    display: inline-block;
    padding: 7px 13px 5px;
    font-size: 11px;
    color: #333;
    border: 1px solid #eee;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
#block-yr_themes-local-tasks ul > li:not(:last-child){
    float: left;
    padding-right: 10px;

}
#block-yr_themes-local-tasks ul > li{
    list-style: none;
    font-weight: bold;
    text-transform: uppercase;
}
#block-yr_themes-local-tasks ul{
    padding: 0;
    padding-left: 15px;

}
.search-form .search-advanced .js-form-item label{
    width: 190px;
}
.search-form.search-page-form input[type=submit]{

    background-color: transparent;
    border: 2px solid #ccc;
    text-transform: uppercase;
}
#yr_themes-search-results ol li{
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
    padding-top: 20px;
}

#yr_themes-user-page form .form-actions{
    text-align: center;
}
#yr_themes-user-page form .form-actions input[type=submit]{
    width: 100%;
    text-transform: uppercase;
}
#yr_themes-user-page form label{
    width: 150px;
}

/* 2026-08-29 : contrainte de taille du logo d'en-tete, quelle que soit la
   taille native de l'image fournie via la config du theme (yr_themes.settings
   logo.path). Le theme ne definissait aucune regle pour .logo__img, l'image
   s'affichait alors a sa taille native (probleme constate avec un logo carre
   1024x1024 qui ecrasait toute la largeur de l'en-tete). */
.logo__img {
    max-height: 60px;
    width: auto;
    height: auto;
}
@media (max-width: 767px) {
    .logo__img {
        max-height: 44px;
    }
}

/* 2026-08-29 : meme contrainte que .logo__img, appliquee au logo du pied
   de page (footer__logo), qui s'affichait aussi a taille native. */
.footer__logo img {
    max-height: 80px;
    width: auto;
    height: auto;
}

/* 2026-08-30 : le conteneur .content-full-bar (page--front.html.twig) n'avait
   aucune regle CSS, les messages de statut Drupal (.messages) collaient donc
   directement au slider/carrousel juste au-dessus, sans respiration visuelle. */
.content-full-bar {
    margin-top: 24px;
    margin-bottom: 24px;
}
.content-full-bar .messages {
    margin-bottom: 0;
}

/* 2026-08-31 : le bloc "Tabs" (onglets admin Voir/Modifier/Supprimer...,
   #block-yr_themes-local-tasks) heritait du meme espacement generique que
   .content-full-bar (24px/24px), pense pour les messages de statut, pas
   pour des onglets — trop colle au contenu juste en dessous, trop
   d'espace au-dessus par rapport a ce que ces onglets justifient. */
.content-full-bar #block-yr_themes-local-tasks {
    margin-top: 4px;
    margin-bottom: 20px;
}

/* 2026-08-31 : .section-title .col-sm-8 (conteneur du <h1> dans le bandeau
   titre, page.html.twig et variantes) recevait un padding-top calcule a
   ~79px d'une source non identifiee dans le CSS statique du theme
   (confirme via l'inspecteur navigateur) — creait un grand vide blanc
   entre la bande photo et le contenu de page. Neutralise explicitement.
   Insuffisant a lui seul : la vraie source dominante est .ui-title-page
   (theme.css) avec padding: 38px 88px 32px — la "carte" flottante autour
   du titre ("Contact", "Mentions legales"...) reservait a elle seule
   32px de vide en bas, en plus du padding-top du conteneur. Reduit sans
   supprimer l'effet carte. */
.section-title .col-sm-8 {
    padding-top: 0;
}
.ui-title-page {
    /* 2026-09-10 : padding vertical encore réduit au minimum (20px/12px
       laissait toujours une carte plus haute que nécessaire pour un
       h1 de 22px, constaté sur /blog) -- même valeur en haut et en bas
       maintenant, l'effet "carte" reste (padding horizontal 60px conservé). */
    padding: 12px 60px;
}

/* 2026-08-30 : .title-page__media img (bandeau "Other page" / other_page_bg_image,
   page.html.twig, page--node--page.html.twig, page--user.html.twig) n'avait
   de regle "width: 100%" qu'en media query mobile/tablette (responsive.css,
   max-width: 991px) — en desktop l'image s'affichait a sa taille native
   (ex. une photo de groupe haute resolution dessinait une bande enorme au
   lieu du bandeau attendu, format documente 1140x600). */
.title-page__media img {
    width: 100%;
    height: 315px;
    object-fit: cover;
    object-position: center;
}
@media (max-width: 767px) {
    .title-page__media img {
        height: 180px;
    }
}

/* 2026-08-31 : le champ Message utilise CKEditor 5 (format contact_message).
   CKEditor masque normalement le <textarea> natif sous-jacent via son
   propre JS, mais sa bordure/poignee de redimensionnement ("resize-vertical")
   restait visible en dessous de l'editeur, donnant l'impression d'un double
   trait. Premier essai avec le selecteur ".ck-editor + textarea" sans effet
   (la relation de sibling direct ne correspond pas au DOM reellement genere
   par CKEditor 5 sur Drupal) — cible desormais le textarea directement par
   son id, quelle que soit sa position relative au widget CKEditor. */
#edit-message-value.form-textarea {
    border: 0 !important;
    resize: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}
/* 2026-08-31 : lien Simplenews "Manage existing" (bloc Abonnement),
   colle directement au bouton "S'abonner" sans espacement ni style,
   donnant l'impression au survol d'un dedoublement du bouton. */
/* Le conteneur .form-actions.btn-primary porte le fond orange plein du
   bouton (regle core du theme, dont le vrai <input> bootstrap-primary
   herite en cascade) -- neutraliser ce fond au niveau du conteneur casse
   aussi le bouton lui-meme (transparent). Le lien "Gerer mon abonnement"
   (Simplenews), enfant direct de ce meme conteneur, heritait du meme
   fond orange sans delimitation avec le bouton au-dessus : on lui donne
   plutot son propre fond neutre, en le sortant visuellement du bloc
   orange, sans toucher au conteneur ni au bouton. */
#edit-submit,
#edit-submit--2 {
    margin-bottom: 4px;
}
#edit-manage {
    display: inline-block;
    margin-top: 14px;
    padding: 4px 10px;
    font-size: 12px;
    color: #fff;
    text-decoration: underline;
    background: transparent;
    opacity: 0.85;
}

/* 2026-08-31 : compteur de vues du module statistics (visible uniquement
   avec la permission "access statistics", donc pour l'admin), rendu par
   defaut en simple <li> de liste Bootstrap sans style -- point de puce
   brut et texte plat. */
.statistics-counter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    padding: 5px 12px 5px 10px;
    background: #fff3e0;
    border: 1px solid #f5deb8;
    border-radius: 999px;
    font-size: 12px;
    color: #a97a3f;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(160, 110, 20, 0.12);
}
.statistics-counter::before {
    content: '\f06e';
    font-family: FontAwesome;
    color: var(--color-accent, #E08A1E);
    font-size: 13px;
}

/* 2026-08-31 : compteur de vues du widget "Articles populaires" --
   standardise sur .statistics-counter (voir plus haut) le 2026-08-31,
   au lieu de sa propre classe .post-widget__views desormais retiree :
   deux implementations (yr_themes_view_count_format() cote theme,
   NodeViewCountExtension::getNodeViewCountDisplay() cote module)
   produisaient un badge visuellement different pour la meme donnee.
   NodeViewCountExtension.php genere maintenant directement le meme
   markup <span class="statistics-counter">. */
.post-widget .statistics-counter {
    margin-left: 10px;
}

/* 2026-08-31 : fiche membre d'equipe en vue complete (node--team-members--
   full.html.twig). Sans ce template, Drupal affichait l'avatar a sa taille
   native (1254x1254px) sans structure -- corrige par le style d'image
   "team_member_avatar" (400x400) cote config, et ici par une mise en page
   en 2 colonnes (empilees en mobile). */
.team-member-full__layout {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    margin-top: 20px;
}
.team-member-full__avatar {
    flex: 0 0 auto;
    text-align: center;
}
.team-member-full__avatar img {
    border-radius: 50%;
    display: block;
}
.team-member-full__job {
    margin-top: 12px;
    font-weight: 600;
    color: #a2151c;
}
.team-member-full__body {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 8px;
}
.team-member-full__description {
    font-size: 16px;
    line-height: 1.7;
}
@media (max-width: 767px) {
    .team-member-full__layout {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* 2026-08-31 : carousel "Notre equipe" (vue _yr_themes_section_content,
   display block_section_content_team_members) -- les fiches n'etaient pas
   cliquables vers la page individuelle du membre. Lien ajoute cote config
   Views (champ nid + path() dans le rewrite Twig), classe .team__link ici
   pour que le lien n'introduise pas de style de lien par defaut (couleur,
   soulignement) sur l'image et le nom qu'il englobe. */
.team__link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.team__link:hover,
.team__link:focus {
    color: inherit;
    text-decoration: none;
}
.team__link:hover .team__name {
    color: #a2151c;
}

/* 2026-08-31 : refonte design page "Notre mission" (et blocs "Block
   section content" reutilisables sur d'autres pages) -- signale trop
   plat / rupture de style entre "Nos chiffres clés" (barres, seul point
   fort existant, volontairement inchange), "Notre mission" (checklist a
   puces plate) et le carousel equipe (portraits alignes a gauche, vide a
   droite). Trois ameliorations ciblees + une respiration generale.

   2026-09-03 : les barres de "Nos chiffres clés" sont retirees --
   une barre de progression a 100% de largeur sur des valeurs qui ne
   sont ni un pourcentage ni bornees (60 adherents, annee 1989) n'a pas
   de sens semantique et le rendu jugait plat/gris. Remplace par
   .stat-grid : cartes chiffre + icone, alignees sur le vocabulaire
   visuel de .value-grid ci-dessous (meme bloc "Notre mission"). */

/* Checklist "Notre mission" -> grille de mini-cartes icone + texte,
   remplace la liste a puces plate (list-mark-5) dans le bloc custom
   "[YR Themes] Block section content - Notre mission". */
.value-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}
.value-grid__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #faf6ee;
    border: 1px solid #f0e4c8;
    border-radius: var(--radius-m, 8px);
    font-size: 14px;
    color: #333;
    transition: background-color 0.2s, transform 0.2s;
}
.value-grid__item:hover {
    background: #fff3e0;
    transform: translateX(3px);
}
.value-grid__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-accent, #E08A1E);
    color: #fff;
    font-size: 14px;
}

/* Cartes equipe (carousel "Notre équipe") -> fond carte leger + grille
   centree, au lieu de portraits nus alignes a gauche avec un vide a
   droite quand moins de 4 membres. */
.owl-carousel.zoom-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
    justify-content: center;
}
.owl-carousel.zoom-gallery .team {
    background: #fff;
    border: 1px solid #eee;
    border-radius: var(--radius-m, 8px);
    padding: 24px 18px 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s, transform 0.2s;
}
.owl-carousel.zoom-gallery .team:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-3px);
}
.team__category {
    display: inline-block;
    padding: 3px 12px;
    margin-top: 44px;
    background: #fdece0;
    color: #a2151c;
    border-radius: 999px;
    font-size: 10px;
    letter-spacing: 0.05em;
}

/* 2026-09-03 : les 5 engagements de "Notre mission" etaient une liste
   discrete en colonne etroite a droite du texte -- sous-dimensionne
   par rapport a leur importance editoriale (c'est le contenu le plus
   dense en substance de la page). Passes en grille de cartes pleine
   largeur sous le texte, meme vocabulaire visuel que .stat-grid et
   .value-grid. Bloc custom "[YR Themes] Block section content -
   Notre mission". */
.mission-grid {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}
.mission-grid__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 16px;
    background: #faf6ee;
    border: 1px solid #f0e4c8;
    border-radius: var(--radius-m, 8px);
    text-align: center;
    font-size: 14px;
    color: #333;
    transition: background-color 0.2s, transform 0.2s;
}
.mission-grid__item:hover {
    background: #fff3e0;
    transform: translateY(-3px);
}
.mission-grid__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #c1631a;
    color: #fff;
    font-size: 16px;
}

/* "Nos chiffres clés" -> grille de cartes chiffre + icone, remplace les
   barres de progression (aria-valuenow == aria-valuemax partout, donc
   toujours à 100% : purement decoratif et trompeur, une jauge suggere
   une limite/un pourcentage que ces valeurs n'ont pas). Bloc custom
   "[YR Themes] Block section content - Nos chiffres clés". */
.stat-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
.stat-grid__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 16px;
    background: #fff;
    border: 1px solid #f0e4c8;
    border-radius: var(--radius-m, 8px);
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}
.stat-grid__item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(193, 99, 26, 0.12);
}
.stat-grid__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fdece0;
    color: #c1631a;
    font-size: 18px;
}
.stat-grid__value {
    font-size: 32px;
    font-weight: 700;
    color: #a2151c;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.stat-grid__label {
    font-size: 13px;
    color: #777777;
}

/* Respiration generale : sections "Nos chiffres clés" et carousel équipe
   sur fond gris tres clair pour scander la lecture de la page, "Notre
   mission" reste sur blanc pour alterner. Cible large mais peu risquee :
   ce style ne s'applique qu'aux sections directement dans le conteneur
   de page (pas le header/footer). */
.section-type-3,
section:has(> .value-grid),
section:has(> .stat-grid) {
    padding: 32px 24px;
    border-radius: var(--radius-m, 8px);
}
section:has(> .stat-grid) {
    background: #faf9f7;
}
.section-type-3 {
    background: #fff;
    border: 1px solid #f0f0f0;
}

/* Pastille "vidéo" / "musique" superposée à la miniature d'un article de
   blog (node--blog-post.html.twig, class .blog-format-badge posée par le
   template quand blog_format vaut "video" ou "audio") -- signale le type
   de contenu avant même de cliquer, sans dépendre d'une police d'icônes
   externe : triangle "play" en pur CSS (bordures) pour la vidéo, caractère
   Unicode ♪ pour la musique, tous deux indépendants de toute langue donc
   pas de texte à traduire (même logique que le visuel de repli "média
   indisponible" de yr_image_tools -- voir sa documentation technique).
   Ajouté 2026-09-08 suite à une remarque opérateur sur af-malzieu.fr :
   la miniature seule ne permettait pas de distinguer un article vidéo
   d'un article standard avant d'ouvrir la page. */
.entry-media,
.post-widget__media,
.entry-media__player-wrap {
    position: relative;
}
/* .entry-media__player-wrap : conteneur posé autour du lecteur
   vidéo/musique intégré directement sur la page (media_embed_html,
   voir node--blog-post.html.twig), pour y superposer le badge -- même
   piège de positionnement que .post-widget__media ci-dessous, corrigé
   dès l'ajout cette fois plutôt qu'après coup. */
/* .post-widget__media (widget "Popular Posts", vue Views
   _yr_themes_sidebar_widgets) ajouté le 2026-09-08 : sans conteneur
   positionné, le badge (position: absolute) remontait à l'ancêtre
   positionné le plus proche -- ici aucun, donc jusqu'au viewport,
   rendant le badge invisible dans le cadre de la vignette (repéré en
   comparant le HTML rendu, qui contenait bien le badge, au rendu
   visuel réel, qui ne le montrait nulle part). */
.blog-format-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    /* Fond opaque plutôt que semi-transparent (2026-09-09, remarque
       opérateur) : rgba(20,20,20,0.72) laissait transparaître la couleur
       de l'image en dessous, donnant un rendu incohérent d'une vignette
       à l'autre (quasi noir sur fond sombre, plus gris sur fond clair). */
    background: #141414;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}
/* Le badge n'a plus de raison d'être une fois le lecteur vidéo/musique
   réellement affiché sur la page article (.entry-media__player-wrap,
   voir plus haut) : il fait doublon avec les contrôles natifs du lecteur
   embarqué (YouTube affiche son propre triangle play). Reste affiché sur
   toutes les vignettes/miniatures (.entry-media, .post-widget__media),
   son usage d'origine. Ajouté 2026-09-09, remarque opérateur. */
.entry-media__player-wrap .blog-format-badge {
    display: none;
}
.blog-format-badge--video::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    /* Triangle "play" pointant vers la droite, décalé de 1px pour
       compenser l'optique du triangle dans le cercle (paraît sinon
       légèrement décentré vers la gauche). */
    margin-left: 3px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid #ffffff;
}
.blog-format-badge--audio::after {
    content: "\266A";
    color: #ffffff;
    font-size: 18px;
    line-height: 1;
}

/* Masque field_video_embed / field_sound_cloud dans la vue Views
   "_yr_themes_sliders" (carrousel d'accueil) -- ces deux champs y sont
   volontairement NON exclus (exclude: false) pour rester utilisables en
   token Twig dans le "rewrite results" du champ "nothing" (bug Views
   documenté : un champ exclude=true casse le pipeline de token
   replacement pour les formatters custom -- drupal.org #2748665 /
   video_embed_field #2855493, "won't fix"). Formatter passé à
   "video_embed_field_video_url" côté configuration Views pour éviter le
   pire (le formatter par défaut du champ rend un <iframe> complet avec
   autoplay, régression rencontrée et corrigée le 2026-09-08), mais son
   URL texte brute reste visible sans ce masquage CSS -- classe posée
   explicitement via element_class dans la config du champ Views
   (element_type "- None -" ne génère AUCUNE balise autour du champ,
   rendant impossible tout ciblage CSS : bug rencontré en vérifiant le
   HTML réel, l'URL brute apparaissait sans wrapper avant cette
   correction). */
.media-token-hidden {
    display: none;
}

/* Masquage du message d'erreur natif du formatter soundcloudfield ("The
   SoundCloud content at [url] is not available, or it is set to
   private.") sur un article blog_format=audio dont le lien est cassé
   -- redondant avec la miniature de repli affichée juste au-dessus
   (voir doc-technique.md de yr_image_tools, section "Miniature de
   repli affichée même pour blog_format=audio") : en anglais, expose
   l'URL technique complète, sans valeur ajoutée pour un visiteur une
   fois le placeholder visuel déjà là.

   PAS DE RÈGLE CSS ICI : SoundCloudDefaultFormatter::viewElements()
   (module soundcloudfield) rend son message d'erreur comme
   '#markup' => $output nu, sans wrapper ni classe distincte du cas
   succès (qui rend un <iframe> au même endroit, via le même
   '#markup') -- vérifié dans le code du module avant d'écrire une
   règle qui aurait fini par cibler une classe inexistante. Le
   masquage se fait en JS, voir yr_themes/assets/js/separate-js/
   custom.js (recherche du texte "is not available" dans .entry-media,
   trop spécifique au contenu pour être fiable en CSS pur). */