/* =====================================================================
   sara.css — styles du portfolio de Sara Amati
   À placer dans : wp-content/themes/brooklyn-child/sara.css
   Chargé en dernier dans <head> par functions.php, avec un numéro de
   version automatique (plus de problème de cache après un upload).
   ===================================================================== */


/* ---------- 0b. Règles anciennement dans « CSS additionnel » (Personnaliser) ---------- */
/* ===== HOME : vidéo header plein écran (bandeau visible en bas, footer caché) ===== */
body.home #ut-hero {
  height: calc(100vh - 56px) !important;
  min-height: calc(100vh - 56px) !important;
}
body.home.admin-bar #ut-hero {
  height: calc(100vh - 56px - 32px) !important;
  min-height: calc(100vh - 56px - 32px) !important;
}
@media (max-width: 767px) {
  body.home #ut-hero {
    height: calc(100svh - 41px) !important;
    min-height: calc(100svh - 41px) !important;
  }
  body.home.admin-bar #ut-hero {
    height: calc(100svh - 41px - 46px) !important;
    min-height: calc(100svh - 41px - 46px) !important;
  }
}

/* ===== FOOTER : gauche vide (vidéo), CV depuis le milieu, icônes verticales à droite ===== */
.footer-content { background-color: transparent !important; }

footer.footer .ut-footer-area-content .grid-container {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  position: relative;
  width: 100% !important;
  max-width: none !important;
  min-height: 230px;
  padding: 0 !important;
  box-sizing: border-box;
}
footer.footer .ut-footer-area-content .grid-container::before,
footer.footer .ut-footer-area-content .grid-container::after { display: none !important; }
footer.footer .ut-footer-area-content .grid-container > .grid-33 {
  width: auto !important; float: none !important; left: auto !important;
  padding: 0 !important; margin: 0 !important;
}
footer.footer .ut-footer-area-content .grid-container > .grid-33:first-child { display: none !important; }

/* Bouton CV : commence au milieu de l'image */
footer.footer .ut-footer-area-content .grid-container > .grid-33:nth-child(2) {
  grid-column: 2; grid-row: 1; text-align: left !important; position: static !important;
}
footer.footer .ut-footer-area-content .grid-container > .grid-33:nth-child(2) .widget-container { text-align: left !important; margin: 0 !important; }

