/* ==============================================
   LIVEN STUDIO — main.css
   Reset · Tokens · Typographie · Layout global
   ============================================== */


/* -----------------------------------------------
   1. CUSTOM PROPERTIES (DESIGN TOKENS)
   ----------------------------------------------- */

:root {
  /* Couleurs */
  --color-accent:        #e38c9e;
  --color-bg-from:       #edf8ff;
  --color-bg-to:         #ffe5cc;
  --color-text:          #1a1a1a;
  --color-text-muted:    #c2a5bb;
  --color-text-secondary:#d8cccc;
  --color-border:        rgba(0, 0, 0, 0.12);
  --color-white:         #ffffff;

  /* Typographie */
  --font-display: 'Figtree', sans-serif;
  --font-body:    'Inclusive Sans', sans-serif;
  --font-accent:  'Lily Script One', cursive;

  /* Tailles de texte */
  --text-xs:   0.625rem;   /* 10px — badges */
  --text-sm:   0.75rem;    /* 12px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px — nav, corps */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  2rem;       /* 32px */
  --text-3xl:  2.5rem;     /* 40px */
  --text-hero: clamp(4rem, 10vw, 11.375rem); /* 64px → 182px */

  /* Espacement */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  6rem;
  --space-2xl: 10rem;

  /* Layout */
  --container-max: 1400px;
  --container-pad: clamp(1.5rem, 4vw, 4rem);

  /* Header */
  --header-height: 80px;

  /* Transitions */
  --ease-fast:   150ms ease;
  --ease-base:   300ms ease;
  --ease-slow:   600ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Rayon */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-full: 9999px;

  /* Z-index */
  --z-header:      100;
  --z-scroll-top:   90;
}


/* -----------------------------------------------
   2. RESET (modern minimal)
   ----------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: linear-gradient(to right, var(--color-bg-from), var(--color-bg-to));
  background-attachment: fixed;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-lg);
}

img, video, svg {
  display: block;
  max-width: 100%;
}

img, video {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}

p {
  max-width: 65ch;
}

/* -----------------------------------------------
   3. TYPOGRAPHIE
   ----------------------------------------------- */

/* Section subtitle (surtitre) */
.section-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

/* Section heading (H2 titre) */
.section-heading {
  font-size: var(--text-3xl);
  color: var(--color-text);
}

/* Section description (accroche) */
.section-description {
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.7;
  color: var(--color-text);
  margin-top: var(--space-sm);
}


/* -----------------------------------------------
   4. LAYOUT
   ----------------------------------------------- */

/* Conteneur centré */
.wrap {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Sections avec conteneur boxé */
.section-boxed {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Espacement vertical standard entre sections */
section {
  padding-block: var(--space-xl);
}

/* Section header (titre gauche + CTA droit) */
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.section-header-left {
  flex: 1;
}

.section-title-block {
  margin-bottom: var(--space-sm);
}

/* Séparateur entre sections */
.section-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-inline: var(--container-pad);
}


/* -----------------------------------------------
   5. BOUTONS
   ----------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.75em 1.75em;
  font-family: var(--font-body);
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--radius-full);
  transition: background var(--ease-base), color var(--ease-base), border-color var(--ease-base);
  white-space: nowrap;
}

.btn-outline {
  border: 1px solid var(--color-text);
  color: var(--color-text);
}

.btn-outline:hover {
  background: var(--color-text);
  color: var(--color-white);
}

/* Bouton CTA circulaire */
.btn-round {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 1px solid var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
  line-height: 1.4;
  flex-shrink: 0;
  transition: background var(--ease-base), color var(--ease-base);
}

.btn-round:hover {
  background: var(--color-text);
  color: var(--color-white);
}


/* -----------------------------------------------
   6. HEADER
   ----------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  height: var(--header-height);
  transition: background var(--ease-base), backdrop-filter var(--ease-base);
}

.site-header.is-scrolled {
  background: rgba(237, 248, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: var(--space-md);
}

/* Logo */
.header-logo a {
  display: flex;
  align-items: center;
}

.header-logo img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.logo-dark {
  display: none;
}

/* Nav */
.nav-list {
  display: flex;
  gap: var(--space-md);
}

.nav-list a {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color var(--ease-fast);
}

.nav-list a:hover {
  color: var(--color-accent);
}

/* Jesper theme nav menu override (matches WP jesper-dynamic-css) */
body:not(.is-mobile) .tt-main-menu-list > li > a,
body:not(.is-mobile) .tt-main-menu-list > li > .tt-submenu-trigger > a {
  font-family: "Inclusive Sans", sans-serif;
  text-transform: uppercase;
  line-height: 17px;
  letter-spacing: .8px;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
}

/* Header actions */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Burger (masqué en desktop) */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-xs);
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  transition: transform var(--ease-base);
}


