/* =====================================================================
 * Solaris — effets du design v2 qui ne peuvent pas passer par une
 * classe globale Elementor.
 *
 * Deuxieme exception a la regle « aucune feuille de style » du projet,
 * autorisee explicitement le 06/10/2026. La premiere est le curseur.
 *
 * Tout ce qui PEUT etre une classe globale EST une classe globale :
 * couleurs, espacements, typographie, mise en page, etats de survol
 * simples. Ce fichier ne contient que ce qu'Elementor ne sait pas
 * exprimer, et chaque bloc dit pourquoi il est la.
 *
 * Trois familles, et rien d'autre :
 *   1. des pseudo-elements (::selection, ::before, ::after) ;
 *   2. des selecteurs de descendance au survol (survoler le parent
 *      pour animer l'enfant) ;
 *   3. la revelation par decoupe, qu'aucun effet d'interaction
 *      Elementor ne sait faire.
 *
 * Les couleurs ne sont jamais ecrites en dur : elles reprennent les
 * variables globales du kit, pour qu'un changement de charte dans
 * Elementor se repercute ici aussi.
 * ================================================================== */

/* ---------------------------------------------------------------
 * 1. La selection de texte
 * Pseudo-element : aucune classe globale ne peut l'atteindre.
 * ------------------------------------------------------------ */
::selection      { background: var(--c-sun); color: var(--c-ink); }
::-moz-selection { background: var(--c-sun); color: var(--c-ink); }

/* ---------------------------------------------------------------
 * 2. Le grain de papier
 * Un calque fixe au-dessus de toute la page. Il lui faut un
 * pseudo-element sur le corps du document.
 * ------------------------------------------------------------ */
body.sol-v2::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:60;
  opacity:.03;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
}
/* Sur telephone, ce calque plein ecran en mode fusion coute un rendu composite
   a chaque image, pour un grain qu'on ne distingue pas a cette taille. */
@media (max-width:767px){
  body.sol-v2::after{display:none}
}

/* ---------------------------------------------------------------
 * 3. Les balayages de survol
 * Chacun a besoin d'un pseudo-element qui glisse derriere le
 * contenu. Elementor sait changer un fond au survol, pas le faire
 * entrer par la gauche.
 * ------------------------------------------------------------ */

/* boutons : le marron entre par la gauche */
.elementor .sol2-btn{position:relative;overflow:hidden;isolation:isolate}
.elementor .sol2-btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--c-ink);
  transform:scaleX(0);transform-origin:left;
  transition:transform .42s cubic-bezier(.2,.8,.2,1)
}
.elementor .sol2-btn:hover::before,
.elementor .sol2-btn:focus-visible::before{transform:scaleX(1)}

.elementor .sol2-btn-clair::before{background:var(--c-ink)}
.elementor .sol2-btn-fantome::before{background:var(--c-cream)}

/* lignes editoriales : le papier s'ouvre par la gauche */
.elementor .sol2-ligne{position:relative;isolation:isolate}
.elementor .sol2-ligne::before{
  content:"";position:absolute;inset:0 -28px;z-index:-1;background:var(--c-shell);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.2,.8,.2,1)
}
.elementor .sol2-ligne:hover::before,
.elementor .sol2-ligne:focus-visible::before{transform:scaleX(1)}
/* la variante enoncee ne reagit pas : ce ne sont pas des liens */
.elementor .sol2-lignes-texte .sol2-ligne::before{display:none}

/* ---------------------------------------------------------------
 * 4. Survoler le parent pour animer l'enfant
 * Une classe globale ne decrit qu'un element. Ces regles-la
 * demandent un selecteur de descendance.
 * ------------------------------------------------------------ */

/* la fleche et le numero avancent quand on survole la ligne */
.elementor .sol2-ligne-num,
.elementor .sol2-ligne-fl{transition:transform .45s cubic-bezier(.2,.8,.2,1),background .4s ease,border-color .4s ease}
.elementor .sol2-ligne:hover .sol2-ligne-num{transform:translateX(5px)}
.elementor .sol2-ligne:hover .sol2-ligne-fl{
  transform:translateX(5px);background:var(--c-sun);border-color:var(--c-sun)
}

/* la fleche du bouton avance */
.elementor .sol2-btn .sol2-fl{display:inline-block;transition:transform .36s cubic-bezier(.2,.8,.2,1)}
.elementor .sol2-btn:hover .sol2-fl{transform:translateX(5px)}