/* Icônes : colonne verticale à droite */
footer.footer .ut-footer-area-content .grid-container > .grid-33:nth-child(3) {
  position: absolute !important; right: 5vw; top: 50%; transform: translateY(-50%);
}
footer.footer .ut-footer-area-content .grid-container > .grid-33:nth-child(3) .widget-container { margin: 0 !important; }
footer.footer .sara-footer-social .ut-sociallinks {
  display: flex !important; flex-direction: column; align-items: center; gap: 18px;
  margin: 0 !important; padding: 0 !important;
}
footer.footer .sara-footer-social .ut-sociallinks li { margin: 0 !important; padding: 0 !important; list-style: none; display: block !important; }
footer.footer .sara-footer-social a { position: relative; display: block; line-height: 1; }
footer.footer .sara-footer-social a i { font-size: 20px !important; color: #FFFDE6 !important; opacity: .9; transition: opacity .2s, color .2s; }
footer.footer .sara-footer-social a:hover i,
footer.footer .sara-footer-social a:focus-visible i { color: #FBD83F !important; opacity: 1; }

/* Info écrite au survol */
footer.footer .sara-footer-social a::after {
  content: attr(data-label);
  position: absolute; right: calc(100% + 14px); top: 50%;
  transform: translate(6px, -50%);
  white-space: nowrap; font-size: 13px; line-height: 1; color: #FFFDE6;
  background: rgba(39,16,6,.6); padding: 6px 10px; border-radius: 3px;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
footer.footer .sara-footer-social a:hover::after,
footer.footer .sara-footer-social a:focus-visible::after { opacity: 1; transform: translate(0, -50%); }

/* Copyright */
footer.footer .footer-content .grid-container { width: 100% !important; max-width: none !important; padding: 0 5vw !important; box-sizing: border-box; }
footer.footer .copyright { text-align: left !important; }

@media (max-width: 767px) {
  footer.footer .ut-footer-area-content .grid-container {
    grid-template-columns: 1fr; row-gap: 32px; min-height: 0; padding: 0 24px !important;
  }
  footer.footer .ut-footer-area-content .grid-container > .grid-33:nth-child(2) { grid-column: 1; text-align: center !important; }
  footer.footer .ut-footer-area-content .grid-container > .grid-33:nth-child(2) .widget-container { text-align: center !important; }
  footer.footer .ut-footer-area-content .grid-container > .grid-33:nth-child(3) {
    position: static !important; transform: none; grid-column: 1; grid-row: 2;
  }
  footer.footer .sara-footer-social .ut-sociallinks { flex-direction: row; justify-content: center; gap: 26px; }
  footer.footer .sara-footer-social a::after { display: none; }
  footer.footer .footer-content .grid-container { padding: 0 24px !important; }
  footer.footer .copyright { text-align: center !important; }
}

/* ===== HOME tablette/téléphone : vidéo entière (16:9) avec bandes noires ===== */
@media (max-width: 1024px) {
  body.home #ut-hero { background: #271006 !important; }
  body.home #iframe_ut-background-video-hero {
    width: 100% !important; height: 56.25vw !important;
    top: 50% !important; left: 0 !important; margin: 0 !important;
    transform: translateY(-50%) !important;
  }
}

/* ===== Menu overlay : plus d'espace entre les liens sur tablette/téléphone ===== */
@media (max-width: 1024px) {
  #ut-overlay-nav li { margin: 22px 0 !important; }
}

/* Use the same overlay navigation menu on tablet and mobile as on desktop */
.ut-mm-trigger {
  display: none !important;
}

.ut-open-overlay-trigger.hide-on-tablet.hide-on-mobile {
  display: block !important;
}


/* ===== À PROPOS : icônes logiciels en grille sur tablette et téléphone ===== */
@media (max-width: 1024px) {
  .page-id-5564 .vc_row.vc_inner:has(.bklyn-big-icon) {
    display: flex !important; flex-wrap: wrap; margin-left: 0 !important; margin-right: 0 !important;
  }
  .page-id-5564 .vc_row.vc_inner:has(.bklyn-big-icon)::before,
  .page-id-5564 .vc_row.vc_inner:has(.bklyn-big-icon)::after { display: none !important; }
  .page-id-5564 .vc_row.vc_inner:has(.bklyn-big-icon) > .wpb_column {
    width: 20% !important; float: none !important;
  }
  .page-id-5564 .vc_row.vc_inner:has(.bklyn-big-icon) > .wpb_column > .vc_column-inner { padding: 0 4px !important; }
  .page-id-5564 .vc_row.vc_inner:has(.bklyn-big-icon) .wpb_content_element { margin-bottom: 12px !important; }
  .page-id-5564 .bklyn-big-icon {
    width: 100% !important; max-width: 64px; height: auto !important; aspect-ratio: 1 / 1;
    line-height: 1 !important; display: flex !important; align-items: center; justify-content: center; margin: 0 auto !important;
  }
  .page-id-5564 .bklyn-big-icon-inner, .page-id-5564 .bklyn-big-icon i {
    font-size: 28px !important; width: auto !important; height: auto !important; line-height: 1 !important;
  }
}

/* ===== À PROPOS : bande de photos en boucle continue ===== */
/* Le carrousel WPBakery sert juste de liste d'images (modifiable dans le builder) : on le cache */
.sara-apropos-slide { display: none !important; }
.sara-photo-loop { overflow: hidden; width: 100%; padding: 40px 0; }
.sara-photo-loop__track {
  display: flex; width: max-content;
  animation: sara-photo-loop 96s linear infinite;
}
.sara-photo-loop__track img {
  height: 300px; width: auto; max-width: none; margin-right: 16px;
  display: block; object-fit: cover; flex: none;
}
.sara-photo-loop:hover .sara-photo-loop__track { animation-play-state: paused; }
@keyframes sara-photo-loop { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 1024px) { .sara-photo-loop__track img { height: 220px; margin-right: 12px; } }
@media (max-width: 767px) { .sara-photo-loop { padding: 24px 0; } .sara-photo-loop__track img { height: 160px; margin-right: 8px; } }
@media (prefers-reduced-motion: reduce) { .sara-photo-loop__track { animation-duration: 400s; } }


/* ===== Footer : bouton CV un peu décalé à droite du milieu ===== */
@media (min-width: 768px) {
  footer.footer .ut-footer-area-content .grid-container > .grid-33:nth-child(2) .widget-container { padding-left: 6vw !important; }
}

/* ===== Écran de chargement : "amati sara" en blanc ===== */
#qLoverlay .ut-inner-overlay .site-logo { text-align: center; }
#qLoverlay .ut-inner-overlay .site-logo .logo {
  color: #FFFDE6 !important; font-size: 56px !important; line-height: 1.2 !important; margin: 0 !important;
  animation: sara-loader-pulse 1.6s ease-in-out infinite;
}
@keyframes sara-loader-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@media (max-width: 767px) { #qLoverlay .ut-inner-overlay .site-logo .logo { font-size: 40px !important; } }

/* ===== À propos : section citation sur fond de couleur ===== */
.sara-quote-section { background-color: #FBD83F !important; padding-bottom: 130px !important; }
.sara-quote-section p { color: #271006 !important; }
@media (max-width: 767px) {
  .sara-quote-section { padding-top: 60px !important; padding-bottom: 80px !important; }
  .sara-quote-section p { font-size: 24px !important; }
}

/* ===== À PROPOS : images Billard / Gaming / Série — effet "fenêtre fixe" sur tablette et téléphone ===== */
.sara-fx-script-row { display: none !important; }
.sara-fixed-bg { display: none; }
@media (max-width: 1024px) {
  .sara-fixed-sec {
    position: relative !important;
    clip-path: inset(0); -webkit-clip-path: inset(0);
    height: 60vh !important; min-height: 60vh !important;
    background-image: none !important;
    overflow: hidden;
  }
  .sara-fixed-sec > .parallax-scroll-container { display: none !important; }
  .sara-fixed-sec > .sara-fixed-bg {
    display: block;
    position: fixed; top: 0; left: 0;
    width: 100vw; height: 100vh; height: 100lvh;
    background-size: cover; background-position: center center; background-repeat: no-repeat;
    z-index: 0; pointer-events: none; transform: none;
  }
  .sara-fixed-sec > *:not(.sara-fixed-bg) { position: relative; z-index: 1; }
}
@media (max-width: 767px) {
  .sara-fixed-sec { height: 70vh !important; min-height: 70vh !important; }
}


/* ===== Retirer le filtre noir sur les vidéos (hero + footer) ===== */
.ut-has-background-video .parallax-overlay,
.ut-video-section .parallax-overlay,
.ut-video-section .ut-video-section-overlay {
  background-color: transparent !important;
  background-image: none !important;
}
.sara-footer-bg::after {
  display: none !important;
}


/* ===== Footer : icônes réseaux plus grandes, décollées du bord droit ===== */
footer .sara-footer-social {
  padding-right: 60px !important;
}
footer .sara-footer-social .ut-sociallinks {
  gap: 26px !important;
}
footer.footer .sara-footer-social .ut-sociallinks a i {
  font-size: 28px !important;
  width: 28px !important;
}
@media (max-width: 767px) {
  footer .sara-footer-social { padding-right: 20px !important; }
  footer.footer .sara-footer-social .ut-sociallinks a i { font-size: 24px !important; width: 24px !important; }
}



/* ---------- 1. Hiérarchie des tailles de texte ---------- */
/* Du plus grand au plus petit. Classes à mettre sur les <p> dans WordPress. */
html body .sara-gros-titre       { font-size: clamp(64px, 9vw, 150px); line-height: 0.95; margin: 0; }
html body .sara-titre-inter      { font-size: clamp(36px, 5vw, 72px);  line-height: 1.1;  margin: 0; }
html body .sara-sous-titre       { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.2; margin: 0; }
html body .sara-sous-sous-titre  { font-size: clamp(18px, 1.6vw, 24px); line-height: 1.3; margin: 0; }
html body .sara-corps            { font-size: 16px; line-height: 1.6; }
html body .sara-petite-info      { font-size: 13px; line-height: 1.4; }

/* Titres de page affichés par le thème = gros titres
   (page Mes projets = id 5518, projet TOBS = id 5562) */
/* :not(.logo) = le logo « amati sara » de la barre de navigation garde sa taille */
html body.page-id-5518 h1:not(.logo), html body.page-id-5518 h1:not(.logo) span,
html body.postid-5562 h1:not(.logo),  html body.postid-5562 h1:not(.logo) span {
  font-size: clamp(64px, 9vw, 150px) !important;
  line-height: 0.95 !important;
}


/* ---------- 2. Accueil : bandeau défilant en boucle ---------- */
/* La piste contient 2 groupes identiques : on la décale de -50 %
   pour que la boucle soit invisible. Vitesse : changer 40s. */
.sara-ribbon {
  overflow: hidden;
  width: 100%;
}
.sara-ribbon__track {
  display: flex;
  width: max-content;
  animation: sara-ribbon 40s linear infinite;
}
.sara-ribbon__group {
  display: flex;
  flex-shrink: 0;
  white-space: nowrap;
}
.sara-ribbon__item,
.sara-ribbon__sep {
  white-space: nowrap;
}
@keyframes sara-ribbon {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .sara-ribbon__track { animation: none; }
}


/* ---------- 3. Menu burger : texte tel qu'écrit (pas de majuscules forcées) ---------- */
html body li.sara-menu-titre > a,
html body li.sara-menu-sous-titre > a {
  text-transform: none !important;
}
html body li.sara-menu-titre > a      { font-size: clamp(32px, 4vw, 56px); line-height: 1.1; }
html body li.sara-menu-sous-titre > a { font-size: clamp(18px, 2vw, 28px); line-height: 1.3; }


/* ---------- 4. Filtres de la grille Projets : texte tel qu'écrit ---------- */
html body .ut-portfolio-menu a {
  text-transform: none !important;
}


/* ---------- 5. Footer : icônes réseaux sociaux sur une seule ligne ---------- */
html body footer.footer .sara-footer-social .ut-sociallinks {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
html body footer.footer .sara-footer-social .ut-sociallinks li {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
}


/* ---------- 6. Projet : liens « précédent / suivant » ---------- */
/* Le texte est ajouté par sara.js à côté des flèches. */
.sara-nav-label {
  font-size: 14px;
  vertical-align: middle;
  margin: 0 10px;
  text-transform: none;
}


/* ---------- 7. Bande défilante : vraie bande pleine largeur sous la vidéo ---------- */
/* Hauteur = espace réservé sous la vidéo (56px desktop / 41px mobile). Changer les deux ensemble. */
body.home section.vc_section:has(.sara-ribbon),
body.home section.vc_section:has(.sara-ribbon) .vc_row,
body.home section.vc_section:has(.sara-ribbon) .vc_column-inner,
body.home section.vc_section:has(.sara-ribbon) .wpb_content_element {
  padding: 0 !important;
  margin: 0 !important;
}
body.home { overflow-x: clip; }

.sara-ribbon {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 56px;
  display: flex;
  align-items: center;
  background: var(--sara-jaune);      /* bande brune : #271006 + color: #FFFDE6 */
  color: #271006;
}
.sara-ribbon__item,
.sara-ribbon__sep {
  font-size: 24px;
  letter-spacing: .05em;
  line-height: 1;
}
@media (max-width: 767px) {
  .sara-ribbon { height: 41px; }
  .sara-ribbon__item,
  .sara-ribbon__sep { font-size: 16px; }
}


/* ---------- 8. Typographie : Poppins partout ---------- */
/* Poppins est chargée par WordPress (bibliothèque de polices) : Regular 400, Medium 500, Bold 700.
   Regular = textes courants · Bold = titres, boutons, menus, filtres, bande défilante.
   Les icônes (réseaux, flèches…) sont exclues pour garder leurs pictos. */
html body,
html body :is(p, li, dd, dt, td, th, blockquote, label, input, textarea, select, button, a, span, div, h1, h2, h3, h4, h5, h6, strong, b, em, small, figcaption):not(i):not([class*="fa-"]):not([class^="fa"]):not([class*="icon"]) {
  font-family: 'Poppins', sans-serif !important;
}

/* Regular : textes courants */
html body,
html body :is(p, li, dd, dt, td, th, blockquote, figcaption, label, input, textarea, select) {
  font-weight: 400 !important;
}

/* Bold : titres */
html body :is(h1, h2, h3, h4, h5, h6),
html body :is(h1, h2, h3, h4, h5, h6) :not(i) {
  font-weight: 700 !important;
}

/* Bold : tes classes de titre (sara-gros-titre, sara-sous-titre…), même posées sur un <p> */
html body [class*="sara-"][class*="titre"],
html body [class*="sara-"][class*="titre"] :not(i) {
  font-weight: 700 !important;
}

/* Bold : boutons, menus, filtres, bande, mises en gras */
html body :is(button, input[type="submit"], input[type="button"], .bklyn-btn, [class*="btn"], [class*="button"],
  nav a, #navigation a, #ut-overlay-menu a, #ut-mobile-menu a, [class*="filter"] a, .sara-ribbon, .sara-ribbon *, strong, b) {
  font-weight: 700 !important;
}

/* Le logo « amati sara » garde sa typo manuscrite */
html body#ut-sitebody .site-logo .logo,
html body#ut-sitebody .site-logo .logo a,
html body#ut-sitebody #qLoverlay,
html body#ut-sitebody #qLoverlay * {
  font-family: 'Yellowtail', cursive !important;
  font-weight: 400 !important;
}


/* ---------- 9. Palette du site : brun #271006 · blanc cassé #FFFDE6 · jaune #FBD83F ---------- */
/* Remplace partout le noir/gris par le brun, le blanc par le blanc cassé, le rouge par le jaune,
   y compris les couleurs par défaut de Brooklyn et celles tapées dans l'éditeur de page. */
:root {
  --sara-brun: #271006;
  --sara-creme: #FFFDE6;
  --sara-jaune: #FBD83F;
}

/* Fond des pages */
html body,
html body #main-content {
  background-color: var(--sara-creme) !important;
}

/* Barre de navigation (style « dark » de Brooklyn) */
html body #header-section.ut-header-dark,
html body .ut-placeholder-dark {
  background-color: var(--sara-brun) !important;
}
html body .site-logo .logo a,
html body .site-logo .logo { color: var(--sara-creme) !important; }
html body .ut-hamburger span,
html body .ut-hamburger span::before,
html body .ut-hamburger span::after { background-color: var(--sara-creme) !important; }
/* Menu ouvert : le trait du milieu doit disparaître, sinon 3 traits au lieu d'une croix */
html body .ut-hamburger--cross.is-active span { background-color: transparent !important; }

/* Copyright du footer */
html body .copyright { color: rgba(255, 253, 230, .5) !important; }

/* Couleurs tapées directement dans l'éditeur de page (WPBakery) */
html body [style*="color: #ffffff" i]:not([style*="background" i]),
html body [style*="color:#ffffff" i]:not([style*="background" i]),
html body [style*="color: #fff;" i]:not([style*="background" i]) {
  color: var(--sara-creme) !important;
  text-shadow: 0 2px 12px rgba(39, 16, 6, .6) !important;
}
html body [style*="background:#fff" i],
html body [style*="background: #fff" i],
html body [style*="background-color: #fff" i] {
  background: var(--sara-creme) !important;
  color: var(--sara-brun) !important;
}

/* Fond du hero (derrière la vidéo / l'image) */
html body #ut-hero,
html body #ut-custom-hero { background-color: var(--sara-brun) !important; }
html body .hero-btn { color: var(--sara-creme) !important; }

/* Titres de page (ex. « mes Travaux ») */
html body #primary .page-title,
html body #primary .page-title span { color: var(--sara-brun) !important; }

/* Page Projets : filtres et survol des vignettes */
html body .ut-portfolio-menu li a { color: var(--sara-brun) !important; background-color: var(--sara-creme) !important; }
html body#ut-sitebody .ut-portfolio-menu li a.selected,
html body#ut-sitebody .ut-portfolio-menu li a.selected * { color: var(--sara-brun) !important; background-color: var(--sara-jaune) !important; }
html body [class*="ut-portfolio-info"],
html body [class*="ut-portfolio-info"] * { color: var(--sara-creme) !important; }

/* Section du bas de la page Projets (« D'autres projets disponibles sur ma page Instagram ») : fond jaune, texte brun */
html body#ut-sitebody section.ut-section-with-linking.vc_section-has-fill:not(.sara-quote-section) {
  background-color: var(--sara-jaune) !important;
}
html body#ut-sitebody section.ut-section-with-linking.vc_section-has-fill:not(.sara-quote-section) :is(h1, h2, h3, h4, p, span, a, label, div) {
  color: var(--sara-brun) !important;
  text-shadow: none !important;
}


/* ---------- 10. Page Projets : titre « mes travaux » + filtres ---------- */
/* Titre centré, en jaune, collé aux filtres (« mes Travaux », T majuscule tel que saisi) */
html body.page-id-5518 #primary .page-header {
  text-align: center !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
html body.page-id-5518 #primary .page-title,
html body.page-id-5518 #primary .page-title span {
  color: var(--sara-jaune) !important;
  text-align: center !important;
  line-height: 0.73 !important;   /* le bas du titre = la ligne de base des lettres : plus de vide sous le texte */
}

