/*
Theme Name: Ay-Roop
Author: La Confiserie
Author URI: https://www.laconfiserie.fr
Description: Thème sur-mesure
Version: 1.0.0
Requires PHP: 7.4
*/

:root {
    /* -------------------------------------------------------------------------
       Couleurs 
       ------------------------------------------------------------------------- */
    --color-bg:         #fff;        /* slug: background */
    --color-fg:         #000000;        /* slug: foreground */
    --color-noir:       #000000;        /* slug: noir */
    --color-blanc:      #ffffff;        /* slug: blanc */
    --color-gris:       #F9F6F2;        /* slug: gris */
    --color-primary:    #FC3B7F;        /* slug: primary */
    --color-secondary:  #FC3B7F80;      /* slug: secondary — 50% opacité */
    --color-third:      #FC3B7F33;      /* slug: third — 20% opacité */

    /* Focus — ne pas modifier, ratio RGAA */
    --color-focus:      #005fcc;

    /* Couleur des traits (bordures, lignes, puces) : basculée en blanc
       dans les sections sombres (voir THEMING SECTIONS SOMBRES). */
    --color-trait:      var(--color-noir);

    /* -------------------------------------------------------------------------
       Gradients 
       ------------------------------------------------------------------------- */
    --gradient-one:    linear-gradient(0deg, var(--color-noir) 10%, rgba(0, 0, 0, 0.0)  100%);
    --gradient-titre:  linear-gradient(90deg, var(--color-noir) 10%, rgba(0, 0, 0, 0.00) 75%);
    --gradient-cta:  linear-gradient(0deg, var(--color-noir) 0%, rgba(0, 0, 0, 0.00) 100%);
    --gradient-hero: linear-gradient(45deg, var(--color-noir) 10%, rgba(0, 0, 0, 0) 75%);



    /* -------------------------------------------------------------------------
       Typographie 
       ------------------------------------------------------------------------- */
    --font-body:    'Figtree', sans-serif;   /* slug: typotext */
    --font-heading: 'Manifont Grotesk', sans-serif;   /* slug: typotitre */

    --fs-small:        clamp(13px, 1.2vw, 14px);
    --fs-normal:       clamp(18px, 1.4vw, 18px);
    --fs-plus:			clamp(20px, 2vw,  24px);
    --fs-medium:       clamp(25px, 2vw,   32px);
    --fs-large:        clamp(35px, 3vw,   50px);
    --fs-big:          clamp(45px, 5vw,   70px);
    --fs-huge:         clamp(55px, 8vw,  100px);

    --lh-tight:  1.2;
    --lh-normal: 1.5;
    --lh-loose:  1.8;

    --fw-regular: 400;
    --fw-medium:  600;
    --fw-bold:    700;

    /* -------------------------------------------------------------------------
       Espacements
       ------------------------------------------------------------------------- */
    --space-1:  0.25rem;  /*   4px */
    --space-2:  0.5rem;   /*   8px */
    --space-3:  0.75rem;  /*  12px */
    --space-4:  1rem;     /*  16px */
    --space-5:  1.25rem;  /*  20px */
    --space-6:  1.5rem;   /*  24px */
    --space-8:  2rem;     /*  32px */
    --space-10: 2.5rem;   /*  40px */
    --space-12: 3rem;     /*  48px */
    --space-16: 4rem;     /*  64px */
    --space-20: 5rem;     /*  80px */
    --space-24: 6rem;     /*  96px */

    /* -------------------------------------------------------------------------
       Layout
       ------------------------------------------------------------------------- */
    --container-max:    1280px;
    --container-gutter: var(--space-6);

    /* -------------------------------------------------------------------------
       Bordures
       ------------------------------------------------------------------------- */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   16px;
    --radius-full: 9999px;

    /* -------------------------------------------------------------------------
       Ombres
       ------------------------------------------------------------------------- */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .12);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .15);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, .18);

    /* -------------------------------------------------------------------------
       Transitions
       ------------------------------------------------------------------------- */
    --ease:          cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in:       cubic-bezier(0.4, 0, 1, 1);
    --ease-out:      cubic-bezier(0, 0, 0.2, 1);
    --duration-fast: 0.15s;
    --duration:      0.3s;
    --duration-slow: 0.5s;

    /* -------------------------------------------------------------------------
       Z-index
       ------------------------------------------------------------------------- */
    --z-below:  -1;
    --z-base:    0;
    --z-above:  10;
    --z-nav:   100;
    --z-modal: 200;
    --z-toast: 300;
}

.sr-only{
	border: 0 !important;
	clip: rect(1px,1px,1px,1px) !important;
	clip-path: inset(50%) !important;
	height: 1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;
}

.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
  clip: auto !important;
  clip-path: none !important;
  position: fixed !important;
  top: 1rem;
  left: 1rem;
  width: auto !important;
  height: auto !important;
  padding: .75rem 1rem !important;
  margin: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
  z-index: 999999 !important;
  background: #fff;
  outline: 3px solid #005fcc;
  outline-offset: 2px;
  border-radius: 4px;
}

/* RESET CSS
-------------------------------------------------------------- */

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, 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;
	vertical-align: baseline;
}

*, *::before, *::after {
    box-sizing: border-box; 
 }
html {
	width:100%;
	scroll-behavior: smooth;
	scroll-padding-top: 120px;
} 
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-normal);
    line-height: var(--lh-normal);
    color: var(--color-fg);
    background-color: var(--color-bg);
}

/* -------------------------------------------------------------- 
/////////////////////////////////// GRILLE
----------------------------------------------------------------- */
.rangee {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	width: 95%;
	margin: 0 auto;
	position: relative;
	flex-flow: row wrap;
}
.rangee.direction-column {
	flex-direction: column;
	flex-wrap: wrap;
}
.rangee.largeur-courte {
	width: 70%;
	max-width: 600px;
}
.fullwidth, .full, .rangee.full, .section-flexible.fullwidth .rangee{
	width: 100%;
	max-width: 100%;
}
.col {
	position: relative;
	z-index: 9;
}
.col3 {
	flex-basis:3%;
	width: 3%;
}
.col5 {
	flex-basis:5%;
	width: 5%;
}
.col15 {
	flex-basis:15%;
	width: 15%;
}
.col10 {
	flex-basis:10%;
	width: 10%;
}
.col20 {
	flex-basis:20%;
	width: 20%;
}
.col30 {
	flex-basis:30%;
	width: 30%;
}
.col40 {
	flex-basis:40%;
	width: 40%;
}
.col48 {
	flex-basis:48%;
	width: 48%;
}
.col50 {
	flex-basis:50%;
	width: 50%;
}
.col60 {
	flex-basis:60%;
	width: 60%;
}
.col70 {
	flex-basis:70%;
	width: 70%;
}
.col80 {
	flex-basis:80%;
	width: 80%;
}
.col85 {
	flex-basis:85%;
	width: 85%;
}
.col90 {
	flex-basis:90%;
	width: 90%;
}
.col100 {
	flex-basis:100%;
	width: 100%;
}
.col25 {
	flex-basis:25%;
	width: 25%;
}
.col45 {
	flex-basis:45%;
	width: 45%;
}
.col55 {
	flex-basis:55%;
	width: 55%;
}
.col57 {
	flex-basis:57%;
	width: 57%;
}
.col65 {
	flex-basis:65%;
	width: 65%;
}
.col35 {
	flex-basis:35%;
	width: 35%;
}
.col75 {
	flex-basis:75%;
	width: 75%;
}
.col66 {
	flex-basis:66.6%;
	width: 66.6%;
}
.col33 {
	flex-basis:33.3%;
	width: 33.3%;
}
.ecart-normal{
	flex: 0 0 auto;
	padding: 15px 25px;
}
.aucun-ecart {
	padding: 0;
}
.aucun-ecart .ecart-normal{
	padding:15px 0;
}
.fullwidth .aucun-ecart .ecart-normal{
	padding:0;
}
.ecart-full .aucun-ecart:first-of-type {
	flex: 0 0 auto;
	padding: 0 0 0 50px;
}
.ecart-full .aucun-ecart:last-of-type {
	flex: 0 0 auto;
	padding: 0 50px 0 0;
}
.fullwidth.ecart-full .aucun-ecart, .section-flexible.aucun-ecart .ecart-normal, .section-flexible.aucun-ecart .colonne01, .section-flexible.aucun-ecart .colonne02 {
	padding:0 ;
}
.colpadleft {
	flex: 0 0 auto;
	padding: 0 0 0 50px;
}
.col-left-marge {
	padding-right: 50px;
}
.col-right-marge {
	padding-left: 50px;
}
.colpadright {
	flex: 0 0 auto;
	padding: 0 50px 0 0;
}
.colcenter {
	margin: 0 auto;
}
.justify-center {
	justify-content:center;
}
.justify-end {
	justify-content:end;
}
.space-between {
	justify-content:space-between;
}
.items-align-end {
	align-items: end;
}
.align-center, .items-align-center {
	align-items:center;
}
.align-end {
	align-items:flex-end;
}
.row-reverse {
	flex-direction: row-reverse;
}
/* Espacements de sections fluides : 50px (mobile) -> 90px (desktop) */
.padding {
	padding: clamp(50px, 8vw, 90px) 0;
}
.padding-bottom {
	padding-bottom: clamp(50px, 8vw, 90px);
}
.padding-top {
	padding-top: clamp(50px, 8vw, 90px);
}
.double-padding {
	padding: clamp(90px, 16vw, 180px) 0;
}
.double-padding-bottom {
	padding-bottom: clamp(90px, 16vw, 180px);
}
.double-padding-top {
	padding-top: clamp(90px, 16vw, 180px);
}
.no-padding-top {
	padding-top: 0px !important;
}
.border-left {
	border-left: 4px solid var(--color-primary);
}
.padding-col-pres.border-left {
	padding-left: 25px;
}
.decalage15 {
	position: relative;
	top: -15px;
	margin-bottom: -15px !important;
}
.decalage30 {
	position: relative;
	top: -30px;
	margin-bottom: -30px !important;
}
.decalage50 {
	position: relative;
	top: -50px;
	margin-bottom: -50px !important;
}
.decalage70 {
	position: relative;
	top: -70px;
	margin-bottom: -70px !important;
}
.decalage140 {
	position: relative;
	top: -140px;
	margin-bottom: -140px !important;
}
.rotate-3 {
	transform: rotate(-3deg);
}
.rotate3 {
	transform: rotate(3deg);
}
.rotate-5 {
	transform: rotate(-5deg);
}
/* -------------------------------------------------------------- 
/////////////////////////////////// TYPO
----------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	font-family:var(--font-heading);
	margin-bottom: 10px;
	font-weight:400;
	line-height: 1;
}
h1 {
	color: var(--color-noir);
	font-size:var(--fs-huge);
}
h2 {
	color: var(--color-noir);
	margin-top: 25px;
	font-size:var(--fs-large);
}

h3 {
	color: var(--color-noir);
	font-size:var(--fs-medium);
}
h4 {
	color: var(--color-primary);
	font-size:var(--fs-medium);
}
h5 {
	color: var(--color-noir);
	font-size:var(--fs-medium);
}
h6 {
	color: var(--color-noir);
	font-size:var(--fs-normal);
}
.typo2 {
    font-style: 400;
    font-family: var(--font-heading);
}
.typo-small{
	font-size: var(--fs-small);
}
.typo-normal{
	font-size: var(--fs-normal);
}
.typo-plus{
	font-size: var(--fs-plus);
}
.typo-medium{
	font-size: var(--fs-medium);
}
.typo-large{
	font-size: var(--fs-large);
}
.typo-big{
	font-size: var(--fs-big);
}
.typo-huge{
	font-size: var(--fs-huge);
}

/* -------------------------------------------------------------- 
/////////////////////////////////// GLOBAL
----------------------------------------------------------------- */
p, ol, li, table,label {
	color: var(--color-foreground);
	font-weight: 400;
	font-size: var(--fs-normal);
	line-height: 1.4;
	margin: 15px 0px;
}
ol, li {
	margin: 5px 0;
}
.bold {
	font-weight: var(--fw-bold);
}
strong, b {
	font-weight: var(--fw-bold);
	color:var(--color-noir);
}
ul {
	margin: 10px 0;
}
ul li{
	margin-left: 16px;
	list-style-type: disc;
}
ol li{
	margin-left: 15px;
}
blockquote {
	position: relative;
    font-family: var(--font-body);
    font-style: italic;
	color: var(--color-primary);
	line-height: 1.3;
	font-size: var(--fs-medium);
	text-align: left;
	margin-bottom: 20px;
	padding-left: var(--space-6);
	border-left: 3px solid currentColor;  /* suit la couleur (rose, ou blanc sur .primary) */
}
blockquote p {
	color: var(--color-primary);
	font-size: var(--fs-medium);
	line-height: 1.3;
}
.primary blockquote,
.primary blockquote p {
	color: var(--color-blanc);
}
blockquote em {
	display: block;
	text-transform: uppercase;
	font-size: var(--fs-normal);
	font-style: normal;
	margin-top: 10px;
}
button {
    background: transparent;
    border-radius: 0;
    border: 0;
    padding: 0;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    user-select: none;
    cursor: pointer;
}
/* Pas d'anneau au clic souris, mais focus TOUJOURS visible au clavier —
   règle globale : pas besoin de restaurer bouton par bouton. */
button:focus {
    outline: 0 none;
}
button:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
}
button::-moz-focus-inner {
    padding: 0;
    border: 0;
}
table {
	width: 100%;
	margin: 0;
	padding: 0;
	border-collapse: collapse;
}
tr, td, th {
	padding: 10px;
	text-align: left;
	font-size: var(--fs-normal);
	border: 1px solid var(--color-primary);
}
table p {
	margin: 5px 0;
}
tr h3 {
	line-height: 22px;
}
a {
	color:var(--color-noir);
	-webkit-transition: all .15s ease-in-out;
	-moz-transition: all .15s ease-in-out;
	-o-transition: all .15s ease-in-out;
	transition: all .15s ease-in-out;
}
a:visited, a:active, a:focus {
	color:var(--color-noir);
}
a:hover {
	color:var(--color-primary);
}
em {
	font-style: italic;
}

img {
	pointer-events: none;
}
input {
 	-moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box; 
    box-sizing: content-box;
}
#searchform input[type="text"] {
	height: 20px;
	padding: 10px;
}
textarea {
	font-family: inherit;
}
i {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.alignnone {
    margin: 5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
    display: block;
    margin: 0px auto 5px auto;
}
.alignright {
    float:right;
    margin: 0px 0 20px 40px;
}
.alignleft {
	float:left;
    margin: 0px 40px 20px 0;
}
.aligncenter {
    display: block;
    margin: 0px auto 10px auto;
}
a img.alignright {
    float: right;
    margin: 0px 0 20px 40px;
}
a img.alignnone {
    margin: 0px 40px 20px 0;
}
a img.alignleft {
    float: left;
    margin: 0px 40px 20px 0;
}
a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}
.wp-caption-text {
	font-size:var(--fs-small);
	font-style: italic;
}
hr {
	border: 0;
	background-color: var(--color-noir);
	height: 1px;
	margin: 30px 0;
}
/* Option « Épais » de la section Séparateur. */
hr.hr-epais {
	height: 4px;
}
hr.blanc {
	background-color: var(--color-blanc);
}
hr.primary {
	background-color: var(--color-primary);
}
.section-separateur hr {
	margin: 0;
}
.section-separateur .ecart-normal {
	padding-top: 0;
	padding-bottom: 0;
}
.blanc {
	background-color:  var(--color-blanc);
}
.color-blanc,.all-color-blanc * {
	color:  var(--color-blanc) !important;
}
.gris {
	background-color: var(--color-gris)!important;
}
.color-gris, .all-color-gris * {
	color:  var(--color-gris)!important;
}
.noir {
	background-color: var(--color-noir)!important;
}
.color-noir, .all-color-noir * {
	color:  var(--color-noir)!important;
}
.primary {
	background-color: var(--color-primary)!important;
}
.color-primary, .all-color-primary * {
	color:  var(--color-primary)!important;
}
.secondary {
	background-color: var(--color-secondary)!important;
}
.color-secondary, .all-color-secondary * {
	color:  var(--color-secondary)!important;
}
.third {
	background-color: var(--color-third)!important;
}

.gradient-one {
	background: var(--gradient-one);
}
.gradient-titre {
	background: var(--gradient-titre);
}
.gradient-hero {
	background: var(--gradient-hero);
}
.shadow {
   	-webkit-box-shadow: 0 16px 32px 0 rgba(50,50,50,0.10);
	-moz-box-shadow: 0 16px 32px 0 rgba(50,50,50,0.10);
	box-shadow: 0 16px 32px 0 rgba(50,50,50,0.10);
}
.shadow2 {
   	-webkit-box-shadow: 0px 0px 20px 5px rgba(45,45,45,0.15);
	-moz-box-shadow: 0px 0px 20px 5px rgba(45,45,45,0.15);
	box-shadow: 0px 0px 20px 5px rgba(45,45,45,0.15);
}
.widget-texte > p:first-child {
  margin-top: 0;
}
p:last-of-type {
	margin-bottom: 0;
}


/* -------------------------------------------------------------- 
/////////////////////////////////// BOUTONS ET CLASS
----------------------------------------------------------------- */
/* NB : beaucoup de classes de cette zone (decalage*, double-padding*,
   all-color-*, only-mobile, rond, shadow…) sont des utilitaires destinés
   aux champs « class section / class colonne » du constructeur. */