/* -----------------------------------------------
   7. HERO
   ----------------------------------------------- */

.section-hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-block: 0;
  overflow: hidden;
}

/* Les deux couches superposées */
.hero-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}

.hero-layer--default {
  z-index: 1;
}

/* Masque : visible uniquement dans le cercle sous la souris */
.hero-layer--mask {
  z-index: 2;
  clip-path: circle(0px at var(--mask-x, 50%) var(--mask-y, 50%));
  transition: clip-path 0.05s linear;
  background: linear-gradient(to right, var(--color-bg-to), var(--color-bg-from));
}

.hero-caption {
  padding-top: var(--header-height);
}

.hero-title {
  font-size: var(--text-hero);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.hero-title-line--muted {
  color: var(--color-text-secondary);
}

.hero-description {
  margin-top: var(--space-md);
  font-family: var(--font-body);
  font-size: clamp(1rem, 2vw, 1.25rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.6;
  color: var(--color-text);
  max-width: none;
}

/* Réseaux sociaux */
.hero-social {
  position: absolute;
  bottom: var(--space-md);
  left: var(--container-pad);
  z-index: 3;
  display: flex;
  gap: var(--space-sm);
}

.hero-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  transition: border-color var(--ease-fast), color var(--ease-fast);
}

.hero-social a:hover {
  border-color: var(--color-text);
  color: var(--color-accent);
}

/* Scroll down */
.scroll-down {
  position: absolute;
  bottom: var(--space-md);
  right: var(--container-pad);
  z-index: 3;
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scroll-down svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: spin 12s linear infinite;
  font-family: var(--font-body);
  font-size: 46px;
  letter-spacing: 8px;
  fill: var(--color-text);
}

.scroll-down-icon {
  width: 1px;
  height: 40px;
  background: var(--color-text);
  animation: scroll-pulse 1.5s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes scroll-pulse {
  0%, 100% { opacity: 1; transform: scaleY(1); }
  50%       { opacity: 0.4; transform: scaleY(0.6); }
}


/* -----------------------------------------------
   8. ABOUT
   ----------------------------------------------- */

.section-about {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-md);
  align-items: center;
}

.about-media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-border);
}

.about-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
}

.about-spacer {
  /* colonne centrale vide — espace intentionnel */
}

.about-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.about-text {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 400;
  line-height: 1.4;
  max-width: 42ch;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}


/* -----------------------------------------------
   9. PROJETS
   ----------------------------------------------- */

.section-projects {
  padding-inline: 0;
}

.section-projects .section-header {
  padding-inline: var(--container-pad);
  max-width: var(--container-max);
  margin-inline: auto;
}

.projects-list {
  display: flex;
  flex-direction: column;
}

.project-item {
  border-top: 1px solid var(--color-border);
}

.project-item:last-child {
  border-bottom: 1px solid var(--color-border);
}

.project-link {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--container-pad);
  max-width: var(--container-max);
  margin-inline: auto;
  transition: background var(--ease-fast);
}

.project-link:hover {
  background: rgba(0, 0, 0, 0.02);
}

.project-image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-border);
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ease-slow);
}

.project-link:hover .project-image img {
  transform: scale(1.04);
}

