/*
 Theme Name:   Blunor Child
 Theme URI:    https://demo.rstheme.com/wordpress/blunor
 Description:  Blunor Child
 Author:       RSTheme
 Author URI:   http://rstheme.com
 Template:     blunor
 Version:      1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
 */

/* FRVO 2026-07-27 : l icone maison du fil d Ariane est un SVG dont le path porte fill="#B3DE4F"
   en dur (vert de la demo Blunor). Le rebranding CSS ne l atteignait pas : une declaration CSS
   l emporte sur un attribut de presentation, donc on la force sur la couleur de marque. */
.breadcrumbs-icon svg path,
.breadcrumb-area .breadcrumbs-icon svg path{fill:var(--primaryColor,#0077D9) !important;}

/* FRVO 2026-07-27 : repli affiche si le funnel de devis est eteint (rollback).
   Doit vivre ICI et pas dans funnel.css, qui est enqueue PAR le loader desactive. */
.wd-fallback{max-width:640px;margin:0 auto;padding:28px;border:1px solid rgba(255,255,255,.14);border-radius:16px;text-align:center;line-height:1.7}
.wd-fallback a{color:#78B6E2;text-decoration:none;font-weight:600}


/* FRVO 2026-07-28 : pastille de categorie du carrousel projets (accueil).
   Meme langage visuel que la pastille du blog (.blog-img .blog-meta .btm-cate) :
   fond #0077D9, texte blanc, petite, coins arrondis 6px, Kanit 15/28.
   Elle est posee DANS le titre du projet et non en absolu sur la carte : le rembourrage
   de la carte passe de 100px a 20px selon l ecran, l ancrage au titre suit tout seul
   (alignee a gauche en grand ecran, centree en mobile, comme le titre). */
.rs-gsap-post-slider .post-item .content-wrapper .frvo-pcat-wrap {
	display: block;
	font-size: 15px;
	line-height: 28px;
	margin: 0 0 20px;
}
.rs-gsap-post-slider .post-item .content-wrapper .frvo-pcat {
	display: inline-block;
	background-color: #0077D9;
	color: #FFFFFF;
	border-radius: 6px;
	padding: 2px 16px;
	font-family: "Kanit", sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 28px;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
}

/* le survol de la carte recolore le titre : la pastille garde son contraste,
   en mode sombre comme en mode clair (body.scheme-light) */
.rs-gsap-post-slider .post-item .content-wrapper:hover .frvo-pcat {
	color: #FFFFFF;
}


/* FRVO 2026-07-28 : mode clair, carte du carrousel projets.
   Les 4 maquettes fournies ont un fond NOIR OPAQUE (pas de transparence) : sur la carte
   blanche du mode clair, elles formaient un gros rectangle noir et la description grise
   passait sous le seuil de lisibilite. On force donc la carte en noir dans les deux modes,
   ce qui retablit le raccord invisible voulu au depart. */
body.scheme-light .rs-gsap-post-slider .post-item .content-wrapper{background-color:#000000;}
body.scheme-light .rs-gsap-post-slider .slider-wrapper .post-item .content-wrapper .post-title,
body.scheme-light .rs-gsap-post-slider .slider-wrapper .post-item .content-wrapper .post-desc-text{color:#FFFFFF;}

/* --- frvo-temoignages-colonnes ---
   Bloc temoignages : la carte du compteur et les cartes d'avis doivent faire
   exactement la meme largeur. Le reglage Elementor (48%) etait ecrase par le
   flex-shrink (le swiper impose une largeur mini au conteneur voisin), d'ou
   445px a gauche contre 448px pour les slides. On impose le tiers exact.
   Desktop et laptop seulement : en tablette le conteneur passe en colonne.
   SCOPE PAR PAGE OBLIGATOIRE : l'import demo duplique les ids d'elements, et
   b83dec2 existe aussi sur Onepage 1 (17170), qui ne doit pas etre touchee. */
@media (min-width: 1025px) {
  body.page-id-8160 .elementor-element-b83dec2,
  body.page-id-1533 .elementor-element-70c7b85 { flex: 0 0 calc((100% - 60px) / 3) !important; width: auto !important; }
}

/* --- frvo-blog-hauteurs ---
   Bloc 'Nos derniers articles' : les colonnes .pre-blog-item s'etirent bien,
   mais la carte visible .blog-inner-wrap ne prenait que la hauteur de son
   contenu (632px contre 678px des qu'un titre passe sur deux lignes).
   Ce widget ne supporte pas le CSS par widget, d'ou la regle ici.
   Scope par page : les ids d'elements sont dupliques par l'import demo. */
body.page-id-8160 .elementor-element-9e49443 .blog-inner-wrap { height: 100%; }


/* frvo-footer-legal-clearance 2026-07-30 : le bouton remonter (fixed, coin bas droit du thème) recouvrait la fin de « Politique de confidentialité » dans la barre basse du footer (template 40, widget 7671060). Dégagement desktop uniquement, la barre passe centrée en tablette/mobile. */
@media (min-width: 1025px) {
  .elementor-40 .elementor-element.elementor-element-7671060 { padding-right: 90px; }
}

/* frvo-footer-legal-mobile 2026-07-30 : sous 1025px la barre légale est centrée et sa fin passait sous le bouton remonter (fixed). */
@media (max-width: 1024px) {
  .elementor-40 .elementor-element.elementor-element-7671060 { padding-right: 52px; padding-left: 52px; }
}


/* frvo-recherche-2026-08-03
   1) Widget latéral : le thème met le bouton en position absolue mais le seul ancêtre
      positionné est la CARTE du widget (.widget_search), pas le champ : la loupe partait
      donc dans l'angle de la carte, sur toute sa hauteur. On ancre le bouton sur le formulaire.
   2) Zone de contenu (page de résultats) : le bouton héritait du padding générique
      `button{padding:17px 30px}` et faisait 64px de haut contre 46px pour le champ. */
.bs-sidebar .widget_search .search-form { position: relative; }
.bs-sidebar .widget_search .search-form .search-field { padding-right: 48px; }
.bs-sidebar .widget_search .search-form .search-submit {
    top: 0; right: 0; bottom: 0; left: auto;
    width: 48px;
    align-items: center;
    justify-content: center;
}
.page-content .search-form { display: flex; align-items: stretch; max-width: 520px; }
.page-content .search-form .search-field { flex: 1 1 auto; min-width: 0; }
.page-content .search-form .search-submit { flex: 0 0 auto; padding: 0 24px; }

/* frvo-pastille-categorie-2026-08-03 : le libellé était en noir sur le bleu #0077D9.
   Le thème le force via une chaîne de 6 classes visant `li a` : on la réplique en
   préfixant par l'élément body, ce qui suffit à la dépasser sans recourir à !important.
   Aligne la pastille du blog sur celle du carrousel projets (blanc sur bleu). */
body.blog .rs-blog .blog-item .blog-img .blog-meta .btm-cate li a,
body.archive .rs-blog .blog-item .blog-img .blog-meta .btm-cate li a,
body.search .rs-blog .blog-item .blog-img .blog-meta .btm-cate li a,
body.single .rs-blog .blog-item .blog-img .blog-meta .btm-cate li a,
body .rs-blog .blog-item .blog-img .blog-meta .btm-cate li a { color: #FFFFFF; }

/* frvo-cartes-services 2026-08-03
   Le style7 du thème n'a AUCUN effet de survol quand la carte n'a pas d'image,
   et seul le titre était cliquable. On rend la carte entière cliquable et réactive.
   1) Lien étiré : le lien du titre couvre le widget, qui occupe 363 des 365 px de la
      carte. Aucun lien imbriqué n'est créé, donc le clavier et les lecteurs d'écran
      continuent d'annoncer un seul lien, correctement libellé. */
.rs-addon-services.style7,
.rs-addon-services.style7 .services-inner { position: static; }

.rs-addon-services.style7 .services-title .title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* un éventuel bouton de la carte reste cliquable par-dessus la zone étirée */
.rs-addon-services.style7 .services-btn,
.rs-addon-services.style7 .btn-part {
    position: relative;
    z-index: 3;
}

/* Le :has() exige la presence du lien de titre : une carte sans lien (les garanties
   de la page Le Studio) ne doit ni prendre le curseur de clic ni se soulever. */

/* 2) Effet de survol : léger soulèvement, halo bleu FRVO, bordure qui s'allume. */
.e-con:has(> .elementor-element > .elementor-widget-container > .rs-addon-services.style7 .services-title .title a) {
    transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease, border-color .35s ease;
    cursor: pointer;
    will-change: transform;
}
.e-con:has(> .elementor-element > .elementor-widget-container > .rs-addon-services.style7 .services-title .title a):hover {
    transform: translateY(-6px);
    border-color: #0077D9;
    box-shadow: 0 22px 46px -18px rgba(0, 119, 217, .55);
}
/* le theme pose overflow:hidden sur .media_wrap, utile pour ses variantes a image
   clippee ; sans image il rognait l'icone des qu'elle grandissait. */
.rs-addon-services.style7 .clip-no .media_wrap { overflow: visible; }

/* le zoom porte sur le SVG lui-meme : .icon_style est un bloc pleine largeur, et
   un scale centre sur ce bloc chassait l'icone hors du cadre sur les cartes larges. */
.rs-addon-services.style7 .icon_style > svg,
.rs-addon-services.style7 .services-title .title a {
    transition: transform .35s cubic-bezier(.2, .7, .3, 1), color .35s ease;
}
.e-con:has(> .elementor-element > .elementor-widget-container > .rs-addon-services.style7 .services-title .title a):hover .icon_style > svg { transform: scale(1.08); }
.e-con:has(> .elementor-element > .elementor-widget-container > .rs-addon-services.style7 .services-title .title a):hover .services-title .title a { color: #0077D9; }

/* 3) Accessibilité : focus clavier visible, et mouvement coupé si l'utilisateur
      a demandé à réduire les animations. */
.rs-addon-services.style7 .services-title .title a:focus-visible::after {
    outline: 2px solid #0077D9;
    outline-offset: 4px;
    border-radius: 20px;
}
@media (prefers-reduced-motion: reduce) {
    .e-con:has(> .elementor-element > .elementor-widget-container > .rs-addon-services.style7 .services-title .title a),
    .e-con:has(> .elementor-element > .elementor-widget-container > .rs-addon-services.style7 .services-title .title a):hover,
    .e-con:has(> .elementor-element > .elementor-widget-container > .rs-addon-services.style7 .services-title .title a):hover .icon_style > svg {
        transform: none;
        transition: box-shadow .2s ease, border-color .2s ease;
    }
}

/* frvo-fil-ariane 2026-08-03
   Le chevron du fil d'Ariane est un SVG inline du theme avec fill="#B3DE4F" en dur,
   le vert olive de la demo. C'est un attribut de presentation : la moindre regle CSS
   le surcharge, pas besoin de !important. Present sur toutes les pages internes. */
.breadcrumbs-icon svg path,
.breadcrumb-area .breadcrumbs-icon svg path { fill: #0077D9; }

/* frvo-portfolio-zoom 2026-08-03
   Au survol, le theme applique scale(1.1) a l'image de la vignette. Son cadre
   .portfolio-img est en overflow:visible : l'image debordait de 17px en haut et en bas,
   et comme un transform cree un contexte d'empilement, elle passait AU-DESSUS du titre
   et lui coupait le sommet. On contient le zoom dans le cadre, comportement attendu
   d'un zoom de vignette. */
.rs-portfolio-style6 .portfolio-img,
.portfolio-filter .portfolio-item .portfolio-img {
    overflow: hidden;
}

/* ===== FRVO mega-menu Outils (2026-08-06) : CSS pur, aucun asset ajoute,
   icones = police Remix deja chargee, ciblage par href (stable) ===== */
@media (min-width:1025px){
.frvo-megamenu>.sub-menu{display:grid!important;grid-template-columns:minmax(200px,1fr) minmax(200px,1fr) minmax(215px,auto);grid-template-rows:repeat(4,auto);grid-auto-flow:column;gap:2px 10px;width:auto!important;min-width:645px;left:auto!important;right:0!important;padding:16px!important;}
.frvo-megamenu>.sub-menu>li{position:relative;border:0!important;}
.frvo-megamenu>.sub-menu>li>a{display:flex!important;flex-direction:column;align-items:flex-start;gap:1px;padding:9px 12px 9px 46px!important;position:relative;border-radius:8px;line-height:1.25;}
.frvo-megamenu>.sub-menu>li>a:hover{background:rgba(255,255,255,.06);}
.frvo-megamenu>.sub-menu>li>a>em{display:none!important;}
.frvo-megamenu>.sub-menu>li>a::before{font-family:'remixicon'!important;position:absolute;left:12px;top:10px;font-size:22px;font-weight:normal;color:#78B6E2;line-height:1;}
.frvo-megamenu>.sub-menu>li>a::after{position:static!important;inset:auto!important;width:auto!important;height:auto!important;background:none!important;transform:none!important;margin-top:2px;font-size:12px;font-weight:400;color:rgba(255,255,255,.55);text-transform:none;letter-spacing:0;opacity:1!important;}
.frvo-megamenu .sub-menu a[href$="/script-timer"]::before{content:"\f215";}
.frvo-megamenu .sub-menu a[href$="/script-timer"]::after{content:"durée du script";}
.frvo-megamenu .sub-menu a[href$="/script-analyzer"]::before{content:"\f439";}
.frvo-megamenu .sub-menu a[href$="/script-analyzer"]::after{content:"analyse de script";}
.frvo-megamenu .sub-menu a[href$="/voice-verify"]::before{content:"\f3d9";}
.frvo-megamenu .sub-menu a[href$="/voice-verify"]::after{content:"voix IA vs humaine";}
.frvo-megamenu .sub-menu a[href$="/sync-lab"]::before{content:"\f226";}
.frvo-megamenu .sub-menu a[href$="/sync-lab"]::after{content:"timing de traduction";}
.frvo-megamenu .sub-menu a[href$="/voice-coach"]::before{content:"\ef50";}
.frvo-megamenu .sub-menu a[href$="/voice-coach"]::after{content:"feedback d'interprétation";}
.frvo-megamenu .sub-menu a[href$="/voice-shield"]::before{content:"\f100";}
.frvo-megamenu .sub-menu a[href$="/voice-shield"]::after{content:"contrats et droits";}
.frvo-megamenu .sub-menu a[href$="/teleprompter"]::before{content:"\f235";}
.frvo-megamenu .sub-menu a[href$="/teleprompter"]::after{content:"lecture face caméra";}
.frvo-megamenu .sub-menu a[href$="/loudness"]::before{content:"\f162";}
.frvo-megamenu .sub-menu a[href$="/loudness"]::after{content:"mesure LUFS";}
.frvo-megamenu>.sub-menu>li.frvo-mm-cta{grid-column:3;grid-row:1/-1;margin-left:8px;padding:18px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;background:rgba(0,121,219,.08);border:1px solid rgba(0,121,219,.25);border-radius:12px;}
.frvo-megamenu>.sub-menu>li.frvo-mm-cta::before{content:"Des outils gratuits pour vos projets voix";display:block;font-family:'Teko','Kanit',sans-serif;font-size:22px;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;line-height:1.1;}
.frvo-megamenu>.sub-menu>li.frvo-mm-cta>a{display:inline-flex!important;flex-direction:row!important;align-items:center;gap:6px;padding:9px 20px!important;font-size:15px!important;white-space:nowrap;background:#0079DB;color:#fff!important;border-radius:999px;font-weight:600;font-size:14px;width:auto;}
.frvo-megamenu>.sub-menu>li.frvo-mm-cta>a:hover{background:#0068bd;}
.frvo-megamenu>.sub-menu>li.frvo-mm-cta>a>em{display:none!important;}
.frvo-megamenu>.sub-menu>li.frvo-mm-cta>a::before{content:none!important;}
.frvo-megamenu>.sub-menu>li.frvo-mm-cta>a::after{content:"\ea6c";font-family:'remixicon';color:#fff;font-size:16px;position:static;}
}
/* ===== FRVO mega-menu Services (2026-08-06) : meme methode que Outils, 10 services, 5 lignes ===== */
@media (min-width:1025px){
.frvo-mm-services>.sub-menu{grid-template-rows:repeat(5,auto)!important;min-width:720px;}
.frvo-megamenu .sub-menu a[href$="/agence-voix-off/"]::before{content:"\ede3";}
.frvo-megamenu .sub-menu a[href$="/agence-voix-off/"]::after{content:"casting et direction";}
.frvo-megamenu .sub-menu a[href$="/voix-off-publicite/"]::before{content:"\f385";}
.frvo-megamenu .sub-menu a[href$="/voix-off-publicite/"]::after{content:"spots TV, radio & web";}
.frvo-megamenu .sub-menu a[href$="/voix-off-corporate/"]::before{content:"\eb0f";}
.frvo-megamenu .sub-menu a[href$="/voix-off-corporate/"]::after{content:"la voix de votre marque";}
.frvo-megamenu .sub-menu a[href$="/voix-off-e-learning/"]::before{content:"\f333";}
.frvo-megamenu .sub-menu a[href$="/voix-off-e-learning/"]::after{content:"modules clairs et engageants";}
.frvo-megamenu .sub-menu a[href$="/voix-off-livre-audio/"]::before{content:"\eadb";}
.frvo-megamenu .sub-menu a[href$="/voix-off-livre-audio/"]::after{content:"narration longue durée";}
.frvo-megamenu .sub-menu a[href$="/doublage/"]::before{content:"\ed21";}
.frvo-megamenu .sub-menu a[href$="/doublage/"]::after{content:"séries, films, animation";}
.frvo-megamenu .sub-menu a[href$="/doublage-dessin-anime/"]::before{content:"\ec8d";}
.frvo-megamenu .sub-menu a[href$="/doublage-dessin-anime/"]::after{content:"voix d'enfants et personnages";}
.frvo-megamenu .sub-menu a[href$="/identite-sonore/"]::before{content:"\ec36";}
.frvo-megamenu .sub-menu a[href$="/identite-sonore/"]::after{content:"logo et signature sonore";}
.frvo-megamenu .sub-menu a[href$="/message-repondeur-professionnel/"]::before{content:"\efec";}
.frvo-megamenu .sub-menu a[href$="/message-repondeur-professionnel/"]::after{content:"accueil et répondeur pro";}
.frvo-megamenu .sub-menu a[href$="/musique-attente-telephonique/"]::before{content:"\ef85";}
.frvo-megamenu .sub-menu a[href$="/musique-attente-telephonique/"]::after{content:"occuper l'attente";}
}
/* CTA du méga-menu Services : titre distinct de celui d'Outils (2026-08-07) */
.frvo-megamenu.frvo-mm-services>.sub-menu>li.frvo-mm-cta::before{content:"Un projet voix-off en tête ?";}

/* frvo-langues 2026-08-07
   Vignettes video du carrousel des versions linguistiques. Le widget bride la largeur
   de l'image, d'ou l'ecran minuscule perdu dans le volet : on force l'image a remplir
   sa boite, on pose un voile, un bouton de lecture et le libelle de langue. */
.frvo-langues .content-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    display: block !important;
    width: 100%;
    height: 100%;
    padding: 0 !important;
}
/* les autres enfants du volet (description, bouton) ne doivent plus occuper d'espace */
.frvo-langues .content-wrapper > *:not(.post-img):not(h2):not(h3):not(.title) { display: none !important; }
.frvo-langues .content-wrapper .post-img {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    flex: 1 1 100% !important;
    margin: 0 !important;
}
.frvo-langues .content-wrapper img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    /* la maquette est en 4:3 avec du noir sous le socle, le volet est plus large que haut :
       le recadrage centre laissait ce noir en bas. On remonte le point de cadrage. */
    object-position: center 38%;
    display: block;
    /* l'ecran touchait le bord haut du volet : on le reduit de 15% pour lui donner de l'air.
       Le fond du volet est noir comme celui de la maquette, le raccord est invisible. */
    transform: scale(.85);
    transform-origin: center center;
    transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.frvo-langues .content-wrapper:hover img { transform: scale(.89); }

/* voile : la vignette reste lisible et le bouton ressort */
.frvo-langues .content-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.30) 55%, rgba(0,0,0,.72) 100%);
    transition: background .35s ease;
}
.frvo-langues .content-wrapper:hover::before {
    background: linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.66) 100%);
}

/* bouton de lecture : dit que c'est une video */
.frvo-langues .content-wrapper::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 78px; height: 78px;
    margin: -39px 0 0 -39px;
    z-index: 3;
    border-radius: 50%;
    background: #0077D9 url('data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27%23fff%27%3E%3Cpath d=%27M8 5v14l11-7z%27/%3E%3C/svg%3E') no-repeat center / 30px 30px;
    box-shadow: 0 14px 34px -10px rgba(0,0,0,.65);
    transition: transform .35s cubic-bezier(.2,.7,.3,1), background-color .35s ease;
}
.frvo-langues .content-wrapper:hover::after {
    transform: scale(1.12);
    background-color: #0086F5;
}

/* libelle de langue, en bas a gauche */
.frvo-langues .content-wrapper h2,
.frvo-langues .content-wrapper h3,
.frvo-langues .content-wrapper .title {
    position: absolute;
    left: 26px; right: 26px; bottom: 22px;
    z-index: 4;
    margin: 0;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: .3px;
    color: #fff;
    text-transform: none;
    max-width: none;
}
@media (max-width: 767px) {
    .frvo-langues .content-wrapper::after { width: 62px; height: 62px; margin: -31px 0 0 -31px; background-size: 24px 24px; }
    .frvo-langues .content-wrapper h2,
    .frvo-langues .content-wrapper h3,
    .frvo-langues .content-wrapper .title { left: 18px; right: 18px; bottom: 16px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .frvo-langues .content-wrapper img,
    .frvo-langues .content-wrapper::after { transition: none; }
    .frvo-langues .content-wrapper:hover img { transform: scale(.85); }
}

/* frvo-grille-langues 2026-08-07
   Variante grille des versions linguistiques : l'originale en grand, les 4 localisees
   en 2x2. Remplace le carrousel horizontal, qui mangeait ~4800px de hauteur de page
   pour 5 vignettes et empechait de comparer les versions d'un coup d'oeil. */
.elementor-element-grlsec01 > .e-con-inner > .elementor-element { position: relative; overflow: hidden; border-radius: 22px; background: #000; }
.elementor-element-grlsec01 > .e-con-inner > .elementor-element .elementor-widget-image,
.elementor-element-grlsec01 > .e-con-inner > .elementor-element .elementor-widget-image .elementor-widget-container,
.elementor-element-grlsec01 > .e-con-inner > .elementor-element figure, .elementor-element-grlsec01 > .e-con-inner > .elementor-element a { display: block; margin: 0; line-height: 0; }
.elementor-element-grlsec01 > .e-con-inner > .elementor-element img {
    width: 100%; height: 100%; display: block;
    object-fit: contain;
    object-position: center center;
    aspect-ratio: 4 / 3;
    transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.elementor-element-grlsec01 > .e-con-inner > .elementor-element:first-child img { aspect-ratio: 4 / 3; }
.elementor-element-grlsec01 > .e-con-inner > .elementor-element:hover img { transform: scale(1.04); }

/* voile pour la lisibilite du libelle */
.elementor-element-grlsec01 > .e-con-inner > .elementor-element::before {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.22) 55%, rgba(0,0,0,.74) 100%);
    transition: background .35s ease;
}
.elementor-element-grlsec01 > .e-con-inner > .elementor-element:hover::before { background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.12) 55%, rgba(0,0,0,.68) 100%); }

/* bouton de lecture */
.elementor-element-grlsec01 > .e-con-inner > .elementor-element::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 74px; height: 74px; margin: -37px 0 0 -37px; z-index: 3; pointer-events: none;
    border-radius: 50%;
    background: #0077D9 url('data:image/svg+xml;charset=utf8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27%23fff%27%3E%3Cpath d=%27M8 5v14l11-7z%27/%3E%3C/svg%3E') no-repeat center / 28px 28px;
    box-shadow: 0 14px 34px -10px rgba(0,0,0,.65);
    transition: transform .35s cubic-bezier(.2,.7,.3,1), background-color .35s ease;
}
.elementor-element-grlsec01 > .e-con-inner > .elementor-element:first-child::after { width: 92px; height: 92px; margin: -46px 0 0 -46px; background-size: 34px 34px; }
.elementor-element-grlsec01 > .e-con-inner > .elementor-element:hover::after { transform: scale(1.12); background-color: #0086F5; }

/* libelle langue et marche */
.elementor-element-grlsec01 > .e-con-inner > .elementor-element .elementor-widget-heading {
    position: absolute; left: 24px; right: 24px; bottom: 18px; z-index: 4; margin: 0;
}
.elementor-element-grlsec01 > .e-con-inner > .elementor-element .elementor-widget-heading .elementor-heading-title {
    font-size: 19px; line-height: 1.25; color: #fff; margin: 0; text-transform: uppercase; letter-spacing: .4px;
}
.elementor-element-grlsec01 > .e-con-inner > .elementor-element:first-child .elementor-widget-heading .elementor-heading-title { font-size: 24px; }
@media (max-width: 767px) {
    .elementor-element-grlsec01 > .e-con-inner > .elementor-element::after, .elementor-element-grlsec01 > .e-con-inner > .elementor-element:first-child::after { width: 58px; height: 58px; margin: -29px 0 0 -29px; background-size: 22px 22px; }
    .elementor-element-grlsec01 > .e-con-inner > .elementor-element .elementor-widget-heading { left: 16px; right: 16px; bottom: 13px; }
    .elementor-element-grlsec01 > .e-con-inner > .elementor-element .elementor-widget-heading .elementor-heading-title,
    .elementor-element-grlsec01 > .e-con-inner > .elementor-element:first-child .elementor-widget-heading .elementor-heading-title { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
    .elementor-element-grlsec01 > .e-con-inner > .elementor-element img, .elementor-element-grlsec01 > .e-con-inner > .elementor-element::after { transition: none; }
    .elementor-element-grlsec01 > .e-con-inner > .elementor-element:hover img { transform: none; }
}

/* frvo-grille-langues : reglages d'espacement 2026-08-07
   L'ecran doit se lire en entier (contain + ratio identique a la maquette) et les
   vignettes doivent respirer. La grande est ramenee a 62% et centree pour l'equilibre. */
.elementor-element-grlsec01 > .e-con-inner { gap: 46px 46px !important; }
.elementor-element-grlsec01 > .e-con-inner > .elementor-element:first-child {
    width: 62% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.elementor-element-grlsec01 > .e-con-inner > .elementor-element { background: #050505; }
/* la largeur doit tenir compte de l'ecart : 48,5% + 48,5% + 46px depassait 100%,
   les vignettes basculaient donc en une seule colonne. */
.elementor-element-grlsec01 > .e-con-inner > .elementor-element:not(:first-child) { width: calc(50% - 23px) !important; }
@media (max-width: 767px) { .elementor-element-grlsec01 > .e-con-inner > .elementor-element:not(:first-child) { width: 100% !important; } }
@media (max-width: 767px) {
    .elementor-element-grlsec01 > .e-con-inner { gap: 26px 26px !important; }
    .elementor-element-grlsec01 > .e-con-inner > .elementor-element:first-child { width: 100% !important; }
}

/* le libelle etait cale a gauche du conteneur alors que l'ecran est centre dans
   l'image : il flottait dans le noir sans relation avec le sujet. On le centre. */
.elementor-element-grlsec01 > .e-con-inner > .elementor-element .elementor-widget-heading { left: 18px !important; right: 18px !important; }
.elementor-element-grlsec01 > .e-con-inner > .elementor-element .elementor-widget-heading .elementor-heading-title { text-align: center; }


/* frvo-grille-langues : geometrie variable 2026-08-08
   Le meme bloc sert des projets a 1 a 5 vignettes. Les regles :first-child plus haut
   imposent une vignette dominante a 62 pourcent, ce qui n'a de sens qu'a 5 (1 + 2x2)
   ou a 1 seule vignette. Ces requetes de quantite neutralisent la dominante a 2, 3 et 4.
   TOUT est scope en min-width 768px : sans ce scope, la specificite de
   :first-child:nth-last-child(n) ecrase les regles mobile posees plus haut. */
@media (min-width: 768px) {
    .elementor-element-grlsec01 > .e-con-inner > .elementor-element:first-child:nth-last-child(2),
    .elementor-element-grlsec01 > .e-con-inner > .elementor-element:first-child:nth-last-child(2) ~ .elementor-element,
    .elementor-element-grlsec01 > .e-con-inner > .elementor-element:first-child:nth-last-child(4),
    .elementor-element-grlsec01 > .e-con-inner > .elementor-element:first-child:nth-last-child(4) ~ .elementor-element {
        width: calc(50% - 23px) !important; margin-left: 0 !important; margin-right: 0 !important;
    }
    .elementor-element-grlsec01 > .e-con-inner > .elementor-element:first-child:nth-last-child(3),
    .elementor-element-grlsec01 > .e-con-inner > .elementor-element:first-child:nth-last-child(3) ~ .elementor-element {
        width: calc(33.333% - 31px) !important; margin-left: 0 !important; margin-right: 0 !important;
    }
    /* la dominante emportait aussi un bouton de lecture et un libelle plus grands :
       on les ramene au format commun des que la vignette n'est plus dominante. */
    .elementor-element-grlsec01 > .e-con-inner > .elementor-element:first-child:nth-last-child(2)::after,
    .elementor-element-grlsec01 > .e-con-inner > .elementor-element:first-child:nth-last-child(3)::after,
    .elementor-element-grlsec01 > .e-con-inner > .elementor-element:first-child:nth-last-child(4)::after {
        width: 74px; height: 74px; margin: -37px 0 0 -37px; background-size: 28px 28px;
    }
    .elementor-element-grlsec01 > .e-con-inner > .elementor-element:first-child:nth-last-child(2) .elementor-widget-heading .elementor-heading-title,
    .elementor-element-grlsec01 > .e-con-inner > .elementor-element:first-child:nth-last-child(3) .elementor-widget-heading .elementor-heading-title,
    .elementor-element-grlsec01 > .e-con-inner > .elementor-element:first-child:nth-last-child(4) .elementor-widget-heading .elementor-heading-title {
        font-size: 19px;
    }
}


/* frvo-cartes-realisations 2026-08-08
   Trois defauts corriges sur les cartes de /realisations/ :
   1. le titre touchait l'image du dessus a ZERO pixel (mesure), d'ou l'impression de colle ;
   2. le rendu de l'extrait produit des <p> VIDES (30 sur la grille) qui gonflaient l'ecart
      titre / description sans qu'on voie pourquoi ;
   3. le bouton rond se repetait a l'identique 15 fois et alourdissait chaque bloc de texte.
   Il laisse place a une fleche qui n'apparait qu'au survol, DANS l'image. La carte reste
   cliquable par son visuel et par son titre, donc rien n'est perdu en navigation. */
.portfolio-content{ padding-top: 30px; }
h3.p-title{ margin-bottom: 14px; }
.portfolio-inner p:empty{ display: none; margin: 0; }

/* le bouton repete disparait. La regle du theme est .portfolio-filter .portfolio-read-more
   (specificite 0,2,0), il faut donc au moins la meme pour la neutraliser sans !important. */
.portfolio-filter .portfolio-read-more{ display: none; }

/* l'image respire et se rapproche au survol */
.portfolio-img{ position: relative; overflow: hidden; }
.portfolio-img img{ transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.portfolio-item:hover .portfolio-img img{ transform: scale(1.045); }

/* la fleche, en bas a droite de l'image */
.portfolio-img::after{
    content: ""; position: absolute; right: 20px; bottom: 20px; width: 52px; height: 52px;
    border-radius: 50%; z-index: 3; pointer-events: none;
    background: #0077D9 url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
    box-shadow: 0 14px 34px -10px rgba(0,0,0,.7);
    opacity: 0; transform: translateY(10px) scale(.9);
    transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.3,1);
}
.portfolio-item:hover .portfolio-img::after{ opacity: 1; transform: none; }

/* sans survol possible au doigt, la fleche reste visible en mobile */
@media (max-width: 991px){
    .portfolio-img::after{ opacity: 1; transform: none; width: 44px; height: 44px; right: 14px; bottom: 14px; background-size: 17px 17px; }
    .portfolio-content{ padding-top: 22px; }
}

@media (prefers-reduced-motion: reduce){
    .portfolio-img img, .portfolio-img::after{ transition: none; }
    .portfolio-item:hover .portfolio-img img{ transform: none; }
}


/* frvo-tags-langue 2026-08-08 : les langues sous chaque carte de /realisations/.
   Rendues cote serveur par frvo_langues_sur_cartes(), donc presentes dans le HTML.
   ATTENTION : ne pas nommer cette classe .frvo-langues, deja prise par le carrousel
   de versions linguistiques du 2026-08-07.
   Volontairement discretes : sur 15 projets, 13 sont en francais seul. Le contraste
   fait justement ressortir Skull Shaver (4 langues) et PromoPeche (2). */
.frvo-tags-langue{ display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; }
.frvo-tags-langue span{
    font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    line-height: 1; padding: 6px 12px; border-radius: 999px;
    color: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.18);
    transition: color .3s ease, border-color .3s ease;
}
.portfolio-item:hover .frvo-tags-langue span{ color: #fff; border-color: rgba(255,255,255,.42); }

/* le site a un mode clair (body.scheme-light) : sans ca les tags disparaissent */
body.scheme-light .frvo-tags-langue span{ color: rgba(0,0,0,.6); border-color: rgba(0,0,0,.18); }
body.scheme-light .portfolio-item:hover .frvo-tags-langue span{ color: #000; border-color: rgba(0,0,0,.42); }


/* frvo-megamenu-centrage 2026-08-08
   Le panneau etait ancre right:0 sur son item : son bord DROIT s'alignait sur
   l'item et ses ~670px partaient vers la gauche. Mesure a 1600px de viewport,
   le panneau Services commencait a -45px : il sortait de l'ecran.
   Regle retenue : chaque menu est ancre du cote qui le garde dans l'ecran.
   SERVICES est a gauche du centre de la nav, on le CENTRE sous son item.
   OUTILS est a droite, on garde l'ancrage a droite : le centrer le ferait
   deborder de 177px a 1280px de large (mesure).
   NB : on utilise la propriete translate et NON transform, parce que le theme
   applique transform: scaleY() pour l'animation d'ouverture et l'ecraserait. */
.frvo-megamenu{ position: relative; }
.frvo-mm-services > .sub-menu{
    left: 50% !important;
    right: auto !important;
    translate: -50% 0;
    max-width: calc(100vw - 40px);
}

/* frvo-megamenu-etroit 2026-08-08
   A 1100px de viewport, le panneau Outils (669px) debordait de 125px a gauche :
   defaut anterieur au centrage de Services, la nav se comprime et l'item remonte.
   On resserre colonnes, ecart et marges sous 1280px : 669 -> 528px mesures,
   les deux menus tiennent alors dans l'ecran SANS masquer le bloc CTA. */
@media (max-width: 1279px){
    .frvo-megamenu > .sub-menu{
        min-width: 0 !important;
        grid-template-columns: minmax(160px,1fr) minmax(160px,1fr) minmax(170px,auto) !important;
        gap: 2px 6px !important;
        padding: 12px !important;
    }
    .frvo-mm-services > .sub-menu{ min-width: 0 !important; }
    .frvo-megamenu > .sub-menu > li > a{ padding: 7px 8px 7px 38px !important; font-size: 14px; }
}

/* frvo-mm-cta-fit 2026-08-08 : le bouton remplit la boite bleue et passe a la ligne si besoin, au lieu de deborder du cadre aux largeurs intermediaires. */
.frvo-megamenu>.sub-menu>li.frvo-mm-cta>a{width:100%!important;justify-content:center!important;text-align:center;white-space:normal!important;padding:9px 12px!important;font-size:13px!important;line-height:1.2;}


/* frvo-grille-dominante 2026-08-09
   A 3 vignettes, la mise en page depend du SENS, pas du nombre.
   Asmak Fish montre 3 versions linguistiques du meme film : poids egal, 3 colonnes.
   LEGO DUPLO montre la compilation des 10 titres PUIS deux extraits : le tout et
   ses parties, donc hierarchie, comme Skull Shaver. On reactive ici la vignette
   dominante que la requete de quantite a 3 avait neutralisee.
   Ciblage par la classe de corps postid-XXXX que WordPress pose sur les singuliers,
   parce qu'Elementor ne sort PAS les classes _css_classes sur les conteneurs. */
@media (min-width: 768px){
    body.postid-22166 .elementor-element-grlsec01 > .e-con-inner > .elementor-element:first-child{
        width: 62% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    body.postid-22166 .elementor-element-grlsec01 > .e-con-inner > .elementor-element:first-child:nth-last-child(3) ~ .elementor-element{
        width: calc(50% - 23px) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* la dominante retrouve son gros bouton et son grand libelle */
    body.postid-22166 .elementor-element-grlsec01 > .e-con-inner > .elementor-element:first-child::after{ width: 92px; height: 92px; margin: -46px 0 0 -46px; background-size: 34px 34px; }
    body.postid-22166 .elementor-element-grlsec01 > .e-con-inner > .elementor-element:first-child .elementor-widget-heading .elementor-heading-title{ font-size: 24px; }
}


/* Asmak Fish : dominante + 2 (comme LEGO DUPLO), meme mecanique postid car Elementor ne sort pas _css_classes */
@media (min-width: 768px){
    body.postid-22161 .elementor-element-grlsec01 > .e-con-inner > .elementor-element:first-child{
        width: 62% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    body.postid-22161 .elementor-element-grlsec01 > .e-con-inner > .elementor-element:first-child:nth-last-child(3) ~ .elementor-element{
        width: calc(50% - 23px) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* la dominante retrouve son gros bouton et son grand libelle */
    body.postid-22161 .elementor-element-grlsec01 > .e-con-inner > .elementor-element:first-child::after{ width: 92px; height: 92px; margin: -46px 0 0 -46px; background-size: 34px 34px; }
    body.postid-22161 .elementor-element-grlsec01 > .e-con-inner > .elementor-element:first-child .elementor-widget-heading .elementor-heading-title{ font-size: 24px; }
}


/* ==== FRVO-CHARTE-INDEPENDANTE (2026-08-10) ====
 Les variables de marque sont normalement publiees par framework/custom.php du theme parent,
 fichier qui n est charge QUE si la licence Blunor est active. Le changement de domaine a vide
 la cle et l API de RS Theme refuse la reactivation (repond duplicate alors que le tableau de
 bord affiche 0/1). Ces trois variables reprennent EXACTEMENT les valeurs du Personnalisateur
 (blunor_primary_color / blunor_secondary_color) pour que la charte ne depende plus de la licence.
 A conserver meme apres reactivation : custom.php ecrit plus tard dans le head et reprendra la main. */
:root{
  --primaryColor: #0077D9;
  --primaryColorRGB: 0,119,217;
  --secondaryColor: #78B6E2;
}


/* Footer : orbes ondes-audio a -10% (283px -> 255px) */
@media (min-width: 768px){
    .elementor-element-47fe0e9 img.rs-multi-image,
    .elementor-element-6fa2cbd img.rs-multi-image { width: 183px !important; height: auto !important; }
}