/*
Theme Name: Twenty Twenty-Five
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}





/*Gradient animé*/
/* Fullscreen & Vars */
    :root { --mouseX: 0.5; --mouseY: 0.5; }
    /* Single gradient wrapper */
    .gradient {
      position: relative;
      width:100%; height:100%;
      display:flex; align-items:center; justify-content:center;
      cursor:default;
		z-index:-100;
		overflow:hidden;
		background-color:#000;
    }
    /* 1. Conic gradient layer */
    .gradient::before {
      content: '';
      position:absolute; inset:0;
      background: conic-gradient(
        from 0deg at calc(var(--mouseX)*100%) calc(var(--mouseY)*100%),
        #A79BF2, #E2F26B, #BA8DF8, #CFF67B, #A79BF2
      );
      mix-blend-mode: screen;
      filter: blur(150px);
      opacity: 0.5;
      animation: spin 40s linear infinite;
      z-index:-50;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    /* 2. Composite layer: blobs, particles, wave, noise */
    .gradient::after {
      content: '';
      position:absolute; inset:0;
      background:
        /* blobs */
        radial-gradient(circle at 15% 20%, rgba(167,155,242,0.7) 0%, transparent 60%),
        radial-gradient(circle at 75% 50%, rgba(226,242,107,0.7) 0%, transparent 60%),
        radial-gradient(circle at 40% 80%, rgba(186,141,248,0.7) 0%, transparent 60%),
        /* particles */
        radial-gradient(circle at 30% 30%, rgba(255,255,255,0.1), transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(255,255,255,0.1), transparent 60%),
        /* dot pattern */
        radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px) 0 0 / 20px 20px,
        /* wave */
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 28"><path fill-opacity="0.2" fill="#FFF" d="M0 30 V15 Q30 3 60 15 T120 15 V30z"/></svg>') repeat-x bottom / auto 200px,
        /* noise */
        url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2NgYGD4DwABBAEAHav0nwAAAABJRU5ErkJggg==') repeat;
      background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,no-repeat,repeat-x,repeat;
      background-size: 400px 400px,300px 300px,500px 500px,200% 200%,200% 200%,auto 200px,auto;
      background-position:
        15% 20%,75% 50%,40% 80%,30% 30%,70% 70%,0 100%,0 0;
      animation:
        driftBlobs 20s ease-in-out infinite,
        particlesAnim 25s ease-in-out infinite,
        waveMove 10s linear infinite;
      filter: blur(60px);
      opacity:0.7;
      z-index:-25;
    }
/* Désactive la capture de clic sur le gradient animé */
/* Désactive toute capture de clic sur l’overlay gradient */
.gradient,
.gradient::before,
.gradient::after {
  pointer-events: none !important;
  z-index: -9999 !important;  /* Force‐toi à le reculer très loin */
}
/* 1. Gradient derrière tout */
.gradient {
  position: relative;    /* nécessaire pour le z‑index */
  z-index: 0 !important; /* on remonte la box au-dessus des pseudo‑éléments négatifs */
}
.gradient::before,
.gradient::after {
  z-index: -1 !important;      /* en dessous de .gradient */
  pointer-events: none !important; /* ne captent pas les clics */
}

/* 2. Contenu de .gradient au premier plan */
.gradient > * {
  position: relative;    /* nouveau stacking context pour chaque enfant */
  z-index: 1 !important; /* au‑dessus de tout dans .gradient */
  pointer-events: auto;  /* s’assure que les enfants sont cliquables */
}

a,
a:link,
a:visited,
a:hover,
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.ff-btn-submit,
.btn,
.button,
.fluent_form_1 .success-box {
  position: relative !important;
  z-index: 999999999 !important;
}
    @keyframes driftBlobs {
      0%,100% { background-position:15% 20%,75% 50%,40% 80%,30% 30%,70% 70%,0 100%,0 0; }
      50%     { background-position:20% 25%,70% 55%,45% 75%,30% 30%,70% 70%,0 100%,0 0; }
    }
    @keyframes particlesAnim { 0%,100% { } 50% { transform: translate3d(10px,-20px,0); } }
    @keyframes waveMove { to { background-position-x:1000px,0 100%,0 0; } }
    /* Parallax script updates CSS vars */
    /* Glass login container */
    .login-container {
      position: relative; z-index:3;
      background:rgba(255,255,255,0.8);
      backdrop-filter:blur(20px) saturate(180%);
      border:1px solid rgba(255,255,255,0.3);
      border-radius:1rem; padding:2rem;
      max-width:400px; width:90%;
      box-shadow:0 8px 32px rgba(0,0,0,0.2);
      font-family:'Urbanist',sans-serif;
    }
/*FIN Gradient animé*/
  /*single-projet.php*/
