.elementor-kit-6{--e-global-color-primary:#2DD4BF;--e-global-color-secondary:#D946EF;--e-global-color-text:#FFFFFF;--e-global-color-accent:#0E1B2E;--e-global-color-cda701a:#0A1320;--e-global-color-8e6bdd0:#16243E;--e-global-color-165ac80:#1F2F4D;--e-global-color-07fb230:#4A1E5C;--e-global-color-e1733df:#5DDDCB;--e-global-color-913ee45:#E26AF4;--e-global-color-b2f8661:#A8B2C7;--e-global-color-5220020:#6B7689;--e-global-color-aa27088:#FBBF24;--e-global-color-018dfa9:#6B768978;--e-global-color-574f6c0:#D3D9E5;--e-global-typography-primary-font-family:"Saira";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Inter";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Saira";--e-global-typography-accent-font-weight:500;--e-global-typography-27cbb1c-font-family:"Saira";--e-global-typography-27cbb1c-font-size:3em;--e-global-typography-27cbb1c-font-weight:700;--e-global-typography-422ebdf-font-family:"Saira";--e-global-typography-422ebdf-font-size:2.5em;--e-global-typography-422ebdf-font-weight:700;--e-global-typography-1e7c88d-font-family:"Saira";--e-global-typography-1e7c88d-font-size:2em;--e-global-typography-1e7c88d-font-weight:600;--e-global-typography-4f22e66-font-family:"Saira";--e-global-typography-4f22e66-font-size:1.3em;--e-global-typography-4f22e66-font-weight:500;--e-global-typography-6533fc2-font-family:"Inter";--e-global-typography-6533fc2-font-size:1.2em;--e-global-typography-214df16-font-family:"Inter";--e-global-typography-214df16-font-size:1em;--e-global-typography-1a80cd3-font-family:"Inter";--e-global-typography-1a80cd3-font-size:0.8em;--e-global-typography-d88dc5c-font-family:"Inter";--e-global-typography-d88dc5c-font-size:0.9em;--e-global-typography-d88dc5c-font-weight:600;--e-global-typography-d88dc5c-text-transform:uppercase;--e-global-typography-d88dc5c-letter-spacing:0.15em;--e-global-typography-6fcaaef-font-family:"Inter";--e-global-typography-6fcaaef-font-size:1em;--e-global-typography-6fcaaef-text-transform:uppercase;--e-global-typography-6fcaaef-letter-spacing:0.15em;--e-global-typography-ab85a0b-font-family:"Saira";--e-global-typography-ab85a0b-font-size:0.9em;--e-global-typography-ab85a0b-font-weight:600;--e-global-typography-ab85a0b-letter-spacing:0.12em;--e-global-typography-ab85a0b-word-spacing:0em;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{background-color:var( --e-global-color-secondary );color:var( --e-global-color-text );border-radius:30px 30px 30px 30px;padding:15px 25px 15px 25px;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:var( --e-global-color-primary );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//*BREAD CRUMB */

.rank-math-breadcrumb {
    color:#A8B2C7;
}
.rank-math-breadcrumb a, .rank-math-breadcrumb span {
    font-size:13px;
    font-weight:300;
    font-family:'Inter', Sans-Serif;
}
.rank-math-breadcrumb a {
    font-size:13px;
    color:#A8B2C7;
}

.rank-math-breadcrumb a:hover {
    font-size:13px;
    color:#2DD4BF;
}

.rank-math-breadcrumb .last
{
    font-size:13px;
    color:#fff;
    font-weight:500;
}




/* LARGEUR FIT-CONTENT */

.fit-content {
    width:fit-content;
}

/* Masquer le formulaire Elementor caché (soumission uniquement) */
.hidden-form {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
  height: 0;
  overflow: hidden;
}

/* SVG */

.svg-icon {
    display:flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100;
    
}

.svg-icon_teal
{
    stroke:#2DD4BF;
}

/* BULLET LISTS*/

.bullet-list
{
    padding-left: 0;
    list-style-type: none;
}

.bullet-list li{
    display: flex;
    align-items:center;
    gap:10px;
    padding:4px 0;
}
.bullet-list li::before {
    content:'';
    width:5px;
    height: 5px;
   border-radius:50%;
   background:#2DD4BF;
}
/* Variante "point d'attention" de la bullet-list */
.bullet-list--warn li::before {
  background: #FBBF24;
}


/* GRADIENT TEXT - à appliquer sur une balise em dans un titre */

.gradient-text-hero {
    background: linear-gradient(135deg, #D946EF 0%, #2DD4BF 100%);
    background-clip:text;
    -webkit-text-fill-color:transparent;
    font-style:normal;
}

/* ============================================================
   GRILLE BLUEPRINT - à appliquer sur n'importe quelle section
   Ajouter "has-grid" en classe CSS de la section Elementor
   ============================================================ */
.has-grid {
  position: relative;
  overflow: hidden;
}
.has-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(45, 212, 191, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 212, 191, 0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 90%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 90%);
}
/* Version renforcée */
.has-grid-strong {
  position: relative;
  overflow: hidden;
}
.has-grid-strong::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(45, 212, 191, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 212, 191, 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 90%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 90%);
}
/* Le contenu de la section reste au-dessus */
.has-grid > *,
.has-grid-strong > * {
  position: relative;
  z-index: 1;
}

