/*
Theme Name: Uncode Child
Description: Child theme for Uncode theme
Author: Undsgn™
Author URI: http://www.undsgn.com
Template: uncode
Version: 1.0.0
Text Domain: uncode
*/

/* ============================================================
   SOMMAIRE
   1) Soulignement global des liens
   2) Menus Uncode
   3) Ajustements divers (typo/espacements)
   4) Grilles projets : Homepage mosaïque + Related (shared)
   5) Animation apparition au scroll (mosaïque)
   6) Single projet : supprimer header
   7) “Autres projets” (3 colonnes)
   8) MediaElement (désactiver boutons/controls)
   9) Boutons (retour + scroll top)
   10) Scroll fluide
   11) formulaire de contact
============================================================ */


/* ============================================================
   1) ANIMATION SOULIGNEMENT LIENS (GLOBAL)
============================================================ */

a{
  position: relative;
  text-decoration: none;
}

a::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform .3s ease;
}

a:hover::after{
  transform: translateX(-50%) scaleX(1);
}

.projets-mosaic-lines .pm-card::after,
.projets-related-grid .pm-card::after{
  content: none !important;
  display: none !important;
}


.link-invert-underline::after{
  transform: translateX(-50%) scaleX(1); /* visible par défaut */
}

.link-invert-underline:hover::after{
  transform: translateX(-50%) scaleX(0); /* disparaît au hover */
}

/* ============================================================
   2) MENU 
============================================================ */

/* On coupe l'underline global sur les liens du menu */
#menu-menu-gauche li.menu-item-link > a::after,
#menu-menu-droite li.menu-item-link > a::after{
  content: none !important;
}

/* Texte du lien */
#menu-menu-gauche li.menu-item-link > a > span,
#menu-menu-droite li.menu-item-link > a > span{
  position: relative;
  display: inline-block;
}

/* Underline animé sous le texte */
#menu-menu-gauche li.menu-item-link > a > span::after,
#menu-menu-droite li.menu-item-link > a > span::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform .3s ease;
}

/* Hover uniquement quand la souris est SUR le texte */
#menu-menu-gauche li.menu-item-link > a > span:hover::after,
#menu-menu-droite li.menu-item-link > a > span:hover::after{
  transform: translateX(-50%) scaleX(1);
}

/* Item actif */
#menu-menu-gauche li.current-menu-item > a > span::after,
#menu-menu-gauche li.current_page_item > a > span::after,
#menu-menu-droite li.current-menu-item > a > span::after,
#menu-menu-droite li.current_page_item > a > span::after{
  transform: translateX(-50%) scaleX(1);
}



/* ============================================================
   3) AJUSTEMENTS DIVERS (typo/espacements)
============================================================ */

.oh-def{ margin-top: 4px; }

.site-intro p, .intro-bio p{ line-height: 1.4; }

.synopsis{ line-height: 1.5; }

.footer-scroll-top{ display: none !important; }


.hero-title-block{
  width:400px;        
  margin-left:auto;       
  text-align:left;      
}

.hero-title-svg{
  width:100%;
  height:auto;
  display:block;
}

.hero-subtitle{
margin-top: 18px;
font-size: 15px;
line-height: 1.3;
font-weight: 800;
}


/* ============================================================
   4) GRILLES PROJETS (shared : homepage + related)
   - même logique media (img + video + overlay)
============================================================ */

/* Base card (commune) */
.projets-mosaic-lines .pm-card,
.projets-related-grid .pm-card{
  display: block;
  text-decoration: none;
  position: relative;
}

/* Media wrapper (commune) */
.projets-mosaic-lines .pm-media,
.projets-related-grid .pm-media{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0;
}

/* Media elements (commune) */
.projets-mosaic-lines .pm-img,
.projets-mosaic-lines .pm-video,
.projets-related-grid .pm-img,
.projets-related-grid .pm-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fade doux (commune) */
.projets-mosaic-lines .pm-img,
.projets-related-grid .pm-img{
  opacity: 1;
  transition: opacity .35s ease;
}

.projets-mosaic-lines .pm-video,
.projets-related-grid .pm-video{
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}

/* Texte centré sans voile (commune) */
.projets-mosaic-lines .pm-overlay,
.projets-related-grid .pm-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transition: opacity .25s ease;
  padding: 16px;
  background: transparent;
  color: #fff;
}

.projets-mosaic-lines .pm-overlay-inner,
.projets-related-grid .pm-overlay-inner{
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
}

/* Activation vidéo (commune) */
.projets-mosaic-lines .pm-card.is-video-on .pm-video,
.projets-related-grid .pm-card.is-video-on .pm-video{ opacity: 1; }

.projets-mosaic-lines .pm-card.is-video-on .pm-img,
.projets-related-grid .pm-card.is-video-on .pm-img{ opacity: 0; }