.bouton, .bouton-sans{
	margin-top: 15px;
	vertical-align: middle;
}
.bouton a, input[type=submit], .formulaire button, .wpforms-submit-container button, .bouton-sans{
	font-family:var(--font-body);
	text-decoration: none !important;
	position: relative !important;
	display: inline-block;
	background: var(--color-primary);
    font-weight: var(--fw-medium) !important;
	font-size: var(--fs-normal);
	color: var(--color-blanc);
	text-shadow:none;
	line-height: 30px!important;
	border-radius: 999px !important;
	padding: 10px 25px !important;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
.bouton a:hover, input[type=submit]:hover, .formulaire button:hover, .wpforms-submit-container button:hover{
	background: var(--color-secondary);
}
.bouton-blanc a{
	background: var(--color-blanc) !important;
	color: var(--color-noir) !important;
}
.bouton-blanc a:hover{
	background: var(--color-primary) !important;
	color: var(--color-blanc) !important;
}

.bouton-simple {
	margin: 0;
	font-weight: var(--fw-medium);
}
.bouton-simple a {
	position: relative;
	display: inline-block;
	padding-right: 26px; /* espace pour la flèche */
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-decoration-thickness: 3px; /* soulignement épais façon charte */
	text-underline-offset: 5px;
}
.bouton-simple.btn-noir a {color: var(--color-noir);}
.bouton-simple.btn-primary a {color: var(--color-primary);}
.bouton-simple.btn-blanc a {color: var(--color-blanc);}
/* Flèche de la charte : SVG masqué → prend la couleur du texte du bouton */
.bouton-simple a::before {
	content: "";
	position: absolute;
	top: calc(50% + 2px);
	right: 4px;
	width: 15px;
	height: 15px;
	background-color: currentColor;
	-webkit-mask: url(img/arrow-right-rose.svg) no-repeat center / contain;
	        mask: url(img/arrow-right-rose.svg) no-repeat center / contain;
	transform: translateY(-50%);
	transition: right .25s ease;
}
/* Petite animation au survol : la flèche avance */
.bouton-simple a:hover::before,
.bouton-simple a:focus-visible::before {
	right: 0;
}
.rond img {
	border-radius: 100%;
}
.ca img {
	border-radius: 100% !important;
	max-width: 200px;
	height: auto;
}
.ca .widget-image {
	text-align: center;
}
.text-center {
	text-align: center;
}
.text-right {
	text-align: right;
}
.back-image {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
/* Image de fond en vraie balise <img> : srcset responsive, lazy loading,
   priorité LCP — le conteneur doit être en position:relative. */
.media-fond {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: inherit;
}
.media-fond img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.relative {
	position: relative;
}
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
}
.video-container video {
	width: 100%;
	height: auto;
}
.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/* Façade vidéo click-to-load : aperçu + bouton play, l'iframe YouTube
   n'est injectée qu'au clic (module VIDEO FACADE de app.js). */
.video-facade {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: none;
	background: var(--color-noir);
	cursor: pointer;
}
.video-facade img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.video-facade-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 70px;
	height: 70px;
	border-radius: 100px;
	background: var(--color-primary);
	transition: all 0.3s;
}
.video-facade-play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 13px 0 13px 22px;
	border-color: transparent transparent transparent var(--color-blanc);
}
.video-facade:hover .video-facade-play,
.video-facade:focus-visible .video-facade-play {
	background: var(--color-noir);
	transform: translate(-50%, -50%) scale(1.08);
}
/* Vidéo décorative (widget Vidéo interne) : bouton pause/lecture par-dessus
   la vidéo — icône pause (deux barres) ou lecture (triangle) en CSS. */
.video-deco__pause {
	position: absolute;
	right: 15px;
	bottom: 15px;
	z-index: 20;   /* au-dessus des overlays/dégradés du hero vidéo */
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 100%;
	background: rgba(0, 0, 0, 0.55);
	cursor: pointer;
	transition: background 0.3s ease;
}
.video-deco__pause::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 12px;
	height: 14px;
	background: linear-gradient(90deg, #fff 0 4px, transparent 4px 8px, #fff 8px 12px);
}
.video-deco.est-en-pause .video-deco__pause::before {
	width: 0;
	height: 0;
	background: none;
	border-style: solid;
	border-width: 8px 0 8px 13px;
	border-color: transparent transparent transparent #fff;
	transform: translate(-40%, -50%);
}
.video-deco__pause:hover,
.video-deco__pause:focus-visible {
	background: var(--color-primary);
}
.video-facade:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
}
.cap, .uppercase {
	text-transform: uppercase;
}
.no-marge {
	margin: 0;
}
.padding-bloc20 {padding: 20px}
.padding-bloc30 {padding: 30px}
.padding-bloc40 {padding: 40px}
.padding-bloc50 {padding: 50px}

.image, .image-upload {
	position: relative;
	margin: 0;
	line-height: 0;
}
.image img{
	width: 100%;
	height: auto;
	border-radius: 0px;
}
.image-logo img {
	height: 80px;
	width: auto;
}

.image-upload img {
	max-width: 100%;
	border-radius: 15px;
}
.no-radius img {
	border-radius: 0px;
}
.image-expand {
	width: calc(100vw - ((100vw - 1240px) / 2));
}
.transition {
     -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
#mobile-header {
	display: none;
}
.only-mobile {
	display: none !important;
}

/* -------------------------------------------------------------- 
/////////////////////////////////// LOGO
----------------------------------------------------------------- */
#logo {
	margin: 0;
	display: inline-block;
	vertical-align: middle;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    padding: 0;
	line-height:0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 40px;
	z-index: 9999;
}
#logo a {
	display:block;
	cursor: pointer;
}
#logo a img {
	height: 65px;
	width: auto;
	position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

/* -------------------------------------------------------------- 
/////////////////////////////////// HEADER
----------------------------------------------------------------- */
#main {
	padding-top: 100px;
}
header#header {
	--header-fg: var(--color-noir);
	width: 100%;
	position: fixed;
	height: 100px;
	z-index: 99;
	background: var(--color-blanc);
	transition: all 0.3s;
}
/* Option ACF "header_mode" = noir : fond noir, texte/icônes en blanc. */
header#header.header-noir {
	--header-fg: var(--color-blanc);
	background: var(--color-noir);
}
/* Option ACF "header_mode" = transparent, hors pages à hero : simple fond
   transparent (texte foncé inchangé) qui laisse voir le fond de page ;
   le fond blanc revient au scroll pour rester lisible sur le contenu. */
header#header.header-transp:not(.is-scrolled) {
	background: transparent;
}

/* ====== Header compact au scroll ====== */

header#header.is-scrolled {
	height: 70px;
	margin: 0;
	width: 100%;
	border-radius: 0px;
}
header#header.is-scrolled #logo a img {
	height: 56px;
}

/* ====== Nav desktop ====== */

header#header nav {
	position: absolute;
	z-index: 9;
	top: 0;
	left: 130px;
	transition: all 0.3s;
}
header#header nav ul {
	margin: 0;
}
header#header nav ul li {
	display: inline-block;
	position: relative;
	list-style: none;
	margin: 0;
}
header#header nav a {
	font-family: var(--font-body);
	text-decoration: none;
	display: inline-block;
	vertical-align: middle;
	color: var(--header-fg);
	font-size: 16px;
	font-weight: var(--fw-medium);
	position: relative;
	padding: 0;
	margin: 0 17px;
	line-height: 100px;
}
header#header nav a:active,
header#header nav a:visited,
header#header nav a:focus {
	color: var(--header-fg);
	text-decoration: none;
}
header#header nav a:hover,
header#header nav ul li.current_page_item > a,
header#header nav ul li.current_page_parent > a,
header#header nav ul li.current-menu-ancestor > a,
header#header nav ul li.current-menu-item > a,
header#header nav ul li.current-menu-parent > a {
	color: var(--color-primary);
}

/* Soulignement animé (hover + focus clavier + état actif) */
header#header nav a::after {
	content: "";
	position: absolute;
	left: 0px;       /* annule le margin: 0 22px du lien */
	right: 0px;
	bottom: 30px;     /* à ajuster à l'œil selon le rendu du line-height */
	height: 2px;
	background: var(--color-primary);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.3s ease;
}
header#header nav a:hover::after,
header#header nav a:focus-visible::after,
header#header nav ul li.current_page_item > a::after,
header#header nav ul li.current_page_parent > a::after,
header#header nav ul li.current-menu-ancestor > a::after,
header#header nav ul li.current-menu-item > a::after,
header#header nav ul li.current-menu-parent > a::after {
	transform: scaleX(1);
	transform-origin: left;
}
/* Le trait suit la hauteur réduite quand le header est compacté */
header#header.is-scrolled nav a {
	line-height: 70px;
}
header#header.is-scrolled nav a::after {
	bottom: 18px;
}
/* ====== Sous-menu desktop ====== */

header#header nav ul li .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--color-blanc);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.06);
	border-radius: 0 0 6px 6px;
	padding: 0;
	min-width: 240px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: all 0.3s ease;
	z-index: -1;
	overflow: hidden;
}

/* Ouverture uniquement via JS (classe is-open) — plus de :hover */
header#header nav ul li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	z-index: 10;
}
header#header nav ul li .sub-menu li {
	display: block;
	margin: 0;
}
header#header nav ul li .sub-menu a {
	padding: 12px 20px;
	margin: 0;
	display: block;
	line-height: 1.15;
	color: var(--color-noir);
	background: transparent;
	transition: background 0.2s ease;
}
header#header nav ul li .sub-menu a:hover {
	background: var(--color-primary);
	color: #fff;
}
/* Le soulignement n'a pas de sens sur les liens de sous-menu */
header#header nav ul li .sub-menu a::after {
	display: none;
}

/* ====== Toggle chevron (desktop) ====== */

header#header .submenu-toggle {
	background: none;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	padding: 0 15px 0 0;
	vertical-align: middle;
}
header#header .submenu-toggle:focus-visible {
	outline: 3px solid #005fcc;
	outline-offset: 2px;
	border-radius: 4px;
}
header#header .submenu-toggle .chevron {
	box-sizing: border-box;
	display: inline-block;
	width: 14px;
	height: 14px;
	background-image: url(img/chevron-blanc.svg);
	background-size: 12px auto;
	background-repeat: no-repeat;
	background-position: center center;
	transform-origin: 50% 50%;
	transition: transform 0.2s ease;
	position: relative;
	left: -6px;
}

/* Rotation chevron uniquement via JS */
header#header nav ul li.is-open > .submenu-toggle .chevron {
	transform: rotate(-180deg) translateZ(0);
}

/* ====== Menu sur laptops : compression douce puis bascule burger ======
   1. Entre la bascule mobile et ~1550px : menu resserré (police + écarts)
      pour tenir plus longtemps en entier.
   2. .menu-compact (posée par app.js quand le menu déborde malgré tout :
      retour à la ligne ou chevauchement des actions) : nav masqué, burger
      affiché — robuste quel que soit le contenu du menu côté client. */
@media (min-width: 1026px) and (max-width: 1550px) {
	header#header nav a {
		font-size: 15px;
		margin: 0 10px;
	}
	header#header .submenu-toggle {
		padding-right: 8px;
	}
	.header-actions .bouton-header a {
		font-size: 15px;
		padding: 8px 18px !important; /* bat le padding !important de .bouton a */
	}
}
header#header.menu-compact nav {
	display: none;
}
header#header.menu-compact .menu-toggle {
	display: inline-flex;
}

/* ====== Bouton hamburger ====== */

.menu-toggle {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 9999;
	right: 30px;
	align-items: center;
	line-height: 24px !important;
	padding: 12px !important;
	gap: 0.8rem;
	color: var(--color-primary);
	cursor: pointer;
	font-size: 16px;
	font-weight: var(--fw-bold);
	font-family: var(--font-heading);
	transition: all 0.3s;
	border-radius: 5px;
}
.menu-toggle:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
}

/* Icon hamburger → croix */

.menu-toggle__icon {
	position: relative;
	width: 24px;
	height: 20px;
	display: inline-block;
}
.bar {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	/* Suit la couleur de texte du header (noir sur header clair, blanc sur
	   header noir / pages hero) ; l'état croix reste noir (overlay blanc). */
	background: var(--header-fg, var(--color-noir));
	border-radius: 2px;
	transition: all 0.18s ease;
}
.bar--top { top: 0; }
.bar--mid { top: 9px; }
.bar--bot { top: 18px; }

.menu-toggle[aria-expanded="true"] .bar--top {
	top: 9px;
	transform: rotate(45deg);
	background: var(--color-noir);
}
.menu-toggle[aria-expanded="true"] .bar--mid {
	opacity: 0;
	background: var(--color-noir);
}
.menu-toggle[aria-expanded="true"] .bar--bot {
	top: 9px;
	transform: rotate(-45deg);
	background: var(--color-noir);
}

/* ====== Cluster d'actions du header (bouton + loupe + hamburger) ====== */

.header-actions {
	position: absolute;
	top: 50%;
	right: 30px;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 18px;
	z-index: 9999;
}
/* Le hamburger n'est plus positionné en absolu : c'est un enfant flex. */
.header-actions .menu-toggle {
	position: static;
	top: auto;
	right: auto;
	transform: none;
}
/* Bouton "Billetterie" : pilule pleine, reprend le style .bouton du thème. */
.header-actions .bouton-header {
	margin: 0;
}
.header-actions .bouton-header a {
	font-size: 16px;
}
/* ====== Loupe / déclencheur de recherche ====== */

.search-toggle {
	background: none;
	border: 0;
	padding: 6px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}
.search-toggle img {
	width: 22px;
	height: 22px;
	display: block;
}
.search-toggle:focus-visible,
.search-form__submit:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ====== Formulaire de recherche (dans la modale .modal) ====== */
.search-form {
	display: flex;
	align-items: center;
	gap: 12px;
	border-bottom: 2px solid var(--color-noir);
}
.search-form input[type="search"] {
	flex: 1 1 auto;
	background: transparent;
	border: 0;
	outline: 0;
	color: var(--color-noir);
	font-family: var(--font-heading);
	font-size: 1.4rem;
	padding: 12px 4px;
}
.search-form input[type="search"]::placeholder {
	color: rgba(0, 0, 0, 0.45);
}
.search-form__submit {
	flex: 0 0 auto;
	background: none;
	border: 0;
	padding: 6px;
	cursor: pointer;
	line-height: 0;
}
.search-form__submit img {
	width: 24px;
	height: 24px;
	display: block;
}

/* ====== Overlay menu mobile ====== */

.menu-overlay {
	position: fixed;
	z-index: 9998;
	background: var(--color-blanc);
	top: 0;
	right: -100px;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: all 0.5s ease;
	overflow-y: auto;
	box-shadow: 0 0 20px 5px rgba(45, 45, 45, 0.15);
}
.menu-overlay .contenu-menu {
	padding: 100px 30px 50px 30px;
	overflow-y: auto;
}
.menu-overlay.is-open {
	opacity: 1;
	top: 0;
	right: 0;
	visibility: visible;
	pointer-events: auto;
}
.menu-overlay .ecart-normal {
	padding: 0 15px;
}
.menu-overlay p,
.menu-overlay li,
.menu-overlay a {
	color: var(--color-noir);
}
.menu-overlay ul {
	margin: 0;
}
.menu-overlay li {
	list-style-type: none;
	padding: 5px 0;
	margin: 0;
}
.menu-overlay a {
	text-decoration: none;
}
.menu-overlay a:hover {
	text-decoration: underline;
}
.menu-overlay li a {
	font-size: var(--fs-medium);
	font-weight: var(--fw-bold);
}
.menu-overlay li.menu-item-has-children {
	margin-bottom: 0;
	padding:  0 !important;
	transition: margin-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-overlay li.menu-item-has-children a:hover {
	text-decoration: none;
}
.menu-overlay li.menu-item-has-children .sub-menu a {
	text-transform: none;
	font-size: var(--fs-normal);
}
.menu-overlay li.menu-item-has-children .sub-menu a:hover {
	text-decoration: underline;
}

/* Sous-menu dans l'overlay (accordéon) */

header#header .menu-overlay li.menu-item-has-children .sub-menu {
	position: static;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	padding-left: 15px;
	margin-top: 0;
	border-left: 1px solid var(--color-primary);
	border-radius: 0px;
	transform: none;
	/* hidden (différé après la transition) : les liens d'un sous-menu fermé
	   sortent de l'ordre de tabulation au lieu de recevoir un focus invisible. */
	visibility: hidden;
	z-index: auto;
	min-width: 0;
	background: transparent;
	transition:
		max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.35s ease 0.05s,
		margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0s 0.4s;
}
header#header .menu-overlay li.menu-item-has-children.is-open .sub-menu {
	max-height: 2000px;
	visibility: visible;
	transition:
		max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		opacity 0.35s ease 0.05s,
		margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0s;
	opacity: 1;
	margin-top: 0px;
	padding-top: 15px;
	padding-bottom: 15px;
}

/* Toggle chevron dans l'overlay (mobile) */

header#header .menu-overlay .submenu-toggle {
	display: inline-flex;
	width: 44px;
	height: 44px;
	padding: 0;
	justify-content: center;
	align-items: center;
}
header#header .menu-overlay .submenu-toggle .chevron {
	left: 0;
	width: 16px;
	height: 16px;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	/* L'overlay est hors du <nav> : la règle générale qui noircit les
	   chevrons (SVG blanc) ne s'y applique pas — on le fait ici, l'overlay
	   étant toujours sur fond blanc. */
	filter: brightness(0);
}
header#header .menu-overlay li.menu-item-has-children.is-open .submenu-toggle .chevron {
	transform: rotate(-180deg);
}
/* Bouton du header (Billetterie…) repris en bas du menu overlay. */
header#header .menu-overlay .bouton-overlay {
	margin: 35px 0 0;
}
header#header .menu-overlay .bouton-overlay a {
	font-size: 18px;
}
header#header .menu-overlay a:focus-visible {
	outline: 3px solid #0b57d0;
	outline-offset: 4px;
	border-radius: 2px;
}


/* -------------------------------------------------------------- 
/////////////////////////////////// TITRE PAGE
----------------------------------------------------------------- */
#bloc-titre-page {
	position: relative;
}
#bloc-titre-page .rangee {
	min-height: 650px;
	padding: 150px 0;
	z-index: 9;
}
#bloc-titre-page.titre-hero .rangee {
	height: 100vh;
	padding: 80px 0 100px 0;
}
/* Option « titre en bas » (image en background) : la rangée passe en
   align-end, avec un pied réduit pour coller le titre au bas de l'image. */