/* Filtres : pastilles arrondies, jaunes, texte brun, en minuscules */
html body#ut-sitebody .ut-portfolio-menu li a {
  border-radius: 30px !important;
  background-color: var(--sara-jaune) !important;
  color: var(--sara-brun) !important;
  text-transform: none !important;
  font-size: 16px !important;
  padding: 12px 26px !important;
}
/* Filtre actif (« tous » par défaut) : fond brun, texte blanc cassé */
html body#ut-sitebody .ut-portfolio-menu li a.selected,
html body#ut-sitebody .ut-portfolio-menu li a.selected * {
  background-color: var(--sara-brun) !important;
  color: var(--sara-creme) !important;
}


/* ---------- 11. Page Projets : infos des vignettes (au survol) ---------- */
/* Titre + catégorie posés en bas de l'image, avec une petite marge */
html body#ut-sitebody .ut-portfolio-wrap .ut-portfolio-item .ut-portfolio-info {
  align-items: flex-end !important;
  padding: 20px 20px 24px !important;
}
html body#ut-sitebody .ut-portfolio-wrap .ut-portfolio-item .ut-portfolio-info-c {
  margin: 0 auto !important;
  align-self: flex-end !important;
  top: auto !important;
  transform: none !important;
}
/* Titre du projet : plus grand, jaune, écrit normalement (pas en capitales) */
html body#ut-sitebody .ut-portfolio-item .ut-portfolio-info .portfolio-title {
  color: var(--sara-jaune) !important;
  font-size: 44px !important;
  line-height: 1.1 !important;
  text-transform: none !important;
  margin: 0 0 6px !important;
}
/* Catégorie : inchangée (capitales, blanc cassé) */