.projets-mosaic-lines .pm-card.is-video-on .pm-overlay,
.projets-related-grid .pm-card.is-video-on .pm-overlay{ opacity: 1; }


/* ============================================================
   4A) HOMEPAGE - MOSAÏQUE
============================================================ */

.projets-mosaic-lines{
  display: flex;
  flex-direction: column;
  gap: var(--pm-gap, 24px);
  align-items: center;
}

.projets-mosaic-lines .pm-row{
  display: flex;
  gap: var(--pm-gap, 24px);
  align-items: flex-start;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
}

/* dimensions par variables CSS */
.projets-mosaic-lines .pm-card{
  width: var(--pm-w);
  height: var(--pm-h);
}

/* Typo overlay homepage */
.projets-mosaic-lines .pm-title{
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.projets-mosaic-lines .pm-infos{
  font-size: 14px;
  opacity: .95;
  line-height: 1.3;
}

/* Responsive : empilement */
@media (max-width: 900px){
  .projets-mosaic-lines .pm-row{
    flex-direction: column;
    align-items: center;
  }
  .projets-mosaic-lines .pm-card{
    width: min(var(--pm-w), 92vw);
    height: auto;
    aspect-ratio: calc(var(--pm-w) / var(--pm-h));
  }
  .projets-mosaic-lines .pm-media{ height: auto; }
}


@media (max-width: 900px){
  .projets-mosaic-lines .pm-card{
    width: min(var(--pm-w), 92vw);
    height: auto;
    aspect-ratio: var(--pm-ar);
  }
  .projets-mosaic-lines .pm-media{ height: auto; }
}

.projets-mosaic-lines .pm-card{
  display: block;           /* IMPORTANT : applique width/height */
  position: relative;
  overflow: hidden;
}

@media (max-width: 900px){

  /* La mosaïque devient une grille */
  .projets-mosaic-lines{
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)); /* 2 colonnes */
    gap: var(--pm-gap, 16px);
    align-items: stretch;
    justify-items: stretch;
  }

  /* Les wrappers de ligne ne servent plus en mobile */
  .projets-mosaic-lines .pm-row{
    display: contents;
  }

  /* Vignettes uniformes */
  .projets-mosaic-lines .pm-card{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;      /* choisis : 1/1, 4/3, 16/9… */
  }

  /* S’assure que le média remplit bien */
  .projets-mosaic-lines .pm-media{
    width: 100%;
    height: 100%;
  }

  .projets-mosaic-lines .pm-img,
  .projets-mosaic-lines .pm-video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  /* Overlay toujours visible en mobile */
  .projets-mosaic-lines .pm-overlay{
    position: absolute;
    inset: auto 0 0 0;             /* collé en bas */
    padding: 10px 10px 8px;
    display: flex;
    justify-content: flex-start;       /* contenu à droite */
    align-items: flex-end;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: none;           /* le lien reste cliquable */
  }
  
  /* Petit dégradé discret (bas uniquement) */
  .projets-mosaic-lines .pm-overlay::before{
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 44%;                    /* pas très haut */
    background: linear-gradient(
      to top,
      rgba(0,0,0,.55),
      rgba(0,0,0,0)
    );
  }
  
  /* Assure que le texte passe au-dessus du dégradé */
  .projets-mosaic-lines .pm-overlay-inner{
    position: relative;
    z-index: 1;
    text-align: left;
    max-width: 92%;
  }
  
  /* Typo mobile (un peu plus compacte) */
  .projets-mosaic-lines .pm-title{
    font-size: 18px;
    line-height: 1.05;
  }
  
  .projets-mosaic-lines .pm-infos{
    font-size: 12px;
    line-height: 1.25;
    margin-top: 4px;
    opacity: .95;
  }
}

/* ============================================================
   5) ANIMATION APPARITION AU SCROLL (mosaïque)
============================================================ */

/* Animation uniquement si JS actif */
html.js .projets-mosaic-lines .pm-row{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}