#bloc-titre-page.titre-bg--bas .rangee {
	padding-bottom: 80px;
}
/* Flèche "section suivante" du hero (scroll piloté en JS, sans ancre). */
.arrow-bas {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 10px;
	margin-top: 30px;
	cursor: pointer;
}
.arrow-bas img {
	display: block;
	width: 15px;
	height: auto;
	animation: arrow-bas-bounce 1.8s ease-in-out infinite;
}
.arrow-bas:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
	border-radius: 4px;
}
@keyframes arrow-bas-bounce {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
	.arrow-bas img { animation: none; }
}
#bloc-titre-page .overlay-titre {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
	z-index: 2;
}
#bloc-titre-page h1 {
	color: #fff;
}
#bloc-titre-page .bouton, #titre-simple .bouton{
	margin-top: 25px;
}
#titre-simple .bouton a {
	margin:5px 5px 5px 0;
}
#titre-simple {
	padding: 80px 0;	
}
#titre-simple h1 {
	color: var(--color-noir);
}
#titre-simple h1 span{
	color: var(--color-primary);
}
#titre-simple p.sous-titre-page, 
#titre-simple p.sur-titre-page, 
#bloc-titre-page p.sous-titre-page, 
#bloc-titre-page p.sur-titre-page  {
	margin-top: 10px;
	color: var(--color-noir);
	font-weight: 400;
	line-height: 1.1;
	font-size: var(--fs-medium);
}
#titre-simple p.sous-titre-page,
#bloc-titre-page p.sous-titre-page {
	margin-top: 15px;
}
#bloc-titre-page p.sous-titre-page, 
#bloc-titre-page p.sur-titre-page {
	color: #fff;
}
#titre-simple p.sur-titre-page, 
#bloc-titre-page p.sur-titre-page {
	margin: 0 0 25px 0;
}
body.fond-noir #titre-simple.aucun h1, body.fond-noir #titre-simple.aucun p {
	color: var(--color-blanc);
}
#titre-simple.noir h1, #titre-simple.noir p,
#titre-simple.primary h1, #titre-simple.primary p{
	color: #fff;
} 
/* Bouton principal (hors fantôme) sur fond sombre. */
#titre-simple.noir .bouton:not(.bouton-ghost) a{
	background: #fff !important;
	color: var(--color-noir)!important;
}
#titre-simple.noir .bouton:not(.bouton-ghost) a:hover{
	background: var(--color-primary)!important;
	color: var(--color-blanc)!important;
}
#titre-simple.primary .bouton:not(.bouton-ghost) a{
	background: var(--color-noir)!important;
	color: var(--color-blanc)!important;
}
#titre-simple.primary .bouton:not(.bouton-ghost) a:hover{
	background: #fff !important;
	color: var(--color-primary)!important;
}

/* ====== Boutons du bloc titre : principal + secondaire (fantôme) ====== */

.boutons-titre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin-top: 25px;
}
/* Alignement centré : centre aussi les boutons (flex) et le fil d'Ariane,
   que text-align:center ne suffit pas à recentrer. */
.text-center .boutons-titre {
	justify-content: center;
}
.text-center .fil-ariane {
	text-align: center;
}

/* Fil d'Ariane sorti de la section : bloc indépendant (paddings gérables
   séparément du titre). Le padding-top dégage le header fixe — ajuste cette
   valeur, et celle de #titre-simple, selon le rendu voulu avec/sans fil. */
.fil-ariane-wrap {
	padding-top: 35px;
}
@media (max-width: 1025px) {
	.fil-ariane-wrap {
		padding-top: 25px;
	}
}
/* Fil d'Ariane inclus dans le fond coloré : le wrap (pleine largeur) prend la
   même couleur que la section via .noir/.primary et reste contigu à
   #titre-simple → bloc coloré continu. Texte du fil en blanc sur fond sombre. */
.fil-ariane-wrap.noir .fil-ariane,
.fil-ariane-wrap.primary .fil-ariane {
	color: var(--color-blanc);
}

/* Padding-top du titre simple selon la présence du fil d'Ariane (classe posée
   en PHP) : sans fil, la section dégage elle-même le header fixe ; avec fil,
   le bloc fil d'Ariane (au-dessus) s'en charge, d'où un écart réduit au titre.
   En mobile, #main offre déjà 85px sous le header → valeur réduite commune. */

#titre-simple.avec-fil {
	padding-top: 40px;
}
@media (max-width: 1025px) {
	#titre-simple.sans-fil,
	#titre-simple.avec-fil {
		padding-top: 40px;
	}
}
/* Annule les marges héritées des boutons (sélecteurs id-scoped pour battre
   les règles existantes) : l'espacement passe par le flex + gap. */
#bloc-titre-page .boutons-titre .bouton,
#bloc-titre-page .boutons-titre .bouton-ghost,
#titre-simple .boutons-titre .bouton,
#titre-simple .boutons-titre .bouton-ghost,
#titre-simple .boutons-titre .bouton a {
	margin: 0;
}

/* Bouton secondaire "fantôme" : contour, fond transparent. La bordure suit
   la couleur du texte (currentColor) — sombre par défaut (fond clair),
   blanche dans les contextes sombres (hero, fond noir / primary). */
.bouton-ghost a {
	background: transparent;
	color: var(--color-noir);
	border: 2px solid currentColor;
}
.bouton-ghost a:hover {
	background: var(--color-primary);
	color: var(--color-blanc);
}

/* Contextes sombres → bouton fantôme blanc. */
#bloc-titre-page .bouton-ghost a,
#titre-simple.noir .bouton-ghost a,
#titre-simple.primary .bouton-ghost a,
body.fond-noir #titre-simple.aucun .bouton-ghost a {
	color: var(--color-blanc);
}
#bloc-titre-page .bouton-ghost a:hover,
#titre-simple.noir .bouton-ghost a:hover,
#titre-simple.primary .bouton-ghost a:hover,
body.fond-noir #titre-simple.aucun .bouton-ghost a:hover {
	background: var(--color-blanc);
	color: var(--color-noir);
}

/* ====== Header clair / sombre : teinte des icônes (loupe, logo, chevrons) ======
   Les SVG du header sont blancs : on les noircit par filtre quand le header
   est clair (défaut), et on les laisse blancs quand il est sur fond noir. */
.search-toggle img {
	filter: brightness(0);
}
header#header.header-noir .search-toggle img {
	filter: none;
}
header#header nav .submenu-toggle .chevron {
	filter: brightness(0);
}
header#header.header-noir nav .submenu-toggle .chevron {
	filter: none;
}

/* ====== Header transparent par-dessus le visuel (body.no-fond) ======
   Pages à hero (vidéo / hero / image) : header sans fond qui passe par-dessus
   le contenu, texte + icônes en blanc, #main collé en haut, et un dégradé en
   haut — un peu plus bas que le header — pour garder le menu lisible. */
body.no-fond #main {
	padding-top: 0;
}
.no-fond header#header {
	--header-fg: var(--color-blanc);
	background: transparent;
}
.no-fond .search-toggle img,
.no-fond header#header nav .submenu-toggle .chevron {
	filter: none;
}
.no-fond header#header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 180px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
	pointer-events: none;
	z-index: -1;
}
/* Au scroll, le header reprend un fond plein (lisible sur le contenu) et le
   dégradé disparaît. */
.no-fond header#header.is-scrolled {
	background: var(--color-noir);
}
.no-fond header#header.is-scrolled::before {
	opacity: 0;
}

/* ====== Fil d'Ariane ====== */
.breadcrumb {
	box-shadow: 0 16px 32px 0 rgba(50,50,50,0.10);
}
/* Option ACF : fil d'Ariane sur barre noire (texte blanc, flèche rose). */
.breadcrumb--noir {
	background: var(--color-noir);
	box-shadow: none;
	padding: 14px 0;
}
.breadcrumb--noir .fil-ariane {
	color: var(--color-blanc);
}
.breadcrumb--noir .fil-ariane__sep {
	background-color: var(--color-primary);
}
.fil-ariane {
	margin-top: 0px;
	font-family: var(--font-body);
	font-size: var(--fs-small);
	line-height: 1.3;
}
/* Rendu SEOPress (ol.breadcrumb > li) : les li reprennent la taille du fil,
   sinon la règle globale « p, ol, li… { font-size: var(--fs-normal) } »
   les repasse en 18px. */
.fil-ariane ol,
.fil-ariane li {
	font-size: inherit;
	line-height: inherit;
}

.fil-ariane a {
	color: inherit;
	text-decoration: none;
}
.fil-ariane a:hover {
	text-decoration: underline;
}
/* Séparateur = flèche de la charte (SVG masqué → rose).
   - .fil-ariane__sep : repli maison (sans SEOPress).
   - .fil-ariane .breadcrumb li::after : rendu SEOPress, qui pose son
     séparateur en CSS inline (.breadcrumb li::after{content:'…'}) ; on le
     surcharge avec une spécificité supérieure (0-2-2 > 0-1-2). */
.fil-ariane__sep,
.fil-ariane .breadcrumb li:not(:last-child)::after {
	content: "";
	display: inline-block;
	width: 11px;
	height: 12px;
	margin: 0 8px;
	vertical-align: middle;
	background-color: var(--color-primary);
	-webkit-mask: url(img/arrow-right-rose.svg) no-repeat center / contain;
	        mask: url(img/arrow-right-rose.svg) no-repeat center / contain;
}
.fil-ariane .breadcrumb li:last-child::after {
	display: none;
}
/* La couleur suit le contexte du bloc titre (clair / sombre). */
#bloc-titre-page .fil-ariane {
	color: var(--color-blanc);
}
#titre-simple .fil-ariane {
	color: var(--color-noir);
}
#titre-simple.noir .fil-ariane,
#titre-simple.primary .fil-ariane,
body.fond-noir #titre-simple.aucun .fil-ariane {
	color: var(--color-blanc);
}

/* ====== Forme décorative en fond du titre simple ======
   Background posé directement sur la section : il est détouré par la boîte
   de #titre-simple, donc il ne peut pas déborder. L'URL est injectée en
   style inline (valeur dynamique du champ ACF). */
#titre-simple.has-forme {
	background-repeat: no-repeat;
	background-position: top right;
	/* auto 100% : pleine hauteur, largeur proportionnelle au SVG. Forcer les
	   deux dimensions (ex. 25% 100%) centrerait le dessin dans la boîte
	   (preserveAspectRatio) → marge blanche, forme décollée du bord droit. */
	background-size: auto 100%;
}
@media (max-width: 1025px) {
	#titre-simple.has-forme {
		background-image: none !important;
	}
}

/* ====== Titre "Avec illustration" (SVG uploadé) ======
   Même mécanique que les décors latéraux de section (bg-etoiles-boucle-*) :
   l'illustration est ancrée au bord DROIT de la colonne de titre et se
   déroule vers la droite, rognée par l'overflow de la section. */
#titre-simple.has-illustration {
	position: relative;
	overflow: hidden;
}
#titre-simple.has-illustration .rangee > div {
	position: relative;      /* ancre de l'illustration : la colonne */
}
#titre-simple .titre-illustration {
	position: absolute;
	top: 0;
	left: 100%;              /* démarre au bord droit de la colonne */
	height: 100%;            /* hauteur de la colonne, largeur au ratio du SVG */
	width: auto;
	max-width: none;
	pointer-events: none;
}
@media (max-width: 1025px) {
	#titre-simple .titre-illustration {
		display: none;       /* comme la forme décorative */
	}
}

/* //////// BLOC TITRE VIDEO //////// */
#bloc-titre-video {
	position: relative;
	background-color: var(--color-noir);
}
#bloc-titre-video .hero .rangee {
	height: calc(100vh - 100px);
}
#bloc-titre-video .back-video.hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}
/* Vidéo seule : le contenu (.rangee) qui donnait la hauteur est masqué,
   on reporte donc la hauteur sur le conteneur. */
#bloc-titre-video.video-seule .back-video.hero {
	height: calc(100vh - 100px);
}
#bloc-titre-video h1, #bloc-titre-video p {
	color: #fff;
}
#bloc-titre-video p {
	font-size: var(--fs-medium);
}
#bloc-titre-video .sous-titre-video {
	font-weight: 600;
	line-height: 1;
	margin: 0 0 20px 0;
	text-transform: uppercase;
	font-size: var(--fs-medium);
	color: #fff;
}
#bloc-titre-video .rangee {
	z-index: 9;
}
/*.overlay-video {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 1;
	z-index: 2;
}*/
.hero-youtube {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw; 
    min-height: 100vh;
    min-width: 177.77vh;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none; 
}

.hero-youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.hero-video {
    position: absolute;
	width: 100%;
  	height: 100%;
  	object-fit: cover;  
     inset: 0;
    z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
    .hero-video {
        animation-play-state: paused !important;
    }
}
@media (max-width: 768px) {
    .back-video.hero {
        min-height: 400px;
    }
}

/* -------------------------------------------------------------- 
/////////////////////////////////// BACKGROUND SECTIONS
----------------------------------------------------------------- */
.bg-etoile-haut-droite {
	background-image: url(img/bg-sections/bg-etoile-haut-droite.svg);
	background-repeat: no-repeat;
	background-position: right top;
	background-size: 25% 100%;
}
/* Déclinaisons du motif en coin (même recette que bg-etoile-haut-droite). */
.bg-etoile-bas-droite {
	background-image: url(img/bg-sections/bg-etoile-bas-droite.svg);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: 25% auto;
}
.bg-etoile-bas-gauche {
	background-image: url(img/bg-sections/bg-etoile-bas-gauche.svg);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 25% auto;
}
.bg-bulle-haut-droite {
	background-image: url(img/bg-sections/bg-bulle-haut-droite.svg);
	background-repeat: no-repeat;
	background-position: right top;
	background-size: 25% auto;
}
.bg-bulle-bas-droite {
	background-image: url(img/bg-sections/bg-bulle-bas-droite.svg);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: 20% auto;
}
.bg-boucle {
	background-image: url(img/bg-sections/bg-boucle.svg);
	background-repeat: repeat-x;
	background-position: left center;
	background-size: auto 100%;
}
.bg-etoile-repeat {
	background-image: url(img/formes/ligne-etoiles.svg);
	background-repeat: repeat-x;
	background-position: left center;
	background-size: auto 100%;
}
.bg-bulle03-repeat {
	background-image: url(img/formes/forme-bulle03.svg);
	background-repeat: repeat-x;
	background-position: left center;
	background-size: auto 100%;
}
.bg-bulle04-repeat {
	background-image: url(img/formes/forme-bulle04.svg);
	background-repeat: repeat-x;
	background-position: left center;
	background-size: auto 100%;
}
/* Décors de part et d'autre de la colonne de contenu (boucles, étoiles…).
   À poser dans le champ « class section ». Les DEUX runs sont ancrés aux bords
   de la COLONNE (::before à gauche, ::after à droite) et déroulent vers
   l'extérieur, rognés par overflow:hidden. Comme ils suivent la colonne, ça
   marche qu'elle soit à droite, à gauche ou au centre — SANS rien inverser :
   le côté « vide » affiche un grand run, le côté « bord » un simple débord.
     --boucles-taille : hauteur du motif (dimension verticale)
   Structure commune ci-dessous ; chaque variante fournit ses images. */
[class*="bg-boucles-cotes"],
[class*="bg-etoiles-boucle-"] {
	position: relative;
	overflow: hidden;
	--boucles-taille: 100%;
}
[class*="bg-boucles-cotes"] > *,
[class*="bg-etoiles-boucle-"] > * {   /* le contenu passe au-dessus du décor */
	position: relative;
	z-index: 1;
}
[class*="bg-boucles-cotes"] .une-col,
[class*="bg-etoiles-boucle-"] .une-col {
	position: relative;
}
[class*="bg-boucles-cotes"] .une-col::before,
[class*="bg-boucles-cotes"] .une-col::after,
[class*="bg-etoiles-boucle-"] .une-col::before,
[class*="bg-etoiles-boucle-"] .une-col::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100vw;
	z-index: 0;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: auto var(--boucles-taille);
}
[class*="bg-boucles-cotes"] .une-col::before,
[class*="bg-etoiles-boucle-"] .une-col::before {   /* déroule à GAUCHE de la colonne */
	right: 100%;
	background-position: right center;
}
[class*="bg-boucles-cotes"] .une-col::after,
[class*="bg-etoiles-boucle-"] .une-col::after {    /* déroule à DROITE de la colonne */
	left: 100%;
	background-position: left center;
}
/* Variantes boucles : un dessin dédié par côté, 3 couleurs.
   « bg-boucles-cotes » seul = noir (compat avec les pages existantes). */
.bg-boucles-cotes .une-col::before,
.bg-boucles-cotes-noir .une-col::before {
	background-image: url(img/bg-sections/bg-boucle-gauche-noir.svg);
}
.bg-boucles-cotes .une-col::after,
.bg-boucles-cotes-noir .une-col::after {
	background-image: url(img/bg-sections/bg-boucle-droite-noir.svg);
}
.bg-boucles-cotes-blanc .une-col::before {
	background-image: url(img/bg-sections/bg-boucle-gauche-blanc.svg);
}
.bg-boucles-cotes-blanc .une-col::after {
	background-image: url(img/bg-sections/bg-boucle-droite-blanc.svg);
}
.bg-boucles-cotes-rose .une-col::before {
	background-image: url(img/bg-sections/bg-boucle-gauche-rose.svg);
}
.bg-boucles-cotes-rose .une-col::after {
	background-image: url(img/bg-sections/bg-boucle-droite-rose.svg);
}
/* Variantes étoiles : même étoile des deux côtés, répétée — formes discrètes,
   donc pas de problème de raccord. 3 couleurs : blanc (sections sombres),
   rose et noir (sections claires). */
[class*="bg-etoiles-boucle-"] {
	--boucles-taille: 90%;
}
[class*="bg-etoiles-boucle-"] .une-col::before,
[class*="bg-etoiles-boucle-"] .une-col::after {
	background-repeat: repeat-x;
}
.bg-etoiles-boucle-blanc .une-col::before,
.bg-etoiles-boucle-blanc .une-col::after {
	background-image: url(img/bg-sections/bg-etoiles-boucle-blanc.svg);
}
.bg-etoiles-boucle-rose .une-col::before,
.bg-etoiles-boucle-rose .une-col::after {
	background-image: url(img/bg-sections/bg-etoiles-boucle-rose.svg);
}
.bg-etoiles-boucle-noir .une-col::before,
.bg-etoiles-boucle-noir .une-col::after {
	background-image: url(img/bg-sections/bg-etoiles-boucle-noir.svg);
}
.bg-blanc {
	background: var(--color-blanc);
}
.bg-etoiles-droite {
	background-image: url(img/bg-sections/bg-etoiles-droite.svg);
	background-repeat: no-repeat;
	background-position: top right;
	background-size: auto 100%;
}
.bg-etoiles-droite02 {
	background-image: url(img/bg-sections/bg-etoiles-droite02.svg);
	background-repeat: no-repeat;
	background-position: top right;
	background-size: auto 100%;
}