.single-projet {

  width: 100%;
}
.single-projet__intro {
  display: flex;
  flex-wrap: nowrap;
  gap: 4rem;
  align-items: stretch; /* ← pour que l'image suive la hauteur du bloc gauche */
  min-height: 480px;
}


.single-projet__left {
  flex: 1 1 50%;
  display: flex;
  gap: 2rem;
	flex-direction:column;
  justify-content: center;
margin: 6em 0 2em 5em;
}
.single-projet__right {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%; /* Important */
}
.single-projet__category {
  background: #a79bf2;
  color: white;
  font-size: 0.9rem;
  font-weight: bold;
  padding: 0.25em 0.6em;
  border-radius: 999px;
  display: inline-block;
  width: fit-content;
  line-height: 1;
	text-transform: uppercase;
}

.single-projet__title{
margin: 0 !important ;
}
.single-projet__client{
margin: 0 !important ;
}


.single-projet__tags {
  display: flex;
  flex-wrap: wrap;
	  font-weight: bold;
  gap: 0.5rem;
}
.single-projet__tag {
  padding: 0.4rem 1rem;
  border: 2px solid #111;
  border-radius: 999px;
}



.single-projet__softwares {
  display: flex;
  gap: 1rem;
}
.single-projet__software-icon {
  width: 3rem;
  height: 3rem;
}


/* Partie Plus d’infos */
.single-projet__extras {
  background: #f2f2f2;
  padding: 4rem 2rem;
  text-align: center;
}

.single-projet__extras-title {
  margin-bottom: 2rem;
}

.single-projet__extras-grid {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.single-projet__extra-card {
  width: 250px;
  height: 160px;
  background: #998888;
  border-radius: 0.5rem;
}

/* Bouton vidéo */
.single-projet__extras-button {
  display: flex;
  justify-content: center;
}

.btn-video {
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  background: #e2f26b;
  color: #000;
  font-weight: 700;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
  text-decoration: none;
  transition: 0.2s;
}
.btn-video:hover {
  background: #d1e85a;
}

.single-projet__highlight-image {
  object-fit: cover;
	width:100%;
	
  max-width: 100%;
  height: auto;
}
/* =============================================
   TYPOGRAPHY SYSTEM — UNBOUNDED + URBANIST
   ============================================= */

/* === 1. Design Tokens (CSS Variables) === */
:root {
  /* Fonts */
  --font-title: 'Unbounded', sans-serif;
  --font-text: 'Urbanist', sans-serif;

  /* Font Weights */
  --weight-bold: 800;
  --weight-semi: 600;
  --weight-medium: 500;
  --weight-regular: 400;
	
            --lh-tight: 1.1;
            --lh-default: 1.4;
            --lh-loose: 1.6;
  /* Spacing scale */
  --space-xs: 0.5rem;  /* 8px */
  --space-s: 1rem;     /* 16px */
  --space-m: 1.5rem;   /* 24px */
  --space-l: 2rem;     /* 32px */
  --space-xl: 3rem;    /* 48px */
}

/* === 2. Base Typography === */
body {
  font-family: var(--font-text);
  font-size: 1rem;
	line-height: var(--lh-default);
  color: #111;
  margin: 0;
  padding: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-s) 0;
}

/* === 3. Responsive Headings (with clamp) === */
h1 {
  font-size: clamp(2rem, 6vw, 3rem);
	line-height: 1.2;
}

h2 {
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  font-weight: var(--weight-semi);
	line-height: 1.25;
}

h3 {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: var(--weight-medium);
	line-height: 1.3;
	
}

h4 {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: var(--weight-regular);
	line-height: 1.4;
}

/* === 4. Paragraphs and Text Classes === */
p {
  font-size: 1rem;
	line-height: var(--lh-default);
  margin-bottom: var(--space-m);
}

.text-xl {
  font-size: 1.125rem;
	line-height: var(--lh-loose);
  margin-bottom: var(--space-m);
}

.text-l {
  font-size: 0.875rem;
  line-height: var(--lh-default);
  margin-bottom: var(--space-s);
}

.text-s {
  font-size: 0.75rem;
  line-height: 1.5;
  margin-bottom: var(--space-xs);
}

/* === 5. Utility Spacing Classes === */
.mt-s { margin-top: var(--space-s); }
.mt-m { margin-top: var(--space-m); }
.mt-l { margin-top: var(--space-l); }
.mt-xl { margin-top: var(--space-xl); }

.mb-s { margin-bottom: var(--space-s); }
.mb-m { margin-bottom: var(--space-m); }
.mb-l { margin-bottom: var(--space-l); }
.mb-xl { margin-bottom: var(--space-xl); }