/* ---------- 12. Menu plein écran ---------- */
/* Titres « Mes projets » et « À propos » : jaunes et plus grands */
html body#ut-sitebody #ut-overlay-menu li.sara-menu-titre > a {
  color: var(--sara-jaune) !important;
  font-size: clamp(44px, 5.5vw, 72px) !important;
}
/* Sous-titres (Illustration, Photo…) : blanc cassé */
html body#ut-sitebody #ut-overlay-menu li.sara-menu-sous-titre > a {
  color: var(--sara-creme) !important;
}
/* Survol : les couleurs s'inversent (jaune → blanc cassé, blanc cassé → jaune) */
html body#ut-sitebody #ut-overlay-menu li.sara-menu-titre > a:hover,
html body#ut-sitebody #ut-overlay-menu li.sara-menu-titre > a:focus-visible {
  color: var(--sara-creme) !important;
}
html body#ut-sitebody #ut-overlay-menu li.sara-menu-sous-titre > a:hover,
html body#ut-sitebody #ut-overlay-menu li.sara-menu-sous-titre > a:focus-visible {
  color: var(--sara-jaune) !important;
}
/* Pas de soulignement animé */
html body#ut-sitebody #ut-overlay-menu .menu a::after,
html body#ut-sitebody #ut-overlay-menu .menu a::before {
  display: none !important;
  content: none !important;
}