/* ============================================================
   Grille synthwave avec perspective
   Version sol qui converge vers l'horizon
   Appliquer "has-grid-perspective" sur une section
   ============================================================ */

.has-grid-perspective {
  position: relative;
  overflow: hidden;
  perspective: 800px;
}

.has-grid-perspective::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -50%;
  right: -50%;
  height: 60%;
  background-image:
    linear-gradient(rgba(45, 212, 191, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 212, 191, 0.15) 1px, transparent 1px);
  background-size: 40px 40px;
  transform: rotateX(60deg);
  transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 100%);
          mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 100%);
  pointer-events: none;
  z-index: 0;
}

.has-grid-perspective > * {
  position: relative;
  z-index: 1;
}


/* ============================================================
   HALOS LUMINEUX - à appliquer sur une section
   Ajouter "has-orbs" en classe CSS de la section Elementor
   Compatible avec "has-grid" sur la même section
   ============================================================ */
.has-orbs {
  --orb-magenta: rgba(217, 70, 239, 0.35);
  --orb-magenta-size: 1200px;
  --orb-teal: rgba(45, 212, 191, 0.25);
  --orb-teal-size: 1000px;

  position: relative;
  overflow: hidden;
}
.has-orbs::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(
      circle var(--orb-magenta-size)
      at calc(100% + 100px) -100px,
      var(--orb-magenta),
      transparent 65%
    ),
    radial-gradient(
      circle var(--orb-teal-size)
      at -100px calc(100% + 100px),
      var(--orb-teal),
      transparent 65%
    );
}
.has-orbs > * {
  position: relative;
  z-index: 1;
}

/* ============================================================
   SECTIONS SPOTLIGHT - fond dégradé pour section importante
   Appliquer UNE des classes sur le container principal de la section :
   - "section-spotlight-teal"    : dominante turquoise
   - "section-spotlight-magenta" : dominante violet/magenta
   
   ATTENTION : une seule spotlight par page (règle d'or).
   ============================================================ */

/* ---------- Variante TEAL ---------- */
.section-spotlight-teal {
  background: linear-gradient(
    180deg,
    #0E1B2E 0%,
    #14384a 15%,
    #14574f 50%,
    #14384a 85%,
    #0E1B2E 100%
  );
  position: relative;
  overflow: hidden;
}
.section-spotlight-teal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 80% at 30% 50%,
    rgba(45, 212, 191, 0.15) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}
.section-spotlight-teal > * {
  position: relative;
  z-index: 1;
}

/* ---------- Variante MAGENTA ---------- */
.section-spotlight-magenta {
  background: linear-gradient(
    180deg,
    #0E1B2E 0%,
    #2a1a4a 15%,
    #4a1e5c 50%,
    #2a1a4a 85%,
    #0E1B2E 100%
  );
  position: relative;
  overflow: hidden;
}
.section-spotlight-magenta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 80% at 30% 50%,
    rgba(217, 70, 239, 0.15) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}
.section-spotlight-magenta > * {
  position: relative;
  z-index: 1;
}

/* ============================================================
   PILLS - système modulaire
   Combine base + variante + modificateurs selon le besoin
   ============================================================ */

/* Base : à appliquer sur TOUTES les pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  transition: all 0.2s ease;
  text-decoration: none;
  border: 1px solid transparent;
}

/* ========== VARIANTES DE STYLE ========== */

/* Ghost : fond bleu subtil, bordure légère (pour les "pillars" about) */
.pill--ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

/* Accent : fond teal dilué, texte teal (pour badges statut, tags actifs) */
.pill--accent {
  background: rgba(45, 212, 191, 0.12);
  border-color: rgba(45, 212, 191, 0.3);
  color: #2DD4BF;
}

/* Magenta : pour badges de conversion, alerts */
.pill--magenta {
  background: rgba(217, 70, 239, 0.12);
  border-color: rgba(217, 70, 239, 0.3);
  color: #E879F9;
}

/* Teal soft : bordure teal marquée + fond teal légèrement translucide */
.pill--teal-soft {
  background: rgba(45, 212, 191, 0.08);
  border-color: rgba(45, 212, 191, 0.5);
  color: #2DD4BF;
}

.pill--magenta-soft {
  background: rgba(217, 70, 239, 0.08);
  border-color: rgba(217, 70, 239, 0.5);
  color: #E879F9;
}

/* Outline : juste une bordure, sans fond (plus discret) */
.pill--outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.15);
  color: #A8B2C7;
}

/* Solid : fond teal plein (pour boutons filtre actifs) */
.pill--solid {
  background: #2DD4BF;
  border-color: #2DD4BF;
  color: #0A1320;
  font-weight: 600;
}

/* ========== MODIFICATEURS (combinables) ========== */

/* Dot coloré à gauche */
.pill--dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2DD4BF;
  flex-shrink: 0;
}