html.js .projets-mosaic-lines .pm-row.is-in{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  html.js .projets-mosaic-lines .pm-row{
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   6) SINGLE PROJET 
============================================================ */

.is-single-projet header{
  display: none !important;
}

@media (max-width: 900px){
.title-project-page span {
  font-size : 10vw;
}
  .title-project-page  {
  margin-top : -12px !important;
}

.more-project p {
  font-size : 6vw;
}

.divider-project {
  margin-top : -50px;
  margin-bottom : -50px;
}
}


/* ============================================================
   7) “AUTRES PROJETS” (3 colonnes)
============================================================ */

.autres-projets-wrap{ margin-top: 40px; }

.autres-projets-title{ margin-bottom: 16px; }

.projets-related-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* Ratio spécifique related */
.projets-related-grid .pm-media{
  aspect-ratio: 16 / 10;
}

@media (max-width: 900px){
  .projets-related-grid{
    grid-template-columns: 1fr;
  }
}





/* ============================================================
   9) BOUTONS (retour + scroll top)
============================================================ */

.btn-retour-home{
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  text-decoration: none;
  color: inherit;
  position: relative;
}

.btn-scroll-top{
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 12px;
  text-decoration: none;
  color: inherit;
  padding: 0;
}


/* Petit séparateur “more project” */
.more-project::after{
  content: "";
  width: 20px;
  height: 1px;
  display: inline-block;
  border-bottom: 2px solid #000;
  position: relative;
  top: -5px;
}


/* ============================================================
   10) SCROLL FLUIDE
============================================================ */

html{
  scroll-behavior: smooth;
}





/* ==========================================
   11) FORMULAIRE 
========================================== */

/* Variables */
:root{
  --form-font-size: 14px;
  --form-line-height: 1.35;
  --form-placeholder-size: 13px;

  --form-text: #111;
  --form-placeholder: rgba(17,17,17,.55);

  --form-bg: rgba(0,0,0,.01);
  --form-border: rgba(0,0,0,.22);
  --form-border-hover: rgba(0,0,0,.35);
  --form-border-focus: rgba(0,0,0,.65);

  --form-radius: 0px;          
  --form-padding-y: 12px;
  --form-padding-x: 14px;

  --form-transition: .25s ease;
}

.wpcf7 form,
form{
  color: var(--form-text);
}

/* Champs */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="search"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea,
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="url"],
form input[type="search"],
form input[type="number"],
form input[type="date"],
form select,
form textarea{
  font-size: var(--form-font-size);
  line-height: var(--form-line-height);
  color: var(--form-text);

  background: var(--form-bg);
  border: 1px solid var(--form-border);
  border-radius: var(--form-radius);

  padding: var(--form-padding-y) var(--form-padding-x);

  outline: none;
  box-shadow: none;
  transition: border-color var(--form-transition), background var(--form-transition);
}

/* Placeholder */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder,
form input::placeholder,
form textarea::placeholder{
  font-size: var(--form-placeholder-size);
  color: var(--form-placeholder);
  opacity: 1; /* Safari */
}

/* Hover  */
.wpcf7 input:hover,
.wpcf7 select:hover,
.wpcf7 textarea:hover,
form input:hover,
form select:hover,
form textarea:hover{
  border-color: var(--form-border-hover);
}

/* Focus */
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus,
form input:focus,
form select:focus,
form textarea:focus{
  background: rgba(0,0,0,.02);
  border-color: var(--form-border-focus);
}

/* Textarea  */
.wpcf7 textarea,
form textarea{
  min-height: 140px;
  resize: vertical;
}

/* Labels  */
.wpcf7 label,
form label{
  display: block;
  font-size: 12px;
  letter-spacing: .02em;
  color: rgba(17,17,17,.75);
  margin-bottom: 6px;
}

/* Messages CF7 (erreurs / validation) */
.wpcf7-not-valid-tip{
  font-size: 12px;
  color: rgba(180,0,0,.85);
  margin-top: 6px;
}

.wpcf7 form .wpcf7-response-output{
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 0;
  font-size: 12px;
  line-height: 1.35;
}

/* Erreur sur champ */
.wpcf7 input.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-not-valid,
.wpcf7 select.wpcf7-not-valid{
  border-color: rgba(180,0,0,.55);
}

/* Bouton */
.wpcf7 input[type="submit"],
form button[type="submit"],
form input[type="submit"]{
  font-size: 12px;
  letter-spacing: .02em;
  padding: 14px 14px;

  background: transparent;
  color: var(--form-text);
  border: 1px solid rgba(0,0,0,.35);
  border-radius: 0;

  cursor: pointer;
  transition: border-color var(--form-transition), opacity var(--form-transition);
}

/* Au survol */
.wpcf7 input[type="submit"]:hover,
form button[type="submit"]:hover,
form input[type="submit"]:hover{
  border-color: rgba(0,0,0,.75);
  opacity: .9;
}



/* ==========================================
  12)  Lien externe (flèche diagonale ↗)
========================================== */

