/*!
Theme Name: 11bis 2025
Theme URI: http://underscores.me/
Author: 11bis
Author URI: http://11bis
Description: 11bis
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: onzebistheme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

11bis 2025 is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

#alobaidi-loading-bar {
    height: 2px !important;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */

body {
	background: #fff;
}

.mix-blend-difference {
    mix-blend-mode: difference;
	background: transparent;
}

header {
	font-family: area-normal, sans-serif;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
	color: #fff;
}

header a {
    color: #fff;
    text-decoration: none;
}

.logo-m { 
	position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 55px;
    overflow: hidden;
	pointer-events: none;	
	z-index: 2;
	filter: invert(1);
}

.logo-m img { 
	width: 100%;
    height: 100%;
    object-fit: contain;
}

.titre-m { 
	top: 20px;
	left: 20px;
	position: fixed;
	z-index: 100;
}

.adresse-m { 
	position: fixed; 
	top: 20px;
	right: 20px;
    text-align: right;
	z-index: 100;
}

.social-m { 
	position: fixed; 
	bottom: 20px;
	right: 20px;
    text-align: right;
	z-index: 100;
}

.social-m a {
	color: #fff;
	text-decoration: none;
}

.main-navigation {
	display: none;
}

.swiper-container-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
	display: flex;
    justify-content: center;
    align-items: center;
	z-index: 1;
}

.swiper {
    width: 100%;
    height: 100%;
	display: flex;
    align-items: center;
}

.swiper-wrapper {
    display: flex;
    align-items: center;
}

.swiper-slide {
    height: 55vh;
    width: 44vh; /* 80vh * 4/5 = 64vh pour garder le ratio 4:5 */
    flex-shrink: 0;
}

.projet-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.projet-media {
    width: 100%;
    height: 100%;
}

.projet-image {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.projet-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.projet-titre-fixed {
	position: fixed;
	bottom: 15%;
	left: 50%;
	transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: none;
    text-align: center;
}

.projet-titre-fixed h2 {
    font-family: area-normal, sans-serif;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
	color: #000;
}

/** Archives **/

.archive-posts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    padding: 60px 20px 20px 20px;
}

/* Thumbnail avec ratio 4:5 */
.archive-thumbnail,
.archive-thumbnail.archive-video {
    position: relative;
    width: 100%;
    padding-bottom: 125%; /* Ratio 4:5 (5/4 = 1.25) */
    overflow: hidden;
    background-color: #f0f0f0;
    box-sizing: border-box;
}

.archive-thumbnail a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.archive-thumbnail img,
.archive-thumbnail video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
}

/* Entry header et meta */
.archive-item .entry-header {
    margin: 15px 0 30px 0;
    justify-content: center;
}

.archive-item .entry-title {
    font-size: 16px;
    display: flex;
    justify-content: center;
}

.archive-item .entry-title a {
    text-decoration: none;
    color: inherit;
}

.projet-meta {
    display: flex;
    flex-direction: column;
    text-align: center;
    color: #00000071 !important;
}

.archive-item a {
	text-decoration: none;
}

.archive-item h2 {
	font-family: area-normal, sans-serif;
    font-size: 10px !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
	color: #000;
}
.archive-item .projet-categorie,
.archive-item .projet-date {
	font-family: area-normal, sans-serif;
    font-size: 11px !important;
	letter-spacing: 0.5px;
    font-weight: 600;
    text-transform: initial;
}

.entry-title {
    color:#000;
}

header.entry-header {
    display: flex;
}

/* Couverture plein écran */
.projet-cover {
    position: relative;
    width: 50%;
    height: 100vh;
    overflow: hidden;
}

.projet-cover-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Image en background */
.projet-cover-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Vidéo plein écran */
.projet-cover-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Contenu superposé (titre, etc.) */
.projet-cover-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 4rem 2rem;
    color: white;
    z-index: 10;
}

/* Contenu après la couverture */
.projet-content-wrapper {
    padding: 4rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.entry-content {
    position: relative;
    width: 50%;
    height: 100vh;
    color: #000;
}

.entry-content .description {
    position: absolute;
    left: 50%;
    top: 50%;
    max-width: 400px;
    text-align: center;
    transform: translate(-50%, -50%);
}

.entry-content .cta-client,
.cta-mail {
    position: relative;
    margin-bottom: 40px;
    display: inline-block;
}

.entry-content h1,
.cta-mail div {
    display: flex;
}

.entry-content h1 .arrow,
.cta-mail div .arrow {
    padding-left: 6px;
}

.projet-external-link {
    color: #000;
    text-decoration: none;
    font-family: area-normal, sans-serif;
    font-size: 10px !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
	color: #000;
}

.entry-content .cta-client:after,
.cta-mail:after {
    content:'';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #000;
}

.wp-block-columns {
    gap: 0px; /* espace entre les colonnes */
}

/* About */

.page-about {
    width: 100%; 
    height: 100vh; 
    padding: 100px 20px 20px 20px;
    background: #e5e5e5
}

.bio,
.selected-clients,
.mails {
    max-width: 400px;
    font-family: area-normal, sans-serif;
    font-size: 10px !important;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
	color: #000;
}

.selected-clients,
.mails {
    margin-top: 100px;
    line-height: 1.8;
}

.selected-clients ul {
    margin-top: 10px;
}

/* Responsive */
@media (max-width: 1400px) {
    .archive-posts {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {

	header.entry-header {
    display: block;
}
	
    .projet-cover {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

	.entry-content {
    position: relative;
    width: 100%;
    color: #000;
}
}

@media (max-width: 768px) {
    .archive-posts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}

@media (max-width: 480px) {
    .archive-posts {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}