.project-title {
  font-size: var(--text-xl);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.project-tags li {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 2px 8px;
  color: var(--color-text-muted);
}


/* -----------------------------------------------
   10. TICKER
   ----------------------------------------------- */

.section-ticker {
  overflow: hidden;
  padding-block: var(--space-sm);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.ticker-row {
  display: flex;
  width: max-content;
  animation: ticker-ltr 30s linear infinite;
}

.ticker-row--reverse {
  animation-name: ticker-rtl;
}

.ticker-content {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-inline: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.ticker-sep {
  color: var(--color-accent);
  opacity: 0.6;
}

@keyframes ticker-ltr {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes ticker-rtl {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}


/* -----------------------------------------------
   11. SERVICES / ACCORDÉON
   ----------------------------------------------- */

.accordion {
  width: 100%;
  margin-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.accordion-item {
  border-bottom: 1px solid var(--color-border);
}

.accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-block: var(--space-md);
  text-align: left;
  gap: var(--space-md);
}

.accordion-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 900;
  line-height: 1.1;
}

.accordion-caret svg {
  transition: transform var(--ease-base);
  flex-shrink: 0;
  color: var(--color-text);
}

.accordion-trigger[aria-expanded="true"] .accordion-caret svg {
  transform: rotate(90deg);
}

/* Ouverture avec grid-template-rows (pas de max-height hacky) */
.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ease-base);
}

.accordion-content > * {
  overflow: hidden;
}

.accordion-trigger[aria-expanded="true"] + .accordion-content {
  grid-template-rows: 1fr;
}

.accordion-content p {
  padding-bottom: var(--space-md);
  max-width: 80ch;
  line-height: 1.7;
}

.accordion-content .btn {
  margin-bottom: var(--space-md);
}


/* -----------------------------------------------
   12. CERTIFICATIONS
   ----------------------------------------------- */

.certifications-list {
  margin-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.certification-item {
  border-bottom: 1px solid var(--color-border);
}

.certification-link {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-md);
  transition: color var(--ease-fast);
}

.certification-link:hover {
  color: var(--color-accent);
}

.certification-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
}

.certification-org,
.certification-date {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}


/* -----------------------------------------------
   13. TÉMOIGNAGES
   ----------------------------------------------- */

.testimonials-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.testimonial-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  position: relative;
}

.testimonial-card::before {
  content: '\201C';
  font-family: var(--font-accent);
  font-size: 6rem;
  line-height: 1;
  color: var(--color-text);
  opacity: 0.08;
  position: absolute;
  top: var(--space-xs);
  left: var(--space-sm);
  pointer-events: none;
}

.testimonial-text {
  font-size: var(--text-base);
  line-height: 1.7;
  max-width: none;
}

.testimonial-author {
  display: block;
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  transition: color var(--ease-fast);
}

.testimonial-author:hover {
  color: var(--color-accent);
}


/* -----------------------------------------------
   14. CONTACT
   ----------------------------------------------- */

.section-contact .section-header {
  margin-bottom: 0;
}


/* -----------------------------------------------
   15. FOOTER
   ----------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-md);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-inner p {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  max-width: none;
  text-align: center;
}


/* -----------------------------------------------
   16. SCROLL TO TOP
   ----------------------------------------------- */

.scroll-to-top {
  position: fixed;
  bottom: var(--space-md);
  right: var(--space-md);
  z-index: var(--z-scroll-top);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ease-base);
}

.scroll-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.scroll-to-top-circle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scroll-to-top-circle path {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 4;
  stroke-dasharray: 307.92 307.92;
  stroke-dashoffset: 307.92;
  transition: stroke-dashoffset 100ms linear;
}

.scroll-to-top-arrow {
  width: 18px;
  height: 18px;
  color: var(--color-text);
}


/* -----------------------------------------------
   17. ELEMENTOR CONTAINER SYSTEM
   (reimplements frontend.min.css + post-346.css — 0 bytes dans la sauvegarde)
   ----------------------------------------------- */

/* Base boxed container */
.e-con-boxed {
  width: 100%;
  max-width: 1430px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(20px, 4vw, 50px);
  padding-right: clamp(20px, 4vw, 50px);
  padding-top: clamp(60px, 7vw, 100px);
  padding-bottom: clamp(60px, 7vw, 100px);
}

/* Flex inner row */
.e-flex > .e-con-inner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: clamp(30px, 4vw, 60px);
}

/* Default flex child */
.e-con.e-child {
  flex: 1;
  min-width: 0;
}

/* ---- Single portfolio (project detail) pages — Elementor CSS variable processing ---- */

.single-portfolio .e-flex {
  display: flex;
  flex-direction: var(--flex-direction, column);
  justify-content: var(--justify-content, flex-start);
  align-items: var(--align-items, flex-start);
  flex-wrap: var(--flex-wrap-mobile, wrap);
  padding-top: var(--padding-top, 0px);
  padding-bottom: var(--padding-bottom, 0px);
  padding-left: var(--padding-left, 0px);
  padding-right: var(--padding-right, 0px);
}