/* ---------- 13. Accueil : bouton « voir mes projets » sur la vidéo = même style que le footer ---------- */
html body#ut-sitebody #ut-hero .hero-btn {
  background-color: var(--sara-creme) !important;
  color: var(--sara-brun) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 28px !important;
  padding: 14px 32px !important;
  text-shadow: none !important;
}


/* ---------- 14. Footer : boutons au-dessus des icônes réseaux (plus de chevauchement) ---------- */
@media (min-width: 768px) {
  html body footer.footer .ut-footer-area-content .grid-container > .grid-33:nth-child(3) {
    position: static !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    transform: none !important;
    top: auto !important;
    right: auto !important;
    width: auto !important;
    float: none !important;
    padding: 0 0 0 6vw !important;   /* même décalage que les boutons → icônes centrées sous les boutons */
    margin-top: 28px !important;
  }
  html body footer.footer .ut-footer-area-content .grid-container > .grid-33:nth-child(3) .sara-footer-social {
    padding: 0 !important;
    margin: 0 !important;
  }
  html body footer.footer .ut-footer-area-content .grid-container > .grid-33:nth-child(3) .ut-sociallinks {
    justify-content: center !important;
  }
}


/* ---------- 15. Footer : boutons plus grands et de même largeur ---------- */
/* Le bloc des boutons prend la largeur du plus long ; les deux boutons s'étirent dessus */
html body footer.footer .ut-footer-area-content .grid-container > .grid-33:nth-child(2) .widget-container > div {
  width: fit-content !important;
  margin: 0 auto !important;
  align-items: stretch !important;
}
html body footer.footer .ut-footer-area-content .grid-container > .grid-33:nth-child(2) .widget-container > div > a {
  background-color: var(--sara-jaune) !important;
  font-size: 21px !important;
  line-height: 28px !important;
  padding: 16px 52px !important;
  text-align: center !important;
}
/* Même taille pour le bouton sur la vidéo de l'accueil */
html body#ut-sitebody #ut-hero .hero-btn {
  background-color: var(--sara-jaune) !important;
  font-size: 21px !important;
  padding: 16px 52px !important;
}