body.page-actualites{
	background-image: url(img/formes/page-etoile-haut-droit-noir.svg);
	background-position: top right;
	background-repeat: no-repeat;
	background-size: 25% auto;
}
.bg-etoile-haut-droit-noir {
	background-image: url(img/formes/page-etoile-haut-droit-noir.svg);
	background-position: top right;
	background-repeat: no-repeat;
	background-size: 20% auto;
}
@media (max-width: 1025px) {
	.bg-etoile-haut-droite, .bg-etoiles-droite, .bg-etoile-haut-droit-noir, .bg-etoiles-droite02,
	.bg-bulle-bas-droite, .bg-bulle-haut-droite, .bg-etoile-bas-droite, .bg-etoile-bas-gauche {
		background-image: none;
	}
}
/* ==============================================================
   SECTION IMAGE + TEXTE — deux moitiés à hauteur égale :
   image plein cadre (cover) + bloc texte coloré centré.
   ============================================================== */
.section-image-texte .rangee {
	align-items: stretch;      /* les deux moitiés à la même hauteur */
	flex-wrap: nowrap;
	/* Rentre le contenu de 25px de chaque côté pour l'aligner sur la grille
	   (les colonnes standard rentrent d'autant via .ecart-normal). Les deux
	   moitiés se touchent quand même au centre (pas de gouttière interne). */
	padding-left: 25px;
	padding-right: 25px;
}
.section-image-texte__texte,
.section-image-texte__media {
	flex: 1 1 50%;
	min-width: 0;
}
.section-image-texte__media {
	position: relative;        /* reçoit .media-fond (cover, inset:0) */
	min-height: 340px;         /* hauteur mini si le texte est court */
	overflow: hidden;
}
.section-image-texte__texte {
	display: flex;
	align-items: center;       /* centrage vertical du contenu */
	padding: 60px;
}
.section-image-texte__contenu {
	width: 100%;
}
.section-image-texte__contenu .titre-label {
	margin-top:0;
}
.section-image-texte__contenu h2{
	margin-top: 15px;
}
.section-image-texte__contenu .widget-bouton {
	margin-top: 20px;
}
/* Fond du bloc via .primary/.noir/.blanc ; on force la couleur du texte. */
.section-image-texte__texte.primary,
.section-image-texte__texte.noir,
.section-image-texte__texte.primary *,
.section-image-texte__texte.noir * {
	color: var(--color-blanc);
}
.section-image-texte__texte.blanc,
.section-image-texte__texte.blanc * {
	color: var(--color-noir);
}
/* Côté de l'image (le bloc texte est premier dans le DOM). */
.section-image-texte.image-gauche .section-image-texte__media {
	order: -1;
}
/* Répartition. */
.section-image-texte.rep-image-60 .section-image-texte__media { flex-basis: 60%; }
.section-image-texte.rep-image-60 .section-image-texte__texte { flex-basis: 40%; }
.section-image-texte.rep-texte-60 .section-image-texte__media { flex-basis: 40%; }
.section-image-texte.rep-texte-60 .section-image-texte__texte { flex-basis: 60%; }
/* Empilement mobile : image au-dessus, puis texte. */
@media (max-width: 768px) {
	.section-image-texte .rangee { flex-direction: column; }
	.section-image-texte__texte,
	.section-image-texte__media { flex-basis: auto; }
	.section-image-texte__media { min-height: 260px; }
	.section-image-texte__texte { padding: 40px 30px; }
	.section-image-texte.image-gauche .section-image-texte__media { order: -1; }
}

/* ==============================================================
   SECTION IMAGE + ROND — image de fond pleine largeur, rond rose
   (label + texte) positionnable, cliquable si lien.
   ============================================================== */
.section-image-rond {
	position: relative;      /* reçoit .media-fond (cover, inset:0) */
	overflow: hidden;
}
.section-image-rond .rangee {
	min-height: 640px;
	align-items: center;     /* rond centré verticalement */
	/* Cale le rond sur la grille : même retrait latéral que les colonnes
	   standard (.ecart-normal = 25px). */
	padding-left: 25px;
	padding-right: 25px;
}
.section-image-rond.pos-centre .rangee { justify-content: center; }
.section-image-rond.pos-droite .rangee { justify-content: flex-end; }
.rond-evenement {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Taille minimum + croissance avec le contenu : à texte court le rond fait
	   480px ; si le texte demande plus de hauteur, la boîte grandit plutôt que
	   de couper (léger ovale dans le pire cas — jamais de débordement). */
	min-width: 480px;
	min-height: 480px;
	aspect-ratio: 1;
	flex: 0 0 auto;
	margin: 60px 0;          /* respiration si l'image est peu haute */
	padding: 70px;           /* garde le texte dans la partie large du cercle */
	border-radius: 50%;
	background: var(--color-primary);
	text-align: center;
	text-decoration: none;
	color: var(--color-blanc);
}
.rond-evenement__contenu {
	display: block;
	max-width: 330px;        /* force le retour à la ligne dans le cercle */
}
.rond-evenement .titre-label {
	display: block;
	margin-bottom: 16px;
	color: var(--color-blanc);
}
.rond-evenement__texte {
	display: block;
	font-size: var(--fs-medium);
	font-weight: var(--fw-bold);
	line-height: 1.25;
	color: var(--color-blanc);
}
/* Rond cliquable : léger grossissement au survol. */
a.rond-evenement {
	transition: transform .3s ease;
}
a.rond-evenement:hover,
a.rond-evenement:focus-visible {
	transform: scale(1.04);
}

/* ==============================================================
   SECTION NEWS (Actualités) — en-tête titre + lien à droite,
   bulle optionnelle derrière le titre, cartes image/titre/extrait.
   ============================================================== */
.section-news__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}
.section-news__head .bouton-simple {
	margin-left: auto;       /* lien à droite même sans titre */
}
/* Bulle « Ay-oh ! » : le titre reste dans le flux, aligné sur la grille, en
   taille large ; le nuage blanc est un ::before décoratif centré derrière,
   dimensionné par rapport au texte, qui déborde au-dessus de la section.
   (Pseudo transformé : pas de conflit avec .anim, qui anime le h2 lui-même.) */
.sous-titre.titre-bulle {
	position: relative;
	z-index: 0;              /* contexte d'empilement : le nuage passe sous le texte */
	font-size: var(--fs-big);
	/* !important : bat les utilitaires all-color-* (texte blanc) posés sur la
	   section — sinon titre blanc sur nuage blanc. */
	color: var(--color-noir) !important;
}
.sous-titre.titre-bulle::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 50%;
	width: calc(100% + 360px);
	height: calc(100% + 400px);
	transform: translate(-50%, -50%);  /* léger biais vers le haut */
	background: url(img/formes/bulle-ay-oh.svg) no-repeat center / 100% 100%;
	pointer-events: none;
}
/* Cartes */
.carte-news__media {
	display: block;
	overflow: hidden;        /* le zoom de l'image reste dans le cadre */
}
.carte-news__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.6s ease;
}
/* Même zoom doux que les vignettes spectacles — au survol de l'image
   uniquement (le reste de la carte n'est pas cliquable en entier). */
.carte-news__media:hover img {
	transform: scale(1.05);
}
.carte-news__titre {
	margin: 25px 0 0;
	font-size: var(--fs-plus);
	line-height: 1.2;
}
.carte-news__titre a {
	color: inherit;
	text-decoration: none;
}
.carte-news__titre a:hover {
	color: var(--color-primary);
}
.carte-news__extrait {
	margin: 15px 0 0;
}
.carte-news .bouton-simple {
	margin-top: 20px;
}
/* Fond noir : textes des cartes en blanc. */
.section-news.noir .carte-news__titre a,
.section-news.noir .carte-news__extrait {
	color: var(--color-blanc);
}
.section-news.noir .carte-news__titre a:hover {
	color: var(--color-primary);
}

/* ==============================================================
   SECTION AGENDA — lignes date | titre | lieu ; en mode « tout
   l'agenda », titres de mois en font-heading, le reste en font-body.
   ============================================================== */
.titre-mois {
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-size: var(--fs-large);
	margin: 20px 0 0px;   /* les lignes suivent dans la même colonne */
}
.titre-mois span {
	font-size: var(--fs-normal);
}
.ligne-agenda {
	display: grid;
	grid-template-columns: 300px 1fr 200px;
	gap: 20px;
	align-items: center;
	padding: 20px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	font-family: var(--font-body);
}
.ligne-agenda p {
	margin: 0;
}
.ligne-agenda__jour {
	display: block;
	font-weight: var(--fw-bold);
}
.ligne-agenda__jour::first-letter {
	text-transform: uppercase;
}
.ligne-agenda__horaire {
	display: block;
}
.ligne-agenda__titre {
	font-size: var(--fs-plus);
	font-weight: var(--fw-bold);
	line-height: 1.2;
}
.ligne-agenda__mention {
	display: block;
	font-size: var(--fs-small);
	font-weight: 400;

	margin-bottom: 4px;
}
.ligne-agenda__soustitre {
	display: block;
	font-size: var(--fs-normal);
	font-weight: 400;
	margin-top: 4px;
}
/* Le déclencheur de popup (button) se présente comme le lien. */
.ligne-agenda__titre a,
.ligne-agenda__titre button {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s ease;
}
.ligne-agenda__titre button {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	cursor: pointer;
	text-align: left;
}
.ligne-agenda__titre a:hover,
.ligne-agenda__titre button:hover {
	color: var(--color-primary);
}
.ligne-agenda__lieu {
	font-weight: var(--fw-regular);
}
.ligne-agenda__lieu-label {
	display: block;
	font-size: var(--fs-small);
	font-weight: var(--fw-regular);
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--color-primary);
}
/* Lieu cliquable (itinéraire Google Maps) : marqueur rose devant le nom
   (SVG masqué → suit --color-primary), pas de soulignement. */
.ligne-agenda__lieu a {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s ease;
}
.ligne-agenda__lieu a::after {
	content: "";
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-left: 6px;
	vertical-align: -3px;
	background-color: var(--color-primary);
	-webkit-mask: url(img/map-marker.svg) no-repeat center / contain;
	        mask: url(img/map-marker.svg) no-repeat center / contain;
}
.ligne-agenda__lieu a:hover {
	color: var(--color-primary);
}
/* « Ajouter à mon agenda » : icône calendrier rose (SVG masqué → suit
   --color-primary) qui déplie un petit menu Google Agenda / .ics. <details>
   natif : aucun JS, compatible avec les ré-affichages AJAX de WPGB. */
.ajout-agenda {
	position: relative;
	margin-top: 6px;
	width: max-content;
}
.ajout-agenda summary {
	list-style: none;
	cursor: pointer;
	display: inline-block;
}
.ajout-agenda summary::-webkit-details-marker {
	display: none;
}
.ajout-agenda__icone {
	display: block;
	width: 20px;
	height: 20px;
	background-color: var(--color-primary);
	-webkit-mask: url(img/calendar-plus.svg) no-repeat center / contain;
	        mask: url(img/calendar-plus.svg) no-repeat center / contain;
	transition: background-color 0.3s ease;
}
.ajout-agenda summary:hover .ajout-agenda__icone {
	background-color: var(--color-secondary);
}
.ajout-agenda__menu {
	position: absolute;
	z-index: 5;
	top: calc(100% + 8px);
	left: 0;
	width: max-content;
	background: var(--color-blanc);
	color: var(--color-noir);
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 8px;
	padding: 10px 16px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
.ajout-agenda__menu a {
	display: block;
	padding: 4px 0;
	color: var(--color-noir);
	text-decoration: none;
	font-size: var(--fs-small);
	transition: color 0.3s ease;
}
.ajout-agenda__menu a:hover {
	color: var(--color-primary);
}
/* « S'abonner à l'agenda » : ligne discrète sous la liste (mode tout
   l'agenda) — flux webcal Apple/Outlook + abonnement Google. */
.abo-agenda {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 15px 0 0;
	font-size: var(--fs-small);
}
.abo-agenda .ajout-agenda__icone {
	display: inline-block;
}
.abo-agenda a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 4px;
	transition: color 0.3s ease;
}
.abo-agenda a:hover {
	color: var(--color-secondary);
}
.section-agenda {
	padding-top: 50px;
}
/* Sections sombres : textes en blanc (les hovers rose restent lisibles). */
.section-agenda.noir .ligne-agenda,
.section-agenda.noir .titre-mois,
.section-agenda.noir .abo-agenda {
	color: var(--color-blanc);
}
.section-agenda.noir .ligne-agenda {
	border-bottom-color: rgba(255, 255, 255, 0.25);
}

/* ==============================================================
   FICHES PRODUCTION (spectacles / artistes)
   Bloc titre noir, image à la une + pastilles, contenu | aside
   (dates de tournée + artiste), citations, autres spectacles.
   ============================================================== */
.titre-cpt {
	background: var(--color-noir);
	padding: 50px 0 90px;
}
.titre-cpt h1,
.titre-cpt .sous-titre-cpt,
.titre-cpt .fil-ariane {
	color: var(--color-blanc);
}
.titre-cpt h1 {
	margin-bottom: 0;
}
.titre-cpt .fil-ariane {
	margin-bottom: 70px;
}
.sous-titre-cpt {
	font-size: var(--fs-medium);
	margin-top: 0px;
}
/* Variante fond blanc (fiche Programmation) : mêmes proportions, texte noir.
   La flèche du fil d'Ariane reste rose (mask coloré), rien à surcharger. */
.titre-cpt--blanc {
	background: var(--color-blanc);
}
.titre-cpt--blanc h1,
.titre-cpt--blanc .sous-titre-cpt,
.titre-cpt--blanc .fil-ariane {
	color: var(--color-noir);
}
/* Image à la une pleine largeur + pastilles d'infos à cheval sur le haut. */
.hero-cpt {
	position: relative;
}
/* L'image garde le ratio du crop "parallax" (1920×1100) — pas de max-height
   qui l'écraserait via object-fit. */
.hero-cpt img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}
.infos-cpt {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;   /* pastilles centrées sur le bouton Billetterie (plus haut) */
	gap: 10px;
	width: max-content;
	max-width: 92%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.infos-cpt li {
	background: var(--color-noir);
	border: 1px solid var(--color-blanc);
	color: var(--color-blanc);
	font-size: var(--fs-small);
	padding: 6px 16px;
	border-radius: 999px;
	/* Neutralise les styles de liste globaux (puce + retrait). */
	list-style-type: none;
	margin: 0;
}
/* Spectacle en tournée : étiquette inversée (fond blanc). */
.infos-cpt li.info-blanc {
	background: var(--color-blanc);
	border-color: var(--color-blanc);
	color: var(--color-noir);
}
/* Étiquette « Gratuit » (programmation) : rose comme le bouton Billetterie. */
.infos-cpt li.info-rose {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-blanc);
}
/* Chapeau : intro en médium, graisse normale. */
.chapeau {
	font-weight: 400;
	font-size: var(--fs-medium);
	line-height: 1.2;
	margin-bottom: 25px;
}
/* Aside : liseré rose, dates de tournée, artiste lié. */
.single-spectacle__aside {
	border-left: 4px solid var(--color-primary);
}
/* Le padding haut ne s'applique que sous un chapeau (sinon la description
   démarre directement en haut de colonne). */
.single-spectacle .content-single {
	padding: 0 0 25px;
	padding-right: 180px;
}
.single-spectacle .chapeau + .content-single {
	padding-top: 25px;
}
@media (max-width: 1025px) {
	.single-spectacle .content-single {
		padding-right: 0px;
	}
}
.bloc-dates-tournee {
	margin-bottom: 40px;
	padding-bottom: 60px;
	border-bottom: 1px solid var(--color-primary);
}
.dates-tournee {
	list-style: none;
	margin: 15px 0 20px;
	padding: 0;
}
.dates-tournee li {
	/* Neutralise les styles de liste globaux (puce + retrait). */
	list-style-type: none;
	margin: 0;
	padding: 15px 0;
	border-top: 1px solid rgba(0, 0, 0, 0.5);
	font-size: 16px;
}
.dates-tournee__mention {
	display: block;
	font-size: var(--fs-small);
}
.dates-tournee__date {
	display: block;
	font-weight: var(--fw-bold);
}
.dates-tournee__date::first-letter {
	text-transform: uppercase;   /* « samedi 14 juillet » → « Samedi … » */
}
.dates-tournee__infos {
	display: block;
	color: inherit;
	text-decoration: none;
}
a.dates-tournee__infos:hover {
	color: var(--color-primary);
}
.aside-artiste {
	padding-top: 20px;
	text-align: left;
}
/* Blocs suivants de l'aside (logos partenaires, infos complémentaires) :
   écart après le bloc artiste, qui n'a pas de marge basse. */
.aside-artiste + .bloc-aside {
	margin-top: 40px;
}
.aside-artiste a {
	display: block;
	text-decoration: none;
	color: inherit;
}
/* Photo ronde : le zoom se fait DANS le cercle (wrapper overflow hidden),
   même effet que les vignettes spectacles. */
.aside-artiste__media {
	display: block;
	width: 140px;
	height: 140px;
	border-radius: 100%;
	overflow: hidden;
}
.aside-artiste__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}
.aside-artiste a:hover .aside-artiste__media img {
	transform: scale(1.05);
}
.aside-artiste__nom {
	display: block;
	margin-top: 12px;
	color: var(--color-primary);
}
.aside-artiste__soustitre {
	display: block;
	font-size: var(--fs-small);
	color: var(--color-noir);
}
/* Citations : filet rose au-dessus qui s'arrête AVANT les flèches (pseudo,
   pas une bordure pleine largeur), flèches alignées sur le filet à droite,
   pas de bordure gauche héritée du blockquote. */