.single-portfolio .e-flex > .e-con-inner {
  display: flex !important;
  flex-direction: var(--flex-direction, column) !important;
  justify-content: var(--justify-content, flex-start) !important;
  align-items: var(--align-items, flex-start) !important;
  gap: var(--row-gap, 0px) var(--column-gap, 0px) !important;
  padding: 0 clamp(20px, 4vw, 50px) !important;
  max-width: none !important;
}

.single-portfolio .e-con-boxed > .e-con-inner {
  max-width: var(--content-width, 1140px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.single-portfolio .e-con:not(.e-flex) {
  padding-top: var(--padding-top, 0px);
  padding-bottom: var(--padding-bottom, 0px);
  padding-left: var(--padding-left, 0px);
  padding-right: var(--padding-right, 0px);
}

/* Override e-con-boxed global padding on project detail pages */
.single-portfolio .e-con-boxed {
  max-width: none;
  padding: 0;
}

/* About-project row responsive — mirrors post-1326 breakpoints */
@media (max-width: 1024px) {
  #about-project-row {
    --padding-top: 80px;
    --padding-bottom: 80px;
    --padding-left: 15px;
    --padding-right: 15px;
  }
  .single-portfolio #gallery-section {
    --padding-top: 80px;
    --padding-bottom: 80px;
    --padding-left: 15px;
    --padding-right: 15px;
  }
}
@media (max-width: 767px) {
  #about-project-row {
    --flex-direction: column;
    --padding-top: 40px;
    --padding-bottom: 40px;
    --padding-left: 15px;
    --padding-right: 15px;
  }
  .single-portfolio #gallery-section {
    --padding-top: 40px;
    --padding-bottom: 40px;
    --padding-left: 15px;
    --padding-right: 15px;
  }
}

/* ---- e-con.e-parent sections (ticker, certifs) ---- */

#section-ticker {
  padding-top: clamp(40px, 5vw, 70px);
  padding-bottom: clamp(40px, 5vw, 70px);
  overflow: hidden;
}

#section-certifs {
  max-width: 1430px;
  margin-left: auto;
  margin-right: auto;
  padding: clamp(60px, 7vw, 100px) clamp(20px, 4vw, 50px);
}

/* ---- Section-specific columns ---- */

/* About — video(25%) | spacer(8.33%) | text(66.66%) — WP gap=0, spacing via spacer column */
#about-section {
  max-width: none;
  padding: 140px 0 120px;
}
#about-section > .e-con-inner {
  width: 100%;
  max-width: 1282px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  gap: 0;
}
#about-section > .e-con-inner > .e-con.e-child:nth-child(1) { flex: 0 0 25%; max-width: 25%; }
#about-section > .e-con-inner > .e-con.e-child:nth-child(2) { flex: 0 0 8.33%; max-width: 8.33%; }
#about-section > .e-con-inner > .e-con.e-child:nth-child(3) {
  flex: 0 0 66.66%;
  max-width: 66.66%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 10px;
  padding-right: 10px;
}
/* border-radius: .elementor .tt-video rule from jesper-main-style.css — no .elementor wrapper in our HTML */
#about-section .tt-video { border-radius: 15px; overflow: hidden; }

/* Projets — heading | round btn (droite) */
#section-projets {
  max-width: none;
  padding: 140px 0 80px;
}
#section-projets > .e-con-inner {
  width: 100%;
  max-width: 1282px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  gap: 0;
}
#section-projets > .e-con-inner > .e-con.e-child:nth-child(1) {
  flex: 0 0 66.6666%;
  max-width: 66.6666%;
  padding-left: 10px;
  padding-right: 10px;
}
#section-projets > .e-con-inner > .e-con.e-child:nth-child(2) {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Services — heading+desc | accordion */
#section-services > .e-con-inner > .e-con.e-child:nth-child(1) { flex: 0 0 35%; }
#section-services > .e-con-inner > .e-con.e-child:nth-child(2) { flex: 1; }

/* Avis — heading | desc+btn */
#section-avis > .e-con-inner > .e-con.e-child:nth-child(1) { flex: 0 0 50%; }
#section-avis > .e-con-inner > .e-con.e-child:nth-child(2) { flex: 1; }

/* Testimonials — sticker scroller pleine largeur */
#section-testimonials > .e-con-inner {
  display: block;
}

/* Contact — heading+text | big round btn */
#section-contact > .e-con-inner > .e-con.e-child:nth-child(1) { flex: 0 0 68%; }
#section-contact > .e-con-inner > .e-con.e-child:nth-child(2) {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Footer — padding réduit */
#site-footer.e-con-boxed {
  padding-top: clamp(30px, 3vw, 50px);
  padding-bottom: clamp(30px, 3vw, 50px);
}