/* ---------- 16. Police manuscrite Sloop Script (Adobe Fonts) ---------- */
/* Chargée par functions.php. Deux versions, toutes deux en Bold :
     sara-script-two   → Sloop Script Two Bold
     sara-script-three → Sloop Script Three Bold
   Dans l'éditeur de page : <span class="sara-script-two">mon mot</span>
   ou mettre la classe dans le champ « Extra class name » d'un élément WPBakery. */
html body#ut-sitebody .sara-script-two,
html body#ut-sitebody .sara-script-two * {
  font-family: "sloop-script-two", cursive !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
html body#ut-sitebody .sara-script-three,
html body#ut-sitebody .sara-script-three * {
  font-family: "sloop-script-three", cursive !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}


/* ---------- 17. Page « mes Travaux » : « Travaux » et titre Instagram en Sloop Three + lien Instagram ---------- */
/* Titre de page : on masque le texte d'origine et on le réécrit en 2 morceaux
   (« mes » en Poppins, « Travaux » en Sloop). Si tu renommes la page, change aussi les deux content ci-dessous. */
html body#ut-sitebody.page-id-5518 .page-primary-header h1.page-title > span { display: none !important; }
html body#ut-sitebody.page-id-5518 .page-primary-header h1.page-title { white-space: nowrap !important; }   /* « mes » et « Travaux » toujours sur la même ligne */
html body#ut-sitebody.page-id-5518 .page-primary-header h1.page-title::before,
html body#ut-sitebody.page-id-5518 .page-primary-header h1.page-title::after {
  font-size: min(9vw, 150px) !important;   /* pas de minimum : sur petit écran tout rétrécit, jamais de retour à la ligne */
  line-height: 0.73 !important;
  color: var(--sara-jaune) !important;
}
html body#ut-sitebody.page-id-5518 .page-primary-header h1.page-title::before {
  content: "mes ";
  white-space: pre;
  font-family: "Poppins", sans-serif !important;
  font-weight: 700 !important;
}
html body#ut-sitebody.page-id-5518 .page-primary-header h1.page-title::after {
  content: "Travaux";
  font-family: "sloop-script-three", cursive !important;
  font-weight: 700 !important;
  line-height: 0 !important;   /* les métriques de Sloop agrandissaient la ligne et décollaient le titre des filtres */
  font-size: min(16.2vw, 270px) !important;   /* « Travaux » plus grand que « mes » : 270px max, rétrécit avec l'écran */
  margin-left: 0.04em;
}
/* Titre légèrement sous les filtres (passé derrière : jaune sur jaune effaçait le texte des boutons) */
html body#ut-sitebody.page-id-5518 #primary .page-header.page-primary-header { margin-bottom: -4px !important; }
html body#ut-sitebody.page-id-5518 #primary .page-header.page-primary-header h1.page-title { position: relative; z-index: 0; pointer-events: none; }
html body#ut-sitebody.page-id-5518 .ut-portfolio-menu { position: relative; z-index: 2; }
/* Filtres : 8px entre les boutons */
html body#ut-sitebody.page-id-5518 .ut-portfolio-menu li { margin-right: 8px !important; }
html body#ut-sitebody.page-id-5518 .ut-portfolio-menu li:last-child { margin-right: 0 !important; }
/* Titre du bloc Instagram */
html body#ut-sitebody.page-id-5518 .section-header h2.section-title,
html body#ut-sitebody.page-id-5518 .section-header h2.section-title span {
  font-family: "sloop-script-three", cursive !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
/* Logo Instagram + @profil, centrés sous le titre */
html body#ut-sitebody .sara-ig {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}
html body#ut-sitebody .sara-ig a {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  color: var(--sara-brun) !important;
  font-size: 24px !important;
  text-decoration: none !important;
}
html body#ut-sitebody .sara-ig a i { font-size: 30px; }