.citations-carousel {
	position: relative;
	margin: 30px 0;
	padding-top: 35px;
}
.citations-carousel::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--color-primary);
}
/* Avec flèches (plusieurs citations) : le filet s'arrête avant elles. */
.citations-carousel--nav::before {
	right: 90px;
}
.citations-carousel blockquote {
	border-left: 0;
	padding-left: 0;
}
.citations-carousel__nav {
	position: absolute;
	top: -16px;              /* centrées sur la ligne du filet */
	right: 0;
	display: flex;
	gap: 8px;
}
.citations-carousel__nav .prog-carousel__prev,
.citations-carousel__nav .prog-carousel__next {
	width: 32px;
	height: 32px;
}
.citations-carousel__nav .prog-carousel__prev img,
.citations-carousel__nav .prog-carousel__next img {
	width: 14px;
}
/* Début / fin de carousel : la flèche inactive passe en rose pâle. */
.citations-carousel__nav .swiper-button-disabled {
	opacity: 0.35;
}
/* Contexte sombre générique (.noir — sections du constructeur avec fond
   noir, autres spectacles, spectacles d'un artiste, dates passées…) :
   titre de section et cartes en blanc, textes inchangés au survol (seule
   l'image zoome — sans cette surcharge, le hover standard passerait le
   titre en noir, invisible sur fond noir). */
.noir .sous-titre,
.noir .prog-card,
.noir .prog-card:hover,
.noir .prog-card:hover .prog-card__title {
	color: var(--color-blanc);
}
/* Aside de la fiche artiste : représentations groupées par spectacle. */
.dates-spectacle-groupe {
	margin-top: 25px;
}
.dates-spectacle-groupe__titre {
	margin: 0;
	font-size: var(--fs-plus);
	font-weight: var(--fw-bold);
	line-height: 1.2;
}
.dates-spectacle-groupe__titre a {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s ease;
}
.dates-spectacle-groupe__titre a:hover {
	color: var(--color-primary);
}
.dates-spectacle-groupe .dates-tournee {
	margin-top: 5px;
}
/* ==============================================================
   PAGE EN TOURNÉE — plein écran sous le header fixe :
   liste 2/3 (ascenseur interne, facettes en tête) | carte 1/3.
   ============================================================== */
.tournee-plein-ecran {
	display: flex;
	height: calc(100vh - 100px);   /* #main réserve 100px sous le header */
}
.tournee-liste {
	flex: 0 0 66.666%;
	min-width: 0;
	overflow-y: auto;              /* l'ascenseur est ici, pas sur la page */
	padding: 35px 45px 60px;
}
.tournee-carte {
	flex: 0 0 33.333%;
	position: relative;
	/* Isole les calques Leaflet (z-index internes 400+) : sans contexte
	   d'empilement, la carte passerait au-dessus du header fixe (z 99). */
	z-index: 0;
}
/* Le wrapper interne remplit la colonne et ROGNE tout débordement : quelle
   que soit la hauteur que la carte se donne, elle reste dans la colonne. */
.tournee-carte__inner {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
/* La facette Map est une boîte à ratio (height:0 + padding-bottom:% en
   inline). Hauteur imposée en unité VIEWPORT — pas de chaîne de % fragile
   (Leaflet s'initialiserait à hauteur nulle si un maillon lâche) ; le
   débordement éventuel est rogné par le wrapper. */
.tournee-carte__inner .wpgb-map-facet {
	height: calc(100vh - 100px) !important;
	padding-bottom: 0 !important;
}
/* Facettes de tri en tête de liste. */
.tournee-facettes {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 30px;
}
.tournee-facettes__facette {
	flex: 1 1 220px;
}
/* Titres de mois : le premier colle en haut de la liste. */
.tournee-liste .titre-mois {
	margin-top: 40px;
	font-size: var(--fs-medium);
}

/* Liens du titre (spectacle) : mention + sous-titre hérités de l'agenda. */
.tournee-liste .ligne-agenda__titre a {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s ease;
}
.tournee-liste .ligne-agenda__titre a:hover {
	color: var(--color-primary);
}
/* Mobile / tablette : on empile — liste en flux normal, carte dessous. */
@media (max-width: 1025px) {
	.tournee-plein-ecran {
		display: block;
		height: auto;
	}
	.tournee-liste {
		overflow: visible;
		padding: 25px 20px;
	}
	.tournee-carte {
		height: 420px;
	}
	.tournee-carte__inner .wpgb-map-facet {
		height: 420px !important;
	}
}
/* Popups des marqueurs de la carte (contenu via laconf_marker_tournee) :
   mêmes infos que la liste de gauche — tout en font-body, noir. */
.popup-map,
.popup-map * {
	font-family: var(--font-body);
	color: var(--color-noir);
}
.popup-map {
	padding: 14px 16px;
}
/* Le CSS de Leaflet colore les liens en bleu (.leaflet-container a) :
   sélecteur préfixé pour reprendre la main. */
.leaflet-popup-content p {
	margin: 5px 0 !important;
}
.leaflet-container .popup-map a {
	color: var(--color-noir);
}
.popup-map hr {
	margin: 10px 0 !important;
}
.popup-map__mention {
	margin: 0;
	font-size: var(--fs-small);
}
.popup-map__date {
	margin: 0;
	font-weight: var(--fw-bold);
	font-size: var(--fs-normal);
}
.popup-map__date::first-letter {
	text-transform: uppercase;
}
.popup-map__titre {
	margin: 0px 0 0;
	font-size: var(--fs-normal);
	font-weight: var(--fw-bold);
	line-height: 1.2;
}
.popup-map__titre a {
	text-decoration: none;
	transition: color 0.3s ease;
}
.leaflet-container .popup-map .popup-map__titre a:hover {
	color: var(--color-primary);
}
.popup-map__soustitre {
	display: block;
	margin-top: 5px;         /* petite marge sous le titre */
	font-size: var(--fs-normal);
	font-weight: 400;
	line-height: 1.2;
}
.popup-map__infos {
	margin: 10px 0 0;
	font-size: var(--fs-normal);
}
/* Lieu cliquable : marqueur rose après le texte, comme la liste. */
.popup-map__infos a {
	text-decoration: none;
	transition: color 0.3s ease;
}
.popup-map__infos a::after {
	content: "";
	display: inline-block;
	width: 12px;
	height: 13px;
	margin-left: 5px;
	vertical-align: -2px;
	background-color: var(--color-primary);
	-webkit-mask: url(img/map-marker.svg) no-repeat center / contain;
	        mask: url(img/map-marker.svg) no-repeat center / contain;
}
.leaflet-container .popup-map .popup-map__infos a:hover {
	color: var(--color-primary);
}
.spectacles-autres {
	background-image: url(img/formes/bg-section-autres-spectacles.svg);
	background-repeat: no-repeat;
	background-position: top right;
	background-size: 30%;
}
/* --------------------------------------------------------------
/////////////////////////////////// VIGNETTE
----------------------------------------------------------------- */

a.bloc-vignette {
    display: block;
    height: 100%;
    background: #fff;
    text-decoration: none;
}

a.bloc-vignette .image-vignette {
    display: block;
    position: relative;
    line-height: 0;
    overflow: hidden;
}

a.bloc-vignette .image-vignette img {
    width: 100%;
    height: auto;
    transition: transform 0.6s ease;
}

a.bloc-vignette:hover .image-vignette img {
    transform: scale(1.05);
}

.content-vignette {
    padding: 25px 25px 0 0;
    position: relative;
}

.content-vignette p {
    margin: 0;
    line-height: 1;
    font-family: var(--font-heading);
}

.content-vignette .titre-vignette {
    color: var(--color-primary);
    font-size: var(--fs-medium);
    margin-bottom: 5px;
    line-height: 1.1;
    transition: color 0.3s ease;
}
.content-vignette .titre-vignette span {
	display: block;
	color: var(--color-noir);
	font-size: var(--fs-normal);
	margin-top: 3px;
}
a.bloc-vignette:hover .titre-vignette{
    color: var(--color-primary);
}

.content-vignette .sous-titre-vignette {
    color: var(--color-noir);
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 5px;
}

/* ====== Page de résultats de recherche ======
   Les vignettes y sont des <div> (pas des <a> comme ailleurs) : on leur
   redonne le look "carte" et on gère le cas sans image. */

.searchwp-revised-search-notice {
	display: none !important;
}
.search-section {
	padding-top: 40px;
}
.search-section .count {
	color: var(--color-primary);
	font-weight: var(--fw-regular);
	font-size: var(--fs-normal);
}
.search-section article {
	margin-bottom: 30px;
}
.search-section .bloc-vignette {
	height: 100%;
	background: #fff;
	border-radius: 0px;
	overflow: hidden;
}
.search-section .image-vignette {
	display: block;
	line-height: 0;
}
.search-section .image-vignette img {
	display: block;
	width: 100%;
	height: auto;
}
.search-section .content-vignette h3 {
	margin: 0 0 6px;
	font-size: var(--fs-plus);
	line-height: 1.1;
}
.search-section .content-vignette h3 a {
	color: var(--color-noir);
	text-decoration: none;
	transition: color 0.3s ease;
}
.search-section .content-vignette h3 a:hover {
	color: var(--color-primary);
}
.search-section .content-vignette p {
	font-family: var(--font-body);
	font-size: var(--fs-small);
	margin: 0;
	line-height: 1.2;
	color: var(--color-noir);
}
/* Résultat sans image : carte texte seule avec un accent rose en haut. */
.search-section .bloc-vignette--texte {
	border-top: 4px solid var(--color-primary);
}

/* ==============================================================
   SINGLE PROGRAMMATION
   Même architecture que la fiche Spectacle (classes .single-spectacle
   partagées : chapeau, content-single, aside liseré, citations) mais bloc
   titre blanc. Spécifique ici : dates + billetterie sous le titre, blocs
   de l'aside (représentations, tarifs, infos pratiques) et ligne de logos.
   ============================================================== */
/* Dates (start/end ou date libre) + lieu/mention sous le bloc titre. */
.dates-programmation {
	margin-top: 30px;
}
.dates-programmation p {
	margin: 0 0 4px;
}
.dates-programmation__mention {
	font-size: var(--fs-small);
}
.dates-programmation__date {
	font-family: var(--font-body);
	font-size: var(--fs-medium);
	line-height: 1.1;
}
.dates-programmation__date::first-letter {
	text-transform: uppercase;   /* « samedi 14 juillet » → « Samedi … » */
}
/* Lieu cliquable (itinéraire Google Maps) : pas de marqueur ici, un
   soulignement fin signale le lien. */
.dates-programmation__lieu a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
	transition: color 0.3s ease;
}
.dates-programmation__lieu a:hover {
	color: var(--color-primary);
}
/* Pastilles sur l'image à la une : le bouton Billetterie (pilule .bouton
   rose) remplace le fond/bordure de pastille. Le lien reprend le gabarit
   exact d'une pastille (fs-small, padding + 1px compensant sa bordure) —
   les !important battent ceux de .bouton a. */
.infos-cpt li.info-bouton {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
}
.infos-cpt li.info-bouton a {
	font-size: var(--fs-small);
	line-height: var(--lh-normal) !important;
	padding: 7px 17px !important;
}
/* Blocs de l'aside : représentations, tarifs, infos pratiques… */
.bloc-aside {
	margin-bottom: 40px;
}
.bloc-aside .titre-label {
	margin: 0 0 12px;
}
.bloc-aside__texte {
	margin: 0;
}
/* Représentations : réutilise .dates-tournee ; tarifs + lien en plus. */
.dates-tournee__tarifs {
	display: block;
	font-size: var(--fs-small);
}
.dates-tournee__billetterie {
	display: inline-block;
	margin-top: 6px;
}
/* Infos pratiques : même rythme de liste que .dates-tournee. */
.infos-pratiques {
	list-style: none;
	margin: 0;
	padding: 0;
}
.infos-pratiques li {
	list-style-type: none;
	margin: 0;
	padding: 8px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
/* Logos partenaires : ligne dans l'aside, hauteur plafonnée. */
.ligne-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 25px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ligne-logos li {
	list-style-type: none;
	margin: 0;
}
.ligne-logos img {
	display: block;
	height: 50px;
	width: auto;
	max-width: 100%;
	object-fit: contain; /* logo très large : rétréci sans être écrasé */
}

/* ====== Section Programmation : carousel + cartes ====== */
.section-prog-carousel .prog-carousel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 0px;
}
.section-prog-carousel .sous-titre {
	margin: 0;
}
.prog-carousel__nav {
	display: flex;
	gap: 12px;
}
.prog-carousel__prev,
.prog-carousel__next {
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 999px;
	background: var(--color-primary);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.3s ease;
}
.prog-carousel__prev:hover,
.prog-carousel__next:hover {
	background: var(--color-secondary);
}
.prog-carousel__prev img,
.prog-carousel__next img {
	width: 15px;
	height: auto;
	display: block;
}
.prog-carousel__prev.swiper-button-disabled,
.prog-carousel__next.swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
}
.prog-carousel__prev:focus-visible,
.prog-carousel__next:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
}
.prog-card {
	display: block;
	text-decoration: none;
	color: var(--color-noir);
}
.prog-card__media {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
}
.prog-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}
.prog-card:hover .prog-card__media img {
	transform: scale(1.05);
}
/* Pastilles de catégories : le conteneur porte le positionnement (une
   pastille par catégorie, alignées et repliables sur plusieurs lignes). */
.prog-card__badges {
	position: absolute;
	top: 14px;
	left: 14px;
	right: 14px;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.prog-card__badge {
	background: var(--color-noir);
	color: var(--color-blanc);
	font-size: var(--fs-small);
	padding: 5px 12px;
	border-radius: 999px;
}
/* Variante inversée (ex. « En tournée » sur les cartes spectacles). */
.prog-card__badge--blanc {
	background: var(--color-blanc);
	color: var(--color-noir);
}
/* Variante rose : catégories dont le champ « Couleur de l'étiquette »
   est réglé sur rose (ex. « Nuit du cirque »). */
.prog-card__badge--rose {
	background: var(--color-primary);
	color: var(--color-blanc);
}
/* Variante ronde (artistes) : le visuel est recadré carré au centre puis
   arrondi — fonctionne quel que soit le ratio de l'image source. Le champ
   « Vignette (recadrage sur-mesure) » prend le relais si le cadrage
   automatique ne convient pas. */
.prog-card--ronde {
	text-align: center;   /* nom + compagnie centrés sous le rond */
	margin-bottom: 15px;
}
.prog-card--ronde .prog-card__media {
	aspect-ratio: 1 / 1;
	border-radius: 100%;
	/* Rond un peu plus petit que la colonne, centré. */
	max-width: 80%;
	margin: 0 auto;
}
.prog-card__body {
	display: block;
	padding-top: 16px;
}
.prog-card__meta {
	display: block;
	font-family: var(--font-body);
	font-weight: var(--fw-bold);
	font-size: var(--fs-normal);
	margin-bottom: 12px;
}
.prog-card__title {
	display: block;
	font-family: var(--font-heading);
	font-size: var(--fs-medium);
	line-height: 1.05;
	transition: color 0.3s ease;
}
.prog-card:hover .prog-card__title {
	color: var(--color-noir);
}
.prog-card:hover {
	color: var(--color-noir);
}
/* (Les sections sombres — .noir — passent les cartes en blanc via la règle
   générique du bloc Fiches Production.) */
.prog-card__cie {
	display: block;
	font-family: var(--font-body);
	font-size: var(--fs-normal);
	margin-top: 4px;
}
/* Plein-bleed à droite : le carousel part du bord gauche de la .rangee mais
   s'étend jusqu'au bord droit de l'écran (les slides suivants débordent et
   sont rognés au bord du viewport → aperçu jusqu'au bord, sans marge blanche). */
.section-prog-carousel {
	overflow: hidden;
}
.section-prog-carousel .prog-carousel {
	margin-right: calc((100% - 100vw) / 2);
}
/* Slides à largeur de colonne (rangée / 3), alignés sur la grille.
   Scopé pour primer sur le .swiper-slide { width:100% } de Swiper. */
.section-prog-carousel .swiper-slide {
	width: calc(min(95vw, 1380px) / 3);
}
@media (max-width: 1025px) {
	.section-prog-carousel .swiper-slide {
		width: 42vw;
	}
}
@media (max-width: 767px) {
	.section-prog-carousel .swiper-slide {
		width: 80vw;
	}
}

/* ==============================================================
   SECTION CHIFFRES CLÉS
   Carousel plein-bleed à droite (petit titre + flèches à gauche,
   slides séparés d'un filet vertical) ou grille 3 colonnes à filets
   horizontaux. Fond noir : textes et filets passent en blanc.
   ============================================================== */
.section-chiffres .chiffre__date {
	font-family: var(--font-heading);
	font-size: var(--fs-large);
	line-height: 1;
	color: var(--color-primary);
	margin: 0 0 10px;
}
.section-chiffres--grille .chiffre__date {
	font-size: var(--fs-medium);
}
.section-chiffres .chiffre__titre {
	font-weight: var(--fw-bold);
	margin: 0 0 8px;
}
.section-chiffres .chiffre__texte {
	margin: 0;
}
.section-chiffres .chiffre .bouton-simple {
	margin-top: 15px;
}
.section-chiffres.noir {
	color: var(--color-blanc);
}
.section-chiffres.noir .chiffre__date {
	color: var(--color-blanc);
}

/* --- Mode carousel : rognage au bord droit du viewport (mécanique du
   carousel Programmation : marge droite négative jusqu'au bord). --- */
.section-chiffres--carousel {
	overflow: hidden;
}
.chiffres-carousel__grille {
	display: flex;
	align-items: stretch;
}
.chiffres-carousel__head {
	flex: 0 0 220px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 25px;
	padding-right: 30px;
}
.chiffres-carousel__head .titre-label {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-normal);
	font-weight: var(--fw-bold);
	line-height: 1.3;
}
.chiffres-carousel__head .swiper-button-disabled {
	opacity: 0.45;
}
.section-chiffres--carousel .chiffres-carousel {
	flex: 1 1 auto;
	min-width: 0;
	/* margin-left : annule le margin-left auto du CSS Swiper — en pile
	   mobile (flex column), une marge auto sur l'axe transversal empêche
	   l'étirement : le conteneur passait en largeur de contenu et Swiper,
	   croyant tout visible, verrouillait flèches et glisser (button-lock). */
	margin-left: 0;
	margin-right: calc((100% - 100vw) / 2);
}
.section-chiffres--carousel .swiper-slide {
	width: calc(min(95vw, 1380px) / 3.2);
	box-sizing: border-box;
	border-left: 1px solid rgba(0, 0, 0, 0.4);
	padding: 15px 35px 15px 25px;
	height: auto;   /* slides à hauteur égale (wrapper en stretch) */
}
.section-chiffres--carousel.noir .swiper-slide {
	border-left-color: var(--color-blanc);
}
@media (max-width: 1025px) {
	.chiffres-carousel__grille {
		flex-direction: column;
		gap: 30px;
	}
	/* Le bloc titre + flèches passe au-dessus, comme l'en-tête du
	   carousel Programmation. */
	.chiffres-carousel__head {
		flex: 0 0 auto;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		padding-right: 0;
	}
	.section-chiffres--carousel .swiper-slide {
		width: 42vw;
	}
}
@media (max-width: 767px) {
	.section-chiffres--carousel .swiper-slide {
		width: 80vw;
	}
}