/* ---- Collapse responsive (≤ 1024px) — WP post-346.css breakpoints ---- */
@media (max-width: 1024px) {
  .e-flex > .e-con-inner {
    flex-direction: column;
  }

  #about-section > .e-con-inner > .e-con.e-child:nth-child(1),
  #about-section > .e-con-inner > .e-con.e-child:nth-child(3),
  #section-projets > .e-con-inner > .e-con.e-child:nth-child(1),
  #section-projets > .e-con-inner > .e-con.e-child:nth-child(2),
  #section-services > .e-con-inner > .e-con.e-child:nth-child(1),
  #section-services > .e-con-inner > .e-con.e-child:nth-child(2),
  #section-avis > .e-con-inner > .e-con.e-child:nth-child(1),
  #section-avis > .e-con-inner > .e-con.e-child:nth-child(2),
  #section-contact > .e-con-inner > .e-con.e-child:nth-child(1),
  #section-contact > .e-con-inner > .e-con.e-child:nth-child(2) {
    flex: 1 1 100%;
    max-width: 100%;
  }

  #section-projets > .e-con-inner > .e-con.e-child:nth-child(2),
  #section-contact > .e-con-inner > .e-con.e-child:nth-child(2) {
    justify-content: flex-start;
  }

  /* Section paddings — miroir post-346.css ≤1024px */
  #about-section     { padding: 80px 15px; }
  #section-projets   { padding: 80px 15px; }
  #section-services  { padding: 80px 15px; }
  #section-avis      { padding: 80px 15px; }
  #section-certifs   { padding: 80px 15px; }
  #section-contact   { padding: 80px 15px; }
  #section-testimonials { padding: 80px 0; }
  #section-ticker    { padding: 40px 0; }

  /* About page sections */
  #about-content     { padding: 80px 15px; }
  #about-services-heading { padding: 80px 15px 0; }
  #about-services-list    { padding: 40px 15px 80px; }
  #about-contact          { padding: 80px 15px; }

  /* Sticky portfolio — remove side padding for full-bleed on tablet */
  #section-portfolio-sticky { padding: 80px 0; }
}

@media (max-width: 767px) {
  /* Section paddings — miroir post-346.css ≤767px */
  #about-section     { padding: 40px 15px; }
  #section-projets   { padding: 40px 15px; }
  #section-services  { padding: 40px 15px; }
  #section-avis      { padding: 40px 15px; }
  #section-certifs   { padding: 40px 15px; }
  #section-contact   { padding: 40px 15px; }
  #section-testimonials { padding: 40px 0; }
  #section-ticker    { padding: 30px 0; }

  /* About page sections */
  #about-content     { padding: 40px 15px; }
  #about-services-heading { padding: 40px 15px 0; }
  #about-services-list    { padding: 40px 15px; }
  #about-contact          { padding: 40px 15px; }

  /* Section projets — heading left-align, btn below */
  #section-projets > .e-con-inner > .e-con.e-child:nth-child(2) { display: none; }

  /* Sticky portfolio */
  #section-portfolio-sticky { padding: 40px 0; }

  /* Homepage about section — hide spacer + full-width columns */
  #about-section > .e-con-inner > .e-con.e-child:nth-child(2) { display: none; }
  #about-section > .e-con-inner > .e-con.e-child:nth-child(1),
  #about-section > .e-con-inner > .e-con.e-child:nth-child(3) { flex: 1 1 100%; max-width: 100%; }

  /* About page — col-text + col-spacer stack; col-spacer hidden at mobile */
  #about-content .col-spacer { display: none; }
  #about-content .col-text,
  #about-content .col-video  { flex: 1 1 100%; max-width: 100%; }

  /* Contact section — column layout */
  #section-contact > .e-con-inner > .e-con.e-child:nth-child(1) {
    flex: 1 1 100%; max-width: 100%;
  }
  #section-contact > .e-con-inner > .e-con.e-child:nth-child(2) {
    flex: 1 1 100%; max-width: 100%; justify-content: flex-start;
  }

  /* About-page contact — column-reverse layout */
  #about-contact > .e-con-inner {
    flex-direction: column-reverse;
  }
}


