/*
 Theme Name:   Opération Iceberg
 Description:  Theme pour Opération Iceberg
 Author:       We used to be friends
 Template:     twentytwelve
*/

@font-face {
	font-family: 'gravur';
	src: url('fonts/gravurcondensed-bold-webfont.woff2') format('woff2'),
	     url('fonts/gravurcondensed-bold-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
body.custom-font-enabled {
    font-family: Montserrat, Helvetica, Arial, sans-serif;
}
:root {
	--oi-bleu: #6697d2;
	--oi-bleu-fonce: #3954a4;
	--oi-bleu-moyen: #3e6bb7;
	--oi-marine: #002e3d;
	--oi-nuit: #171a42;
	--oi-indigo: #22265f;
	--oi-jaune: #fcffc9;
	--oi-rose: #f5c1c0;
	--oi-turquoise: #bdf8f1;
	--oi-creme: #f6efe8;

	/* Fonds des blocs : ils étaient définis dans le CSS généré par Elementor
	   (non fourni). Valeurs provisoires à ajuster. */
	--oi-fond-territoire: var(--oi-indigo);
	--oi-fond-presse: #f6efe8;
	--oi-fond-stat: #eef3fa;
	--oi-fond-stat-fonce: linear-gradient(to bottom, #7eadd9, #274c9c);
}

    body .site {
        padding: 0;
        margin-top: 0;
        margin-bottom: 0;
        box-shadow: none;
    }
       .site {
        max-width: 100%;
    }
        body {
        background-color: #FFF;
        font-size: 1.05rem;
    }
		div {
			hyphens: none;
		}
a {
    color: #444;
}
a:hover {
    color: #444;
    text-decoration: none;
}
a, a:hover, a:focus{
	outline: 0;
}
h1, h2, h3, h4, h5, h6 {
    hyphens: none;
}
.entry-content h3 {
    color: var(--oi-bleu-fonce);
    font-size: 22px;
    line-height: 1.2;
}
   header#masthead {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 15px 40px;
    align-items: center;
}
.site-content article {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}
.entry-content img, .comment-content img, .widget img, img.header-image, .author-avatar img, img.wp-post-image {
    border-radius: 0;
    box-shadow: none;
}
/* ---------- Typo titres ---------- */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.oi-chiffre-cle,
.oi-stat__nombre,
.oi-bouton {
	font-family: "gravur", Helvetica, Arial, sans-serif;
	font-weight: normal;
}

/* ---------- Bouton ---------- */
.oi-bouton {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	margin: 10px 0;
	padding: .6em 1.2em;
	border-radius: 20px;
	background: var(--oi-bleu);
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .03em;
	transition:0.2s;
	align-self: flex-start;
}
.oi-bouton::before { content: "→"; }
.oi-bouton:hover,
.oi-bouton:focus-visible { background: var(--oi-nuit); color: #fff; }
.oi-bouton--label { background: transparent; color: var(--oi-bleu); padding-left: 0; }

/* =========================================================
   Territoire
   (l'ancienne 3e colonne vide de 18.275 % devient une marge)
   ========================================================= */

.oi-territoire {
    display: flex;
    flex-wrap: wrap;
}
.oi-territoire__carte {
    width: 50%;
    padding: 0;
}
.oi-territoire__carte img {
	display: block; width: 100%; height: auto;
	padding:30px;
	box-sizing: border-box; /* le padding reste dans les 100 % (sinon l'image déborde de sa colonne) */
}
.oi-territoire__texte {
    background: var(--oi-fond-territoire);
    width: calc(50% - 80px);
    padding: 40px;
	display: flex;
	justify-content: center;
	flex-direction: column;
}
.oi-chiffre-cle {
	font-size: clamp(44px, 7vw, 75px);
	margin-bottom: 0 !important;
	line-height: 1.1 !important;
	text-transform: uppercase;
}
.oi-chiffre-cle--jaune { color: var(--oi-jaune); }
.oi-chiffre-cle--rose { color: var(--oi-rose); }
.oi-chiffre-cle--turquoise { color: var(--oi-turquoise); }

.oi-territoire__detail {
	margin: 0 0 10px;
	font-family: 'Montserrat', sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.1;
	text-transform: uppercase;
}
.oi-territoire__detail--rose { color: var(--oi-rose); }
.oi-territoire__detail--turquoise { color: var(--oi-turquoise); margin-bottom: 20px; }
p.matomooptu {
    margin-bottom: 0;
}
/* =========================================================
   La presse en parle
   (les 2 colonnes vides de bord deviennent des marges)
   ========================================================= */
.oi-presse {
    display: flex;
    flex-wrap: wrap;
}
.oi-presse__interview {
    grid-column: 2;
    width: calc(50% - 80px);
    padding: 40px 40px 40px 40px;
    display: flex;
    justify-content: end;
        background: var(--oi-fond-presse);
}
.oi-presse__interview h2 {
	font-size: clamp(36px, 5vw, 60px);
	line-height: 0.9;
	color:#002e3d;
	margin-top: 0;
}
p.oi-source.oi-source--petit {
    margin-bottom: 0;
}
#wrapcontpressitw p.oi-source.oi-source--petit {
    margin-top: 10px;
}
.oi-presse__interview .oi-bouton {
	background:#002e3d;
	color: white;
	padding-left: 15Px;
	transition:0.2s;
}
.oi-presse__article {
    background: #d3d2d3;
    padding: 0 40px 0 0;
    width: calc(50% - 40px);
}
.oi-presse__article img {
    max-width: 417px;
}
.oi-presse__article img { display: block; width: 100%; height: auto; }
.oi-source { font-size: 12px; font-style: italic; }
.oi-source--petit { font-size: 11px; }

/* Lecteur audio WordPress (MediaElement) – repris de l'ancien CSS */
.oi-presse .mejs-container,
.oi-presse .mejs-container * { border-radius: 20px; }
.oi-presse .mejs-controls { background: var(--oi-bleu) !important; }
.oi-presse .mejs-volume-button,
.oi-presse .mejs-horizontal-volume-slider { display: none !important; }

/* =========================================================
   Bilan 2013-2025
   ========================================================= */
.oi-bilan {
	max-width: 1140px;
	margin: 0 auto;
	padding: 40px 20px;
}
.oi-bilan__titre {
	max-width: 66%;
	margin-bottom: 40px;
	color: var(--oi-nuit);
	text-transform: uppercase;
}
.oi-bilan__grille { display: grid; gap: 20px; margin-bottom: 20px; }
.oi-bilan__grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oi-bilan__grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.oi-stat {
    position: relative;
    padding: 30px;
    background: #f6efe8;
    border-radius: 20px;
    border: 1px solid #6697d2;
}
.oi-stat--fonce { background: var(--oi-fond-stat-fonce); color: #fff; }
.oi-stat--fonce .oi-stat__nombre { color: #fff; }
.oi-stat__nombre--marine { color: var(--oi-marine); }

.oi-stat__label { margin: 10px 0; text-transform: uppercase; }
.oi-stat--fonce .oi-stat__label { color: #fff; }
.oi-stat__exemples {
	color: var(--oi-creme);
	font-size: 14px;
	text-transform: uppercase;
}
.oi-accent { color: var(--oi-bleu); }

.oi-stat__lien {
	display: inline-block;
	font-family: "gravur", Helvetica, Arial, sans-serif;
	font-size: 2.5rem;
	line-height: 1;
	color: var(--oi-bleu);
	text-decoration: none;
}
.oi-stat--fonce .oi-stat__lien { color: #f5f5f5; }
h3.oi-stat__label span {
    display: block;
}
h3.oi-stat__label {
    line-height: 1.2 !important;
    font-size: 25px;
    margin: 0;
}
.oi-stat__nombre {
    margin: 0;
    font-size: clamp(64px, 10vw, 120px);
    line-height: 1 !important;
    color: var(--oi-bleu);
    margin-bottom: 0 !important;
}
.page-template-carrefour .oi-stat__nombre {
    font-size: 45px;
}
.page-template-carrefour h3.oi-stat__label {
    font-size: 20px;
    text-transform: none;
    margin-top: 10px;
}
.page-template-carrefour .entry-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}
.introductionpage {
    max-width: calc(66.666% - 5px);
    margin-bottom: 40px;
}
h2.oi-bilan__titre {
    font-size: 30px;
}
.oi-stat--cliquable {
	position: relative;
	cursor: pointer;
}

.oi-stat--cliquable .oi-stat__lien::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.oi-stat--cliquable:hover,
.oi-stat--cliquable:focus-within {
	transform: translateY(-2px);
}
.oi-hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw); /* pleine largeur hors du conteneur */
	min-height: min(900px, 72.58vw);
	background-color: var(--oi-nuit);
	background-image: var(--oi-hero-bg, none);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: #fff;
	overflow: hidden;
}
.oi-hero__contenu {
	max-width: 1500px;
	margin: 0 auto;
	padding: 250px 40px 80px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.oi-hero__surtitre,
.oi-hero__titre,
.oi-hero__soustitre {
	margin: 0;
	font-family: "gravur", Helvetica, Arial, sans-serif;
	font-weight: normal;
	color: #fff;
	text-transform: uppercase;
	animation: oi-hero-entree 1s ease-out both;
}
.oi-hero__surtitre {
	--oi-decal: -63px;
	margin-left: min(10px, .81vw);
	font-size: clamp(13px, 1.45vw, 18px);
	line-height: 1.44;
	margin-bottom: 10px !important;
}
.oi-hero__titre {
	--oi-decal: -50px;
	margin-top: min(40px, 3.23vw);
	letter-spacing: -.0167em;
	font-size: clamp(48px, 10vw, 120px) !important; /* !important conservé face aux titres de Twenty Twelve */
	line-height: 0.9 !important;
}
.oi-hero__soustitre {
	--oi-decal: -63px;
	margin: min(10px, .81vw) 0 0 min(6px, .48vw);
	font-size: clamp(14px, 1.61vw, 20px);
	line-height: 1.3;
}
/* =========================================================
   Intervenant·e·s (archive du CPT)
   ========================================================= */

/* Pleine largeur : Twenty Twelve limite .site-content à 65 % */
.oi-intervenants-page.site-content {
	float: none;
	width: 100%;
}
li.oi-intervenant {
    margin: 0;
}
.oi-intervenants {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 40px 24px;
    margin: 0;
    padding: 0 40px;
    list-style: none;
    max-width: 1400px;
    margin: 0 auto 50px !important;
}
h2.oi-intervenant__nom {
    line-height: 1;
    margin-bottom: 8px;
}
p.oi-intervenant__fonction {
    margin-bottom: 0;
}
.oi-intervenant {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	text-align: center;
	scroll-margin-top: 100px; /* ancre sous un header fixe */
}

/* Photo au format d'origine 280×150 */
.oi-intervenant__photo {
	width: 100%;
	aspect-ratio: 28 / 15;
	overflow: hidden;
	background: var(--oi-bleu, #6697d2);
}
.oi-intervenant__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.oi-intervenant__initiale {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	font-family: "gravur", Helvetica, Arial, sans-serif;
	font-size: 4rem;
	color: #fff;
}

.oi-intervenant__nom {
	margin: 14px 0 4px;
	font-family: "gravur", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 1.35rem;
	line-height: 1.2;
	color: var(--oi-nuit, #171a42);
}

.oi-intervenant__fonction {
	margin: 0;
	font-size: .9rem;
	line-height: 1.4;
	color: var(--oi-bleu-fonce, #3954a4);
}

/* Biographie dépliable */
.oi-intervenant__bio {
	width: 100%;
	margin-top: 10px;
}
.oi-intervenant__bio summary {
	display: inline-block;
	padding: .35em 1em;
	border-radius: 20px;
	background: var(--oi-bleu, #6697d2);
	color: #fff;
	font-family: "gravur", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	letter-spacing: .03em;
	cursor: pointer;
	list-style: none;
}
.oi-intervenant__bio summary::-webkit-details-marker { display: none; }
.oi-intervenant__bio summary::before { content: "+ "; }
.oi-intervenant__bio[open] summary::before { content: "− "; }
.oi-intervenant__bio summary:hover,
.oi-intervenant__bio summary:focus-visible { background: var(--oi-nuit, #171a42); }

.oi-intervenant__bio-texte {
	margin-top: 12px;
	font-size: .9rem;
	line-height: 1.5;
	text-align: left;
}
.oi-intervenant__bio-texte p { margin: 0 0 .8em; }

footer[role="contentinfo"] {
    border-top: 0;
    max-width: 100%;
    margin-top: 0;
}
.oi-intervenant__bouton {
	margin-top: 10px;
	padding: .35em 1em;
	border: 0;
	border-radius: 20px;
	background: var(--oi-bleu, #6697d2);
	color: #fff;
	font-family: "gravur", Helvetica, Arial, sans-serif;
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	cursor: pointer;
}
.oi-intervenant__bouton::before { content: "+ "; }
.oi-intervenant__bouton:hover,
.oi-intervenant__bouton:focus-visible { background: var(--oi-nuit, #171a42); }

/* Fenêtre modale */
.oi-modal {
	width: min(640px, calc(100% - 32px));
	max-height: calc(100vh - 64px);
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: #fff;
	color: var(--oi-nuit, #171a42);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
	overflow: auto;
}
.oi-modal::backdrop {
	background: rgba(23, 26, 66, .7);
}
html:has(.oi-modal[open]) { overflow: hidden; } /* bloque le défilement de la page */

.oi-modal__boite {
	position: relative;
	padding: 36px 32px 28px;
}
.oi-modal__fermer {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--oi-nuit, #171a42);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}
.oi-modal__fermer:hover,
.oi-modal__fermer:focus-visible { background: #eef3fa; }

.oi-modal__entete {
	margin-bottom: 18px;
	padding-right: 40px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--oi-bleu, #6697d2);
}
.oi-modal__nom {
	margin: 0;
	font-family: "gravur", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: 2rem;
	line-height: 1.1;
}
.oi-modal__fonction {
	margin: 6px 0 0;
	color: var(--oi-bleu-fonce, #3954a4);
	font-size: 1rem;
}
.oi-modal__texte {
	font-size: .95rem;
	line-height: 1.6;
	text-align: left;
}
.oi-modal__texte p { margin: 0 0 1em; }
.main-navigation {
    margin-top: 0;
    text-align: center;
}
.main-navigation li {
    margin: 0 0 0 40px;
}
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
        border-bottom: 0;
        border-top: 0;
    }
/* =========================================================
   Fiche artiste
   ========================================================= */

/* Pleine largeur : sans sidebar sur les fiches artistes */
.single-artiste .site-content {
	float: none;
	width: 100%;
}

/* ---------- Hero ---------- */
.oi-artiste__hero {
	position: relative;
	display: flex;
	align-items: center;
	width: 100vw;
	min-height: min(620px, 80vh);
	margin-left: calc(50% - 50vw);
	background-color: var(--oi-nuit, #171a42);
	background-image:
		linear-gradient(to right, rgba(23, 26, 66, .75) 0%, rgba(23, 26, 66, .25) 70%),
		var(--oi-artiste-fond, none);
	background-position: center;
	background-size: cover;
	color: #fff;
}
.oi-artiste__hero-contenu {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 120px 24px 80px;
}
.oi-artiste__intro {
	margin: 0 0 20px;
	font-size: clamp(16px, 2vw, 26px);
	font-weight: 500;
	line-height: 1.2;
	text-transform: uppercase;
}
.oi-artiste__style { color: #fff; }
.oi-artiste__sep,
.oi-artiste__origine { color: #77b1e5; }

.oi-artiste__nom {
	margin: 0 0 10px;
	font-family: "gravur", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: clamp(48px, 8vw, 90px);
	line-height: .95;
	color: #fff;
	text-transform: uppercase;
	overflow-wrap: anywhere; /* noms longs comme « assis//MÉTRIQUE » */
}
.oi-artiste__support {
	margin: 0;
	font-family: "gravur", Helvetica, Arial, sans-serif;
	font-size: clamp(18px, 2vw, 24px);
	color: #fff;
	text-transform: uppercase;
}

/* ---------- Bandeau réseaux ---------- */
.oi-artiste__reseaux {
	--oi-artiste-icone-fond: #22265f;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	background: #22265f;
	box-shadow: 0 2px 6px rgba(100, 100, 100, .3);
}
.oi-artiste__reseaux-contenu {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 20px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 12px 24px;
}
.oi-artiste__reseaux-titre {
	margin: 0;
	color: #77b1e5;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .05em;
}
.oi-artiste__reseaux ul {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.oi-artiste__reseaux a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--oi-bleu, #6697d2);
	color: #fff;
	transition: background .2s;
}
.oi-artiste__reseaux a:hover,
.oi-artiste__reseaux a:focus-visible {
	--oi-artiste-icone-fond: #fff;
	background: #fff;
	color: #22265f;
}
.oi-artiste__reseaux svg { width: 20px; height: 20px; }

/* ---------- Vidéo + description ---------- */
.oi-artiste__contenu {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
	max-width: 1180px;
	margin: 0 auto;
	padding: 50px 24px;
	line-height: 1.5;
}
.oi-artiste__contenu--seul {
	grid-template-columns: minmax(0, 860px);
	justify-content: center;
}
.oi-artiste__video {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #000;
}
.oi-artiste__video iframe {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
}
.oi-artiste__description p { margin: 0 0 1em; }

.oi-artiste__retour {
	max-width: 1180px;
	margin: 0 auto 50px;
	padding: 0 24px;
}
.oi-artiste__retour a {
	font-family: "gravur", Helvetica, Arial, sans-serif;
	color: var(--oi-bleu, #6697d2);
	text-decoration: none;
	text-transform: uppercase;
}

/* ---------- Autres artistes de l'édition (carousel) ---------- */
.oi-autres-artistes {
    max-width: 1308px;
    margin: 0 auto 50px;
    padding: 10px 0 0;
}
.oi-autres-artistes__titre {
	margin: 0 0 24px;
	padding: 0 24px;
}

.oi-carousel {
	--oi-carousel-gap: 16px;
	--oi-carousel-cols: 3;
	position: relative;
	padding: 0 40px; /* même retrait que .oi-artistes__grille */
}
.oi-carousel--defile { padding: 0 64px; } /* place pour les flèches */

.oi-carousel__piste {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--oi-carousel-cols) - 1) * var(--oi-carousel-gap)) / var(--oi-carousel-cols));
	gap: var(--oi-carousel-gap);
	margin: 0 !important;
	padding: 6px 0 !important; /* laisse respirer le contour de focus des cartes */
	list-style: none !important;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.oi-carousel__piste::-webkit-scrollbar { display: none; }
.oi-carousel__piste:focus-visible { outline: 3px solid var(--oi-bleu, #6697d2); outline-offset: 4px; }
.oi-carousel__piste > li {
	margin: 0;
	list-style: none !important;
	scroll-snap-align: start;
}
.oi-carousel__piste > li::marker { content: "" !important; }

.oi-carousel__fleche {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--oi-bleu, #6697d2);
	color: #fff;
	cursor: pointer;
	box-shadow: none;
	transform: translateY(-50%);
	transition: background .2s, opacity .2s;
}
.oi-carousel__fleche[hidden] { display: none; }
.oi-carousel__fleche--prec { left: 8px; }
.oi-carousel__fleche--suiv { right: 8px; }
.oi-carousel__fleche svg { width: 22px; height: 22px; }
.oi-carousel__fleche:hover,
.oi-carousel__fleche:focus-visible { background: var(--oi-nuit, #171a42); }
.oi-carousel__fleche:focus-visible { outline: 3px solid var(--oi-bleu, #6697d2); outline-offset: 2px; }
.oi-carousel__fleche:disabled { opacity: .3; cursor: default; background: var(--oi-bleu, #6697d2); }

/* Mêmes paliers que .oi-artistes__grille : 3 → 2 → 1 colonnes */
@media (max-width: 900px) {
	.oi-carousel { --oi-carousel-cols: 2; }
}
@media (max-width: 520px) {
	/* 1 carte + un bout de la suivante pour inviter à faire glisser ; pas de flèches */
	.oi-carousel,
	.oi-carousel--defile { padding: 0 24px; }
	.oi-carousel__piste { grid-auto-columns: 85%; scroll-padding: 0; }
	.oi-carousel__fleche { display: none !important; }
}
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* =========================================================
   Page Artistes
   ========================================================= */
.oi-artistes-page .site-content,
.page-template-default .oi-artistes-page { width: 100%; }

.oi-artistes { margin: 0 0 60px; }

.oi-artistes__titre,
.oi-artistes__edition {
	font-family: "gravur", Helvetica, Arial, sans-serif;
	font-weight: normal;
	text-transform: uppercase;
	color: var(--oi-nuit, #171a42);
}
.oi-artistes__titre { margin: 0 0 10px; font-size: clamp(28px, 4vw, 42px); }
.oi-artistes__edition {
	margin: 30px 0 16px;
	font-size: clamp(20px, 2.4vw, 26px);
	color: var(--oi-bleu, #6697d2);
}
.oi-artistes__grille {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 0;
    padding: 0 40px !important;
    list-style: none;
    max-width: 1400px;
    margin: 0 auto !important;
}
.oi-artistes__grille > li { margin: 0; }
h2.oi-artistes__titre {
    text-align: center;
}
h3.oi-artistes__edition {
    text-align: center;
}
.oi-artistes__bloc {
    margin-bottom: 50px;
}
/* ---------- Édition en cours : cartes ---------- */
.oi-carte__lien {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: var(--oi-nuit, #171a42);
	color: #fff;
	text-decoration: none;
}
.oi-carte__lien:hover .oi-carte__nom {
	color:white !important;
}
.oi-carte__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.oi-carte__texte {
	position: absolute;
	inset: auto 0 0 0;
	padding: 40px 16px 14px;
	background: linear-gradient(to top, rgba(23, 26, 66, .9), transparent);
}
.oi-carte__nom {
	display: block;
	font-family: "gravur", Helvetica, Arial, sans-serif;
	font-size: 2.2rem;
	line-height: 1.05;
	text-transform: uppercase;
}
.oi-carte__style {
	display: block;
	margin-top: 4px;
	font-size: .85rem;
	color: #77b1e5;
	text-transform: uppercase;
}
.oi-carte__lien:hover img,
.oi-carte__lien:focus-visible img { transform: scale(1.05); }
.oi-carte__lien:focus-visible { outline: 3px solid var(--oi-bleu, #6697d2); outline-offset: 2px; }

.oi-artistes__grille {
	list-style: none !important;
}

.oi-artistes__grille li {
	list-style: none !important;
}

.oi-artistes__grille li::marker {
	content: "" !important;
}

.oi-tuile__lien {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 180px;
	overflow: hidden;
	background: var(--oi-nuit, #171a42);
	text-decoration: none;
}
.oi-tuile__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease, filter .4s ease;
	filter: brightness(.75);
}
.oi-tuile__nom {
	position: relative;
	padding: 0 12px;
	font-family: "gravur", Helvetica, Arial, sans-serif;
	font-size: clamp(1.4rem, 2.2vw, 2rem);
	line-height: 1.1;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	text-shadow: 0 0 10px #000;
}
.oi-tuile__lien:hover .oi-tuile__image,
.oi-tuile__lien:focus-visible .oi-tuile__image { transform: scale(1.05); filter: brightness(.55); }
.oi-tuile__lien:focus-visible { outline: 3px solid var(--oi-bleu, #6697d2); outline-offset: 2px; }
.entry-content h2, .comment-content h2, .mu_register h2 {
    font-size: 2.285714286rem;
    line-height: 1.2;
}

/* =========================================================
   Accueil : intro + vidéo + artistes de l'édition
   ========================================================= */
.oi-accueil {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	background: linear-gradient(to bottom, #26438f, #161b43);
	color: #fff;
}
.oi-accueil__contenu {
	max-width: 1500px;
	margin: 0 auto;
	padding: 60px 40px;
}
.oi-accueil__intro {
	margin: 0 auto 40px;
	text-align: center;
	max-width:1100px;
	padding:0 40px;
	font-size: 1.15rem;
	line-height: 1.6;
}
.oi-accueil__intro p { margin: 0 0 1em; color: #fff; }
.oi-accueil__intro strong { font-weight: 700; }

.oi-accueil__video {
	position: relative;
	margin: 0 auto 90px;
	max-width:1100px;
	padding:0 40px;
	aspect-ratio: 16 / 9;
	background: #000;
}
.oi-accueil__video iframe {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
}

.oi-accueil__titre {
	margin: 0 0 20px;
	font-family: "gravur", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: clamp(34px, 6vw, 60px) !important;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
}
.oi-accueil__tous {
	margin: 30px 0 0;
	text-align: center;
}
.oi-accueil .oi-bouton:hover,
.oi-accueil .oi-bouton:focus-visible { background: #fff; color: var(--oi-nuit, #171a42); }

.site-header {
	position: absolute;
	z-index: 1000;
	top: 0;
	left: 0;

	width: 100%;
	height: 110px;

	background: transparent;

	transition:
			height .3s ease,
			background-color .3s ease,
			box-shadow .3s ease;
	padding:0 !important;
}
.site-header__inner {
    width: calc(100% - 56px);
    height: 100%;
    padding: 0 28px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.site-header__logo {
	display: block;
	flex-shrink: 0;
}
.site-header__logo img {
	display: block;
	width: 180px;
	height: auto;

	transition:
			width .3s ease,
			filter .3s ease;
}
.site-header__menu {
	display: flex;
	align-items: center;
	gap: 42px;

	margin: 0;
	padding: 0;

	list-style: none;
}

.site-header__menu li {
	margin: 0;
	padding: 0;

	list-style: none;
}
body.template-front-page .site-content, body.attachment .site-content, body.full-width .site-content {
	margin-top:0 !important;
}
.site-header__menu li::marker {
	content: "";
}
.site-header__menu a {
    position: relative;
    display: block;
    padding: 20px 0;
    color: #315fa9;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    transition: color .25s ease;
}
.single-artiste .site-header__menu a, .site-header .site-header__toggle {
color: #FFF !important;
}
.single-artiste svg.site-header__chevron path {
    stroke: #FFF !important;
}
.site-header__menu a::after {
	content: "";

	position: absolute;
	left: 0;
	bottom: 11px;

	width: 100%;
	height: 1px;

	background: currentColor;

	transform: scaleX(0);
	transform-origin: left;

	transition: transform .25s ease;
}

.site-header__menu a:hover::after,
.site-header__menu .current-menu-item > a::after,
.site-header__menu .current_page_item > a::after {
	transform: scaleX(1);
}

/* Header fixe au défilement (classe ajoutée par js/oi-header.js) */
.site-header.is-scrolled {
	position: fixed;

	height: 70px;

	background: var(--oi-nuit);

	box-shadow: 0 4px 20px rgba(0, 0, 0, .25);

	animation: oi-header-entree .35s ease-out; /* pas de « both » : un transform resté actif casserait le panneau mobile */
}
.site-header.is-scrolled .site-header__inner {
	padding-top: 0;
	padding-bottom: 0;
}
/* Connecté : le header fixe passe sous la barre d'administration */
.admin-bar .site-header.is-scrolled { top: 32px; }

.site-header.is-scrolled .site-header__logo img {
	width: 130px;
	filter: brightness(0) invert(1);
}

.site-header.is-scrolled .site-header__menu a {
	color: #FFF;
}

.site-header.is-scrolled .site-header__menu .current-menu-item > a,
.site-header.is-scrolled .site-header__menu .current_page_item > a,
.site-header.is-scrolled .site-header__menu a:hover {
	color: #fff;
}

.site-header__burger {
	display: none;

	width: 32px;
	padding: 0;

	border: 0;
	background: none;

	cursor: pointer;
}

.site-header__burger span {
	display: block;

	width: 100%;
	height: 2px;

	margin: 6px 0;

	background: #315fa9;

	transition: .3s ease;
}

.site-header.is-scrolled .site-header__burger span {
	background: #fff;
}

/* =========================================================
   Menu principal : sous-menus
   ========================================================= */
html { scroll-padding-top: 90px; } /* les ancres ne passent pas sous le header fixe */
html.oi-menu-ouvert { overflow: hidden; } /* menu mobile ouvert : la page ne défile plus */

.site-header__menu > li { position: relative; }

/* Intitulé parent = bouton (préfixe .site-header pour passer devant les styles « button » de Twenty Twelve) */
.site-header .site-header__toggle {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 20px 0;
	border: 0;
	border-radius: 0;
	background: none;
	background-image: none;
	box-shadow: none;
	text-shadow: none;
	color: #315fa9;
	font: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: inherit;
	cursor: pointer;
	transition: color .25s ease;
}
.site-header__toggle::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 11px;
	width: calc(100% - 16px); /* soulignement sous le texte, pas sous le chevron */
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s ease;
}
.site-header__toggle:hover::after,
.site-header__menu .current-menu-ancestor > .site-header__toggle::after { transform: scaleX(1); }

.site-header__chevron {
	display: block;
	flex: 0 0 10px;
	transition: transform .25s ease;
}
.site-header__menu .is-open > .site-header__toggle .site-header__chevron { transform: rotate(180deg); }

.site-header.is-scrolled .site-header__toggle { color: #FFF; }
.site-header.is-scrolled .site-header__toggle:hover,
.site-header.is-scrolled .site-header__menu .is-open > .site-header__toggle,
.site-header.is-scrolled .site-header__menu .current-menu-ancestor > .site-header__toggle { color: #fff; }

/* Panneau du sous-menu */
.site-header .site-header__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: -18px;
	z-index: 10;
	min-width: 240px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 14px 36px rgba(23, 26, 66, .2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
/* Petite pointe vers l'intitulé */
.site-header .site-header__menu .sub-menu::before {
	content: "";
	position: absolute;
	top: -5px;
	left: 30px;
	width: 12px;
	height: 12px;
	background: #fff;
	border-radius: 2px;
	transform: rotate(45deg);
}
/* Dernière rubrique : le panneau s'aligne à droite pour ne pas sortir de l'écran */
.site-header .site-header__menu > li:last-child > .sub-menu { left: auto; right: -18px; }
.site-header .site-header__menu > li:last-child > .sub-menu::before { left: auto; right: 30px; }

.site-header .site-header__menu .is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.site-header .site-header__menu .sub-menu li { position: relative; } /* au-dessus de la pointe */
.site-header .site-header__menu .sub-menu a {
	padding: 10px 14px;
	border-radius: 8px;
	color: var(--oi-nuit) !important;
	font-size: 15px;
	line-height: 1.3;
	transition: background-color .2s, color .2s;
}
.site-header .site-header__menu .sub-menu a::after { display: none; }
.site-header .site-header__menu .sub-menu a:hover,
.site-header .site-header__menu .sub-menu a:focus-visible {
	background: var(--oi-creme);
	color: var(--oi-bleu-fonce);
}
.site-header .site-header__menu .sub-menu .current-menu-item > a {
	background: var(--oi-fond-stat);
	color: var(--oi-bleu-fonce);
}

/* Focus clavier visible dans le header (le reset global « outline: 0 » l'avait supprimé) */
.site-header a:focus-visible,
.site-header button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
	border-radius: 4px;
}
.site-header .site-header__menu .sub-menu a:focus-visible { outline-offset: -2px; border-radius: 8px; }

/* Burger : mêmes protections contre les styles « button » de Twenty Twelve */
.site-header .site-header__burger,
.site-header .site-header__burger:hover {
	background: none;
	background-image: none;
	box-shadow: none;
	border: 0;
}

@keyframes oi-header-entree {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

/* Animation d'ouverture */
.oi-modal[open] { animation: oi-modal-entree .25s ease-out; }
@keyframes oi-modal-entree {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes oi-hero-entree {
	from { opacity: 0; transform: translateY(var(--oi-decal, -50px)); }
	to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   Kit mobilité : onglets + accordéons
   ========================================================= */

/* Pleine largeur, sans sidebar */
.page-template-kitmobilite .site-content {
    float: none;
    width: 100%;
}
.page-template-kitmobilite .entry-content {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

#introkit {
    max-width: calc(66.666% - 5px);
    margin-bottom: 60px;
}

/* ---------- Bloc ---------- */
.oi-kit__bloc {
    margin: 0 0 70px;
}
.oi-kit .oi-kit__titre {
    margin: 0 0 16px;
    font-family: "gravur", Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1;
    color: var(--oi-nuit);
    text-transform: uppercase;
}
.oi-kit__intro {
    margin-bottom: 24px;
}
.oi-kit__intro > :last-child { margin-bottom: 0; }

/* ---------- Onglets ---------- */
.oi-tabs__liste {
    position: relative; /* référence pour offsetLeft (JS) */
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 2px 12px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--oi-bleu) transparent;
    -webkit-overflow-scrolling: touch;
}

/* Préfixe .oi-tabs pour passer devant les styles « button » de Twenty Twelve */
.oi-tabs .oi-tabs__onglet {
    flex: 0 0 auto;
    scroll-snap-align: start;
    margin: 0;
    padding: .6em 1.2em;
    border: 1px solid var(--oi-bleu);
    border-radius: 20px;
    background: transparent;
    background-image: none;
    box-shadow: none;
    text-shadow: none;
    color: var(--oi-bleu-fonce);
    font-family: "gravur", Helvetica, Arial, sans-serif;
    font-weight: normal;
    font-size: 1.15rem;
    line-height: 1.1;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s;
}
.oi-tabs .oi-tabs__onglet:hover {
    background: var(--oi-bleu);
    background-image: none;
    color: #fff;
}
.oi-tabs .oi-tabs__onglet[aria-selected="true"] {
    background: var(--oi-nuit);
    background-image: none;
    border-color: var(--oi-nuit);
    color: #fff;
}
.oi-tabs .oi-tabs__onglet:focus-visible {
    outline: 3px solid var(--oi-bleu);
    outline-offset: 2px;
}

.oi-tabs__panneau {
    margin-top: 8px;
    padding: 30px;
    background: var(--oi-creme);
    border: 1px solid var(--oi-bleu);
    border-radius: 20px;
}
.oi-tabs__panneau[hidden] { display: none; }
.oi-tabs__panneau > :first-child { margin-top: 0; }
.oi-tabs__panneau > :last-child { margin-bottom: 0; }
.oi-tabs__panneau:focus-visible {
    outline: 3px solid var(--oi-bleu);
    outline-offset: 2px;
}

/* ---------- Accordéons ---------- */
.oi-accordeons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.oi-accordeon {
    border: 1px solid var(--oi-bleu);
    border-radius: 20px;
    background: #fff;
    overflow: hidden;
    transition: background-color .2s;
}
.oi-accordeon[open] { background: var(--oi-creme); }

.oi-accordeon__titre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    font-family: "gravur", Helvetica, Arial, sans-serif;
    font-size: 1.3rem;
    line-height: 1.15;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--oi-nuit);
    cursor: pointer;
    list-style: none;
}
.oi-accordeon__titre::-webkit-details-marker { display: none; }
.oi-accordeon__titre::after {
    content: "";
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--oi-bleu);
    background-image:
        linear-gradient(#fff, #fff),  /* barre horizontale */
        linear-gradient(#fff, #fff);  /* barre verticale */
    background-size: 14px 2px, 2px 14px;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-color .2s, background-size .2s, transform .2s;
}
.oi-accordeon[open] > .oi-accordeon__titre::after {
    background-color: var(--oi-nuit);
    background-size: 14px 2px, 2px 0; /* la barre verticale disparaît : « − » */
}
.oi-accordeon__titre:hover { color: var(--oi-bleu-fonce); }
.oi-accordeon__titre:hover::after { transform: rotate(90deg); }
.oi-accordeon__titre:focus-visible {
    outline: 3px solid var(--oi-bleu);
    outline-offset: -3px;
    border-radius: 20px;
}

.oi-accordeon__contenu {
    padding: 0 24px 24px;
}
.oi-accordeon__contenu > :first-child { margin-top: 0; }
.oi-accordeon__contenu > :last-child { margin-bottom: 0; }

/* =========================================================
   Pages : sections ACF (1/2/3 colonnes, galerie, accordéons)
   Les styles .oi-accordeon* sont ceux du kit mobilité (déjà
   présents dans style.css) : rien à ajouter pour eux.
   ========================================================= */

/* ---------- Pleine largeur, sans sidebar ---------- */
.page-template-default .site-content {
	float: none;
	width: 100%;
}
.page-template-default #secondary { display: none; } /* filet de sécurité : retirer aussi get_sidebar() de page.php */

.page-template-default .entry-content {
	max-width: none;
	margin: 0;
	padding: 0;
}
/* Pages sans sections ACF ni hero (intervenants, artistes, partenaires…) : le contenu ne colle pas aux bords */
.page-template-default .entry-content:not(:has(> .oi-section, .oi-hero)) {
	padding-left: 40px;
	padding-right: 40px;
}

/* ---------- Section ---------- */
.oi-section {
	padding: 60px 0;
}
.oi-section--sans-marge { padding-top: 0; }

.oi-section__inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
}
.oi-section__inner > :last-child,
.oi-colonne > :last-child { margin-bottom: 0; }
.oi-colonne > :first-child { margin-top: 0; }

.oi-section .oi-section__titre {
	margin: 0 0 24px;
	font-family: "gravur", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1;
	color: var(--oi-nuit);
	text-transform: uppercase;
}

/* ---------- Fonds (section ou colonne) ---------- */
.oi-section.oi-fond--fondclair { background: var(--oi-creme); }
.oi-section.oi-fond--fondfonce { background: var(--oi-indigo); }

.oi-colonne.oi-fond--fondclair,
.oi-colonne.oi-fond--fondfonce {
	padding: 30px;
	border-radius: 20px;
}
.oi-colonne.oi-fond--fondclair {
	background: var(--oi-creme);
	border: 1px solid var(--oi-bleu);
}
.oi-colonne.oi-fond--fondfonce {
	background: var(--oi-fond-stat-fonce);
}
/* Colonne foncée dans une section foncée : léger contour pour la détacher */
.oi-section.oi-fond--fondfonce .oi-colonne.oi-fond--fondfonce {
	border: 1px solid rgba(255, 255, 255, .25);
}

/* Texte sur fond foncé */
.oi-fond--fondfonce,
.oi-fond--fondfonce p,
.oi-fond--fondfonce li,
.oi-fond--fondfonce h1,
.oi-fond--fondfonce h2,
.oi-fond--fondfonce h4,
.oi-section.oi-fond--fondfonce .oi-section__titre { color: #fff; }
.oi-fond--fondfonce h3 { color: var(--oi-turquoise); }
.oi-fond--fondfonce a:not(.oi-bouton) { color: var(--oi-turquoise); }
.oi-fond--fondfonce a:not(.oi-bouton):hover { color: #fff; }
.oi-fond--fondfonce .oi-bouton:hover,
.oi-fond--fondfonce .oi-bouton:focus-visible { background: #fff; color: var(--oi-nuit); }
/* Bouton bleu illisible sur le dégradé bleu : il passe en nuit */
.oi-colonne.oi-fond--fondfonce .oi-bouton { background: var(--oi-nuit); color: #fff; }
.oi-colonne.oi-fond--fondfonce .oi-bouton:hover,
.oi-colonne.oi-fond--fondfonce .oi-bouton:focus-visible { background: #fff; color: var(--oi-nuit); }

/* Une colonne claire posée dans une section foncée retrouve un texte sombre */
.oi-fond--fondfonce .oi-colonne.oi-fond--fondclair,
.oi-fond--fondfonce .oi-colonne.oi-fond--fondclair p,
.oi-fond--fondfonce .oi-colonne.oi-fond--fondclair li,
.oi-fond--fondfonce .oi-colonne.oi-fond--fondclair h2,
.oi-fond--fondfonce .oi-colonne.oi-fond--fondclair h4 { color: var(--oi-nuit); }
.oi-fond--fondfonce .oi-colonne.oi-fond--fondclair h3 { color: var(--oi-bleu-fonce); }
.oi-fond--fondfonce .oi-colonne.oi-fond--fondclair a:not(.oi-bouton) { color: var(--oi-bleu-fonce); }

/* ---------- Colonnes ---------- */
.oi-colonnes {
	display: grid;
	gap: 30px;
	align-items: start;
}
.oi-colonnes--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oi-colonnes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Si une colonne a un fond, toutes s'étirent à la même hauteur */
.oi-colonnes:has(.oi-fond--fondclair, .oi-fond--fondfonce) { align-items: stretch; }

.oi-colonne img { max-width: 100%; height: auto; }
.oi-colonne iframe { max-width: 100%; }

/* ---------- Galerie : carrousel ---------- */
.oi-galerie { --oi-gal-gap: 16px; }

.oi-galerie .oi-galerie__liste {
	position: relative; /* référence pour le JS */
	display: flex;
	gap: var(--oi-gal-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.oi-galerie__liste::-webkit-scrollbar { display: none; }

.oi-galerie .oi-galerie__item {
	flex: 0 0 calc((100% - 3 * var(--oi-gal-gap)) / 4); /* 4 colonnes */
	margin: 0;
	scroll-snap-align: start;
	list-style: none;
}

/* Reset des styles « button » de Twenty Twelve */
.oi-galerie button {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	background-image: none;
	box-shadow: none;
	text-shadow: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.oi-galerie .oi-galerie__vignette {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 20px;
	background: var(--oi-creme);
}
.oi-galerie .oi-galerie__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	box-shadow: none;
	transition: transform .4s ease;
}
.oi-galerie .oi-galerie__vignette:hover .oi-galerie__image { transform: scale(1.05); }
.oi-galerie .oi-galerie__vignette:focus-visible {
	outline: 3px solid var(--oi-bleu);
	outline-offset: 2px;
}

/* Flèches (carrousel et modale) */
.oi-galerie__nav {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 20px;
}
.oi-galerie__nav[hidden] { display: none; }

.oi-galerie .oi-galerie__fleche {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--oi-bleu);
	color: #fff;
	transition: background-color .2s, opacity .2s;
}
.oi-galerie .oi-galerie__fleche:hover,
.oi-galerie .oi-galerie__fleche:focus-visible { background: var(--oi-nuit); }
.oi-galerie .oi-galerie__fleche:focus-visible { outline: 3px solid var(--oi-bleu); outline-offset: 2px; }
.oi-galerie .oi-galerie__fleche:disabled { opacity: .35; cursor: default; background: var(--oi-bleu); }
.oi-galerie .oi-galerie__fleche svg { display: block; }

/* Sur fond foncé */
.oi-fond--fondfonce .oi-galerie .oi-galerie__fleche:hover,
.oi-fond--fondfonce .oi-galerie .oi-galerie__fleche:focus-visible { background: #fff; color: var(--oi-nuit); }

/* ---------- Galerie : modale ---------- */
.oi-modal.oi-galerie__modale {
	width: min(1200px, calc(100% - 32px));
	max-height: calc(100vh - 32px);
	background: var(--oi-nuit);
	color: #fff;
	border-radius: 20px;
	overflow: hidden;
}
.oi-modal.oi-galerie__modale::backdrop { background: rgba(23, 26, 66, .85); }

.oi-galerie__boite {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 56px 20px 20px;
}

.oi-galerie .oi-galerie__fermer {
	position: absolute;
	top: 10px;
	right: 10px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: #fff;
	transition: background-color .2s;
}
.oi-galerie .oi-galerie__fermer:hover,
.oi-galerie .oi-galerie__fermer:focus-visible { background: rgba(255, 255, 255, .15); }
.oi-galerie .oi-galerie__fermer svg { display: block; }

.oi-galerie__figure { margin: 0; }
.oi-galerie .oi-galerie__grande {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: calc(100vh - 220px);
	margin: 0 auto;
	border-radius: 12px;
	box-shadow: none;
	object-fit: contain;
}
.oi-galerie__legende {
	margin-top: 12px;
	font-size: .95rem;
	line-height: 1.5;
	text-align: center;
	color: #fff;
}
.oi-galerie__legende[hidden] { display: none; }

.oi-galerie__pied {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}
.oi-galerie__pied[hidden] { display: none; }
.oi-galerie .oi-galerie__compteur {
	min-width: 4.5em;
	margin: 0;
	font-family: "gravur", Helvetica, Arial, sans-serif;
	font-size: 1.1rem;
	letter-spacing: .05em;
	text-align: center;
	color: #fff;
}
.oi-galerie__pied .oi-galerie__fleche:hover,
.oi-galerie__pied .oi-galerie__fleche:focus-visible { background: #fff; color: var(--oi-nuit); }
p.gform_required_legend {
    font-size: 12px;
}
button#gform_submit_button_1 {
    background: var(--oi-indigo) !important;
}
button#gform_submit_button_1:hover {
    color: var(--oi-indigo) !important;
    background: #FFF !important;
}
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* =========================================================
   Bandeau de haut de page (template-parts/bandeau.php)
   ========================================================= */
body { overflow-x: clip; } /* le bandeau en 100vw ne crée pas de défilement horizontal (barre de défilement Windows) */
body:has(.oi-bandeau) .site-content { margin-top: 0; } /* pas d'espace blanc au-dessus du bandeau */

.oi-bandeau {
	position: relative;
	display: flex;
	align-items: center;
	width: 100vw;
	min-height: 420px;
	margin-left: calc(50% - 50vw); /* pleine largeur, quel que soit le conteneur */
	box-sizing: border-box;
	padding: 110px 0 40px; /* 110 px = hauteur du header en surimpression */
	background-color: var(--oi-bleu);
	background-image: url("https://operation-iceberg.eu/ims25/back-haut25.jpg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.oi-bandeau__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: 1180px; /* 1140 px de contenu + 2 × 20 px, comme les sections */
	margin: 0 auto;
	padding: 0 20px;
}
.oi-bandeau__titre {
	margin: 0;
	font-family: "gravur", Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-size: clamp(40px, 6vw, 72px);
	line-height: .95;
	letter-spacing: .01em;
	color: #FFF;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}
.oi-bandeau__soustitre {
	margin: 16px 0 0;
	font-family: "gravur", Helvetica, Arial, sans-serif;
	font-size: clamp(18px, 2vw, 24px);
	line-height: 1.2;
	letter-spacing: .02em;
	color: #fff;
	text-shadow: 0 1px 12px rgba(23, 26, 66, .35); /* lisibilité du blanc sur les zones claires de l'image */
}

/* Espace entre le bandeau et le contenu (les sections ACF gèrent déjà le leur) */
.oi-bandeau + .entry-content { padding-top: 50px; }
.oi-bandeau + .entry-content:has(> .oi-section:first-child) { padding-top: 0; }

/* =========================================================
   Footer
   ========================================================= */
footer[role="contentinfo"].oi-footer {
	padding: 0;
	font-size: 1rem;
	line-height: 1.5;
}
.oi-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.oi-footer li { margin: 0; }
.oi-footer img {
	display: block;
	max-width: 100%;
	height: auto;
}
.oi-footer__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 40px;
}

/* ---------- Partie haute (dégradé repris de l'ancien site) ---------- */
.oi-footer__haut {
	background-image: linear-gradient(to bottom, #21397a, var(--oi-nuit));
	color: #fff;
	padding: 60px 0;
}
.oi-footer__haut .oi-footer__inner {
	display: grid;
	grid-template-columns: 1fr 2fr; /* un tiers / deux tiers */
	gap: 40px;
	align-items: start;
}
.oi-footer__titre {
	margin: 0 0 10px;
	font-family: "gravur", Helvetica, Arial, sans-serif;
	font-size: clamp(22px, 2.6vw, 30px);
	line-height: 1.1;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #fff;
}
.oi-footer__desc {
	margin: 0 0 24px;
	color: #fff;
}
.oi-footer__partenaires {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
}
.oi-footer__partenaires a,
.oi-footer__logo a {
	display: block;
	border-radius: 6px;
	transition: opacity .2s;
}
.oi-footer__partenaires a:hover { opacity: .8; }

/* ---------- Bandeau du bas ---------- */
.oi-footer__bas {
	background: #fff;
	padding: 20px 0;
}
.oi-footer__bas .oi-footer__inner {
	display: flex;
	align-items: center;
	gap: 20px;
}
.oi-footer__copyright {
	margin: 0 auto 0 0; /* pousse réseaux et bouton à droite */
	font-size: .9rem;
	color: var(--oi-nuit);
}
.oi-footer__sep { margin: 0 .5em; color: var(--oi-bleu); }
footer[role="contentinfo"] .oi-footer__copyright a {
	color: var(--oi-nuit);
	text-decoration: underline;
	text-underline-offset: 3px;
}
footer[role="contentinfo"] .oi-footer__copyright a:hover { color: var(--oi-bleu-fonce); }

.oi-footer__reseaux {
	display: flex;
	gap: 10px;
}
footer[role="contentinfo"] .oi-footer__reseaux a,
footer[role="contentinfo"] .oi-footer__remonter {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	text-decoration: none;
	transition: background-color .2s, color .2s, border-color .2s;
}
footer[role="contentinfo"] .oi-footer__reseaux a {
	background: var(--oi-nuit);
	color: #fff;
}
footer[role="contentinfo"] .oi-footer__reseaux a:hover,
footer[role="contentinfo"] .oi-footer__reseaux a:focus-visible { background: var(--oi-bleu); color: #fff; }

footer[role="contentinfo"] .oi-footer__remonter {
	box-sizing: border-box;
	border: 1px solid var(--oi-bleu);
	color: var(--oi-bleu-fonce);
}
footer[role="contentinfo"] .oi-footer__remonter:hover,
footer[role="contentinfo"] .oi-footer__remonter:focus-visible {
	background: var(--oi-bleu);
	border-color: var(--oi-bleu);
	color: #fff;
}
.oi-footer svg { display: block; }

/* Focus clavier visible (le reset global « outline: 0 » des liens l'avait supprimé) */
.oi-footer a:focus-visible {
	outline: 3px solid var(--oi-bleu);
	outline-offset: 3px;
}
.oi-footer__haut a:focus-visible { outline-color: #fff; }
div#wraptextpress {
    padding: 20px 0 0 40px;
}
div#wrapcontpressitw {
    max-width: 500px;
    width: 100%;
}

/* =========================================================
   MEDIA QUERIES
   (regroupées ici, de la plus large à la plus étroite)
   ========================================================= */

/* ---------- Petit ordinateur (≤ 1100 px) ---------- */
@media (max-width: 1100px) {
	.site-header__menu { gap: 26px; } /* 5 rubriques + logo tiennent jusqu'à 901 px */
}

/* ---------- Tablette (≤ 900 px) ---------- */
@media (max-width: 900px) {
	.site-header {
		height: 80px;
	}

	.site-header__inner {
		width: calc(100% - 40px); /* largeur recalculée avec le nouveau padding : burger aligné à 20 px du bord, comme le logo */
		padding: 0 20px;
	}

	.site-header__logo img {
		width: 170px;
	}

	.site-header__burger {
		display: block;
		position: relative;
		z-index: 2;
	}

	/* ---- Menu mobile : panneau latéral ---- */
	.site-header__nav {
		position: fixed;
		z-index: 1;

		top: 0;
		right: 0;

		box-sizing: border-box;
		width: min(380px, 100%);
		height: 100vh;
		height: 100dvh;
		overflow-y: auto;
		overscroll-behavior: contain;

		padding: 110px 30px 40px;

		background: var(--oi-nuit);
		box-shadow: -10px 0 40px rgba(0, 0, 0, .3);

		transform: translateX(100%);
		visibility: hidden; /* liens non atteignables au clavier quand le panneau est fermé */
		transition: transform .3s ease, visibility 0s linear .3s;
	}

	.site-header.menu-open .site-header__nav {
		transform: translateX(0);
		visibility: visible;
		transition-delay: 0s;
	}

	/* Fond assombri derrière le panneau (clic = fermeture) */
	.site-header::before {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(23, 26, 66, .6);
		opacity: 0;
		visibility: hidden;
		transition: opacity .3s ease, visibility 0s linear .3s;
	}
	.site-header.menu-open::before {
		opacity: 1;
		visibility: visible;
		transition-delay: 0s;
	}

	.site-header__menu {
		flex-direction: column;
		align-items: stretch;

		gap: 4px;
	}

	.site-header__menu a,
	.site-header.is-scrolled .site-header__menu a,
	.site-header .site-header__toggle,
	.site-header.is-scrolled .site-header__toggle {
		padding: 12px 0;
		color: #fff;

		font-size: 22px;
	}
	.site-header .site-header__toggle {
		width: 100%;
		justify-content: space-between;
		text-align: left;
	}
	.site-header__toggle::after { display: none; }
	.site-header__chevron { width: 14px; height: 14px; flex-basis: 14px; }

	/* ---- Sous-menus en accordéons (hauteur animée via grid 0fr → 1fr) ---- */
	.site-header__menu .menu-item-has-children {
		display: grid;
		grid-template-rows: auto 0fr;
		transition: grid-template-rows .3s ease;
	}
	.site-header__menu .menu-item-has-children.is-open { grid-template-rows: auto 1fr; }

	.site-header .site-header__menu .sub-menu {
		position: static;
		min-width: 0;
		min-height: 0;
		overflow: hidden;
		padding: 0 0 0 16px;
		border-left: 1px solid rgba(255, 255, 255, .25);
		border-radius: 0;
		background: none;
		box-shadow: none;
		opacity: 1;
		transform: none;
		visibility: hidden;
		transition: visibility 0s linear .3s;
	}
	.site-header .site-header__menu .sub-menu::before { display: none; }
	.site-header .site-header__menu .is-open > .sub-menu {
		visibility: visible;
		transition-delay: 0s;
	}

	.site-header .site-header__menu .sub-menu a {
		padding: 8px 0;
		border-radius: 0;
		background: none;
		color: rgba(255, 255, 255, .8);
		font-size: 18px;
	}
	.site-header .site-header__menu .sub-menu a:hover,
	.site-header .site-header__menu .sub-menu a:focus-visible {
		background: none;
		color: #fff;
	}
	.site-header .site-header__menu .sub-menu .current-menu-item > a {
		background: none;
		color: var(--oi-turquoise);
	}
	.site-header .site-header__menu .sub-menu li:last-child { padding-bottom: 8px; }

	.oi-bandeau { padding-top: 80px; } /* header de 80 px sur tablette et mobile */

	.site-header.is-scrolled { height: 64px; }
	.site-header.is-scrolled .site-header__logo img { width: 120px; }

	.site-header.menu-open .site-header__burger span {
		background: #fff;
	}

	.site-header.menu-open .site-header__burger span:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}

	.site-header.menu-open .site-header__burger span:nth-child(2) {
		opacity: 0;
	}

	.site-header.menu-open .site-header__burger span:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}

	.oi-artistes__grille { grid-template-columns: repeat(2, 1fr); }

	.oi-galerie .oi-galerie__item { flex-basis: calc((100% - var(--oi-gal-gap)) / 2); }

	/* Territoire / Presse : les colonnes de 50 % sont trop étroites en dessous de 900 px */
	.oi-territoire__texte,
	.oi-presse__interview { padding: 30px; }
	.oi-territoire__texte { width: calc(50% - 60px); }
	.oi-presse__interview { width: calc(50% - 60px); }
	.oi-presse__article { padding-right: 30px; width: calc(50% - 30px); }
	div#wraptextpress { padding: 20px 0 0 30px; }

	.page-template-carrefour .entry-content { padding: 30px; }
	.page-template-default .entry-content:not(:has(> .oi-section, .oi-hero)) { padding-left: 30px; padding-right: 30px; }
}

/* ---------- Barre d'administration WordPress (≤ 782 px) ---------- */
@media (max-width: 782px) {
	.admin-bar .site-header.is-scrolled { top: 46px; }
}

/* ---------- Hero (≤ 777 px) ---------- */
@media (max-width: 777px) {
	    .oi-hero {
        min-height: 95.39vw;
    }
	.oi-hero__contenu {
		max-width: none;
		padding: calc(80px + 8.74vw) 5% 8vw; /* + 80 px : le header (80 px) recouvre le haut du hero */
		align-items: center;
		text-align: center;
	}
	.oi-hero__surtitre {
		--oi-decal: -41px;
		margin: 0;
		font-size: max(12px, 2.57vw);
		line-height: 7.71vw;
	}
	.oi-hero__titre {
		--oi-decal: -32px;
		margin-top: 1.03vw;
		font-size: 10.93vw !important; /* la règle de base est en !important */
		line-height: 10.03vw !important;
		letter-spacing: 0;
	}
    .oi-hero__soustitre {
        --oi-decal: -41px;
        margin: 13.88vw 0 0;
        font-size: 4.71vw;
        line-height: 5.4vw !important;
    }
}

/* ---------- Mobile (≤ 768 px) ---------- */
@media (max-width: 768px) {
	.oi-artistes__grille {
    padding: 0 20px !important;
	}
	.oi-accueil__contenu { padding: 40px 20px; }
	.home ul.oi-artistes__grille {
    padding: 0 !important;
	}
	.oi-intervenants {
	    padding: 0 20px;
	}
		.oi-bouton {
		    margin: 0 auto 10px;
		}
	.oi-footer__inner {
	padding: 0 20px;
}
	.oi-bandeau { min-height: 300px; padding-bottom: 30px; }
	.oi-bandeau + .entry-content { padding-top: 30px; }
	.oi-bandeau + .entry-content:has(> .oi-section:first-child) { padding-top: 0; }

	.oi-artiste__hero-contenu { padding: 90px 20px 50px; text-align: center; }
	.oi-artiste__reseaux-contenu { justify-content: center; flex-wrap: wrap; }
	.oi-artiste__contenu { grid-template-columns: 1fr; gap: 24px; padding: 30px 20px; }

	.oi-bilan__grille--2,
	.oi-bilan__grille--3 { grid-template-columns: 1fr; }

	/* Territoire / Presse sont en flex (pas en grid) : on empile les colonnes */
	.oi-territoire,
	.oi-presse { flex-direction: column; }
	.oi-territoire__carte,
	.oi-territoire__texte,
	.oi-presse__article,
	.oi-presse__interview { width: auto; }
	.oi-territoire__carte img { padding: 20px; }
	.oi-territoire__texte { padding: 30px 20px; }

	/* Ordre repris de l'ancien CSS : article d'abord, interview ensuite */
	.oi-presse__article { order: 1; padding: 0; }
	.oi-presse__article img { margin: 0 auto; }
	    div#wraptextpress {
        padding: 16px 20px 20px;
        text-align: center;
    }
    .oi-bilan {
    padding: 20px 20px;
}
	.oi-presse__interview { order: 2; justify-content: center; padding: 30px 20px; text-align: center; }
	.oi-presse__interview .oi-bouton { align-self: center; }

	.oi-accueil__intro { padding: 0; }
	.oi-accueil__video { margin-bottom: 50px; padding: 0; }

	.introductionpage { max-width: none; }
	.page-template-carrefour .entry-content { padding: 30px 20px; }
	.page-template-default .entry-content:not(:has(> .oi-section, .oi-hero)) { padding-left: 20px; padding-right: 20px; }
	.page-template-carrefour .oi-stat__nombre {
    font-size: 30px;
		}
		.oi-stat {
		    padding: 20px;
		}
	.oi-accueil__contenu .oi-bouton {
    margin: 30px 0 0;
	}
	p.oi-accueil__tous {
    margin-bottom: 0;
	}
	.site-content nav {
	    padding: 0 20px 20px;
	}
	/* Tableaux saisis dans l'éditeur : défilement horizontal plutôt que débordement */
	.entry-content table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}

	.oi-bilan__titre { max-width: none; }
	.oi-stat__nombre { font-size: 90px; } /* une colonne sur mobile : on garde de grands chiffres */
	.oi-territoire__texte { text-align: center; }

	#introkit,
	.oi-kit__intro { max-width: none; }

	/* Rangée d'onglets qui déborde jusqu'aux bords de l'écran */
	.oi-tabs__liste {
		margin: 0 -20px;
		padding: 4px 20px 12px;
		scroll-padding-left: 20px;
	}
	.oi-tabs .oi-tabs__onglet { font-size: 1rem; }
	.oi-tabs__panneau { padding: 20px; }

	.oi-accordeon__titre { padding: 14px 18px; font-size: 1.1rem; }
	.oi-accordeon__contenu { padding: 0 18px 20px; }

	.oi-section { padding: 30px 0; }
	.oi-section--sans-marge { padding-top: 0; }

	.oi-colonnes--2,
	.oi-colonnes--3 { grid-template-columns: 1fr; gap: 20px; }
	.oi-colonne.oi-fond--fondclair,
	.oi-colonne.oi-fond--fondfonce { padding: 20px; }

	/* 1,2 photo visible : la suivante dépasse, et la rangée va jusqu'au bord de l'écran */
	.oi-galerie { --oi-gal-gap: 12px; }
	.oi-galerie .oi-galerie__liste {
		margin: 0 -20px;
		padding: 0 20px;
		scroll-padding-left: 20px;
	}
	.oi-galerie .oi-galerie__item { flex-basis: calc((100% - var(--oi-gal-gap)) / 1.2); }
	.oi-galerie__nav { display: none; } /* au doigt, le glissement suffit */

	.oi-galerie__boite { padding: 52px 12px 16px; }
	.oi-galerie .oi-galerie__grande { max-height: calc(100vh - 200px); border-radius: 8px; }

	/* Footer : tout s'empile et se centre */
	.oi-footer__haut { padding: 40px 0; }
	.oi-footer__haut .oi-footer__inner {
		grid-template-columns: 1fr;
		gap: 24px;
		justify-items: center;
		text-align: center;
	}
	.oi-footer__partenaires { justify-content: center; }
	.oi-footer__bas .oi-footer__inner {
		flex-direction: column;
		gap: 16px;
		text-align: center;
	}
	.oi-footer__copyright { margin: 0; }
}

/* ---------- ≤ 600 px : la barre d'administration n'est plus fixe ---------- */
@media (max-width: 600px) {
	.admin-bar .site-header.is-scrolled { top: 0; }
}

/* ---------- Petit mobile (≤ 520 px) ---------- */
@media (max-width: 520px) {
	.oi-artistes__grille { grid-template-columns: 1fr; }
	.oi-tuile__lien { min-height: 140px; }
}

/* ---------- Très petit mobile (≤ 480 px) ---------- */
@media (max-width: 480px) {
	.site-header__nav { width: 100%; } /* panneau du menu en pleine largeur sur téléphone */

	.oi-modal__boite { padding: 32px 20px 20px; }
	.oi-modal__nom { font-size: 1.6rem; }

	.oi-intervenants { grid-template-columns: 1fr; }
}

/* ---------- Animations réduites ---------- */
@media (prefers-reduced-motion: reduce) {
	.oi-carte__image img,
	.oi-tuile__image { transition: none; }

	.oi-modal[open] { animation: none; }

	.oi-hero__surtitre,
	.oi-hero__titre,
	.oi-hero__soustitre { animation: none; }

	.oi-tabs .oi-tabs__onglet,
	.oi-accordeon,
	.oi-accordeon__titre::after { transition: none; }
	.oi-accordeon__titre:hover::after { transform: none; }

	.oi-galerie .oi-galerie__image,
	.oi-galerie .oi-galerie__fleche,
	.oi-galerie .oi-galerie__fermer { transition: none; }
	.oi-galerie .oi-galerie__vignette:hover .oi-galerie__image { transform: none; }

	.oi-footer__partenaires a,
	.oi-footer__logo a,
	footer[role="contentinfo"] .oi-footer__reseaux a,
	footer[role="contentinfo"] .oi-footer__remonter { transition: none; }

	.site-header.is-scrolled { animation: none; }
	.site-header__toggle::after,
	.site-header__chevron,
	.site-header .site-header__menu .sub-menu,
	.site-header .site-header__menu .sub-menu a,
	.site-header__menu .menu-item-has-children,
	.site-header__nav,
	.site-header::before { transition: none; }
}

/* ---------- Ordinateur avec souris : sous-menus au survol ---------- */
@media (hover: hover) and (min-width: 901px) {
	.site-header .site-header__menu .menu-item-has-children:hover > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}
	.site-header__menu .menu-item-has-children:hover > .site-header__toggle .site-header__chevron { transform: rotate(180deg); }
}

/* ---------- Animations autorisées ---------- */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; } /* bouton « retour en haut » */
}