/* --- Mode grille : filets horizontaux entre les rangées (pas sous la
   dernière — calé sur 3 colonnes en desktop). Le bloc occupe toute la
   hauteur de sa colonne (rangée flex en stretch) : les filets d'une même
   rangée restent alignés quelle que soit la longueur des contenus. --- */
.section-chiffres--grille .chiffre {
	height: 100%;
	box-sizing: border-box;
	border-bottom: 1px solid rgba(0, 0, 0, 0.5);
	padding-bottom: 20px;
	margin-bottom: 20px;
}
.section-chiffres--grille.noir .chiffre {
	border-bottom-color: var(--color-blanc);
}
@media (max-width: 767px) {
	/* Une colonne : filet sous chaque item sauf le dernier. */
	.section-chiffres--grille .rangee > div:nth-last-child(-n+3) .chiffre {
		border-bottom: 1px solid rgba(0, 0, 0, 0.5);
		padding-bottom: 35px;
		margin-bottom: 10px;
	}
	.section-chiffres--grille .rangee > div:last-child .chiffre {
		border-bottom: 0;
		padding-bottom: 0;
		margin-bottom: 0;
	}
	.section-chiffres--grille.noir .rangee > div:nth-last-child(-n+3) .chiffre {
		border-bottom-color: var(--color-blanc);
	}
}


/* -------------------------------------------------------------- 
/////////////////////////////////// SINGLE
----------------------------------------------------------------- */
#single{
	position: relative;
	padding-top: 60px;
}
#single h1 {
	color: var(--color-noir);
	font-size: var(--fs-big);
	line-height: 1;
	margin-top: 5px;
	text-align: center;
}
#single .image-single {
	position: relative;
	margin-top: 30px;
}
#single .image-single img {
	width: 100% ;
	height: auto;
	position: relative;
	margin: 25px 0 0 0;
}
#single .date-publi {
	text-align: center;
	font-size: var(--fs-small);
	color: var(--color-noir);
	margin: 0;
}
/* Fil d'Ariane au-dessus du titre (centré via .text-center .fil-ariane). */
#single .titre-single .fil-ariane {
	margin-bottom: 15px;
}
/* L'ol de SEOPress porte aussi la classe .breadcrumb : on neutralise l'ombre
   prévue pour la barre de fil d'Ariane des blocs titre. */
.fil-ariane .breadcrumb {
	box-shadow: none;
}
.single-breadcrumb {
	margin-bottom: 60px;
}
#single .date-publi::first-letter {
	text-transform: uppercase;
}
#single .wp-block-image, #single .wp-block-cover {
	margin: 40px 0;
}
#single .content-single h2 {
	font-size: var(--fs-medium);
	color: var(--color-noir);
	margin-top: 0;
}
#single .content-single p + h2, #single .content-single p + h3,
#single .content-single ul + h2, #single .content-single ul + h3,
#single .content-single ol + h2, #single .content-single ol + h3 {
  margin-top: 25px;
}
#single .content-single h3 {
	color:var(--color-primary);
	font-size: var(--fs-medium);
	margin-top: 0px;
}


/* -------------------------------------------------------------- 
/////////////////////////////////// FOCUS
----------------------------------------------------------------- */
.titre-label {
	font-size: var(--fs-small);
	font-weight: 300;
	letter-spacing: 2px;
	text-transform: uppercase;
}
a.bloc-focus {
	position: relative;
	display: block;
	/* Pas de min-height ici : combiné à aspect-ratio, il se transfère en
	   largeur minimale et fait déborder les blocs des colonnes étroites. */
	aspect-ratio: 1 / 1;
	/* Repli pour les blocs sans image (ex. page fille sans image à la
	   une) : le titre reste lisible sur fond noir. */
	background: var(--color-noir);
}
/* Formes du widget CTA : carré par défaut, paysage, ou portrait
   (le ratio des vignettes spectacles). */
a.bloc-focus.cta--horizontal {
	aspect-ratio: 4 / 3;
}
a.bloc-focus.cta--vertical {
	aspect-ratio: 3 / 4;
}
a.bloc-focus span.titre-focus {
	position: absolute;
	bottom: 0px;
	left: 0;
	z-index: 99;
	width: 100%;
	padding: 30px;
	font-size: var(--fs-normal);
	color: var(--color-blanc);
}
/* Césure limitée aux cartes pages filles/sœurs : ailleurs (widgets CTA),
   elle couperait des titres qui savent revenir à la ligne au mot entier.
   Préfixe requis par Safari. Surtout PAS de overflow-wrap: break-word en
   plus — Firefox coupe alors n'importe où au lieu de céser. */
.section-pages a.bloc-focus span.titre-focus {
	-webkit-hyphens: auto;
	hyphens: auto;
}
a.bloc-focus span.titre-focus em {
	display: block;
	font-style: normal;
	font-size: var(--fs-medium);
	font-family: var(--font-heading);
	font-weight: var(--fw-regular);
	line-height: 1;
	margin-top: 0px;
}
/* Cartes pages filles/sœurs : le titre se calibre sur la largeur de sa
   carte (conteneur), car Firefox ne cèse jamais un mot à majuscule
   initiale (« Accompagnement ») — la taille doit donc céder à la place.
   8.1 = largeur en em de ce mot dans la police de titre ; jamais plus
   grand que fs-medium, plancher à 17px. */
.section-pages a.bloc-focus {
	container-type: inline-size;
}
.section-pages a.bloc-focus span.titre-focus em {
	font-size: min(var(--fs-medium), max(19px, calc((100cqw - 64px) / 8.1)));
}
a.bloc-focus span.titre-focus span {
	display: block;
	font-size: var(--fs-small);
	font-weight: 300;
	letter-spacing: 2px;
	text-transform: uppercase;
}
a.bloc-focus span.titre-focus span.sur-titre-cta {
	margin-bottom: 10px;
}
a.bloc-focus span.titre-focus span.sous-titre-cta {
	margin-top: 10px;
}
a.bloc-focus span.titre-focus span img {
	width: 15px;
	margin-right: 7px;
	position: relative;
	top: 2px;
}
a.bloc-focus .overlay-focus {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99;
	background: var(--gradient-one);
}
a.bloc-focus:hover .overlay-focus {
	opacity: .5;
}

/* Titre standard des sections du constructeur */
h2.sous-titre {
	margin: 0 0 15px 0;
	color: var(--color-noir);
	font-size: var(--fs-large);
}

/* -------------------------------------------------------------- 
///////////////////////////////////  WIDGET ACCORDEON
----------------------------------------------------------------- */
.bloc-accordeon {
    border-bottom: 1px solid var(--color-primary);
    margin: 20px 0;
}
.bloc-accordeon .titre-accordeon {
    background: none;
    border: none;
    text-align: left;
    width: 100%;
    cursor: pointer;
    padding: 18px 35px 18px 0;
    margin: 0;
    font-family: var(--font-body);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    font-size: var(--fs-normal);
    line-height: 1;
    color: var(--color-noir);
    border-top: 1px solid var(--color-primary);
    position: relative;
}
.bloc-accordeon .titre-accordeon:hover {
    text-decoration: underline;
}
.bloc-accordeon .titre-accordeon:focus-visible {
	outline: 3px solid #005fcc;
  	outline-offset: 2px;
}
.bloc-accordeon .titre-accordeon::after {
    content: "";
    width: 20px;
    height: 20px;
    background: url(img/plus.svg) no-repeat center / contain;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease-in-out;
}
.bloc-accordeon .titre-accordeon[aria-expanded="true"]::after {
    transform: translateY(-50%) rotate(45deg);
}
/* Pas de padding-bottom sur le panneau : en border-box, sa hauteur ne peut
   pas descendre sous le padding, donc l'animation de fermeture calait à
   25px avant d'être coupée net. L'espace vient du dernier enfant (une
   marge, elle, se replie avec la hauteur animée). */
.texte-accordeon {
    display: none;
    padding: 0;
    border-bottom: 1px solid var(--color-primary);
}
.texte-accordeon > :last-child {
    margin-bottom: 25px;
}
.section-col.noir .bloc-accordeon,
.section-col .banniere .noir .bloc-accordeon {
    border-bottom: 1px solid var(--color-blanc);
}
.section-col.noir .bloc-accordeon .titre-accordeon,
.section-col.noir .bloc-accordeon .texte-accordeon *, 
.section-col .banniere .noir .bloc-accordeon .titre-accordeon,
.section-col .banniere .noir .bloc-accordeon .texte-accordeon *{
    color: #fff;
}
.section-col.noir .bloc-accordeon .titre-accordeon,
.section-col .banniere .noir .bloc-accordeon .titre-accordeon {
    border-top: 1px solid var(--color-blanc);
}
.section-col.noir .bloc-accordeon .titre-accordeon:after, 
.section-col .banniere .noir .bloc-accordeon .titre-accordeon:after {
    background-image: url(img/plus-blanc.svg);
}
.section-col.noir .bloc-accordeon .titre-accordeon.active,
.section-col .banniere .noir .bloc-accordeon .titre-accordeon.active  {
    border-bottom: 0px solid var(--color-blanc);
    color:var(--color-blanc);
}
.section-col.noir .bloc-accordeon .titre-accordeon.active:after,
.section-col .banniere .noir .bloc-accordeon .titre-accordeon.active:after {
    color:var(--color-blanc);
}
.section-col.noir .bloc-accordeon .texte-accordeon,
.section-col .banniere .noir .bloc-accordeon .texte-accordeon {
    border-bottom: 1px solid var(--color-blanc);
}
/* -------------------------------------------------------------- 
/////////////////////////////////// ANIMATIONS
----------------------------------------------------------------- */
.widget, .anim, .anim-gauche, .anim-droite, .anim-zoom {
    opacity: 1;
    transform: none;
    transition: none;
}

.js-enabled .widget, .js-enabled .anim {
    opacity: 0;
    transform: translateY(20px); /* Déplacement subtil */
    transition:
        opacity 0.6s ease-out,
        transform 0.6s ease-out;
}

/* Variantes directionnelles — utilisables seules dans
   « class section / class colonne » (ex. anim-gauche anim-d2). */
.js-enabled .anim-gauche,
.js-enabled .anim-droite,
.js-enabled .anim-zoom {
    opacity: 0;
    transition:
        opacity 0.6s ease-out,
        transform 0.6s ease-out;
}
.js-enabled .anim-gauche { transform: translateX(-40px); }
.js-enabled .anim-droite { transform: translateX(40px); }
.js-enabled .anim-zoom   { transform: scale(0.95); }

/* Délais en cascade : étager l'apparition de plusieurs colonnes. */
.js-enabled .anim-d1 { transition-delay: 0.15s; }
.js-enabled .anim-d2 { transition-delay: 0.3s; }
.js-enabled .anim-d3 { transition-delay: 0.45s; }

.js-enabled .anim15 {
    transition:
        opacity 0.9s ease-out,
        transform 0.9s ease-out;
}
.js-enabled .is-visible {
    opacity: 1;
    transform: none;
}

