/*
Theme Name: FOCUS COM
Theme URI: https://focus-gn.com
Author: Serge Thaddée
Author URI: https://focus-gn.com
Description: Thème du site FOCUS COM — agence de communication, marketing événementiel, relations publiques et production audiovisuelle. Conçu et développé par Serge Thaddée. Focus sur l'essentiel.
Version: 1.5.1
Template: avista
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: focuscom
*/

/* ===================================================================
   FOCUS COM — Feuille de marque
   -------------------------------------------------------------------
   Ce fichier ne modifie JAMAIS le thème Avista.
   Il se contente de redéfinir par-dessus. Les mises à jour d'Avista
   ne pourront jamais effacer ce qui est écrit ici.

   SOMMAIRE
   1. Couleurs de la charte
   2. Polices de la charte
   3. Titres et textes
   4. Retouches ponctuelles
   =================================================================== */


/* ===================================================================
   1. COULEURS DE LA CHARTE
   -------------------------------------------------------------------
   Avista utilise 3 variables de couleur, réutilisées 173 fois dans
   tout le thème. On les redéfinit ici : tout le site bascule en bleu.
   =================================================================== */

:root {

  /* Bleu FOCUS COM — couleur principale */
  --as-clr-pr-1: #0064D2;

  /* Bleu nuit FOCUS COM — couleur secondaire */
  --as-clr-pr-3: #042A63;

  /* Variable utilisée par le fichier "companion" du thème */
  --theme-color: #0064D2;

  /* Dégradé autorisé par la charte (bleu nuit -> bleu -> bleu nuit) */
  --as-clr-gd-3: linear-gradient(130deg, var(--as-clr-pr-3) 21%, var(--as-clr-pr-1) 58%, var(--as-clr-pr-3) 100%);

  /* Bleus utilitaires — pour les fonds clairs et les bordures */
  --fc-blue-050: #EAF3FE;
  --fc-blue-100: #CFE3FB;
  --fc-blue-700: #0050A8;

}


/* ===================================================================
   2. POLICES DE LA CHARTE
   -------------------------------------------------------------------
   Avista prévoit 3 polices : Inter (textes), Geist Mono (accents),
   Mona Sans (certains titres).
   La charte FOCUS COM n'en autorise que 2 : Mona Sans et Montserrat.
   On remplace donc Inter et Geist Mono par Montserrat.
   Le chargement des polices est géré dans functions.php.
   =================================================================== */

:root {

  /* Police de texte -> Montserrat (charte) */
  --as-font-1: "Montserrat", -apple-system, "Segoe UI", sans-serif;

  /* Ancienne police d'accent -> Montserrat également */
  --as-font-2: "Montserrat", -apple-system, "Segoe UI", sans-serif;

  /* Police de titre -> Mona Sans (charte) */
  --as-font-3: "Mona Sans", -apple-system, "Segoe UI", sans-serif;

}


/* ===================================================================
   3. TITRES ET TEXTES
   -------------------------------------------------------------------
   ATTENTION — point technique important :
   Dans Avista, les titres n'ont PAS de police propre. Ils héritent
   simplement de la police du corps de texte. Redéfinir les variables
   ne suffit donc pas : sans les règles ci-dessous, TOUS les titres
   seraient en Montserrat au lieu de Mona Sans.
   =================================================================== */

/* Tous les titres -> Mona Sans SemiExpanded */
h1, h2, h3, h4, h5, h6,
.as-h-1, .as-h-2,
.as-sec-title-1, .as-sec-title-2,
.as-subtitle-1, .as-subtitle-2, .as-subtitle-3, .as-subtitle-4,
.elementor-heading-title {
  font-family: var(--as-font-3);
  font-stretch: 112.5%;      /* = SemiExpanded */
  font-variation-settings: "wdth" 112.5;
}

/* Corps de texte -> Montserrat */
body,
p, li, td,
.as-p-1, .as-p-2 {
  font-family: var(--as-font-1);
  font-stretch: normal;
  font-variation-settings: normal;
}

/* Les boutons du thème utilisent Mona Sans : on garde, en SemiExpanded */
.as-pr-btn-2,
.sr-offcanvas-btn-2 {
  font-stretch: 112.5%;
  font-variation-settings: "wdth" 112.5;
}


