/* Version: 23-09-2026-20-19 */
/* Éléments transverses du site visiteur (issus de l'ancien core/grid.css) :
   fermeture de contenu, boutons Arktefakt, champs, contrastes forcés, embeds vidéo.
   Toujours chargé, y compris en thème custom. La mise en page vit dans core/layout.css. */

/* CLOSE CONTENT */

#close-content {
  position: fixed;
  top: 0px;
  padding-top: 25px;
  left: 0;
  right: 0;
}

#close-content nav ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.close-content-button {
  cursor: pointer;
  transition: 0.2s linear;
}

.close-content-button:hover {
  opacity: 0.7;
}

.close-content-button img {
  width: 50px;
}


/* BUTTONS — .folio_button / thème : design/buttons/buttons.css ; ici uniquement héritage UI type formulaires */

/* Chrome éditeur / intégrations : boutons Arktefakt (.arkt-btn) */
#portfolio_page #portfolio-content-interface .arkt-btn,
#portfolio_page #hub-content-interface .arkt-btn {
  padding: 10px 20px;
  max-width: max-content;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: none;
  transition: 0.2s linear;
  cursor: pointer;
  filter: brightness(100%);
}

#portfolio_page #portfolio-content-interface .arkt-btn:hover,
#portfolio_page #hub-content-interface .arkt-btn:hover {
  filter: brightness(110%);
}

/* Hors chrome hub (éditeur de thème, overlay) : :where garde la spécificité d'origine. */
input:not(:where(#arktefakt-header, #arktefakt-top-bar, #arktefakt-editor-bar, #theme-parameter, #main-arktefakt-hub, #arktefakt_footer, .production-child-modal) *),
select:not(:where(#arktefakt-header, #arktefakt-top-bar, #arktefakt-editor-bar, #theme-parameter, #main-arktefakt-hub, #arktefakt_footer, .production-child-modal) *),
textarea:not(:where(#arktefakt-header, #arktefakt-top-bar, #arktefakt-editor-bar, #theme-parameter, #main-arktefakt-hub, #arktefakt_footer, .production-child-modal) *),
#loadmore:not(:where(#arktefakt-header, #arktefakt-top-bar, #arktefakt-editor-bar, #theme-parameter, #main-arktefakt-hub, #arktefakt_footer, .production-child-modal) *) {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  width: 100%;
}

#portfolio_page #portfolio-content-interface .arkt-btn-full,
#portfolio_page #hub-content-interface .arkt-btn-full,
form .arkt-btn {
  width: 100%!important;
  max-width: 100%!important;
}

#portfolio_page #portfolio-content-interface .arkt-btn svg,
#portfolio_page #hub-content-interface .arkt-btn svg {
  width: 20px;
  height: 20px;
}

#portfolio_page #portfolio-content-interface .arkt-btn span,
#portfolio_page #hub-content-interface .arkt-btn span {
  margin-left: 5px;
}

#portfolio_page #portfolio-content-interface .arkt-btn,
#portfolio_page #hub-content-interface .arkt-btn,
input[type="submit"]:not(.folio_button):not(.folio-button),
#form-menu li, #goto_project, .nav__content .nav__list li .sub-menu a {
  filter: brightness(100%);
}

#portfolio_page #portfolio-content-interface .arkt-btn:hover,
#portfolio_page #hub-content-interface .arkt-btn:hover,
input[type="submit"]:not(.folio_button):not(.folio-button):hover,
#delete ul li a:hover, #goto_project:hover, .nav__content .nav__list li:hover .sub-menu a:hover, .nav__content .nav__list li a:hover {
  filter: brightness(110%);
} 

input[type=radio] {
  margin-bottom: 0px;
}

input[type="radio"] {
  width: 15px;
  height: 15px;
}

input[type=color] {
  width: 100%;
  height: 10vh;
}

.-black, .-black * {
  color: #000000!important;
}

.-black svg {
  fill: #000000!important;
}

.-white, .-white * {
  color: #ffffff!important;
}

.-white svg {
  fill: #ffffff!important;
}

.-black:hover, .-black:hover *, menu-item .-black:hover {
  color: #000000!important;
}

.-black:hover svg {
  fill: #000000!important;
}

.-white:hover, .-white:hover *, .menu-item .-white:hover {
  color: #ffffff!important;
}

.-white:hover svg {
  fill: #ffffff!important;
}



/* YOUTUBE & FACEBOOK (paysage) */

.youtube,
.facebook:not(.video-portrait) {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.youtube iframe,
.youtube object,
.youtube embed,
.facebook:not(.video-portrait) iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Portrait : Shorts, TikTok, Instagram, Reels Facebook — pleine largeur, ratio 9:16 */
.youtube.video-portrait,
.tiktok,
.tiktok.video-portrait,
.instagram,
.instagram.video-portrait,
.facebook.video-portrait {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  aspect-ratio: 9 / 16;
  height: auto;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

.youtube.video-portrait iframe,
.tiktok iframe,
.tiktok.video-portrait iframe,
.instagram iframe,
.instagram.video-portrait iframe,
.facebook.video-portrait iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

h1, h2, h3, h4, label, select, .arkt-btn, p, a {
  white-space: wrap;
  overflow: hidden;
  text-overflow: ellipsis;
}