.pt-s { padding-top: var(--space-s); }
.pt-m { padding-top: var(--space-m); }
.pt-l { padding-top: var(--space-l); }
.pt-xl { padding-top: var(--space-xl); }

.pb-s { padding-bottom: var(--space-s); }
.pb-m { padding-bottom: var(--space-m); }
.pb-l { padding-bottom: var(--space-l); }
.pb-xl { padding-bottom: var(--space-xl); }

/* === 6. Typography Demo === */
.typography-demo {
  max-width: 720px;
  margin: auto;
  padding: var(--space-l);
}

.typography-demo h1,
.typography-demo h2,
.typography-demo h3,
.typography-demo h4,
.typography-demo p {
  border-bottom: 1px dashed #ddd;
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

.single-projet__context > p {
  font-size: 1.2rem;
	line-height: var(--lh-loose); 
	margin-top:0 !important;
}
.single-projet__name{
gap:0 !important;
}
/* === 4. SINGLE PROJET RESPONSIVE === */
@media screen and (max-width: 1024px) {
  .single-projet__intro {
    gap: var(--space-m);
  }
	.single-projet_left{
		margin: 1em 0 2em 5em !important;
	}
}

@media screen and (max-width: 1024px) {
  .single-projet__intro {
    flex-direction: column;
    gap: var(--space-s);
    min-height: auto;
  }
	.single-projet__left{
		margin: 2em !important;
}
  .single-projet__right {
    margin-left: 0;
    width: 100%;
  }
  .single-projet__softwares,
  .single-projet__tags {
    flex-wrap: wrap;
    gap: var(--space-s);
  }
}

@media screen and (max-width: 480px) {
  .single-projet__extra-card {
    width: 100%;
    height: auto;
  }
  .btn-video {
    padding: var(--space-s) var(--space-m);
    font-size: 0.875rem;
  }
}
.gallerie-projets{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

footer{
	overflow:hidden;
}

.footer__content {
    padding: var(--space-l) 0;
    max-width: 100% !important;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.footer__cta-title {
  font-family: var(--font-title);
  font-size: 1.5rem;
	color:#ffffff;
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-m);
}

.footer__cta-button {
  display: inline-block;
  background: #E2F26B;
  color: #0D0D0D;
  font-weight: var(--weight-semi);
  text-decoration: none;
  padding: var(--space-s) var(--space-m);
  border-radius: 999px;
  transition: background 0.2s;
}
.footer__cta-button:hover {
  background: #d1e85a;
}
/* Section & Titre */
.timeline-section {
  padding: 4rem 1rem 0rem 1rem;
  font-family: 'Urbanist', sans-serif;
  background: #fff;
}

.timeline-title {
  text-align: center;
  font-family: 'Unbounded', sans-serif;
  font-size: 2rem;
  margin-bottom: 3rem;
  color: #0d0d0d;
}

/* Ligne & structure */
.timeline {
  position: relative;
  max-width: 680px;
  margin: auto;
  padding-left: 1.5rem;
  border-left: 3px solid rgba(167, 155, 242, 0.5);
}

/* Éléments de la timeline */
.timeline-item {
  position: relative;
  margin-bottom: 2.5rem;
  padding-left: 0.75rem;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s ease forwards;
  animation-fill-mode: both;
}

/* Point violet/vert */
.timeline-item::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 1.1rem;
  width: 14px;
  height: 14px;
  background: #e2f26b;
  border: 3px solid #a79bf2;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #fff;
}

/* Date */
.timeline-date {
  font-weight: bold;
  color: #746ca9;
  font-size: 1.2rem;
  margin-bottom: 0.3rem;
}

/* Bloc de contenu */
.timeline-content {
  background: #f9f9f9;
  padding: 1.25rem 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
  border-left: 6px solid;
  border-image: linear-gradient(to bottom, #a79bf2, #e2f26b) 1;
}

.timeline-content h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: #0d0d0d;
}

.timeline-content p {
  margin: 0;
  font-size: 1.1rem;
  color: #444;
}

/* Animation */
.timeline-item {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.timeline-item.visible {
  opacity: 1;
  transform: translateY(0);
}


/* Mobile optimisé */
@media (max-width: 480px) {
  .timeline-content {
    padding: 1rem;
  }

  .timeline-content h3 {
    font-size: 1rem;
  }

  .timeline-content p {
    font-size: 0.9rem;
  }
}
.timeline-item::before {
  content: '';
  position: absolute;
  left: -2.15rem; /* ← centré sur la ligne (ajuste si besoin) */
  top: 1.1rem;
  width: 14px;
  height: 14px;
  background: #e2f26b;
  border: 3px solid #a79bf2;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #fff;
}

/* === PALETTE === */
:root{
  --violet:#988bff;--violet-dark:#645bff;--lime:#e2f26b;--bg:#0e0d17;--glass:rgba(255,255,255,.08);
  font-family:"Urbanist",sans-serif;
}

/* HERO */
.contact-hero{
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:3rem 1rem;gap:1.75rem;overflow:hidden;
}
.contact-hero h1{font-size:clamp(2.5rem,6vw,4rem);line-height:1.1}
.btn-main{padding:1rem 2.8rem;background:var(--lime);color:#111;border-radius:.8rem;font-weight:700;transition:.3s}
.btn-main:hover{transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,.3)}

/* INFO GRID */
.info-grid{display:grid;gap:2rem;padding:4rem 1rem;max-width:900px;margin:auto;text-align:center}
@media(min-width:700px){.info-grid{grid-template-columns:repeat(3,1fr)}}
.info-grid article{display:flex;flex-direction:column;gap:.8rem;align-items:center}
.info-grid svg{width:56px;height:56px;fill:var(--violet)}
.info-grid h3{font-size:1.2rem;color:#fff;font-weight:700}
.info-grid a,.info-grid p{color:#ccc;font-size:1rem}

/* FORM */
.form-wrap{display:flex;justify-content:center;padding:5rem 1rem;background:var(--bg)}
form{display:grid;gap:1.5rem;width:100%;max-width:900px}
@media(min-width:750px){form{grid-template-columns:1fr 1fr}.form-wrap .full{grid-column:1/-1}}
.field{position:relative}
.field input,.field textarea{width:100%;padding:1.1rem 1.2rem;border:2px solid rgba(255,255,255,.18);
  border-radius:.75rem;background:var(--glass);color:#fff;font-size:1rem;transition:border .25s,background .25s}
.field textarea{min-height:12rem}
.field label{position:absolute;top:50%;left:1.25rem;transform:translateY(-50%);color:#aaa;transition:.25s;background:var(--bg);padding:0 .3rem}
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{
  top:-.6rem;font-size:.8rem;color:var(--lime)}
.field input:focus,.field textarea:focus{border-color:var(--lime)}
.submit-btn{grid-column:1/-1;justify-self:center;padding:1rem 3rem;border:none;border-radius:.85rem;
  background:var(--violet-dark);font-weight:700;color:#fff;transition:.3s}
.submit-btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.45)}
/* Cartes info */
.info-grid article{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
  border-radius:1rem;
  padding:2rem 1.5rem;
  box-shadow:0 8px 18px rgba(0,0,0,.1);
}
.info-grid h3{margin:.8rem 0 .4rem;font-size:1.1rem;color:#fff}
.info-grid a{color:#e2f26b;font-weight:600;text-decoration:none}

/* Lime CTA consistency */
form .submit-btn{
  background:#e2f26b!important;
  color:#111!important;
  transition:.25s;
}
form .submit-btn:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.25)}
.info-grid article{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(14px) saturate(180%);
  border-radius:1rem;
  padding:2rem 1.5rem;
  text-align:center;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
  display:flex;flex-direction:column;align-items:center;gap:.8rem;
}
.info-grid svg{width:56px;height:56px;fill:var(--violet-start);}
.info-grid h3{margin:0;font-size:1.1rem;color:#fff;font-weight:700}
.info-grid a{color:var(--lime);font-weight:600;text-decoration:none}

a.ebpg-post-link-wrapper.eb-sr-only {
    display: none !important;
}

/*Navbar*/
.navbar a::after {
    content: '';
    position: absolute;
    left: 0; bottom: -6px;
    width: 100%; height: 5px;
    background: #a79bf2;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s cubic-bezier(.25,.8,.25,1);
  }
  .navbar a:hover::after,
  .navbar a:focus::after {
    transform: scaleX(1);
  }

/* 1) Wrapper : on s’assure que c’est bien un flex et qu’on étire les items */
.wp-block-columns.custom-two-cols {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch !important; /* <-- on passe de center à stretch */
}

/* 2) On cible la 1ʳᵉ colonne enfant pour y mettre le background */
.wp-block-columns.custom-two-cols > .wp-block-column:nth-child(1) {
  background-image: url("https://tommikulec.pro/wp-content/uploads/2025/07/HL7A3811-1-scaled.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
	align-self:stretch;
}

/* 3) Mobile : on empile et on fixe la hauteur de la 1ʳᵉ colonne */
@media (max-width: 768px) {
  .wp-block-columns.custom-two-cols {
    display: block !important;  /* colonnes empilées */
  }
  .wp-block-columns.custom-two-cols > .wp-block-column:nth-child(1) {
    width: 100% !important;
    height: 300px !important;   /* hauteur fixe mobile */
  }
}





/*fin*/