/* ---------- 17. Accueil : bouton de la vidéo aligné sur les boutons du footer ---------- */
/* Les boutons du footer sont centrés à 78vw (colonne de droite + décalage de 6vw).
   On place le bouton de la vidéo sur le même axe, avec la même largeur. */
@media (min-width: 768px) {
  html body#ut-sitebody #ut-hero .hero-btn-holder {
    justify-content: flex-start !important;
  }
  html body#ut-sitebody #ut-hero .hero-btn {
    width: 321px !important;              /* = largeur des boutons du footer */
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: translateX(-50%) !important;
    margin-left: calc(78vw - var(--sara-hero-left)) !important;
  }
  html body#ut-sitebody #ut-hero { --sara-hero-left: 20px; }   /* écrans < 1200px : marge du conteneur */
}
@media (min-width: 1200px) {
  html body#ut-sitebody #ut-hero { --sara-hero-left: calc(50vw - 580px); }  /* conteneur de 1160px centré */
}


/* ---------- 18. Page Projets : phrase « D'autres travaux disponibles sur Instagram » ---------- */
/* Toujours sur UNE seule ligne : 80px max, la taille se réduit si l'écran est trop étroit.
   La phrase fait ~14 × la taille du texte en largeur ; elle peut utiliser toute la largeur de l'écran (40px de marge de chaque côté). */
html body#ut-sitebody section.ut-section-with-linking.vc_section-has-fill:not(.sara-quote-section) h2.section-title {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  white-space: nowrap !important;
  font-size: min(80px, calc((100vw - 80px) / 14)) !important;
  line-height: 1.3 !important;
}
html body#ut-sitebody section.ut-section-with-linking.vc_section-has-fill:not(.sara-quote-section) h2.section-title span {
  font-size: min(80px, calc((100vw - 80px) / 14)) !important;
  line-height: 1.3 !important;
}
/* La section et sa rangée coupaient tout ce qui dépasse : les boucles de la script dépassent */
html body#ut-sitebody section.ut-section-with-linking.vc_section-has-fill:not(.sara-quote-section),
html body#ut-sitebody section.ut-section-with-linking.vc_section-has-fill:not(.sara-quote-section) .vc_row {
  overflow: visible !important;
}


/* ---------- 18. Page « À propos » : sous-titre + corps de texte ---------- */
/* Bloc de 375px de large, centré dans la colonne de droite, texte aligné à gauche.
   Le sous-titre « étudiante en Interactive Media Design » est placé au-dessus du corps (dans le contenu de la page). */
html body#ut-sitebody.page-id-5564 .sara-sous-sous-titre,
html body#ut-sitebody.page-id-5564 .sara-sous-titre,
html body#ut-sitebody.page-id-5564 .sara-corps {
  width: 375px;
  max-width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left !important;
}
html body#ut-sitebody.page-id-5564 .sara-sous-titre {
  line-height: 35px !important;
  margin-bottom: 16px !important;
}
html body#ut-sitebody.page-id-5564 .sara-corps {
  font-size: 18px !important;
  font-weight: 400 !important;
}

/* « sara » (sous le corps) : garde l'espace qu'occupait l'ancien sous-titre,
   sinon la rangée « Amati » (remontée de -315px) remonte et percute « sara » */
html body#ut-sitebody.page-id-5564 .sara-corps ~ .sara-gros-titre {
  margin-bottom: 86px !important;
}


/* ---------- Boutons réduits sur tablette / téléphone (accueil + footer) ---------- */
@media (max-width: 1024px) {
  html body#ut-sitebody #ut-hero .hero-btn,
  html body footer.footer .ut-footer-area-content .grid-container > .grid-33:nth-child(2) .widget-container > div > a {
    width: 260px !important;
    box-sizing: border-box !important;
    font-size: 17px !important;
    line-height: 22px !important;
    padding: 13px 0 !important;
  }
}
@media (max-width: 767px) {
  html body#ut-sitebody #ut-hero .hero-btn,
  html body footer.footer .ut-footer-area-content .grid-container > .grid-33:nth-child(2) .widget-container > div > a {
    width: 220px !important;
    font-size: 15px !important;
    line-height: 20px !important;
    padding: 11px 0 !important;
  }
}


/* ---------- Overlay menu : réseaux à droite, copyright à gauche ---------- */
html body#ut-sitebody #ut-overlay-menu-footer {
  display: flex !important;
  flex-direction: row-reverse !important;
  align-items: center !important;
  justify-content: space-between !important;
}
html body#ut-sitebody #ut-overlay-menu-footer .ut-overlay-footer-icons-wrap { text-align: right !important; }
html body#ut-sitebody #ut-overlay-menu-footer .ut-overlay-copyright { text-align: left !important; }

/* Pictos téléphone et e-mail (le thème affichait l'icône ADN par défaut) */
html body#ut-sitebody .ut-overlay-footer-icons a[href^="tel:"] i::before,
html body#ut-sitebody .ut-overlay-footer-icons a[href^="mailto:"] i::before {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
}
html body#ut-sitebody .ut-overlay-footer-icons a[href^="tel:"] i::before { content: "\f095" !important; }
html body#ut-sitebody .ut-overlay-footer-icons a[href^="mailto:"] i::before { content: "\f0e0" !important; }