/* -----------------------------------------------
   18. TYPOGRAPHIE EXACTE — post-346.css (Elementor)
   ----------------------------------------------- */

/* === Hero === */
body {
  line-height: 1.4;
  font-family: var(--tt-body-font);
  font-size: 19px;
  font-weight: normal;
  color: var(--tt-text-color);
}

h1, h2, h3, h4 {
  font-family: var(--tt-alter-font);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0;
  color: inherit;
}

#page-header .ph-caption-title {
  margin: 0;
  font-family: "Figtree", sans-serif;
  font-size: 100px !important;
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #ffffff;
}
body.home #page-header .ph-caption-title {
  font-size: clamp(64px, 10vw, 182px) !important;
}
#page-header .ph-caption-title .tt-cap-word,
#page-header .ph-caption-title .title-second {
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}
#page-header .ph-caption-title .title-second {
  color: #d8cccc !important;
}
#page-header .ph-mask .ph-caption-title,
#page-header .ph-mask .ph-caption-title .tt-cap-word,
#page-header .ph-mask .ph-caption-title .title-second {
  color: #ff9898 !important;
}
#page-header .ph-caption-description {
  margin-top: 44px;
  font-family: var(--tt-body-font);
  font-size: 19px;
  font-weight: 300;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0;
  word-spacing: 0;
  color: rgb(33 33 33 / 88%);
  opacity: 1;
  visibility: visible;
}
#page-header .ph-mask .ph-caption-description,
#page-header .ph-mask .ph-caption-description .tt-cap-word {
  color: #e5e3dc;
}
#page-header .ph-caption-description .tt-cap-word-wrap {
  display: inline-flex;
  overflow: hidden;
}
#page-header .ph-caption-description .tt-cap-word {
  display: inline-block;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  opacity: 1;
  visibility: visible;
  will-change: transform;
}

body.tt-noise > .tt-bg-noise {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
body.tt-noise > .tt-bg-noise::before {
  position: absolute;
  content: "";
  top: -10rem;
  left: -10rem;
  width: calc(100% + 20rem);
  height: calc(100% + 20rem);
  z-index: 0;
  pointer-events: none;
  background-image: url("../images/bg-noise.png");
  background-position: 50%;
  animation: BgNoise 1s steps(2) infinite;
}
.tt-scroll-down text {
  fill: #665A5C !important;
  font-family: "Inclusive Sans", sans-serif;
  font-size: 37px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 8.1px;
  word-spacing: 9px;
}
.tt-scroll-down .tt-scrd-icon       { color: #665A5C !important; }

/* === Tous les sous-titres de section — text-transform none === */
.tt-heading-subtitle                { text-transform: none; }

/* === About — description === */
#about-section .e-con.e-child:nth-child(3) > .clear {
  text-align: left;
}
#about-section .jp-sec-title-des {
  font-family: "Quicksand", sans-serif;
  font-size: clamp(28px, 3vw, 48px) !important;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  word-spacing: 0;
  text-transform: none;
  color: rgb(14, 14, 14);
  text-wrap: pretty;
}

/* === Section headings — kit-16 global colors === */
.tt-heading-title  { color: #ffffff; }
.tt-heading-subtitle { color: #ffffff; }

#section-projets .tt-heading-title,
#section-services .tt-heading-title,
#section-certifs .tt-heading-title,
#section-avis .tt-heading-title,
#section-contact .tt-heading-title {
  font-family: "Figtree", sans-serif;
  font-weight: 600;
  word-spacing: 8px;
  color: #ffffff;
}
#section-projets .tt-heading-subtitle,
#section-services .tt-heading-subtitle,
#section-certifs .tt-heading-subtitle,
#section-avis .tt-heading-subtitle,
#section-contact .tt-heading-subtitle {
  font-family: "Figtree", sans-serif;
  font-weight: 600;
  color: #ffffff;
}

/* === Projets — heading === */
#section-projets .tt-heading-title  { font-size: 110px; line-height: 51px; letter-spacing: -4.2px; }
#section-projets .tt-heading-subtitle {
  font-size: 39px;
  line-height: 6px;
  letter-spacing: 1px;
  text-transform: none;
}

/* === Projets — round button === */
#section-projets .tt-big-round-ptn-inner {
  font-family: "Inclusive Sans", sans-serif;
  font-size: 19px; font-weight: 400;
  line-height: 19px; letter-spacing: -0.5px; word-spacing: 6px;
}