/* -------------------------------------------------------------- 
/////////////////////////////////// FLEXIBLE
----------------------------------------------------------------- */
.section-flexible {
	z-index: 9;
	position: relative;
}
.section-flexible.bande-grise {
	  background: linear-gradient(transparent 0 calc(100% - 100px), var(--color-gris) calc(100% - 100px) 100%);
}
.section-flexible.fullwidth .rangee .une-col {
	flex-basis: 100%;
	width: 100%;
}
.section-flexible.primary .bouton a {
	background: var(--color-noir) !important;
	color: var(--color-primary) !important;
}
.section-col .border-col .ecart-normal {
	border-left: 4px solid var(--color-primary)
}
.section-col .border-col .ecart-normal:first-of-type {
	border-left: 0px solid var(--color-primary)
}
.section-col .col-padding-right {
	padding-right: 50px;
}
.section-col .col-padding-left {
	padding-left: 50px;
}
.section-col .bloc-colonne {
	padding: 40px;
	border-radius: 0px;
}
.bloc-colonne.noir p, .bloc-colonne.primary p, .bloc-colonne.noir p {
	color: #fff;
}
.section-col .banniere {
	padding: 15px 20px;
}
.section-col .banniere .rangee {
	padding: 40px;
	width: calc(92% - 40px);
}
.section-col .banniere .noir p, .section-col .banniere .primary p,
.section-col .banniere .noir a, .section-col .banniere .primary a {
	color: #fff;
} 
.section-col .banniere .noir a:hover {
	color: var(--color-primary);
}
.section-col .banniere .primary a:hover {
	color: var(--color-noir);
}
.section-col .banniere .rangee.decalage-image .widget-image {
	position: absolute;
	top: -40px;
}
.widget-image {
	position: relative;
}
.widget-image .image a, .widget-image .image-upload a {
	display: block;
	position: relative;
}
.widget-image .image a img, .widget-image .image-upload a img{
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.widget-image .image a:hover img, .widget-image .image-upload a:hover img {
	opacity: .7;
}

.widget {
	padding: 0 0 20px 0;
}
.widget:last-of-type {
	padding-bottom:0;
}
.widget.widget-titre {
	padding-bottom: 15px;
}
.widget.widget-titre h2, .widget.widget-titre h3 {
	margin-bottom: 0;
}
.widget.widget-titre h2, h2.sous-titre, .bloc-encadre h2 {
	margin-top: 0;
}
.widget.widget-titre p {
	margin-top:0;
	line-height: 1.1;
}
.widget.widget-titre .typo-light {
	font-weight: 300;
}
.widget.widget-titre .typo-regular {
	font-weight: 400;
}
.widget.widget-titre .typo-bold {
	font-weight:var(--fw-bold);
}
.widget.widget-titre .typo-titre {
	font-family: var(--font-heading);
}
.widget.widget-titre .typo-body {
	font-family: var(--font-body);
}
/* Police « Label » : même style que .titre-label (majuscules espacées).
   Déclaré après les tailles/graisses typo-* : ses réglages priment quand
   l'option est choisie. */
.widget.widget-titre .typo-label {
	font-family: var(--font-body);
	
	font-weight: 300;
	letter-spacing: 2px;
	text-transform: uppercase;
}
.widget.widget-icone {
	padding-bottom: 10px;
}
.widget-bouton .bouton {
	margin-top: 0;
}
.widget-bouton .bouton.btn-blanc a{
	background: var(--color-blanc) !important;
	color: var(--color-noir) !important;
}
.widget-bouton .bouton.btn-blanc a:hover {
	background: var(--color-primary) !important;
	color: var(--color-blanc) !important;
}
.widget-bouton .bouton.btn-primary a{
	background: var(--color-primary) !important;
	color: var(--color-blanc) !important;
}
.widget-bouton .bouton.btn-primary a:hover {
	background: var(--color-blanc) !important;
	color: var(--color-primary) !important;
}
.widget-bouton .bouton.btn-noir a{
	background: var(--color-noir) !important;
	color: var(--color-blanc) !important;
}
.widget-bouton .bouton.btn-noir a:hover {
	background: var(--color-primary) !important;
	color: var(--color-blanc) !important;
}
.noir .widget-bouton .bouton.btn-primary a:hover {
	background: var(--color-blanc) !important;
	color: var(--color-primary) !important;
}
.noir .widget-bouton .bouton.btn-blanc a {
	background: var(--color-blanc) !important;
	color: var(--color-noir) !important;
}
.noir .widget-bouton .bouton.btn-blanc a:hover {
	background: var(--color-noir) !important;
	color: var(--color-blanc) !important;
}
.primary .widget-bouton .bouton.btn-noir a:hover {
	background: var(--color-blanc) !important;
	color: var(--color-primary) !important;
}
/* Type Ghost : contour + texte de la couleur choisie, fond transparent ;
   remplissage plein au survol. Le sélecteur inclut .bouton-ghost pour passer
   devant les règles .widget-bouton .bouton.btn-* (fond plein) ci-dessus. */
.widget-bouton .bouton.bouton-ghost a {
	background: transparent !important;
	border: 2px solid currentColor;
}
.widget-bouton .bouton.bouton-ghost.btn-primary a { color: var(--color-primary) !important; }
.widget-bouton .bouton.bouton-ghost.btn-noir a    { color: var(--color-noir) !important; }
.widget-bouton .bouton.bouton-ghost.btn-blanc a   { color: var(--color-blanc) !important; }
.widget-bouton .bouton.bouton-ghost.btn-primary a:hover {
	background: var(--color-primary) !important;
	color: var(--color-blanc) !important;
}
.widget-bouton .bouton.bouton-ghost.btn-noir a:hover {
	background: var(--color-noir) !important;
	color: var(--color-blanc) !important;
}
.widget-bouton .bouton.bouton-ghost.btn-blanc a:hover {
	background: var(--color-blanc) !important;
	color: var(--color-noir) !important;
}
.widget-bouton.widget-liste-boutons p.bouton,
.widget-bouton.widget-liste-boutons p.bouton-simple {
	display: inline-block;
	vertical-align: middle;
	margin: 10px 10px 10px 0;
}
.widget.widget-texte .bloc-encadre {
	padding: 40px;
}
.widget.widget-texte .bloc-encadre.noir *, 
.widget.widget-texte .bloc-encadre.noir *,
.widget.widget-texte .bloc-encadre.primary *,
.widget.widget-texte.text-blanc * {
	color: #fff;
}

.icone img {
	height: 50px;
	width: auto;
}
.espaceur {
	display: block;
}
.widget-separateur .ligne {
	width: 100%;
	height: 1px;
	margin: 20px 0;
}
.widget-separateur .tiret {
	width: 40px;
	height: 4px;
}
.text-center .widget-separateur .tiret {
	margin: 0 auto;
} 
.section-logos .logo  {
	text-align: center;
}
.section-logos .logo a {
	display: block;
}
.section-logos .logo img {
	width: 100%;
	height: auto;
	border-radius: 0px;
	max-width: 220px;
}

/* ///////////////////////////// SECTION REASSURANCE //////////////////////*/
.section-reassurance p.titre-argument {
	font-family:var(--font-heading);
	margin: 0px;
}
.section-reassurance .icone {
	margin-bottom: 10px;
}
.section-reassurance .icone img, .section-reassurance .icone svg {
	height: 45px;
	width: auto;
}
/* État initial : masqué */
.svg-anim {
    clip-path: inset(100% 0 0 0);
    opacity: 0;
    transition: clip-path 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.4s ease;
}

/* Animation : révélation de bas en haut */
.svg-anim.is-visible {
    clip-path: inset(0 0 0 0);
    opacity: 1;
}

/* Décalage progressif entre les arguments */
.section-reassurance .argument:nth-child(1) .svg-anim {
    transition-delay: 0s;
}
.section-reassurance .argument:nth-child(2) .svg-anim {
    transition-delay: 0.15s;
}
.section-reassurance .argument:nth-child(3) .svg-anim {
    transition-delay: 0.3s;
}
.section-reassurance .argument:nth-child(4) .svg-anim {
    transition-delay: 0.45s;
}
.section-reassurance .texte-argument {
	margin-top: 0px;
}
.section-reassurance h2.sous-titre {
	margin: 0;
}
.section-reassurance .banniere {
	margin-top: 40px;
	margin-bottom: 40px;
	position: relative;
	z-index: 1;
}
.section-reassurance .banniere::before {
	content: "";
	position: absolute;
	inset: -40px; /* épaisseur */
	border-radius: 20px;
	z-index: -1;
}
.section-reassurance .banniere.noir::before {
	background: var(--color-noir);
}
.section-reassurance .banniere.primary::before {
	background: var(--color-primary);
}
.section-reassurance .banniere.noir::before {
	background: var(--color-noir);
}
.section-reassurance .banniere.blanc::before {
	background: var(--color-blanc);
}
.section-reassurance .banniere.gris::before {
	background: var(--color-gris);
}
.section-reassurance.decalage-banniere .banniere{
	position: relative;
	top: -100px;
	margin-top: 0;
	margin-bottom: -40px;
}
.section-reassurance.noir p,
.section-reassurance.noir h2,
.section-reassurance.primary p,
.section-reassurance.primary h2,
.section-reassurance.noir p,
.section-reassurance.noir h2  {
	color: #fff;
}
.section-reassurance .banniere.noir p, .section-reassurance .banniere.noir p,
.section-reassurance .banniere.noir h2, .section-reassurance .banniere.noir h2 {
	color: #fff;
}
/* ///////////////////////////// SECTION BANDEAU / GALERIE / CAROUSEL ///////*/
.section-bandeau.alignement-center p,
.section-bandeau.alignement-center h2,
.section-bandeau.alignement-center p.bouton {
	text-align: center;
}
.section-bandeau.noir p,
.section-bandeau.primary p,
.section-bandeau.noir p {
	color: #fff;
}
.section-bandeau .bouton {
	margin-top: 25px;
}
.section-bandeau.noir .bouton a {
	background: #fff !important;
	color: var(--color-noir) !important;
}
.section-bandeau.noir .bouton a:hover {
	background: var(--color-primary) !important;
	color: var(--color-blanc) !important;
}
.section-bandeau-image {
	position: relative;
	min-height: 500px;
}
.section-bandeau-image .rangee {
	min-height: 500px;
	padding: 70px 0;
}
.section-bandeau-image .overlay-bandeau {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: var(--gradient-cta);
}
.section-bandeau h2 {
	font-size: var(--fs-big);
	line-height: 1;
}
.section-bandeau p {
	font-size: var(--fs-medium);
	color: #fff;
	line-height: 1;
}
.section-galerie .gallery-container {
	display: flex;
	width: 100%;
	margin: 0 auto;
	position: relative;
	flex-flow: column wrap;
  	margin-top: 0px;
}
.section-galerie .gallery-item {
	position: relative;
	flex-basis: calc(33.3% - 20px);
	width: calc(33.3% - 20px);
	line-height: 0;
	margin-bottom: 20px;
	display: block;
}
.section-galerie .gallery-item:after {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: var(--gradient-one);
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
	opacity: 0;
	visibility: hidden;
}
.section-galerie .gallery-item:hover:after {
	opacity: 1;
	visibility: visible;
}
.section-galerie .gallery-item img {
	width: 100%;
	height: auto;
	line-height: 0;
}
.lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover {
  border-color: var(--color-primary) !important;
}

.widget-carousel {
	position: relative;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}
/* Carousel Swiper — reprend le style des anciens boutons Owl */
.widget-carousel .swiper {
	max-width: 1000px;
	margin: 0 auto;
	/* overflow:hidden hérité de Swiper : le carousel reste aligné
	   sur le contenu, sans débordement des slides voisines. */
}
.widget-carousel .swiper-slide img {
	width: 100%;
	height: auto;
	display: block;
}
/* Légende de la médiathèque sous l'image (slide = figure). */
.widget-carousel figure.swiper-slide {
	margin: 0;
}
.widget-carousel .swiper-slide figcaption {
	font-size: var(--fs-small);
	margin-top: 8px;
}
.widget-carousel .swiper-button-prev,
.widget-carousel .swiper-button-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	margin-top: 0;
	background-color: var(--color-primary);
	background-image: url(img/arrow-left.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px auto;
	border: none;
	border-radius: 100px;
	width: 45px;
	height: 45px;
	cursor: pointer;
	transition: all 0.3s;
}
.widget-carousel .swiper-button-next {
	background-image: url(img/arrow-right.svg);
}
.widget-carousel .swiper-button-prev { left: 15px; }
.widget-carousel .swiper-button-next { right: 15px; }
/* Retire la fleche par defaut de Swiper (glyphe de police) */
.widget-carousel .swiper-button-prev::after,
.widget-carousel .swiper-button-next::after {
	content: none;
}
.widget-carousel .swiper-button-prev:hover,
.widget-carousel .swiper-button-next:hover {
	background-color: var(--color-secondary);
}
.widget-carousel .swiper-button-prev:focus-visible,
.widget-carousel .swiper-button-next:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
	border-radius: 4px;
}
.widget-carousel .swiper-button-disabled {
	opacity: .3;
}

/* -------------------------------------------------------------- 
/////////////////////////////////// FORM
----------------------------------------------------------------- */
.wpforms-container {
	margin: 0 !important;
}
.wpforms-container .wpforms-field {
    padding: 0 0 15px 0 !important;
    position: relative;
}
.wpforms-container input, .wpforms-container textarea{
	max-width: 100% !important;
	background-color: var(--color-blanc) !important;
	border-color:#ddd !important;
	border-radius: 5px!important;
}
div.wpforms-container-full .wpforms-field-file-upload .wpforms-uploader, div.wpforms-container div.wpforms-uploader {
	background-color: var(--color-gris) !important;
	border-color:#ddd !important;
}
div.wpforms-container-full .wpforms-field.wpforms-field-checkbox ul li input{
	position: relative !important;
	top: 2px !important;
}
.wpforms-container button {
	height:auto !important;
}
.wpforms-form button[type=submit], button.wpforms-page-button {
	background-color: var(--color-noir)  !important;
	border-color: var(--color-noir) !important;
	color: #fff !important;
}
.wpforms-container input.wpforms-field-medium, .wpforms-container select.wpforms-field-medium, .wpforms-container .wpforms-field-row.wpforms-field-medium, .wp-core-ui div.wpforms-container input.wpforms-field-medium, .wp-core-ui div.wpforms-container select.wpforms-field-medium, .wp-core-ui div.wpforms-container .wpforms-field-row.wpforms-field-medium {
  max-width: 100%!important;
}

div.wpforms-container-full .wpforms-confirmation-container-full, div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
  	background: var(--color-blanc) !important;
  	border: 1px solid var(--color-primary) !important;
}
.wpforms-submit-container button.wpforms-submit{
	background: var(--color-primary) !important;
	color: var(--color-blanc) !important;
}
.wpforms-submit-container button.wpforms-submit:hover{
	background: var(--color-primary) !important;
	color: var(--color-blanc) !important;
}
.bloc-colonne.primary .wpforms-container input, .bloc-colonne.primary .wpforms-container textarea {
	background-color: var(--color-blanc) !important;
}
.bloc-colonne.primary div.wpforms-container-full .wpforms-field-label, 
.bloc-colonne.primary .wp-core-ui div.wpforms-container-full .wpforms-field-label,
.bloc-colonne.primary .wpforms-container .wpforms-required-label{
	color: var(--color-blanc) !important;
}
.bloc-encadre.primary div.wpforms-container, .bloc-colonne.encadre div.wpforms-container-full:not(:empty) {
	margin-bottom:0 !important;
}
.wpforms-container .wpforms-field-html a {
	color: var(--color-blanc) !important;
	text-decoration:underline!important;
}
.wpforms-container .wpforms-field-html a:hover {
	color: var(--color-blanc) !important;
	opacity:.6;
}
.wpforms-container .wpforms-field-html p {
	font-weight:var(--fw-bold);
}
.wpforms-container .wpforms-field-html p.small {
	font-weight:400;
	font-size:15px;
	line-height:1.2;
}
.wpforms-container a:focus-visible,
.wpforms-container a:focus {
  outline: 2px solid #005fcc;
  outline-offset: 3px;
  text-decoration: underline;
}
div.wpforms-container-full .wpforms-form .wpforms-field-divider h3:first-of-type {
  color: var(--color-primary);
  padding-top: 0px;
  font-size: var(--fs-medium);
}

/* -------------------------------------------------------------- 
/////////////////////////////////// FOOTER
----------------------------------------------------------------- */
#footer {
	padding-top: 60px;
	background: var(--color-noir);
	color: var(--color-blanc);
}
#footer a {
	color: var(--color-blanc);
	text-decoration: none;
}

/* Ligne blanche en haut quand la section précédente est sombre (classe JS). */
#footer.footer--ligne .footer-top {
	border-top: 4px solid var(--color-blanc);
	padding-top: 30px;
}
#footer .footer-titre {
	font-weight: var(--fw-bold);
	font-size: var(--fs-normal);
	margin: 0 0 15px;
}
.footer-bloc + .footer-bloc {
	margin-top: 30px;
}
#footer ul {
	margin: 0;
	padding: 0;
}
#footer li {
	list-style: none;
	margin: 0 0 10px;
	font-size: 15px;
}
#footer a:hover {
	color: var(--color-primary);
}

/* Réseaux sociaux. */
#footer .footer-reseaux {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 25px;
	margin: 20px 0;
	padding: 0;
}
#footer .footer-reseaux a {
	display: inline-flex;
	transition: opacity 0.2s ease;
}
#footer .footer-reseaux a:hover {
	opacity: 0.7;
}
#footer .footer-reseaux img {
	width: auto;
	height: 24px;
	display: block;
}

/* Boutons du footer  */
#footer .footer-btn {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 10px;
	font-weight: var(--fw-medium);
	font-size: 15px;
	border-radius: 999px;
	padding: 10px 25px;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.3s ease;
}
#footer .footer-btn--newsletter {
	background: var(--color-primary);
	border: 2px solid var(--color-primary);
	color: var(--color-blanc);
	margin-bottom: 20px;
}
#footer .footer-btn--newsletter:hover {
	background: var(--color-secondary);
	border-color: var(--color-secondary);
}
#footer .footer-btn--ghost {
	background: transparent;
	border: 2px solid var(--color-blanc);
	color: var(--color-blanc);
}
#footer .footer-btn--ghost:hover {
	background: var(--color-blanc);
	color: var(--color-noir);
}
#footer .footer-btn--ghost img {
	width: 16px;
	height: auto;
}
#footer .footer-btn--ghost:hover img {
	filter: brightness(0); /* flèche blanche -> noire quand le bouton se remplit */
}
#footer .footer-btn:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
}

/* Barre de crédits. */
#credits {
	margin-top: 25px;
}
#credits .rangee {
	border-top: 1px solid rgba(255, 255, 255, 0.4);
	padding: 25px 0;
}
#credits img {
	display: block;
	height: 46px;
	width: auto;
}
#credits p {
	font-size: 13px;
	margin: 0;
}
#credits ul {
	margin: 0;
	padding: 0;
}
#credits li{
	margin: 0 15px;
	display: inline-block;
	font-size: 13px;
	list-style-type: none;
}
#credits li:first-of-type{
	margin-left: 0;
}
#credits .text-right {
	text-align: right;
}

/* ====== Modale (newsletter ; iframe à intégrer plus tard) ====== */
.modal {
	position: fixed;
	inset: 0;
	z-index: 10001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px;
	opacity: 0;
	visibility: hidden;
	/* Indispensable en plus de visibility : le CSS de WPForms remet
	   visibility: visible sur ses éléments, qui resteraient cliquables
	   (invisibles sous l'opacity: 0) et bloqueraient la page. */
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	cursor: pointer;
}
.modal__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 600px;
	max-height: 90vh;
	overflow: auto;
	background: var(--color-blanc);
	border-radius: 8px;
	padding: 50px 40px 40px;
	transform: translateY(20px);
	transition: transform 0.3s ease;
}
.modal.is-open .modal__inner {
	transform: translateY(0);
}
.modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	background: none;
	border: 0;
	padding: 8px;
	cursor: pointer;
	line-height: 0;
}
.modal__close img {
	display: block;
	width: 18px;
	height: 18px;
	/* close.svg est blanc → on le noircit pour la modale claire */
	filter: brightness(0);
}
.modal__close:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
}
body.modal-open,
body.menu-open {   /* classe posée par app.js à l'ouverture du menu overlay */
	overflow: hidden;
}
/* -------------------------------------------------------------- 
/////////////////////////////////// FLASH
----------------------------------------------------------------- */
#flash {
	width: 100%;
	padding: 20px 0px;
	background: var(--color-primary);
	overflow:hidden;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 9999;
}
#flash p {
	margin: 3px 0;
	font-size: var(--fs-normal);
	text-align: left;
	color: #fff;
}
#flash a {
	color: #fff;
	text-decoration:underline;
}
#flash strong {
	color: #fff;
}
#flash .cross {
	position: absolute;
	right: 32px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	cursor: pointer;
}
#flash .cross img {
	width: 16px;
	height: auto;
}

/* -------------------------------------------------------------- 
/////////////////////////////////// BACK TO TOP
----------------------------------------------------------------- */
#backtotop {
  display: inline-block;
  background-color: var(--color-primary);
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 50px;
  position: fixed;
  bottom: 40px;
  right: 20px;
  transition: background-color .3s, opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#backtotop::after {
	content: "";
  	display:block;
  	background-image:url('img/backtotop.svg') ;
  	background-repeat: no-repeat;
  	background-position: center center;
    background-size: 17px auto;
 	height: 17px;
  	width: 17px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
#backtotop:hover {
  cursor: pointer;
  background-color: var(--color-primary);
}
#backtotop:active {
  background-color: var(--color-primary);
}
#backtotop.show {
  opacity: 1;
  visibility: visible;
}
#backtotop:focus-visible {
	outline: 3px solid #005fcc;
  	outline-offset: 2px;
  	border-radius: 100%;
}

/* -------------------------------------------------------------- 
/////////////////////////////////// WPGRIDBUILDER
----------------------------------------------------------------- */
.wpgb-facet .wpgb-facet-title {
	margin-bottom: 12px !important;
	color: var(--color-noir);
	font-size: var(--fs-small)!important;
	font-family: var(--font-body)!important;
	font-weight: 600;
	text-decoration: none;
}
.wpgb-facet .wpgb-select, .wpgb-date-facet, .wpgb-facet .wpgb-search-facet input[type="search"]{
	height: auto!important;
    min-height: 40px!important;
    border-color:var(--color-noir) !important;
    border-width:1px!important;
    color: var(--color-noir) !important;
    border-radius: 5px !important;
    font-size: var(--fs-small)!important;
}
.wpgb-facet .wpgb-date-facet label input[type="text"], .wpgb-search-facet label input[type="text"]{
	height: auto!important;
    min-height: 40px!important;
	background: #fff!important;
    border: 1px solid var(--color-primary) !important;
    color: var(--color-noir) !important;
    font-size: var(--fs-small)!important;
}
.wpgb-facet > fieldset {
    margin-bottom: 0px!important;
}
.wpgb-facet .wpgb-clear-button:hover, 
.wpgb-facet .wpgb-select button:hover, .wpgb-facet .wpgb-select input, 
.wpgb-facet .acplt-clear:hover, 
.wpgb-facet .wpgb-hierarchy:hover .wpgb-hierarchy-control, 
.wpgb-facet .wpgb-rating .wpgb-rating-control, 
.wpgb-facet .wpgb-rating-reset:hover .wpgb-rating-control {
  color: var(--color-primary) !important;
  font-size: var(--fs-small)!important;
}
.wpgb-select-dropdown ul li.wpgb-focused {
 background-color:rgba(0, 0, 0,.1)!important; 
}
.wpgb-select-dropdown ul li[aria-selected="true"] {
 background-color:var(--color-noir) !important;
 font-size: var(--fs-small)!important;
}
.wpgb-select-placeholder {
	padding-left: 10px !important;
}
/* Facette posée dans une section sombre (.noir) : titre, bordure et
   textes passent en blanc (les règles de base, en noir, sont !important
   — il faut donc surenchérir). Le panneau déroulant garde son fond
   blanc fourni par le plugin. */