/* ---------- Téléphone : boutons alignés à droite, bouton d'accueil sous la vidéo ---------- */
@media (max-width: 767px) {
  /* La vidéo 16:9 est centrée dans le hero : on descend le bouton d'une demi-hauteur de vidéo (28.125vw) + marge */
  html body#ut-sitebody #ut-hero .hero-btn-holder {
    display: block !important;
    text-align: right !important;
    /* centré verticalement entre le bas de la vidéo et la bande jaune : hauteur hero / 4 + demi-hauteur vidéo / 2 */
    transform: translateY(calc((100svh - 41px) / 4 + 14.0625vw + 9px)) !important;
  }
  html body#ut-sitebody.admin-bar #ut-hero .hero-btn-holder {
    transform: translateY(calc((100svh - 87px) / 4 + 14.0625vw + 9px)) !important;
  }
  html body#ut-sitebody #ut-hero .hero-btn {
    display: inline-block !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
  html body footer.footer .ut-footer-area-content .grid-container > .grid-33:nth-child(2),
  html body footer.footer .ut-footer-area-content .grid-container > .grid-33:nth-child(2) .widget-container {
    text-align: right !important;
  }
  html body footer.footer .ut-footer-area-content .grid-container > .grid-33:nth-child(2) .widget-container > div {
    align-items: flex-end !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
  html body footer.footer .ut-footer-area-content .grid-container > .grid-33:nth-child(2) .widget-container > div > a {
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}


/* ---------- Téléphone : réseaux à droite sous les boutons, copyright en bas à gauche ---------- */
@media (max-width: 767px) {
  html body footer.footer .sara-footer-social .ut-sociallinks {
    justify-content: flex-end !important;
    width: 100% !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
  }
  html body footer.footer .sara-footer-social {
    padding-right: 0 !important;
  }
  html body footer.footer .ut-sub-footer-content,
  html body footer.footer .ut-sub-footer-content .copyright {
    text-align: left !important;
    padding-left: 0 !important;
  }
}


/* ---------- Téléphone : boutons et icônes du footer encore réduits ---------- */
@media (max-width: 767px) {
  html body#ut-sitebody #ut-hero .hero-btn,
  html body footer.footer .ut-footer-area-content .grid-container > .grid-33:nth-child(2) .widget-container > div > a {
    width: 190px !important;
    font-size: 14px !important;
    line-height: 18px !important;
    padding: 10px 0 !important;
  }
  /* icônes réparties sur exactement la largeur des boutons (190px), bords alignés */
  html body footer.footer .sara-footer-social .ut-sociallinks {
    width: 190px !important;
    margin-left: auto !important;
    gap: 0 !important;
    justify-content: space-between !important;
  }
  html body footer.footer .sara-footer-social .ut-sociallinks li,
  html body footer.footer .sara-footer-social .ut-sociallinks a { width: auto !important; }
  html body footer.footer .sara-footer-social .ut-sociallinks i { font-size: 18px !important; }
}


/* ---------- Footer : flèche « remonter en haut » centrée au-dessus des boutons ---------- */
html body footer.footer .ut-footer-area-content .grid-container > .grid-33:nth-child(2) .widget-container > div > a.sara-retour-haut {
  background: transparent !important;
  color: var(--sara-jaune) !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  margin: 0 auto 8px !important;
  align-self: center !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 26px !important;
  line-height: 44px !important;
  transition: transform .2s ease, opacity .2s ease;
}
html body footer.footer .ut-footer-area-content .grid-container > .grid-33:nth-child(2) .widget-container > div > a.sara-retour-haut:hover {
  transform: translateY(-4px);
  opacity: .75;
}


/* ---------- Sélecteur de langue FR / IT (injecté dans le header, à gauche du menu) ---------- */
html body#ut-sitebody .ha-header-front .sara-lang {
  position: absolute !important;
  top: 50% !important;
  right: 66px !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  z-index: 20 !important;
  font-family: Poppins, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #fffde6 !important;
}
html body#ut-sitebody .sara-lang a {
  color: #fffde6 !important;
  text-decoration: none !important;
  opacity: .55;
  transition: opacity .2s ease, color .2s ease;
}
html body#ut-sitebody .sara-lang a:hover { opacity: 1; }
html body#ut-sitebody .sara-lang a.is-active { color: var(--sara-jaune) !important; opacity: 1; }
html body#ut-sitebody .sara-lang .sara-lang-sep { opacity: .4; }
/* Tant que le script ne l'a pas déplacé dans le header, on le cache dans le footer */
html body footer.footer .sara-lang { display: none !important; }

/* ---------- Version italienne : titre de la page Projets (dessiné en CSS) ---------- */
html[lang^="it"] body#ut-sitebody.page-id-5518 .page-primary-header h1.page-title::before { content: "i miei " !important; }
html[lang^="it"] body#ut-sitebody.page-id-5518 .page-primary-header h1.page-title::after { content: "progetti" !important; }