/* === Sticky portfolio === */
.tt-stp-item-title {
  font-family: "Figtree", sans-serif;
  font-size: 39px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 1.7px;
  word-spacing: 8px;
  color: #ffffff;
}
.tt-stp-item-category {
  font-family: "Inclusive Sans", sans-serif;
  font-size: calc(13px + 0.1vw);
  font-weight: 400;
  line-height: 1.2;
  color: #ffffff;
}

/* === Scrolling ticker === */
.tt-scrolling-text {
  font-family: "Figtree", sans-serif;
  font-size: 44px; font-weight: 300;
  text-transform: uppercase;
  line-height: 37px; letter-spacing: -2px; word-spacing: 12px;
}

/* === Services — heading === */
#section-services .tt-heading-title { font-size: 110px; line-height: 55px; letter-spacing: -2.2px; }
#section-services .tt-heading-subtitle { line-height: 6px; letter-spacing: 1px; }

/* === Services — accordion titre === */
#section-services .tt-ac-head-title {
  font-family: "Figtree", sans-serif;
  font-size: 27px; letter-spacing: -1.7px; word-spacing: 5px;
}
#section-services .tt-accordion.tt-ac-counter .tt-ac-head::before {
  color: #7A7979;
  font-family: "Inclusive Sans", sans-serif;
  font-size: 27px; font-weight: 400; line-height: 23px;
}
body:not(.is-mobile) .tt-accordion-caret {
  color: #7A7979;
  font-family: "Inclusive Sans", sans-serif;
  font-size: 27px; font-weight: 400;
}

/* === Certifications — heading (centré) === */
#section-certifs .tt-heading         { text-align: center; }
#section-certifs .tt-heading-title  { font-size: 110px; text-transform: uppercase; line-height: 63px; letter-spacing: -3px; }
#section-certifs .tt-heading-subtitle { text-transform: none; line-height: 1px; letter-spacing: 1.3px; }
#section-certifs .jp-sec-title-des  { text-transform: uppercase; }

/* === Avis — heading === */
#section-avis .tt-heading-title     { font-size: 111px; line-height: 40px; letter-spacing: -4.8px; }
#section-avis .tt-heading-subtitle  { line-height: 6px; letter-spacing: 1px; }

/* === Contact — heading === */
#section-contact .tt-heading-title  { font-size: 81px; line-height: 54px; letter-spacing: -5px; word-spacing: 15px; }

/* === Contact — round button === */
#section-contact .tt-big-round-ptn-inner {
  font-family: "Inclusive Sans", sans-serif;
  font-size: 19px; font-weight: 400;
  line-height: 19px; letter-spacing: -0.5px; word-spacing: 3px;
}

/* === Footer === */
#site-footer > .e-con-inner {
  justify-content: center;
  align-items: center;
  text-align: center;
}
#site-footer p {
  width: 100%;
  text-align: center;
  font-family: "Quicksand", sans-serif;
  font-size: 20px; font-weight: 400;
  line-height: 28px;
  letter-spacing: -0.5px; word-spacing: 3px;
  color: #8A7F7F;
  margin: 0;
  max-width: none;
}


/* -----------------------------------------------
   19. RESPONSIVE
   ----------------------------------------------- */

@media (max-width: 1024px) {
  .about-media + .about-spacer {
    display: none;
  }

  .section-about {
    grid-template-columns: 1fr 1fr;
  }

  .certifications-list .certification-link {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }
}

@media (max-width: 768px) {
  :root {
    --header-height: 64px;
  }

  /* Nav mobile masquée par défaut */
  .site-nav {
    display: none;
    position: fixed;
    inset: var(--header-height) 0 0 0;
    background: var(--color-bg-from);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    z-index: var(--z-header);
  }

  .site-nav.is-open {
    display: flex;
  }

  .nav-list {
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
  }

  .nav-list a {
    font-size: var(--text-2xl);
  }

  .nav-toggle {
    display: flex;
  }

  .header-actions .btn {
    display: none;
  }

  .section-about {
    grid-template-columns: 1fr;
  }

  .about-media {
    max-height: 300px;
  }

  .project-link {
    grid-template-columns: 1fr;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .testimonials-list {
    grid-template-columns: 1fr;
  }

  .accordion-title {
    font-size: var(--text-xl);
  }
}


/* -----------------------------------------------
   18. RÉDUIT LES ANIMATIONS SI PRÉFÉRENCE
   ----------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}