/* ===================================================================
   4. RETOUCHES PONCTUELLES
   -------------------------------------------------------------------
   Zone de travail. C'est ici qu'on corrige les détails visibles
   une fois le site en ligne.
   =================================================================== */

/* --- SVG à couleur figée ------------------------------------------
   Certaines icônes du thème ont leur orange écrit DANS l'image,
   pas dans le CSS. Les variables ne les atteignaient pas.
   Testé en direct sur focus-gn.com : 16 taches orange -> 0.
   ------------------------------------------------------------------ */

[fill="rgb(253, 63, 0)"],
[fill="#fd3f00"],
[fill="#FD3F00"] {
  fill: var(--as-clr-pr-1);
}

[fill="rgb(251, 13, 31)"],
[fill="#fb0d1f"],
[fill="#FB0D1F"] {
  fill: var(--as-clr-pr-3);
}

[stroke="rgb(253, 63, 0)"],
[stroke="#fd3f00"],
[stroke="#FD3F00"] {
  stroke: var(--as-clr-pr-1);
}

/* Bouton « retour en haut » : bordure restée orange */
.wa-back-to-top,
.wa_backToTop {
  border-color: rgba(0, 100, 210, 0.1) !important;
}

/* Logo : taille minimale de 120 px imposée par la charte */
.header-logo img,
.logo img {
  min-width: 120px;
  height: auto;
}

/* La charte interdit toute ombre sur le logo */
.header-logo img,
.logo img {
  box-shadow: none !important;
  filter: none !important;
}