/* l'image du projet s'agrandit, et un eclat la traverse */
.elementor .sol2-proj-vue{position:relative;overflow:hidden}
.elementor .sol2-proj-vue img{transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s ease;filter:saturate(.92)}
.elementor .sol2-proj:hover .sol2-proj-vue img{transform:scale(1.045);filter:saturate(1.06)}
.elementor .sol2-proj-vue::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%);
  transform:translateX(-120%);transition:transform .85s cubic-bezier(.2,.8,.2,1)
}
.elementor .sol2-proj:hover .sol2-proj-vue::after{transform:translateX(120%)}

/* la carte de tarif survolee passe a l'encre, texte compris */
.elementor .sol2-carte-prix,
.elementor .sol2-carte-prix *{transition:color .42s ease,background .42s ease,border-color .42s ease}
.elementor .sol2-carte-prix:hover .sol2-prix-titre{color:var(--c-shell)}
.elementor .sol2-carte-prix:hover .sol2-montant{color:var(--c-sun)}
.elementor .sol2-carte-prix:hover .sol2-prix-unit,
.elementor .sol2-carte-prix:hover .sol2-prix-note,
.elementor .sol2-carte-prix:hover .sol2-prix-desc,
.elementor .sol2-carte-prix:hover .sol2-coche{color:var(--c-line)}

/* le soulignement du menu */
.elementor .sol2-nav-link{position:relative}
.elementor .sol2-nav-link::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--c-sun);
  transform:scaleX(0);transform-origin:left;
  transition:transform .34s cubic-bezier(.2,.8,.2,1)
}
.elementor .sol2-nav-link:hover::after,
.elementor .sol2-nav-link-on::after{transform:scaleX(1)}

/* les liens du pied de page */
.elementor .sol2-foot-link{position:relative}
.elementor .sol2-foot-link::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--c-sun);
  transform:scaleX(0);transform-origin:left;
  transition:transform .34s cubic-bezier(.2,.8,.2,1)
}
.elementor .sol2-foot-link:hover::after{transform:scaleX(1)}

/* ---------------------------------------------------------------
 * 5. Les bandes horizontales
 * Masquer la barre de defilement demande un pseudo-element
 * proprietaire. L'accroche au defilement n'existe pas non plus
 * dans les reglages d'Elementor.
 * ------------------------------------------------------------ */
.elementor .sol2-bande{scroll-snap-type:x proximity;scrollbar-width:none;cursor:grab}
.elementor .sol2-bande::-webkit-scrollbar{display:none}
.elementor .sol2-bande.sol-tire{cursor:grabbing}
.elementor .sol2-bande > *{scroll-snap-align:start}

/* ---------------------------------------------------------------
 * 6. La revelation par decoupe
 * C'est la signature du design : le contenu n'apparait pas en
 * fondu, la lumiere le decouvre de gauche a droite. Les effets
 * d'interaction d'Elementor savent faire fondu, glissement,
 * echelle et rotation — pas de decoupe.
 *
 * Tout est conditionne a la classe sol-anim posee par le script.
 * Sans script, et dans l'editeur Elementor, rien n'est masque.
 * ------------------------------------------------------------ */
html.sol-anim .sol2-rev{clip-path:inset(0 100% 0 0);opacity:.001;transform:translateY(10px)}
html.sol-anim .sol2-rev.sol-vu{
  clip-path:inset(0 0 0 0);opacity:1;transform:none;
  transition:clip-path .5s cubic-bezier(.22,.9,.24,1),
             opacity .32s ease,
             transform .5s cubic-bezier(.22,.9,.24,1);
  transition-delay:var(--sol-d,0ms)
}

/* le balayage de lumiere au chargement de l'accroche */
html.sol-anim .sol2-sweep{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.7) 48%,transparent 66%);
  transform:translateX(-110%);
  animation:sol-balaye 1.5s .15s cubic-bezier(.3,.7,.2,1) both
}
@keyframes sol-balaye{to{transform:translateX(110%)}}

/* ---------------------------------------------------------------
 * 7. Respect du reglage « moins d'animations » du visiteur
 * ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html.sol-anim .sol2-rev{clip-path:none!important;opacity:1!important;transform:none!important;transition:none!important}
  html.sol-anim .sol2-sweep{animation:none;opacity:0}
  .elementor .sol2-proj-vue img,
  .elementor .sol2-proj-vue::after,
  .elementor .sol2-btn::before,
  .elementor .sol2-ligne::before{transition:none}
}

/* ---------------------------------------------------------------
 * 8. Proprietes absentes du jeu de style d'Elementor
 *
 * Elementor ne sait ecrire qu'une liste fermee de proprietes
 * (verifiee dans styles/style-schema.php). Les trois ci-dessous
 * n'en font pas partie et le design les demande. Si Elementor les
 * ajoute un jour, ces regles pourront repartir dans des classes.
 * ------------------------------------------------------------ */