/* Lien externe avec flèche */
.link-external{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

/* Icône */
.link-external .external-icon{
  display:inline-flex;
  transition: transform .3s ease, opacity .3s ease;
  opacity:.75;
}

.link-external {
  color: #010101 !important;
}

.link-external:visited {
  color: #010101 !important;
}



/* ==========================================
  13)  Lecteur vidéo page projet
========================================== */




.pm-video-custom{
  width: 100%;
  position: relative;

  /* Thème UI */
  --pm-ui: #fff;
  --pm-ui-dim: rgba(255,255,255,.75);
  --pm-track: rgba(255,255,255,.25);
  --pm-fade: rgba(0,0,0,.28);
}

/* Stage + vidéo */
.pm-video-stage{
  position: relative;
  width: 100%;
  overflow: hidden;
}

.pm-video-stage video.pm-video{
  width: 100%;
  height: auto;
  display: block;
}

/* ---------------------------
   Overlay fade 
---------------------------- */
.pm-ui-fade{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 110px;
  z-index: 1;

  pointer-events: none !important;
  background: linear-gradient(to top, var(--pm-fade), rgba(0,0,0,0));

  opacity: 0;
  transition: opacity .2s ease;
}

/* ---------------------------
   Controls (barre du bas)
---------------------------- */
.pm-controls{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;

  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;

  background: transparent;
  color: var(--pm-ui);

  /* caché par défaut */
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;

  transition: opacity .25s ease, transform .25s ease;
}

/* visible UNIQUEMENT quand JS ajoute .is-hover */
.pm-video-custom.is-hover .pm-controls{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.pm-video-custom.is-hover .pm-ui-fade{
  opacity: 1;
}

/* Boutons */
.pm-btn{
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: var(--pm-ui);
  line-height: 1;
}

/* Timer */
.pm-time{
  display: inline-flex;
  gap: 6px;
  font-size: 12px;
  line-height: 1;
  color: var(--pm-ui-dim);
  white-space: nowrap;
}
.pm-time .pm-cur,
.pm-time .pm-dur{
  font-variant-numeric: tabular-nums;
}

/* Progress */
.pm-progress{
  flex: 1;
  height: 1px;
  background: var(--pm-track);
  position: relative;
  cursor: pointer;
}
.pm-progress-bar{
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: var(--pm-ui);
}

/* ---------------------------
   Gros bouton play (overlay)
---------------------------- */
.pm-bigplay{
  position: absolute;
  inset: 0;
  z-index: 3;

  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;

  /* caché par défaut */
  opacity: 0;
  pointer-events: none;

  transition: opacity .25s ease;
}

/* visible seulement au hover, si pas en lecture */
.pm-video-custom.is-hover:not(.is-playing) .pm-bigplay{
  opacity: 1;
  pointer-events: auto;
}

/* si lecture : pas de big play */
.pm-video-custom.is-playing .pm-bigplay{
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Icône play : cercle + triangle */
.pm-bigplay-icon{
  width: 54px;
  height: 54px;
  border: 1px solid var(--pm-ui);
  border-radius: 999px;
  position: relative;
}
.pm-bigplay-icon::after{
  content: "";
  position: absolute;
  left: 22px;
  top: 16px;
  width: 0; height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 16px solid var(--pm-ui);
}

/* ---------------------------
   Icônes minimalistes (CSS)
---------------------------- */
.pm-ico{
  display: inline-block;
  width: 14px;
  height: 14px;
  position: relative;
}

/* play/pause */
.pm-ico-play::before{
  content: "";
  position: absolute;
  left: 4px;
  top: 2px;
  width: 0; height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--pm-ui);
}

/* pause quand .is-playing */
.pm-video-custom.is-playing .pm-ico-play::before{
  content: "";
  position: absolute;
  left: 3px;
  top: 2px;
  width: 3px;
  height: 10px;
  background: var(--pm-ui);
  box-shadow: 6px 0 0 var(--pm-ui);
  border: none;
}

/* volume */
.pm-ico-volume::before{
  content: "";
  position: absolute;
  left: 1px;
  top: 4px;
  width: 5px;
  height: 6px;
  border: 1px solid var(--pm-ui);
  border-right: none;
}
.pm-ico-volume::after{
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 0; height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid var(--pm-ui);
}

/* fullscreen */
.pm-ico-full::before,
.pm-ico-full::after{
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border: 1px solid var(--pm-ui);
}
.pm-ico-full::before{
  left: 0; top: 0;
  border-right: none;
  border-bottom: none;
}
.pm-ico-full::after{
  right: 0; bottom: 0;
  border-left: none;
  border-top: none;
}

/* Accessibilité : reduce motion */
@media (prefers-reduced-motion: reduce){
  .pm-controls,
  .pm-ui-fade,
  .pm-bigplay{
    transition: none;
  }
}



/* Poster overlay (cover, sans toucher au ratio vidéo) */
.pm-poster{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* <-- cover + crop */
  object-position: center;
  z-index: 0;                 /* derrière UI, au-dessus de la vidéo si besoin */
  pointer-events: none;       /* ne bloque pas les clics */
  opacity: 1;
  transition: opacity .2s ease;
}

/* Vidéo en dessous */
.pm-video-stage video.pm-video{
  position: relative;
  z-index: 0;
}

/* Au play : on masque le poster overlay */
.pm-video-custom.is-playing .pm-poster{
  opacity: 0;
}





.site-intro-mobile {
  width: 75%;
  margin-right: auto;
  margin-left: auto;
}