/* Dot pulsant (pour indicateur dispo, statut live) */
.pill--pulse::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2DD4BF;
  flex-shrink: 0;
  animation: pill-pulse 2s infinite;
}
@keyframes pill-pulse {
  0% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.6); }
  70% { box-shadow: 0 0 0 6px rgba(45, 212, 191, 0); }
  100% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0); }
}

/* Tailles */
.pill--sm { padding: 4px 10px; font-size: 11px; }
.pill--lg { padding: 8px 18px; font-size: 13px; }

/* ========== ÉTATS INTERACTIFS ========== */

/* Interactive : hover et cursor pour les pills cliquables */
.pill--interactive {
  cursor: pointer;
}
.pill--interactive:hover {
  transform: translateY(-1px);
  border-color: rgba(45, 212, 191, 0.5);
}
.pill--interactive.pill--ghost:hover {
  background: rgba(45, 212, 191, 0.08);
  color: #2DD4BF;
}

/* État actif (pour filtres portfolio par exemple) */
.pill--active {
  background: #2DD4BF;
  border-color: #2DD4BF;
  color: #0A1320;
  font-weight: 600;
}

.pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* ============================================================
   PILL : le point prend la couleur du texte
   Corrige le point turquoise sur les variantes magenta,
   et sert automatiquement pour toute future variante.
   ============================================================ */
.pill--dot::before {
  background: currentColor;
}

/* Sécurité si ta règle d'origine est plus spécifique */
.pill--magenta.pill--dot::before,
.pill--magenta-soft.pill--dot::before {
  background: #D946EF;
}

/* ============================================================
   PILL NEUTRE (blanc) - "Ensemble"
   ============================================================ */
.pill--neutral {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #FFFFFF;
}
.pill--neutral.pill--dot::before {
  background: #FFFFFF;
}

/* ============================================================
   CALLOUT AMBRE - point d'attention
   À poser sur un container Elementor (direction ligne)
   contenant un widget Icône + un widget Éditeur de texte.
   ============================================================ */
.callout-amber {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 8px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.3);
}
.callout-amber .elementor-icon,
.callout-amber .elementor-icon svg {
  color: #FBBF24;
  fill: #FBBF24;
  font-size: 20px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.callout-amber .elementor-widget-text-editor,
.callout-amber p {
  font-size: 14px;
  line-height: 1.6;
  color: #FFFFFF;
  margin: 0;
}

/* Cadre navigateur - à appliquer sur un container Elementor */
.browser-frame {
  position: relative;
  padding-block-start: 40px !important;
  padding-inline: 0 !important;
  padding-block-end: 0 !important;
  overflow: hidden !important;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: #16243E;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.7);
}

/* La barre + l'URL, lue depuis l'attribut data-url */
.browser-frame::before {
  content: attr(data-url);
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40px;
  display: flex;
  align-items: center;
  padding-left: 72px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #fff;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  z-index: 2;
}

/* Les trois pastilles, en une seule pseudo-élément via box-shadow */
.browser-frame::after {
  content: '';
  position: absolute;
  top: 16px; left: 16px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  box-shadow: 16px 0 0 rgba(255,255,255,0.18),
              32px 0 0 rgba(255,255,255,0.18);
  z-index: 3;
}


.portfolio-card{
  position:relative;
  min-height:320px;
  border-radius:12px;
  overflow:hidden;
 border:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  transition:box-shadow .25s ease, transform .2s ease;
}
.portfolio-card:hover{
 box-shadow:inset 0 0 0 1px rgba(45,212,191,.45);
  transform:translateY(-3px);
}
.portfolio-card .pill-row,
.portfolio-card .card-bottom{
  position:relative;
  z-index:2;
}
.portfolio-card__title{
  font-family:'Saira',sans-serif;
  font-weight:600;
  font-size:21px;
  line-height:1.25;
  color:#fff;
  margin:0;
}
.portfolio-card__desc{
  font-size:14px;
  color:#A8B2C7;
  margin:0;
}
.portfolio-card__go{
  font-size:13px;
  font-weight:600;
  color:#D946EF;
  display:inline-block;
  margin-top:8px;
}



/* Bordure gauche en gradient*/

.gradient-border {
    
    background-image: linear-gradient(180deg, #D946EF 0%, #2DD4BF 100%);
  background-size: 3px 100%;
  background-repeat: no-repeat;
  background-position: left top;
}


/* ESPACEMENT LISTES ARTICLES - les listes reprennent l'espacement des paragraphes (1em) */
.single-post .elementor-widget-text-editor ul:not(:last-child),
.single-post .elementor-widget-text-editor ol:not(:last-child) {
    margin-bottom: 1em;
}


/* Encadres de blog (series recurrentes) */
.encadre{background:var(--e-global-color-8e6bdd0);border-left:3px solid var(--e-global-color-primary);border-radius:0 12px 12px 0;padding:20px 24px;}
.encadre .encadre__label{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--e-global-color-primary);margin-bottom:.6em;}
.encadre em{color:var(--e-global-color-text);}
.encadre p:last-child{margin-bottom:0;}
@media(max-width:560px){.encadre{padding:16px 18px;}}/* End custom CSS */