/* L'onglet de contact est ecrit de haut en bas, le long du bord droit.
   writing-mode retourne les axes logiques : « inset-inline-end » veut
   alors dire « bas », et une marge interieure « block » veut dire
   « gauche et droite ». Comme tous les reglages d'Elementor sont
   logiques, ils diraient ici l'inverse de ce qu'on veut : la geometrie
   de cet element est donc ecrite en proprietes physiques. Les couleurs,
   la typographie, l'ombre et le masquage sur tablette restent, eux,
   dans la classe globale sol2-onglet. */
.elementor .sol2-onglet{
  writing-mode:vertical-rl;
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:55;
  padding:22px 13px;
  border-radius:var(--r-md) 0 0 var(--r-md)
}
.elementor .sol2-onglet:hover,
.elementor .sol2-onglet:focus-visible{padding-right:20px}

/* une etiquette ne doit jamais se couper en deux lignes */
.elementor .sol2-vignette,
.elementor .sol2-nowrap{white-space:nowrap}

/* l'etiquette posee sur la photo ne doit pas voler le survol a l'image */
.elementor .sol2-vignette{pointer-events:none}

/* ---------------------------------------------------------------
 * 9. Les halos de lumiere
 *
 * Ce sont eux qui donnent sa luminosite au design. Un degrade
 * radial pose derriere le contenu : il lui faut un pseudo-element,
 * sinon il faudrait une boite vide de plus dans chaque page.
 * ------------------------------------------------------------ */
.elementor .sol2-hero{position:relative;overflow:hidden}
/* Le halo etait un cercle de hauteur fixe : sur les accroches hautes, il
   s'arretait avant le bas et laissait une bande claire. Il est maintenant
   ancre en haut ET en bas, donc il couvre toujours toute l'accroche. */
.elementor .sol2-hero::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  right:-12vw;top:-14vh;bottom:-10vh;
  width:min(118vw,1060px);
  background:radial-gradient(ellipse at 52% 38%,
    color-mix(in srgb, var(--c-sun) 40%, transparent) 0%,
    color-mix(in srgb, var(--c-sun) 13%, transparent) 46%,
    transparent 72%);
}
.elementor .sol2-final-plaque{position:relative;overflow:hidden}
.elementor .sol2-final-plaque::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:-14vw;top:10%;bottom:-30vh;
  width:min(110vw,900px);
  background:radial-gradient(ellipse at 45% 60%,
    color-mix(in srgb, var(--c-sun) 46%, transparent) 0%,
    color-mix(in srgb, var(--c-sun) 15%, transparent) 48%,
    transparent 74%);
}
/* le contenu passe devant le halo */
.elementor .sol2-hero > *,
.elementor .sol2-final-plaque > *{position:relative;z-index:2}

/* l'etape allumee par le rail : c'est le script qui pose la classe */
.elementor .sol2-etape.sol-etape-on .sol2-etape-pt{
  background:var(--c-sun);border-color:var(--c-sun);color:var(--c-deep)
}

/* ---------------------------------------------------------------
 * 10. Le bandeau des metiers qui defile
 *
 * Une animation en boucle infinie : les effets d'interaction
 * d'Elementor se declenchent une fois, sur un evenement. Il n'y a
 * pas de reglage pour « sans fin ». Le script recopie les mots
 * saisis dans la page, ces deux regles les font glisser.
 * ------------------------------------------------------------ */
.elementor .sol2-ruban-moitie{
  display:flex;align-items:center;flex:0 0 auto
}
.elementor .sol2-ruban-piste[data-sol-copie]{
  animation:sol-defile 36s linear infinite
}
@keyframes sol-defile{ to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){
  .elementor .sol2-ruban-piste[data-sol-copie]{animation:none}
}

/* ---------------------------------------------------------------
 * 11. Le chevron des questions
 *
 * Il pivote quand la reponse s'ouvre. C'est un selecteur d'etat du
 * parent vers l'enfant — details[open] puis l'icone — et une classe
 * globale ne decrit qu'un seul element. Elle peut toujours remplacer
 * le dessin du chevron depuis l'editeur : seule la rotation est ici.
 * ------------------------------------------------------------ */
.elementor .sol2-faq-icone{
  transition:transform .36s cubic-bezier(.2,.8,.2,1)
}
.elementor .sol2-faq-item[open] .sol2-faq-icone{
  transform:rotate(180deg)
}
@media (prefers-reduced-motion:reduce){
  .elementor .sol2-faq-icone{transition:none}
}