/* ===== FOCUS COM — Recolorisation charte (retirable : supprimer ce bloc) ===== */
/* Grands titres du theme -> bleu vif */
.elementor .as-h-1, .elementor .as-h-2,
.elementor .as-h-1 a, .elementor .as-h-2 a { color:#0064D2; }
/* Exception : compteurs chiffres (le theme les met en gris tres clair) */
.elementor .as-h-1.number.tx-counter { color:#0064D2; }

/* Grandes sections/blocs noirs -> bleu nuit */
.as-cta-1-bg, .as-cta-2-projects, .as-cta-2-form-wrap,
.as-services-4-area, .as-faqs-1-area, .as-blog-1-left,
.as-footer-1-area, .as-h-1.item-title.tx-service-title { background-color:#042A63 !important; }

/* Titres de ces sections sombres : restent blancs (lisibilite) */
.as-cta-1-bg .as-h-1, .as-cta-1-bg .as-h-2, .as-cta-1-bg .as-h-1 a,
.as-cta-2-projects .as-h-1, .as-cta-2-projects .as-h-2, .as-cta-2-projects .as-h-1 a,
.as-cta-2-form-wrap .as-h-1, .as-cta-2-form-wrap .as-h-2, .as-cta-2-form-wrap .as-h-1 a,
.as-services-4-area .as-h-1, .as-services-4-area .as-h-2, .as-services-4-area .as-h-1 a,
.as-faqs-1-area .as-h-1, .as-faqs-1-area .as-h-2, .as-faqs-1-area .as-h-1 a,
.as-blog-1-left .as-h-1, .as-blog-1-left .as-h-2, .as-blog-1-left .as-h-1 a,
.as-footer-1-area .as-h-1, .as-footer-1-area .as-h-2, .as-footer-1-area .as-h-1 a,
.as-h-1.item-title.tx-service-title, .as-h-1.item-title.tx-service-title a { color:#ffffff !important; }

/* Badges d'etapes (01-02-03-04) -> bleu vif, chiffre blanc */
.tx-service-step.number,
h4.as-h-2.number.tx-service-step { background-color:#0064D2 !important; color:#ffffff !important; }

/* Boutons noirs -> bleu vif */
.as-pr-btn-1, .as-pr-btn-2, .as-pr-btn-3 { background-color:#0064D2 !important; }

/* Porte-icones noirs -> bleu vif */
span.icon, .icon-elm { background-color:#0064D2 !important; }

/* Glyphes d'icones -> bleu vif */
.elementor-icon i, .elementor-icon svg { color:#0064D2; fill:#0064D2; }
/* ===== fin recolorisation charte ===== */

/* ===== FOCUS COM — Section Equipe : bandeau des noms (retirable) ===== */
/* Le theme impose un bandeau noir en dur dans avista-core.css : on le passe en bleu nuit */
.as-team-3-item .name { background:#0064D2; }
/* Noms en blanc : annule la recolorisation bleue globale (selecteur plus specifique) */
.elementor .as-team-3-item .name,
.elementor .as-team-3-item .name a { color:#ffffff !important; }

/* ============================================================
   BANDEAU DE FIL D'ARIANE
   Degrade de la charte + motif de vagues, sans aucune image.
   Remplace l'image de demo hebergee chez l'editeur du theme.
   ============================================================ */

.as-breadcrumb-area {
	background-color: #042A63 !important;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='0.055' d='M0,224L60,213.3C120,203,240,181,360,181.3C480,181,600,203,720,208C840,213,960,203,1080,186.7C1200,171,1320,149,1380,138.7L1440,128L1440,320L0,320Z'/%3E%3Cpath fill='%23ffffff' fill-opacity='0.04' d='M0,288L80,272C160,256,320,224,480,224C640,224,800,256,960,261.3C1120,267,1280,245,1360,234.7L1440,224L1440,320L0,320Z'/%3E%3C/svg%3E"),
		linear-gradient(118deg, #042A63 0%, #042A63 38%, #0064D2 100%) !important;
	background-repeat: no-repeat, no-repeat !important;
	background-position: bottom center, center center !important;
	background-size: 100% auto, cover !important;
}

/* ============================================================
   SECTION FAQ — cartes de questions
   Le fond de section reste bleu nuit. Seuls les blocs noirs
   des questions passent en blanc, texte noir, titres bleus.
   ============================================================ */

.as-faqs-1-area .as-accordion-item {
	background-color: #FFFFFF !important;
	border: 1px solid rgba(255, 255, 255, .15) !important;
	border-radius: 10px;
	margin-bottom: 14px;
}

.as-faqs-1-area .as-accordion-item.active {
	box-shadow: 0 8px 28px rgba(0, 0, 0, .28);
}

.as-faqs-1-area .as-accordion-item .item-title.tx-faq-header,
.as-faqs-1-area .as-accordion-item .item-title .text,
.as-faqs-1-area .as-accordion-item .item-title .icon {
	color: #0064D2 !important;
}

.as-faqs-1-area .as-accordion-item .tx-faq-body,
.as-faqs-1-area .as-accordion-item .item-disc,
.as-faqs-1-area .as-accordion-item .tx-faq-content,
.as-faqs-1-area .as-accordion-item p {
	color: #1A1A1A !important;
}

/* ============================================================
   HERO — mot anime dans le titre
   Le titre du widget hero accepte du HTML : chaque mot en gras
   dans un span.fc-rot defile automatiquement.
   ============================================================ */

.fc-rot{position:relative;display:inline-block;vertical-align:bottom;
	height:1.15em;min-width:7ch}

.fc-rot b{position:absolute;left:0;top:0;white-space:nowrap;font-weight:inherit;
	opacity:0;transform:translateY(.38em);color:#0064D2;
	animation:fcRot 10s cubic-bezier(.2,.7,.2,1) infinite}

.fc-rot b:nth-of-type(2){animation-delay:2.5s}
.fc-rot b:nth-of-type(3){animation-delay:5s}
.fc-rot b:nth-of-type(4){animation-delay:7.5s}
.fc-rot b:nth-of-type(5){animation-delay:10s}

@keyframes fcRot{
	0%{opacity:0;transform:translateY(.38em)}
	4%,20%{opacity:1;transform:translateY(0)}
	24%{opacity:0;transform:translateY(-.38em)}
	100%{opacity:0;transform:translateY(-.38em)}
}

@media(max-width:640px){.fc-rot{min-width:100%;display:block}}
@media(prefers-reduced-motion:reduce){
	.fc-rot b{animation:none;opacity:0}
	.fc-rot b:first-of-type{opacity:1;transform:none}
}


/* ===== FOCUS COM — Positionnement de l'en-tête ===== */
/* L'en-tête pilule est en position fixed. Sans cette règle il flotte
   au milieu de l'écran au lieu de se placer en haut de page. */

header.as-header-3-area:not(.has-sticky) {
  bottom: calc(100% - 130px);
}

/* ===== Fin positionnement de l'en-tête ===== */


/* ===== FOCUS COM — Largeur de contenu élargie ===== */
/* Elementor plafonne le contenu à 1140px. Sur grand écran cela laisse
   ~750px de vide inutile. On passe à 1400px : les cartes gagnent ~23%
   de largeur et les textes tiennent en 2-3 lignes au lieu de 4.
   Au-delà de 1400px les lignes deviendraient trop longues à lire. */

@media (min-width: 1500px) {
  .e-con > .e-con-inner {
    --content-width: 1400px;
  }
}

/* ===== Fin largeur de contenu ===== */


/* ===== FOCUS COM — Titre animé (carte bleue) ===== */
/* Le titre animé remplace l'ancien titre statique de la carte.
   Valeurs relevées sur l'original : 42px / 600 / blanc / interligne 42px. */

.elementor-widget-animated-headline .elementor-headline {
  font-size: 42px;
  font-weight: 600;
  line-height: 42px;
  letter-spacing: normal;
  text-transform: none;
  text-align: left !important; /* bat la règle inline d'Elementor */
  color: #FFFFFF;
}

.elementor-widget-animated-headline .elementor-headline-plain-text,
.elementor-widget-animated-headline .elementor-headline-dynamic-text {
  font-size: 42px;
  font-weight: 600;
  line-height: 42px;
  color: #FFFFFF;
}

.elementor-widget-animated-headline .elementor-headline-dynamic-wrapper {
  line-height: 42px;
}

@media (max-width: 1024px) {
  .elementor-widget-animated-headline .elementor-headline,
  .elementor-widget-animated-headline .elementor-headline-plain-text,
  .elementor-widget-animated-headline .elementor-headline-dynamic-text {
    font-size: 34px;
    line-height: 36px;
  }
}

@media (max-width: 767px) {
  .elementor-widget-animated-headline .elementor-headline,
  .elementor-widget-animated-headline .elementor-headline-plain-text,
  .elementor-widget-animated-headline .elementor-headline-dynamic-text {
    font-size: 28px;
    line-height: 32px;
  }
}

/* ===== Fin titre animé ===== */


/* ===== FOCUS COM — Vagues de séparation ===== */
/* Motif signature de la charte. Classe à poser sur toute section
   au fond #E8F1FC : la vague se dessine au-dessus et en dessous,
   et assure la transition avec le blanc voisin. */

.fc-vague,
.elementor-244 .elementor-element-cb08e69,
.elementor-244 .elementor-element-111a949 {
  position: relative;
}

.fc-vague::before,
.fc-vague::after,
.elementor-244 .elementor-element-cb08e69::before,
.elementor-244 .elementor-element-cb08e69::after,
.elementor-244 .elementor-element-111a949::before,
.elementor-244 .elementor-element-111a949::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 70px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.fc-vague::before,
.elementor-244 .elementor-element-cb08e69::before,
.elementor-244 .elementor-element-111a949::before {
  top: -69px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0,70 C240,8 520,8 760,34 C1000,60 1240,60 1440,14 L1440,70 Z' fill='%23E8F1FC'/%3E%3C/svg%3E");
}

.fc-vague::after,
.elementor-244 .elementor-element-cb08e69::after,
.elementor-244 .elementor-element-111a949::after {
  bottom: -69px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C240,62 520,62 760,36 C1000,10 1240,10 1440,56 L1440,0 Z' fill='%23E8F1FC'/%3E%3C/svg%3E");
}

@media (max-width: 767px) {
  .fc-vague::before,
  .fc-vague::after { height: 38px; }
  .fc-vague::before { top: -37px; }
  .fc-vague::after { bottom: -37px; }
}

/* ===== Fin vagues ===== */


/* ===== FOCUS COM — Respect de la réduction de mouvement ===== */
/* Les animations d'apparition se coupent pour les personnes ayant
   activé la réduction de mouvement dans leur système. */

@media (prefers-reduced-motion: reduce) {
  .elementor-invisible {
    visibility: visible !important;
    animation: none !important;
  }
}

/* ===== Fin réduction de mouvement ===== */


/* ===== FOCUS COM — Hero de l'accueil ===== */
/* Le titre animé du hero doit être nettement plus grand que celui
   de la carte bleue (page Agence). On surcharge donc la règle
   générale uniquement pour la classe fc-hero-titre. */

.fc-hero-titre .elementor-headline,
.fc-hero-titre .elementor-headline-plain-text,
.fc-hero-titre .elementor-headline-dynamic-text {
  font-size: 62px !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  color: #FFFFFF !important;
  text-align: center !important;
}

.fc-hero-titre .elementor-headline-dynamic-wrapper {
  line-height: 1.12 !important;
}

.fc-hero-titre .elementor-headline-dynamic-text {
  color: #8FC4FF !important;
}

.fc-hero-lead {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1024px) {
  .fc-hero-titre .elementor-headline,
  .fc-hero-titre .elementor-headline-plain-text,
  .fc-hero-titre .elementor-headline-dynamic-text {
    font-size: 44px !important;
  }
}

@media (max-width: 767px) {
  .fc-hero-titre .elementor-headline,
  .fc-hero-titre .elementor-headline-plain-text,
  .fc-hero-titre .elementor-headline-dynamic-text {
    font-size: 32px !important;
  }
}

/* ===== Fin hero de l'accueil ===== */


/* ===== FOCUS COM — Décor animé du hero ===== */
/* Ces styles pilotent UNIQUEMENT le décor de fond (halos, trame,
   monogramme, cercles, particules, vague). Le texte, l'image et les
   boutons du hero sont des widgets Elementor normaux, éditables
   sans toucher à ce fichier. */

.fc-hero{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(135deg,#042A63 0%,#053a86 48%,#0064D2 100%)}
.fc-hero > .e-con-inner{position:relative;z-index:2}
.fcx-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.fcx-halo{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55}
.fcx-halo-a{width:620px;height:620px;top:-190px;left:-140px;background:radial-gradient(circle,#2a8cff,transparent 68%);animation:fcxA 14s ease-in-out infinite}
.fcx-halo-b{width:520px;height:520px;bottom:-170px;right:-110px;background:radial-gradient(circle,#00d0ff,transparent 66%);animation:fcxB 17s ease-in-out infinite}
@keyframes fcxA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(70px,50px) scale(1.14)}}
@keyframes fcxB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-60px,-45px) scale(1.1)}}
.fcx-grid{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);background-size:42px 42px;-webkit-mask-image:radial-gradient(ellipse 68% 58% at 50% 45%,#000 35%,transparent 100%);mask-image:radial-gradient(ellipse 68% 58% at 50% 45%,#000 35%,transparent 100%);opacity:.5}
.fcx-mono{position:absolute;width:min(46vw,560px);top:50%;left:50%;transform:translate(-50%,-52%);opacity:.05;animation:fcxSpin 60s linear infinite}
@keyframes fcxSpin{to{transform:translate(-50%,-52%) rotate(360deg)}}
.fcx-arc{position:absolute;width:min(78vw,900px);top:50%;left:50%;transform:translate(-50%,-50%);opacity:.6;animation:fcxSpin 90s linear infinite reverse}
.fcx-orb{position:absolute;border-radius:50%;background:rgba(255,255,255,.5);box-shadow:0 0 22px rgba(255,255,255,.55)}
.fcx-o1{width:9px;height:9px;top:26%;left:16%;animation:fcxF 9s ease-in-out infinite}
.fcx-o2{width:6px;height:6px;top:66%;left:82%;animation:fcxF 11s ease-in-out infinite .8s}
.fcx-o3{width:12px;height:12px;top:78%;left:26%;opacity:.35;animation:fcxF 13s ease-in-out infinite 1.6s}
@keyframes fcxF{0%,100%{transform:translateY(0)}50%{transform:translateY(-26px)}}
.fcx-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(60px,9vw,130px)}
.fc-hero-perso img{filter:drop-shadow(0 26px 50px rgba(0,0,0,.45))}
@media(prefers-reduced-motion:reduce){.fcx-bg *{animation:none!important}}

/* ===== Fin décor du hero ===== */


/* ===== FOCUS COM — Hero décor (ciblage par identifiant) ===== */
/* 6f76a1a = conteneur hero | e9692d6 = colonne texte | b97cb99 = personnage */

.elementor-1219 .elementor-element-6f76a1a{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,#03204d 0%,#053a86 46%,#0064D2 100%);
}

/* halos + trame de points, nettement plus lisibles */
.elementor-1219 .elementor-element-6f76a1a::before{
  content:'';position:absolute;inset:-10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 14% 16%, rgba(64,158,255,.75), transparent 40%),
    radial-gradient(circle at 86% 78%, rgba(0,220,255,.55), transparent 42%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Ccircle cx='300' cy='300' r='250' fill='none' stroke='rgba(255,255,255,.16)' stroke-width='1.5' stroke-dasharray='6 14'/%3E%3Ccircle cx='300' cy='300' r='190' fill='none' stroke='rgba(255,255,255,.11)' stroke-width='1.5'/%3E%3Ccircle cx='300' cy='300' r='120' fill='none' stroke='rgba(255,255,255,.08)' stroke-width='1.5' stroke-dasharray='3 9'/%3E%3C/svg%3E"),
    radial-gradient(rgba(255,255,255,.22) 1.2px, transparent 1.2px);
  background-repeat:no-repeat,no-repeat,no-repeat,repeat;
  background-position:center,center,center,center;
  background-size:auto,auto,min(72vw,860px) min(72vw,860px),40px 40px;
  animation:fcHalo 18s ease-in-out infinite;
}
@keyframes fcHalo{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.07) rotate(1.5deg)}}

/* vague blanche de transition */
.elementor-1219 .elementor-element-6f76a1a::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;z-index:1;pointer-events:none;
  height:clamp(60px,9vw,130px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130' preserveAspectRatio='none'%3E%3Cpath d='M0,74 C240,10 520,10 760,44 C1000,78 1240,78 1440,22 L1440,130 L0,130 Z' fill='%23ffffff'/%3E%3Cpath d='M0,92 C240,34 520,34 760,64 C1000,94 1240,94 1440,44 L1440,130 L0,130 Z' fill='%23ffffff' opacity='.45'/%3E%3C/svg%3E");
  background-size:100% 100%;background-repeat:no-repeat;
}

.elementor-1219 .elementor-element-6f76a1a{min-height:auto}
.elementor-1219 .elementor-element-6f76a1a > .e-con-inner{position:relative;z-index:2;align-items:flex-end;flex-wrap:nowrap}

/* colonne texte */
.elementor-1219 .elementor-element-e9692d6{flex:0 0 58% !important;width:58% !important;max-width:58% !important;padding-bottom:40px}

/* personnage : ancré en bas, jamais plus haut que l'écran */
.elementor-1219 .elementor-element-b97cb99{flex:0 0 38% !important;width:38% !important;max-width:38% !important;align-self:flex-end}
.elementor-1219 .elementor-element-b97cb99 img{
  display:block;margin:0 auto;width:auto;max-width:100%;
  max-height:60vh !important;height:auto !important;object-fit:contain;
  filter:drop-shadow(0 30px 55px rgba(0,0,0,.5));
}

@media(max-width:1024px){
  .elementor-1219 .elementor-element-6f76a1a > .e-con-inner{flex-direction:column;align-items:center}
  .elementor-1219 .elementor-element-e9692d6{width:100%;text-align:center}
  .elementor-1219 .elementor-element-b97cb99{width:72%}
  .elementor-1219 .elementor-element-b97cb99 img{max-height:46vh}
}

@media(prefers-reduced-motion:reduce){
  .elementor-1219 .elementor-element-6f76a1a::before{animation:none}
}

/* ===== Fin hero décor ===== */


/* ===== FOCUS COM — Contraste des sections à vagues ===== */
/* Le fond d'origine (#F2F7FD) était trop proche du blanc :
   les vagues ne se voyaient pas. On passe à #E8F1FC. */

.elementor-244 .elementor-element-cb08e69,
.elementor-244 .elementor-element-111a949 {
  background-color: #E8F1FC !important;
}

/* ===== Fin contraste ===== */


/* ===== FOCUS COM — Écran de chargement ===== */
/* Le logo seul, avec une légère respiration pour que l'écran
   ne paraisse pas figé pendant le chargement. */

.as-preloader .loader_logo {
  display: inline-block;
  line-height: 0;
  animation: fcLogoPulse 1.6s ease-in-out infinite;
}

.as-preloader .loader_logo img {
  width: clamp(72px, 11vw, 130px);
  height: auto;
}

@keyframes fcLogoPulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.09); opacity: .78; }
}

@media (prefers-reduced-motion: reduce) {
  .as-preloader .loader_logo { animation: none; }
}

/* ===== Fin écran de chargement ===== */


/* ===== FOCUS COM — Bloc "Le détail" (page Services) ===== */
/* ea8f726 = section | cartes des cinq pôles.
   Sur ce site les classes CSS posées sur les conteneurs ne sont pas
   rendues : on cible donc par identifiant Elementor. */

.elementor-245 .elementor-element-ea8f726{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(160deg,#042A63 0%,#06336f 55%,#0a4a9e 100%);
}

/* halo discret + trame, pour que le bloc ne soit pas un aplat mort */
.elementor-245 .elementor-element-ea8f726::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 88% 12%, rgba(0,150,255,.35), transparent 45%),
    radial-gradient(rgba(255,255,255,.13) 1px, transparent 1px);
  background-size:auto,38px 38px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 60% 30%,#000 25%,transparent 100%);
  mask-image:radial-gradient(ellipse 80% 70% at 60% 30%,#000 25%,transparent 100%);
}

/* vague blanche en haut, transition avec la section précédente */
.elementor-245 .elementor-element-ea8f726::after{
  content:'';position:absolute;left:0;right:0;top:-1px;z-index:1;pointer-events:none;
  height:clamp(48px,7vw,110px);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 110' preserveAspectRatio='none'%3E%3Cpath d='M0,62 C240,8 520,8 760,38 C1000,68 1240,68 1440,18 L1440,0 L0,0 Z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size:100% 100%;background-repeat:no-repeat;
}

.elementor-245 .elementor-element-ea8f726 > .e-con-inner{position:relative;z-index:2}

/* cartes : léger relief au survol */
.elementor-245 .elementor-element-90aa7f3,
.elementor-245 .elementor-element-3bab88c,
.elementor-245 .elementor-element-89511f6,
.elementor-245 .elementor-element-b79c4e5,
.elementor-245 .elementor-element-e9d2719{
  transition:transform .35s cubic-bezier(.16,1,.3,1), background-color .35s ease, border-color .35s ease;
}

.elementor-245 .elementor-element-90aa7f3:hover,
.elementor-245 .elementor-element-3bab88c:hover,
.elementor-245 .elementor-element-89511f6:hover,
.elementor-245 .elementor-element-b79c4e5:hover,
.elementor-245 .elementor-element-e9d2719:hover{
  transform:translateY(-6px);
  background-color:rgba(255,255,255,.10) !important;
  border-color:rgba(143,196,255,.45) !important;
}

@media(prefers-reduced-motion:reduce){
  .elementor-245 .elementor-element-ea8f726 *{transition:none !important}
}


/* Grille du bloc : 2 cartes larges en haut, 3 en bas.
   Les largeurs personnalisées d'Elementor ne sont pas appliquées ici,
   on les impose donc explicitement. */

.elementor-245 .elementor-element-a7dbb1f{
  display:flex;flex-wrap:wrap;align-items:stretch;
}

.elementor-245 .elementor-element-90aa7f3,
.elementor-245 .elementor-element-3bab88c{
  flex:0 0 calc(50% - 11px) !important;
  max-width:calc(50% - 11px) !important;
  width:auto !important;
}

.elementor-245 .elementor-element-89511f6,
.elementor-245 .elementor-element-b79c4e5,
.elementor-245 .elementor-element-e9d2719{
  flex:0 0 calc(33.333% - 15px) !important;
  max-width:calc(33.333% - 15px) !important;
  width:auto !important;
}

@media(max-width:1024px){
  .elementor-245 .elementor-element-90aa7f3,
  .elementor-245 .elementor-element-3bab88c,
  .elementor-245 .elementor-element-89511f6,
  .elementor-245 .elementor-element-b79c4e5,
  .elementor-245 .elementor-element-e9d2719{
    flex:0 0 calc(50% - 11px) !important;
    max-width:calc(50% - 11px) !important;
  }
}

@media(max-width:767px){
  .elementor-245 .elementor-element-90aa7f3,
  .elementor-245 .elementor-element-3bab88c,
  .elementor-245 .elementor-element-89511f6,
  .elementor-245 .elementor-element-b79c4e5,
  .elementor-245 .elementor-element-e9d2719{
    flex:0 0 100% !important;
    max-width:100% !important;
  }
}

/* ===== Fin bloc Le détail ===== */