.section-flexible.noir .wpgb-facet .wpgb-facet-title {
	color: var(--color-blanc);
}
.section-flexible.noir .wpgb-facet .wpgb-select,
.section-flexible.noir .wpgb-date-facet,
.section-flexible.noir .wpgb-facet .wpgb-search-facet input[type="search"] {
	border-color: var(--color-blanc) !important;
	color: var(--color-blanc) !important;
}
.section-flexible.noir .wpgb-facet .wpgb-select input,
.section-flexible.noir .wpgb-facet .wpgb-select button {
	color: var(--color-blanc) !important;
}
.section-flexible.noir .wpgb-facet ::placeholder {
	color: rgba(255, 255, 255, 0.7);
}
.wpgb-facet .wpgb-pagination li {
	font-size: 20px !important;
}
.wpgb-facet .wpgb-pagination li a[aria-current] {
  color: var(--color--noir) !important;
}
.wpgb-facet .wpgb-checkbox-control {
	border-radius: 0px !important;
	border-color:var(--color-noir) !important;
}
.wpgb-facet .wpgb-checkbox:hover:not([tabindex="-1"]) .wpgb-checkbox-control {
  border-color:var(--color-primary) !important;
}
.wpgb-facet .wpgb-checkbox-label {
	 color: var(--color-noir) !important;
	 font-size: 16px !important;
}
.wpgb-facet .wpgb-checkbox-facet .wpgb-checkbox[aria-pressed="true"] .wpgb-checkbox-control {
  border-color:var(--color-primary) !important;
  background: var(--color-primary) !important;
}
.wpgb-hierarchical-list li{
	display: inline-block !important;
	margin-right: 25px !important;
}
 .wpgb-facet .wpgb-radio-facet .wpgb-radio[aria-pressed="true"] .wpgb-radio-control {
  border-color: var(--color-primary) !important;
}
/* --------------------------------------------------------------
/////////////////////////////////// ECHELLE D'ESPACEMENT
----------------------------------------------------------------- */
/* Espaceurs sur échelle fermée, mappés sur les jetons --space-*.
   Garde la cohérence verticale du site : modifier les jetons
   répercute partout. */
.espaceur.espace-s  { height: var(--space-6);  }            /*  24px */
.espaceur.espace-m  { height: var(--space-12); }            /*  48px */
.espaceur.espace-l  { height: var(--space-24); }            /*  96px */
.espaceur.espace-xl { height: calc(var(--space-24) * 2); }  /* 192px */

@media (max-width: 767px) {
	.espaceur.espace-l  { height: var(--space-16); }
	.espaceur.espace-xl { height: var(--space-24); }
}

/* --------------------------------------------------------------
/////////////////////////////////// WIDGET TEMOIGNAGE
----------------------------------------------------------------- */
.widget-temoignage {
	margin: 0 0 var(--space-8) 0;
	padding-left: var(--space-6);
	border-left: 3px solid var(--color-primary);
	text-align: left; /* ferré à gauche quel que soit le contexte */
}
.widget-temoignage blockquote {
	margin: 0;
	/* Le conteneur .widget-temoignage porte déjà bordure + retrait :
	   on neutralise ceux du blockquote de base (sinon double trait). */
	padding-left: 0;
	border-left: 0;
}
.widget-temoignage blockquote p {
	font-size: var(--fs-medium);
	font-style: italic;
	line-height: var(--lh-normal);
	color: var(--color-fg);
}
.widget-temoignage blockquote p::before { content: "\201C\00A0"; }
.widget-temoignage blockquote p::after  { content: "\00A0\201D"; }
.widget-temoignage figcaption {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-4);
}
.widget-temoignage .photo-temoignage {
	width: 60px;
	height: 60px;
	border-radius: 100px;
	object-fit: cover;
	flex-shrink: 0;
}
.widget-temoignage .auteur-temoignage {
	display: flex;
	flex-direction: column;
}
.widget-temoignage .auteur {
	font-weight: var(--fw-bold);
	color: var(--color-fg);
}
.widget-temoignage .fonction {
	font-size: var(--fs-small);
	color: var(--color-fg);
	opacity: .7;
}

/* --------------------------------------------------------------
/////////////////////////////////// WIDGET CHIFFRES CLES
----------------------------------------------------------------- */
.widget-chiffres .liste-chiffres {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-8);
	justify-content: center;
}
.widget-chiffres .chiffre-cle {
	flex: 1 1 150px;
	text-align: center;
}
.widget-chiffres .nombre {
	font-family: var(--font-heading);
	font-size: var(--fs-big);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	color: var(--color-primary);
	margin: 0;
	font-variant-numeric: tabular-nums; /* stabilise la largeur pendant l'animation */
}
.widget-chiffres .legende {
	font-size: var(--fs-normal);
	color: var(--color-fg);
	margin: var(--space-2) 0 0 0;
}

/* --------------------------------------------------------------
/////////////////////////////////// WIDGET ETAPES
----------------------------------------------------------------- */
.widget-etapes .liste-etapes {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: etape;
}
.widget-etapes .etape {
	counter-increment: etape;
	position: relative;
	padding: 0 0 var(--space-8) calc(45px + var(--space-5));
	list-style: none;
	margin-left: 0; /* neutralise le retrait global ol li */
}
.widget-etapes .etape::before {
	content: counter(etape);
	position: absolute;
	left: 0;
	top: 0;
	width: 45px;
	height: 45px;
	border-radius: 100px;
	background: var(--color-primary);
	color: var(--color-blanc);
	font-family: var(--font-body);
	font-weight: var(--fw-bold);
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Trait vertical reliant les étapes (sauf la dernière) */
.widget-etapes .etape:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 22px;
	top: 50px;
	bottom: 5px;
	width: 1px;
	background: var(--color-trait);
	opacity: .25;
}
.widget-etapes .titre-etape {
	margin: 0 0 var(--space-2) 0;
	font-size: var(--fs-plus);
	font-weight: var(--fw-bold);
	color: var(--color-fg);
	line-height: 45px;
}
.widget-etapes .titre-etape + .texte-etape {
	margin-top: calc(var(--space-2) * -1);
}
.widget-etapes .texte-etape p {
	color: var(--color-fg);
}

/* --------------------------------------------------------------
/////////////////////////////////// WIDGET TELECHARGEMENTS
----------------------------------------------------------------- */
.widget-fichiers .titre-fichiers {
	font-weight: var(--fw-bold);
	margin: 0 0 var(--space-4) 0;
	color: var(--color-fg);
}
.widget-fichiers .liste-fichiers {
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Neutralise les puces/retraits globaux (ul li disc) */
.widget-fichiers .liste-fichiers li {
	list-style: none;
	margin-left: 0;
}
.widget-fichiers .fichier a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-2);
	border-bottom: 1px solid var(--color-trait);
	text-decoration: none;
	transition: background 0.3s;
}
.widget-fichiers .fichier:first-child a {
	border-top: 1px solid var(--color-trait);
}
.widget-fichiers .fichier a:hover,
.widget-fichiers .fichier a:focus-visible {
	background: var(--color-third);
}
.widget-fichiers .nom-fichier {
	color: var(--color-fg);
	font-weight: var(--fw-medium);
}
/* Flèche de la charte pivotée vers le bas : même famille, même gabarit
   (16px) et même retrait que la flèche du widget Liste de liens —
   8px + 16px + 8px = les 32px du padding des liens, textes alignés. */
.widget-fichiers .nom-fichier::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	vertical-align: -2px;
	margin-right: var(--space-2);
	background-color: var(--color-primary);
	-webkit-mask: url(img/arrow-right-rose.svg) no-repeat center / contain;
	        mask: url(img/arrow-right-rose.svg) no-repeat center / contain;
	transform: rotate(90deg);
}
/* En style label (aside des fiches) : graisse light du label, pas le
   gras du titre de widget pleine page. */
.widget-fichiers .titre-fichiers.titre-label {
	font-weight: 300;
}
.widget-fichiers .meta-fichier {
	font-size: var(--fs-small);
	color: var(--color-fg);
	opacity: .7;
	white-space: nowrap;
}

/* --------------------------------------------------------------
/////////////////////////////////// WIDGET LISTE DE LIENS
----------------------------------------------------------------- */
/* Titre en style label, puis deux styles de liens au choix :
   — lignes à filets avec flèche de la charte (même esprit que
     Téléchargements ; jetons --color-fg / --color-trait → sections sombres) ;
   — boutons simples empilés (styles .bouton-simple existants). */
.widget-liens .titre-liens {
	margin: 0 0 var(--space-4) 0;
	color: var(--color-fg);
}
.widget-liens .liste-liens {
	list-style: none;
	margin: 0;
	padding: 0;
}
.widget-liens .liste-liens li {
	list-style: none;
	margin: 0;
}
.widget-liens--lignes .lien a {
	position: relative;
	display: block;
	padding: var(--space-4) var(--space-2) var(--space-4) 32px;
	border-bottom: 1px solid var(--color-trait);
	color: var(--color-fg);
	font-weight: var(--fw-medium);
	text-decoration: none;
	transition: background 0.3s;
}
.widget-liens--lignes .lien:first-child a {
	border-top: 1px solid var(--color-trait);
}
.widget-liens--lignes .lien a::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	background-color: var(--color-primary);
	-webkit-mask: url(img/arrow-right-rose.svg) no-repeat center / contain;
	        mask: url(img/arrow-right-rose.svg) no-repeat center / contain;
	transition: left .25s ease;
}
.widget-liens--lignes .lien a:hover,
.widget-liens--lignes .lien a:focus-visible {
	background: var(--color-third);
}
.widget-liens--lignes .lien a:hover::before,
.widget-liens--lignes .lien a:focus-visible::before {
	left: 8px;
}
/* Boutons simples : un par ligne, écart régulier. */
.widget-liens--boutons .liste-liens li {
	margin: 0 0 12px;
}
.widget-liens--boutons .liste-liens li:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------
/////////////////////////////////// THEMING SECTIONS SOMBRES
----------------------------------------------------------------- */
/* Sur fond sombre (section, bannière ou bloc colonne), les jetons
   de texte et de traits basculent : tout widget qui utilise
   var(--color-fg) / var(--color-trait) s'adapte automatiquement.
   Les titres suivent aussi, sauf couleur explicitement choisie
   dans le widget Titre (classes color-*). */
.section-flexible.noir,
.section-flexible.primary,
.section-flexible .noir,
.section-flexible .primary {
	--color-fg:    var(--color-blanc);
	--color-trait: var(--color-blanc);
	color: var(--color-fg);
}
.section-flexible.noir :is(h1, h2, h3, h4, h5, h6, p, li):not([class*="color-"]),
.section-flexible.primary :is(h1, h2, h3, h4, h5, h6, p, li):not([class*="color-"]),
.section-flexible .noir :is(h1, h2, h3, h4, h5, h6, p, li):not([class*="color-"]),
.section-flexible .primary :is(h1, h2, h3, h4, h5, h6, p, li):not([class*="color-"]) {
	color: var(--color-fg);
}
/* color-noir est la valeur par défaut du widget Titre : du noir sur fond
   sombre n'étant jamais voulu, il bascule en blanc lui aussi. Les autres
   couleurs explicites (color-primary, color-blanc…) restent respectées. */
.section-flexible.noir .color-noir,
.section-flexible.primary .color-noir,
.section-flexible .noir .color-noir,
.section-flexible .primary .color-noir {
	color: var(--color-blanc) !important;
}

/* --------------------------------------------------------------
/////////////////////////////////// PREFERS-REDUCED-MOTION
----------------------------------------------------------------- */
/* Respect de la préférence système de réduction de mouvement
   (accessibilité — troubles vestibulaires). */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	html {
		scroll-behavior: auto !important;
	}
	/* Animations d'apparition : contenu visible immédiatement */
	.anim,
	.widget,
	.anim-gauche,
	.anim-droite,
	.anim-zoom {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* --------------------------------------------------------------
/////////////////////////////////// UTILITAIRES CONSTRUCTEUR
----------------------------------------------------------------- */
/* Colonne sticky : l'encadré (contact, sommaire…) suit le défilement.
   À poser dans « class colonne ». Aligné sur scroll-padding-top du html. */
.col-sticky {
	position: sticky;
	top: 120px;
	align-self: flex-start;
}
@media (max-width: 1025px) {
	.col-sticky {
		position: static; /* inutile quand les colonnes s'empilent */
	}
}

/* Ratios d'affichage des images : la forme est gérée par le CSS,
   quelle que soit l'image envoyée. À poser sur la colonne ou un
   wrapper d'image (toutes les images descendantes sont concernées). */
.ratio-carre img,
.ratio-16-9 img,
.ratio-4-3 img,
.ratio-portrait img {
	width: 100%;
	height: auto;
	object-fit: cover;
}
.ratio-carre img    { aspect-ratio: 1 / 1; }
.ratio-16-9 img     { aspect-ratio: 16 / 9; }
.ratio-4-3 img      { aspect-ratio: 4 / 3; }
.ratio-portrait img { aspect-ratio: 3 / 4; }

/* --------------------------------------------------------------
/////////////////////////////////// CONTAINER QUERIES (widgets)
----------------------------------------------------------------- */
/* Chaque colonne devient un conteneur mesurable : les widgets
   s'adaptent à la largeur de LEUR colonne, pas à celle de l'écran.
   Un widget posé en col33 se compacte tout seul. */
.ecart-normal {
	container-type: inline-size;
}

@container (max-width: 400px) {
	/* Chiffres clés : empilés */
	.widget-chiffres .chiffre-cle {
		flex: 1 1 100%;
	}
	.widget-chiffres .liste-chiffres {
		gap: var(--space-6);
	}

	/* Téléchargements : nom et métadonnées sur deux lignes */
	.widget-fichiers .fichier a {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-1);
	}
	.widget-fichiers .meta-fichier {
		white-space: normal;
	}

	/* Témoignage : citation plus compacte */
	.widget-temoignage blockquote p {
		font-size: var(--fs-normal);
	}

	/* Étapes : pastilles réduites */
	.widget-etapes .etape {
		padding-left: calc(36px + var(--space-4));
	}
	.widget-etapes .etape::before {
		width: 36px;
		height: 36px;
	}
	.widget-etapes .etape:not(:last-child)::after {
		left: 18px;
		top: 42px;
	}
	.widget-etapes .titre-etape {
		line-height: 36px;
	}
}

/* --------------------------------------------------------------
/////////////////////////////////// CONTENU EDITEUR (complément)
----------------------------------------------------------------- */
/* Contenu saisi dans les champs wysiwyg : jamais de débordement. */
.content-single img,
.widget-texte img {
	max-width: 100%;
	height: auto;
}
.content-single iframe,
.widget-texte iframe {
	max-width: 100%;
}
.wp-caption {
	max-width: 100%;
}

/* --------------------------------------------------------------
/////////////////////////////////// FINITIONS
----------------------------------------------------------------- */
::selection {
	background: var(--color-primary);
	color: var(--color-blanc);
}

/* Plus de mot orphelin sur la dernière ligne des titres,
   coupures de paragraphes plus harmonieuses. */
h1, h2, h3, h4,
.sous-titre,
.titre-focus em {
	text-wrap: balance;
}
p, li {
	text-wrap: pretty;
}

/* --------------------------------------------------------------
   Formulaire natif « page protégée par mot de passe »
   (page-flexible.php) : champ + bouton aux couleurs du site.
   -------------------------------------------------------------- */
.post-password-form label {
	display: block;
	margin-bottom: 14px;
	font-family: var(--font-body);
}
.post-password-form input[type="password"] {
	display: block;
	width: 100%;
	max-width: 360px;
	margin-top: 8px;
	padding: 12px 14px;
	border: 1px solid var(--color-noir);
	border-radius: 5px;
	font-family: var(--font-body);
	font-size: var(--fs-normal);
	color: var(--color-noir);
}
.post-password-form input[type="password"]:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}
.post-password-form input[type="submit"] {
	cursor: pointer;
	padding: 12px 24px;
	border: 0;
	border-radius: 999px;
	background: var(--color-primary);
	color: var(--color-blanc);
	font-family: var(--font-body);
	font-weight: var(--fw-bold);
	font-size: var(--fs-normal);
	transition: background 0.3s ease;
}
.post-password-form input[type="submit"]:hover {
	background: var(--color-noir);
}
.post-password-form input[type="submit"]:focus-visible {
	outline: 2px solid var(--color-noir);
	outline-offset: 2px;
}

/* --------------------------------------------------------------
   Loader de la page d'accueil (parts/loader.php) : le logo se
   construit pièce par pièce puis le noir est aspiré dans le logo.
   Affiché seulement si le script inline pose html.loader-actif
   (donc jamais sans JS) ; .joue le maintient pendant la sortie.
   -------------------------------------------------------------- */
#loader {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: var(--color-noir);
	place-items: center;
	clip-path: circle(141% at 50% 50%);
	transition: clip-path 800ms cubic-bezier(.65, 0, .35, 1);
}
html.loader-actif #loader,
#loader.joue {
	display: grid;
}
html.loader-actif {
	overflow: hidden;
}
#loader .logo-loader {
	width: clamp(170px, 26vw, 250px);
	aspect-ratio: 393 / 375;
}
#loader .logo-loader svg {
	width: 100%;
	height: 100%;
}
#loader svg g > path {
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}
#loader.joue svg g > path.etoile {
	animation: loader-etoile 640ms cubic-bezier(.3, 1.33, .4, 1) forwards;
}
#loader.joue svg g > path.bosse {
	animation: loader-bosse 540ms cubic-bezier(.3, 1.28, .45, 1) forwards;
}
#loader.joue svg g > path.lettre {
	animation: loader-lettre 440ms cubic-bezier(.26, 1.35, .4, 1) forwards;
}
@keyframes loader-etoile {
	from { opacity: 1; transform: scale(0) rotate(-18deg); }
	to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes loader-bosse {
	from { opacity: 0; transform: scale(.2); }
	40%  { opacity: 1; }
	to   { opacity: 1; transform: scale(1); }
}
@keyframes loader-lettre {
	from { opacity: 0; transform: scale(0); }
	to   { opacity: 1; transform: scale(1); }
}
#loader.pulse .logo-loader {
	animation: loader-pulse 420ms ease-in-out;
}
@keyframes loader-pulse {
	50% { transform: scale(1.05); }
}
#loader.sortie {
	clip-path: circle(0% at 50% 50%);
}
@media (prefers-reduced-motion: reduce) {
	#loader.joue svg g > path {
		animation: none;
		opacity: 1;
	}
	#loader {
		transition: opacity 400ms ease;
	}
	#loader.sortie {
		clip-path: none;
		opacity: 0;
	}
}