/*
Theme Name: JASIF
Author: La Confiserie
Author URI: https://www.laconfiserie.fr
Description: Thème sur-mesure
Version: 1.0.0
Requires PHP: 7.4
Text Domain: jasif
Domain Path: /languages
*/

:root {
    /* -------------------------------------------------------------------------
       Couleurs 
       ------------------------------------------------------------------------- */
    /* Gamme CCI */
    --color-bg:         #F9F6F2;           /* slug: background */
    --color-fg:         #161616;        /* slug: foreground */
    --color-noir:       #161616;        /* slug: noir */
    --color-blanc:      #ffffff;        /* slug: blanc */
    --color-gris:       #F9F6F2;        /* slug: gris — gris beige */
    --color-primary:    #373CF5;        /* slug: primary — Bleu CCI */
    --color-secondary:  #242F4D;        /* slug: secondary — Bleu foncé */
    --color-third:      #009DF9;        /* slug: third — Bleu clair */
    --color-rouge:      #E4003A;        /* slug: rouge — Rouge CCI */
    /* Rouge CCI assombri d'un cheveu : les PETITS textes rouges sur gris
       beige passent de 4,47:1 (non conforme) à 5,1:1 (RGAA ok). */
    --color-rouge-texte: #D40036;

    /* Teinte discrète (survols de listes/fichiers) : bleu CCI à ~8 %. */
    --color-tint:       rgba(55, 60, 245, 0.08);

    /* 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, rgba(55, 60, 245, 0.90) 10%, rgba(0, 0, 0, 0.0)  70%);
    --gradient-titre:  linear-gradient(90deg, rgba(55, 60, 245, 0.90) 30.44%, rgba(55, 60, 245, 0.10) 70%); /* maquette */
    --gradient-cta:  linear-gradient(0deg, rgba(55, 60, 245, 0.90) 0%, rgba(0, 0, 0, 0.00) 100%);
    --gradient-hero: linear-gradient(90deg, rgba(55, 60, 245, 0.90) 30.44%, rgba(55, 60, 245, 0.10) 70%); /* maquette */



    /* -------------------------------------------------------------------------
       Typographie 
       ------------------------------------------------------------------------- */
    --font-body:    'Fira Sans', sans-serif;   /* slug: typotext */
    --font-heading: 'Fira Sans', sans-serif;   /* slug: typotitre */

    --fs-small:        clamp(13px, 1.2vw, 14px);
    --fs-normal:       clamp(17px, 1.4vw, 18px);
    --fs-medium:       clamp(22px, 2vw,   24px);
    --fs-plus:       clamp(24px, 2vw,   30px);
    --fs-large:        clamp(30px, 3vw,   36px);
    --fs-big:          clamp(40px, 5vw,   48px);
    --fs-huge:         clamp(50px, 8vw,  76px);
    /* Menu + bouton du header : fluide, partagé pour qu'ils restent
       toujours à la même taille (≈15px à 1300, 18px à 1550, 20px à 1720+). */
    --fs-header:       clamp(16px, 1.16vw, 19px);

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

    --fw-light: 300;
    --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, 80px) 0;
}
.padding-bottom {
	padding-bottom: clamp(50px, 8vw, 80px);
}
.padding-top {
	padding-top: clamp(50px, 8vw, 80px);
}
.double-padding {
	padding: clamp(90px, 16vw, 160px) 0;
}
.double-padding-bottom {
	padding-bottom: clamp(90px, 16vw, 160px);
}
.double-padding-top {
	padding-top: clamp(90px, 16vw, 160px);
}
.no-padding-top {
	padding-top: 0px !important;
}
.border-left {
	border-left: 1px 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:700;
	line-height: 1.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-medium{
	font-size: var(--fs-medium);
}
.typo-plus{
	font-size: var(--fs-plus);
}
.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);
}
/* Pas de couleur imposée : le gras hérite du texte qui l'entoure
   (sinon il ressort noir sur les fonds sombres — sections primary). */
strong, b {
	font-weight: var(--fw-bold);
}
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.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;
}
.color-third, .all-color-third * {
	color:  var(--color-third)!important;
}
.rouge {
	background-color: var(--color-rouge)!important;
}
.color-rouge, .all-color-rouge * {
	color:  var(--color-rouge)!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;
	/* Bordure transparente : même boîte que le bouton fantôme (qui ne fait
	   que la colorer) — sinon 4px d'écart de taille entre les deux. */
	border: 2px solid transparent;
	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{
	/* Rouge CCI : blanc sur rouge = 4,8:1, conforme RGAA. */
	background: var(--color-rouge);
}
.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 */
	color: var(--color-rouge);          /* rouge par défaut (charte) */
	text-decoration: underline;
	text-decoration-color: currentColor;
	text-decoration-thickness: 3px; /* soulignement épais façon charte */
	text-underline-offset: 5px;
}
.bouton-simple.btn-rouge a {color: var(--color-rouge);}
.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-bleu.svg) no-repeat center / contain;
	        mask: url(img/arrow-right-bleu.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;
	margin: 15px 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-rouge);
	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-primary);
	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: 25px;
}
.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;
	flex: 0 0 auto;
	z-index: 9999;
}
#logo a {
	display:block;
	cursor: pointer;
}
#logo a img {
	height: 60px;
	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 {
	width: 100%;
	position: fixed;
	height: 100px;
	z-index: 99;
	background: var(--color-blanc);
	transition: all 0.3s;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 0 45px;
}

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

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

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

header#header nav {
	flex: 1 1 auto;
	min-width: 0;
	text-align: center;
	z-index: 9;
	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(--color-noir);
	font-size: var(--fs-header);
	font-weight: var(--fw-bold);
	position: relative;
	padding: 0;
	margin: 0 20px;
	line-height: 100px;
}
header#header nav a:active,
header#header nav a:visited,
header#header nav a:focus {
	color: var(--color-noir);
	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; 
	right: 0px;
	bottom: 32px; 
	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;                 /* ancré au bord gauche de l'entrée parente */
	text-align: left;        /* annule le text-align:center hérité de la nav */
	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) {
	/* La taille de police est fluide (--fs-header) : seuls les
	   espacements se resserrent ici. */
	header#header nav a {
		margin: 0 10px;
	}
	header#header .submenu-toggle {
		padding-right: 8px;
	}
	.header-actions .bouton-header a {
		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;
	z-index: 9999;
	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(--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 {
	flex: 0 0 auto;
	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 du header : pilule pleine, reprend le style .bouton du thème. */
.header-actions .bouton-header {
	margin: 0;
}
.header-actions .bouton-header a {
	font-size: var(--fs-header);
	font-weight: var(--fw-bold) !important;
	line-height: 26px !important;
	padding: 14px 30px !important;
}
/* --------------------------------------------------------------
/////////////////////////////////// LOADER HOME
----------------------------------------------------------------- */
/* Voile bleu de la home : le logo CCI apparaît en fondu, le tout
   s'efface au chargement (js/app.js) puis est retiré du DOM. */
#loader-home {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-primary);
	transition: opacity 0.5s ease, visibility 0.5s ease;
}
#loader-home img {
	width: min(310px, 60vw);
	height: auto;
	opacity: 0;
	transform: translateY(12px);
	animation: loader-home-logo 0.9s ease 0.25s forwards;
}
@keyframes loader-home-logo {
	to {
		opacity: 1;
		transform: none;
	}
}
#loader-home.est-cache {
	opacity: 0;
	visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
	#loader-home img {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* --------------------------------------------------------------
/////////////////////////////////// PARTAGE (fin de single)
----------------------------------------------------------------- */
.partage-article {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	margin-top: 40px;
	padding-top: 25px;
	border-top: 1px solid var(--color-trait);
}
.partage-article__label {
	font-weight: var(--fw-bold);
}
.partage-article__liste {
	display: flex;
	align-items: center;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.partage-article__liste li {
	list-style: none;
	margin: 0;
}
.partage-article__liste a,
.partage-article__copier {
	display: block;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: opacity 0.3s ease;
}
.partage-article__liste a:hover,
.partage-article__liste a:focus-visible,
.partage-article__copier:hover,
.partage-article__copier:focus-visible {
	opacity: 0.6;
}
.partage-article__liste img {
	display: block;
	width: 28px;
	height: 28px;
}
.partage-article__confirmation {
	font-size: var(--fs-small);
	color: var(--color-primary);
	font-weight: var(--fw-bold);
}

/* Plan de site ([plan_site]) : intertitres des groupes de contenus. */
.plan-site__titre {
	margin: 30px 0 10px;
	font-weight: var(--fw-bold);
	font-size: var(--fs-medium);
}
.plan-site > .plan-site__titre:first-child {
	margin-top: 0;
}

/* Sélecteur de langue (globe + menu déroulant, parts/selecteur-langue.php). */
.lang-switch {
	position: relative;
}
.lang-switch__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	transition: opacity 0.3s ease;
}
.lang-switch__toggle:hover,
.lang-switch__toggle[aria-expanded="true"] {
	opacity: 0.6;
}
.lang-switch__toggle img {
	display: block;
	width: 26px;
	height: 26px;
}
.lang-switch__menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 120;              /* au-dessus du header et de son ombre */
	min-width: 150px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: var(--color-blanc);
	/* Même traitement que les sous-menus du header : radius bas + ombre. */
	border-radius: 0 0 6px 6px;
	box-shadow: 0 16px 32px 0 rgba(50, 50, 50, 0.10); /* = .shadow */
}
.lang-switch__menu li {
	list-style: none;
	margin: 0;
}
.lang-switch__menu a {
	display: block;
	padding: 10px 20px;
	color: var(--color-noir);
	font-weight: var(--fw-bold);
	text-decoration: none;
	transition: color 0.2s ease;
}
.lang-switch__menu a:hover,
.lang-switch__menu a:focus-visible {
	color: var(--color-rouge);
}
.lang-switch__menu a[aria-current="true"] {
	color: var(--color-primary);
}
/* Overlay mobile : menu ancré à gauche, sous le globe. */
.menu-overlay .lang-switch {
	margin-top: 25px;
}
.menu-overlay .lang-switch__menu {
	right: auto;
	left: 0;
}

.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;
	color: var(--color-blanc); /* les liens de l'overlay sont noirs par défaut */
}
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: 570px;
	padding: 120px 0;
	z-index: 9;
}
#bloc-titre-page.titre-bg--bas .rangee {
	min-height: 570px;
	padding: 120px 0 70px 0;
	z-index: 9;
}
/* min-height (pas height) : un contenu long s'étend au lieu de déborder. */
#bloc-titre-page.titre-hero .rangee {
	min-height: calc(100vh - 100px);   /* viewport moins le header fixe */
	min-height: calc(100svh - 100px);
	padding: 80px 0 100px 0;
}
/* Avec fil d'Ariane : on retranche aussi sa barre (hauteur fixée à 50px). */
#bloc-titre-page.titre-hero--avec-fil .rangee {
	min-height: calc(100vh - 100px - 50px);
	min-height: calc(100svh - 100px - 50px);
}


#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: 70px 0 50px 0;	
}
#titre-simple h1 {
	color: var(--color-noir);
}
#titre-simple h1 span{
	color: var(--color-primary);
}

#titre-simple p.sur-titre-page {
	line-height: 1.2;
	font-size: var(--fs-large);
	color: var(--color-noir);
	margin: 0 0 10px 0;
	font-weight: 700;
}
#titre-simple p.sous-titre-page,
#bloc-titre-page p.sous-titre-page {
	margin: 20px 0;
	color: var(--color-noir);
	font-weight: 400;
	line-height: 1.3;
	font-size: var(--fs-medium);
}
#bloc-titre-page p.sous-titre-page, 
#bloc-titre-page p.sur-titre-page,
#bloc-titre-page p.sous-titre-page strong {
	color: #fff;
}
#bloc-titre-page p.sous-titre-page {
	max-width: 60ch;
}
/* Fiches écoles : sous-titre du hero en gras, un cran au-dessus. */
body.single-schools #bloc-titre-page p.sous-titre-page {
	font-size: var(--fs-plus);
	font-weight: var(--fw-bold);
}
#bloc-titre-page p.sur-titre-page {
	margin: 0 0 15px 0;
}
.text-center p.sous-titre-page {
	margin-left: auto;
	margin-right: auto;
}
#titre-simple.primary h1, #titre-simple.primary p{
	color: #fff;
}
/* Bouton principal (hors fantôme) sur fond sombre. */
#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: var(--color-rouge)!important; /* rouge = couleur d'interaction unique */
	color: var(--color-blanc)!important;
}

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

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

/* ====== Étiquette au-dessus du titre (champ ACF "etiquette") ====== */
.etiquette-titre {
	display: inline-block;
	background: var(--color-primary);
	color: var(--color-blanc);
	font-size: var(--fs-small);
	font-weight: var(--fw-bold);
	line-height: 1.2;
	padding: 8px 18px;
	border-radius: 999px;
	margin: 0 0 20px;
}
/* Rangée d'étiquettes de la single article : pastilles centrées sous le fil. */
.etiquettes-single {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 20px;
}
.etiquettes-single .etiquette-titre {
	margin: 0;
}
/* Sur les fonds bleus (hero, image en background), la pastille s'inverse
   pour rester visible sur l'overlay. */
#bloc-titre-page .etiquette-titre {
	background: var(--color-blanc);
	color: var(--color-primary);
}

/* ====== Hero / image en background : sur-titre en label ====== */
#bloc-titre-page .sur-titre-page {
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: var(--fs-normal);
	font-weight: var(--fw-regular);
}

/* Logo de l'école : posé en bas à droite du hero (fiches écoles). */
/* Calé sur le bord droit de la grille (.rangee : 95% plafonné à 1380px,
   + retrait de colonne 25px) et sur la ligne des boutons (padding bas de
   la rangée du hero : 100px). */
#bloc-titre-page .hero-logo-ecole {
	position: absolute;
	right: calc(max(2.5%, (100% - 1380px) / 2) + 25px);
	bottom: 100px;
	z-index: 9;
	margin: 0;
	line-height: 0;
}
#bloc-titre-page .hero-logo-ecole img {
	height: 110px;
	width: auto;
	display: block;
}

/* Logo CCI au-dessus du sur-titre (option du hero). */
#bloc-titre-page .logo-cci-titre {
	margin: 0 0 25px;
	line-height: 0;
}
#bloc-titre-page .logo-cci-titre img {
	height: 45px;
	width: auto;
}

/* Hero : bouton principal inversé (blanc / texte bleu) — l'overlay est bleu.
   Le survol reste rouge, comme partout. */
#bloc-titre-page .bouton:not(.bouton-ghost) a {
	background: var(--color-blanc);
	color: var(--color-primary);
}
#bloc-titre-page .bouton:not(.bouton-ghost) a:hover {
	background: var(--color-rouge);
	color: var(--color-blanc);
}

/* ====== Barres de transition entre sections ======
   À poser dans « Class additionnelle » des réglages de section : peint une
   bande gris beige de 70px en haut ou en bas de la section, par-dessus sa
   couleur de fond — les contenus à cheval (images, CTA…) chevauchent ainsi
   visuellement la section voisine. Cumulables (barre-haut barre-bas). */
.barre-haut {
	background-image: linear-gradient(var(--color-gris), var(--color-gris));
	background-repeat: no-repeat;
	background-size: 100% 70px;
	background-position: top;
}
.barre-bas {
	background-image: linear-gradient(var(--color-gris), var(--color-gris));
	background-repeat: no-repeat;
	background-size: 100% 70px;
	background-position: bottom;
}
.barre-haut.barre-bas {
	background-image:
		linear-gradient(var(--color-gris), var(--color-gris)),
		linear-gradient(var(--color-gris), var(--color-gris));
	background-size: 100% 70px, 100% 70px;
	background-position: top, bottom;
}

/* ====== Section Navigation de parcours : étape préc. / suiv. ======
   Deux liens en vis-à-vis — rond rouge fléché + label + titre de l'étape.
   S'il manque un côté (première/dernière étape), l'autre garde sa place. */
.nav-parcours {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
}
/* Première étape : seul « Next step » existe → poussé à droite. */
.nav-parcours__lien--suiv {
	margin-left: auto;
	text-align: right;
}
.nav-parcours__lien {
	display: inline-flex;
	align-items: center;
	gap: 20px;
	text-decoration: none;
	color: var(--color-rouge);
}
.nav-parcours__rond {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 50px;
	height: 50px;
	border-radius: 100%;
	background: var(--color-rouge);
	transition: background-color 0.3s ease, transform 0.3s ease;
}
.nav-parcours__rond img {
	width: 18px;
	height: auto;
	display: block;
}
.nav-parcours__texte {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: var(--color-rouge);
}
.nav-parcours__label {
	font-size: var(--fs-normal);
	font-weight: var(--fw-regular);
}
.nav-parcours__titre {
	font-size: 22px;
	font-weight: var(--fw-bold);
	line-height: 1.2;
	transition: color 0.3s ease;
}
/* Survol : rond bleu foncé (un rouge→rouge serait muet) + titre souligné. */
.nav-parcours__lien:hover .nav-parcours__rond,
.nav-parcours__lien:focus-visible .nav-parcours__rond {
	background: var(--color-primary);
	transform: scale(1.08);
}
.nav-parcours__lien:hover .nav-parcours__texte {
	color: var(--color-primary);
}
.nav-parcours__lien:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 4px;
	border-radius: 8px;
}

/* Single événement : mention en texte simple juste au-dessus du titre. */
.single-event__mention {
	margin: 0 0 10px;
}

/* Single événement : date + lieu sous le titre — mêmes lignes à icônes que
   les cartes du carousel, un cran de typo au-dessus. */
.single-event__infos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 30px;
	margin: 15px 0 0;
}
.single-event__infos .carte-agenda__meta {
	margin: 0;
	font-size: var(--fs-plus);
	font-weight: var(--fw-bold);
}
.single-event__infos .carte-agenda__meta img {
	width: 22px;
	height: 22px;
}
.single-event__infos .carte-agenda__pin {
	width: 20px;
	height: 22px;
}

/* ====== Titre Parcours : bandeau gris beige, tout centré ====== */
/* Bandeau compact : le type Parcours, et les bandeaux des singles agenda
   et alumni (.titre-bandeau — même style, sans la connotation parcours). */
#titre-simple.titre-parcours,
#titre-simple.titre-bandeau {
	padding-top: 70px;
	padding-bottom: 70px;
}

/* Stepper du parcours : les pages sœurs en étapes numérotées reliées par
   une ligne. Passées = bleu CCI, courante = rouge CCI, à venir = gris
   (#6b6b6b : 4,8:1 sur le gris beige, conforme RGAA). */
.parcours-etapes ol {
	display: flex;
	align-items: flex-start;
	list-style: none;
	margin: 40px 0 0;
	padding: 0;
	position: relative;     /* ancre de la ligne pleine largeur */
}
/* Ligne continue d'un bord à l'autre de la grille (elle déborde des
   pastilles 01 et n, comme la maquette) ; les pastilles passent dessus. */
.parcours-etapes ol::before {
	content: "";
	position: absolute;
	top: 25px;               /* centre vertical des pastilles (50px) */
	left: 0;
	right: 0;
	height: 2px;
	background: var(--color-primary);
}
.parcours-etapes li {
	flex: 1;
	margin: 0;
	list-style-type: none;
	text-align: center;
}
.parcours-etape__lien {
	position: relative;      /* passe au-dessus des segments de ligne */
	z-index: 1;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	max-width: 180px;
	text-decoration: none;
}
.parcours-etape__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	padding: 15px;
	border-radius: 100%;
	background: var(--color-primary);
	color: var(--color-blanc);
	font-size: var(--fs-normal);
	font-weight: var(--fw-bold);
	/* Petit rebond au survol (courbe avec léger dépassement). Neutralisé
	   automatiquement par le bloc prefers-reduced-motion global. */
	transition: transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1), background-color 0.3s ease;
}
.parcours-etape__label {
	font-size: var(--fs-normal);
	font-weight: var(--fw-bold);
	line-height: 1.25;
	color: var(--color-primary);
	transition: color 0.3s ease;
}
/* Étape courante : rouge. */
.parcours-etape.est-courante .parcours-etape__num {
	background: var(--color-rouge);
}
.parcours-etape.est-courante .parcours-etape__label {
	color: var(--color-rouge);
}
/* Étapes à venir : gris (lisible sur gris beige). */
.parcours-etape.est-a-venir .parcours-etape__num {
	background: #C5C7D9;
}
.parcours-etape.est-a-venir .parcours-etape__label {
	color: #C5C7D9;
}
/* Survol des étapes cliquables : rouge, comme toute interaction. */
a.parcours-etape__lien:hover .parcours-etape__label,
a.parcours-etape__lien:focus-visible .parcours-etape__label {
	color: var(--color-rouge);
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* La pastille grossit et passe au rouge, comme toute interaction. */
a.parcours-etape__lien:hover .parcours-etape__num,
a.parcours-etape__lien:focus-visible .parcours-etape__num {
	transform: scale(1.12);
	background: var(--color-rouge);
}
a.parcours-etape__lien:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
	border-radius: 6px;
}

.text-center .fil-ariane {
	text-align: center;
}

/* 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-rouge);      /* rouge = couleur d'interaction unique */
	border-color: var(--color-rouge);    /* la bordure suit le fond : pas de saut visuel */
	color: var(--color-blanc);
}

/* Contextes sombres → bouton fantôme blanc, sur fond bleu plein : sur
   l'image du hero, le fond transparent se perdait (surtout en mobile). */
#bloc-titre-page .bouton-ghost a,
#titre-simple.primary .bouton-ghost a {
	color: var(--color-blanc);
	background: var(--color-primary);
	border-color: var(--color-blanc);
}
#bloc-titre-page .bouton-ghost a:hover,
#titre-simple.primary .bouton-ghost a:hover{
	background: var(--color-rouge);
	border-color: var(--color-rouge);
	color: var(--color-blanc);
}

/* ====== Chevrons des sous-menus : SVG blanc noirci par filtre ====== */
header#header nav .submenu-toggle .chevron {
	filter: brightness(0);
}

/* ====== Fil d'Ariane ====== */
.breadcrumb {
	box-shadow: 0 16px 32px 0 rgba(50,50,50,0.10);
	background: #fff;
	/* Hauteur fixe : le hero la retranche du viewport (calc). */
	height: 50px;
	display: flex;
	align-items: center;
}
.fil-ariane {
	margin-top: 0px;
	font-family: var(--font-body);
	font-size: var(--fs-small);
	line-height: 1.4;
}
/* 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-bleu.svg) no-repeat center / contain;
	        mask: url(img/arrow-right-bleu.svg) no-repeat center / contain;
}
.fil-ariane .breadcrumb li:last-child::after {
	display: none;
}
.bg-blanc {
	background: var(--color-blanc);
}
/* ==============================================================
   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 NEWS (Actualités) — en-tête titre + lien à droite,
   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 */
}
/* Texte d'introduction sous le titre de section. */
.section-news__texte {
	margin: 12px 0 0;
}
/* Section Écoles : même intro que les actus, cartes CTA horizontales. */
.section-schools__texte {
	margin: 12px 0 0;
}
.section-schools__facette {
	margin-bottom: 10px;
}

/* --------------------------------------------------------------
/////////////////////////////////// ALUMNI (carte + section + single)
----------------------------------------------------------------- */
.section-alumni__texte {
	margin: 12px 0 0;
}
.section-alumni__facette {
	margin-bottom: 10px;
}
.section-alumni__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	padding-bottom: 30px;
}
.section-alumni__bouton {
	margin: 0 0;
}
/* Bouton d'action (ex. inscription) en fin de popup agenda. */
.modal-agenda__action {
	margin: 25px 0 0;
}
.alumni-carousel__nav {
	display: flex;
	gap: 12px;
	flex: 0 0 auto;
}
/* Carte « récit » : carte blanche, médaillon rond à cheval sur le bord
   haut (moitié dehors — l'espace est réservé par le padding-top de
   l'article, hors carte blanche). */
.carte-alumni {
	height: 100%;
	padding-top: 75px; /* demi-médaillon */
	margin-bottom: 20px;
}
.carte-alumni__lien {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0 30px 30px;
	background: var(--color-blanc);
	border-radius: 25px;
	text-decoration: none;
	color: var(--color-fg);
}
/* Le hover générique des liens ne doit pas recolorer les textes de la
   carte — seuls le médaillon (scale) et la flèche réagissent. */
.carte-alumni__lien:hover,
.carte-alumni__lien:focus-visible {
	color: var(--color-fg);
}
.carte-alumni__visuel {
	position: relative;
	display: block;
	width: 150px;
	height: 150px;
	margin-top: -75px; /* sort de la carte d'un demi-médaillon */
	border-radius: 100%;
	overflow: hidden;
	background: var(--color-primary);
	margin-bottom: var(--space-4);
}
/* Respiration au survol : la photo zoome DANS le rond (le médaillon garde
   sa taille — un scale du rond lui-même se faisait rogner par les
   conteneurs de la grille WPGB). */
.carte-alumni__lien:hover .carte-alumni__visuel img,
.carte-alumni__lien:focus-visible .carte-alumni__visuel img {
	transform: scale(1.08);
}
.carte-alumni__visuel picture {
	display: block;
	height: 100%;
}
.carte-alumni__visuel img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease; /* même respiration que le play vidéo */
}
.carte-alumni__contenu {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
/* Sans photo, le contenu est le premier enfant : il récupère le padding
   haut que le médaillon à cheval a retiré à la carte. */
.carte-alumni__contenu:first-child {
	padding-top: 30px;
}
.carte-alumni__nom {
	display: block;
	font-size: var(--fs-medium);
	font-weight: var(--fw-bold);
}
.carte-alumni__ecole {
	display: block;
	margin-top: 4px;
	color: var(--color-primary);
}
.carte-alumni__citation {
	display: block;
	margin-top: var(--space-4);
}
/* Lien fléché rouge, poussé en bas de carte ; la flèche glisse au survol. */
.carte-alumni__lire {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: var(--space-4);
	color: var(--color-rouge);
	font-weight: var(--fw-bold);
}
.carte-alumni__lire img {
	transition: transform 0.3s ease;
}
.carte-alumni__lien:hover .carte-alumni__lire img,
.carte-alumni__lien:focus-visible .carte-alumni__lire img {
	transform: translateX(6px);
}
/* Single : médaillon rond (même identité que la carte) au-dessus du titre.
   Le plugin WebP peut envelopper l'img dans un <picture> : le rond clippe
   le conteneur, l'img remplit. */
.single-alumni__photo, .portrait img{
	width: 160px;
	height: 160px;
	margin: 0 auto 25px;
	border-radius: 100%;
	overflow: hidden;
	background: var(--color-primary);
}
.portrait img {
	margin-bottom: 0;
}
.single-alumni__photo picture {
	display: block;
	height: 100%;
}
.single-alumni__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Single : rôle actuel sous le titre, profil LinkedIn dessous. */
.single-alumni__role {
	margin: 10px 0 0;
	font-size: var(--fs-medium);
	color: var(--color-primary);
}
.single-alumni__linkedin {
	margin: 15px 0 0;
}
.single-alumni__linkedin a {
	display: inline-block;
	transition: opacity 0.3s ease;
}
.single-alumni__linkedin a:hover,
.single-alumni__linkedin a:focus-visible {
	opacity: 0.6;
}
.single-alumni__linkedin img {
	display: block;
	width: 28px;
	height: 28px;
}
/* Bouton de la section : sous les cartes, avec un peu d'air. */
.section-news__bouton {
	margin: 15px 0 0;
}

/* Cartes */
.carte-news__visuel {
	position: relative;      /* ancre des étiquettes posées sur l'image */
}
.carte-news__media {
	display: block;
	overflow: hidden;        /* le zoom de l'image reste dans le cadre */
}
/* Étiquettes (catégories + écoles) : pilules bleues en bas-gauche de l'image. */
.carte-news__badges {
	position: absolute;
	left: 25px;              /* aligné sur le retrait du contenu */
	bottom: 0;
	right: 25px;
	transform: translateY(50%);  /* à cheval entre l'image et le titre */
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	z-index: 2;
}
.carte-news__badge {
	background: var(--color-primary);
	color: var(--color-blanc);
	font-size: var(--fs-small);
	font-weight: var(--fw-bold);
	line-height: 1.2;
	padding: 6px 14px;
	border-radius: 999px;
}
/* Carte sans image : les étiquettes restent en flux au-dessus du titre. */
.carte-news__badges--flux {
	position: static;
	margin: 0 0 12px;
}
.carte-news__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;    /* maquette : visuel large, moins haut */
	object-fit: cover;
	transition: transform 0.6s ease;
}
/* Zoom doux 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 = boîte blanche arrondie (l'overflow arrondit le haut de l'image),
   même famille que les cartes du widget Étapes. */
.carte-news {
	background: var(--color-blanc);
	border-radius: 16px;
	overflow: hidden;
	height: 100%;            /* cartes d'une même rangée à hauteur égale */
	padding-bottom: 30px;
	box-shadow: 0 10px 25px rgba(48, 46, 46, 0.06);
}
.carte-news__titre {
	margin: 35px 25px 0;     /* dégage les étiquettes à cheval */
	font-size: var(--fs-medium);
	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 25px 0;     /* le bas est porté par le padding de la carte */
}
/* 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);
}

/* ====== Agenda : en-tête de section (intro + flèches du carousel) ====== */
.section-agenda__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
}
.section-agenda__texte {
	margin: 12px 0 0;
}
.agenda-carousel__nav {
	display: flex;
	gap: 12px;
	flex: 0 0 auto;
}

/* Pastille compacte (écoles sur l'agenda ; même famille que les étiquettes
   des vignettes d'actualités). */
.etiquette-mini {
	display: inline-block;
	background: var(--color-primary);
	color: var(--color-blanc);
	font-size: var(--fs-small);
	font-weight: var(--fw-bold);
	line-height: 1.2;
	padding: 5px 14px;
	border-radius: 999px;
}
/* Étiquettes de l'agenda, couleur par dimension : catégorie rouge,
   programme bleu (défaut des pastilles), école noir — blanc sur les
   trois fonds, contrastes RGAA OK. */
.carte-agenda__badges .etiquette--tri_agenda,
.ligne-agenda__badges .etiquette--tri_agenda,
body.single-agenda .etiquettes-single .etiquette--tri_agenda {
	background: var(--color-rouge);
}
.carte-agenda__badges .etiquette--school,
.ligne-agenda__badges .etiquette--school,
body.single-agenda .etiquettes-single .etiquette--school {
	background: var(--color-noir);
}
/* Pastille catégorie cliquable : le hover rouge universel serait
   invisible sur son fond rouge — elle passe au bleu. */
.carte-agenda__badges a.etiquette--tri_agenda:hover,
.carte-agenda__badges a.etiquette--tri_agenda:focus-visible,
.ligne-agenda__badges a.etiquette--tri_agenda:hover,
.ligne-agenda__badges a.etiquette--tri_agenda:focus-visible,
body.single-agenda .etiquettes-single a.etiquette--tri_agenda:hover,
body.single-agenda .etiquettes-single a.etiquette--tri_agenda:focus-visible {
	background: var(--color-primary);
}

/* Étiquettes cliquables (lien optionnel posé sur le terme) : hover rouge
   — blanc sur rouge, contraste 4,8:1 (RGAA). */
a.etiquette-titre,
a.etiquette-mini,
a.carte-news__badge {
	color: var(--color-blanc); /* pas la couleur des liens simples (rouge) */
	text-decoration: none;
	transition: background 0.3s ease;
}
a.etiquette-titre:hover,
a.etiquette-mini:hover,
a.carte-news__badge:hover,
a.etiquette-titre:focus-visible,
a.etiquette-mini:focus-visible,
a.carte-news__badge:focus-visible {
	background: var(--color-rouge);
	color: var(--color-blanc);
}
.ligne-agenda__badges,
.carte-agenda__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 8px;
}
.carte-agenda__badges {
	margin-bottom: 14px;
}

/* RGAA : les slides hors de la vue (Swiper, watchSlidesProgress) sont
   masquées — ni tabulables, ni lues par les lecteurs d'écran. */
.agenda-carousel .swiper-slide:not(.swiper-slide-visible),
.logos-carousel .swiper-slide:not(.swiper-slide-visible),
.temoignages-carousel .swiper-slide:not(.swiper-slide-visible),
.alumni-carousel .swiper-slide:not(.swiper-slide-visible),
.carousel-fullbleed .swiper-slide:not(.swiper-slide-visible) {
	visibility: hidden;
}

/* ====== Agenda : cartes du carousel (maquette Key Dates and Events) ====== */
.agenda-carousel {
	margin-top: 0px;
}
.agenda-carousel .swiper-slide {
	height: auto;            /* cartes d'une même vue à hauteur égale */
}
.carte-agenda {
	height: 100%;
	background: var(--color-blanc);
	border-radius: 16px;
	box-shadow: 0 10px 25px rgba(48, 46, 46, 0.06);
	padding: 30px 25px;
}
.carte-agenda__titre {
	font-size: 22px;
	font-weight: var(--fw-bold);
	line-height: 1.25;
	margin: 0 0 18px;
}
.carte-agenda__titre a,
.carte-agenda__titre button,
.carte-agenda__titre span {
	color: var(--color-noir);
	text-decoration: none;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: color 0.3s ease;
}
.carte-agenda__titre span {
	cursor: default;
}
.carte-agenda__titre a:hover,
.carte-agenda__titre a:focus-visible,
.carte-agenda__titre button:hover,
.carte-agenda__titre button:focus-visible {
	color: var(--color-rouge);
}
.carte-agenda__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	color: var(--color-rouge);
	font-weight: var(--fw-medium);
}
.carte-agenda__meta:last-child {
	margin-bottom: 0;
}
/* Mention (sur-titre) : au-dessus du titre, comme sur la vue liste. */
.carte-agenda__mention {
	margin: 0 0 6px;
	font-size: var(--fs-small);
	font-weight: 400;
	color: var(--color-fg);
}
/* Sous-titre de l'événement : sous le lieu, en texte discret. */
.carte-agenda__sous-titre {
	margin: 12px 0 0;
	font-size: var(--fs-small);
	color: var(--color-fg);
}
.carte-agenda__meta img {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}
/* Épingle de lieu : SVG masqué → suit la couleur rouge. */
.carte-agenda__pin {
	flex: 0 0 auto;
	width: 16px;
	height: 18px;
	background-color: var(--color-rouge);
	-webkit-mask: url(img/map-marker.svg) no-repeat center / contain;
	        mask: url(img/map-marker.svg) no-repeat center / contain;
}
/* Modale d'événement : bloc date + lieu encadré de filets rouges. */
.modal-agenda__infos {
	border-top: 1px solid var(--color-rouge);
	border-bottom: 1px solid var(--color-rouge);
	padding: 16px 0;
	margin: 18px 0 20px;
}
.modal-agenda__infos .carte-agenda__meta:last-child {
	margin-bottom: 0;
}

/* Bouton de la section : sous le carousel ou la liste. */
.section-agenda__bouton {
	margin: 15px 0 0;
}

/* ==============================================================
   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-rouge);
	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-medium);
	font-weight: var(--fw-bold);
	line-height: 1.2;
}
/* Sous-titre : sous le titre de la ligne, même discrétion que la mention. */
.ligne-agenda__sous-titre {
	display: block;
	font-size: var(--fs-small);
	font-weight: 400;
	margin-top: 10px;
}
.ligne-agenda__mention {
	display: block;
	font-size: var(--fs-small);
	font-weight: 400;
	margin-bottom: 10px;
}
/* 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;
	display: block;
	margin-top: 15px;
}
.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);
}
/* Les étiquettes-liens dans le titre de ligne ne sont pas le lien du titre :
   elles gardent leur style de pastille (blanc, inline, hover rouge). */
.ligne-agenda__titre a.etiquette-mini {
	color: var(--color-blanc);
	display: inline-block;
	margin-top: 0;
}
.ligne-agenda__titre a.etiquette-mini:hover,
.ligne-agenda__titre a.etiquette-mini:focus-visible {
	color: var(--color-blanc);
	background: var(--color-rouge);
}
.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-rouge-texte); /* petit texte sur gris beige : 5,1:1 */
}
/* 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-rouge);
	-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); /* bleu foncé : l'icône est déjà rouge */
}
.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. */

/* 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);
}

/* Contexte sombre générique (.noir — sections du constructeur avec fond
   noir) : titre de section en blanc. */
.noir .sous-titre {
	color: var(--color-blanc);
}
/* --------------------------------------------------------------
/////////////////////////////////// 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;
    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. */

.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-medium);
	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);
}

/* ====== Flèches de carousel (partagées : section Chiffres clés,
   carousels du constructeur) ====== */
.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-rouge); /* flèche blanche sur rouge = 4,8:1, RGAA ok */
}
.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;
}
/* ==============================================================
   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 (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. */
	.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;
	background: #fff;
}
#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;
	border-radius: 25px;
}
#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 .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: 400;
	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);
	border-radius: 25px;
}
/* Formes du widget CTA : carré par défaut, paysage, ou portrait (3:4). */
a.bloc-focus.cta--horizontal {
	aspect-ratio: 4 / 2.8;
}
a.bloc-focus.cta--vertical {
	aspect-ratio: 3 / 4;
}
a.bloc-focus span.titre-focus {
	position: absolute;
	bottom: 0px;
	left: 0;
	z-index: 99;
	padding: 40px;
	font-size: var(--fs-normal);
	color: var(--color-blanc);
}
a.bloc-focus span.titre-focus em {
	display: block;
	font-style: normal;
	font-size: var(--fs-plus);
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	line-height: 1;
	margin-top: 0px;
}
a.bloc-focus span.titre-focus span {
	display: block;
	font-size: var(--fs-normal);
	font-weight: 400;
	line-height: 1;
}
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);
	border-radius: 25px;
}
a.bloc-focus:hover .overlay-focus {
	opacity: .5;
}

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

/* -------------------------------------------------------------- 
///////////////////////////////////  WIDGET ACCORDEON
----------------------------------------------------------------- */
.bloc-accordeon {
    border-bottom: 1px solid var(--color-noir);
    margin: 20px 0;
}
.bloc-accordeon .titre-accordeon {
    background: none;
    border: none;
    text-align: left;
    width: 100%;
    cursor: pointer;
    padding: 22px 35px 22px 0;
    margin: 0;
    font-family: var(--font-body);
    font-weight: var(--fw-bold);
    font-size: var(--fs-medium);
    line-height: 1.1;
    color: var(--color-primary);
    border-top: 1px solid var(--color-noir);
    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;
}
.texte-accordeon > :last-child {
    margin-bottom: 25px;
}
.texte-accordeon p:first-child {
	margin-top: 0;
}
.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: 1px 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: 25px;
}
.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);
	border-radius: 25px;
}
.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;
}
/* Option de colonne « Espace entre les widgets : Espacé » */
.widgets-espaces .widget {
	padding-bottom: 40px;
}
.widget:last-of-type,
.widgets-espaces .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.2;
}
.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);
}
.widget.widget-titre span{
	color:var(--color-primary);
}
/* 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-rouge a{
	background: var(--color-rouge) !important;
	color: var(--color-blanc) !important;
}
.widget-bouton .bouton.btn-rouge a:hover {
	background: var(--color-secondary) !important; /* bleu foncé : un rouge→rouge serait muet */
	color: var(--color-blanc) !important;
}
.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-rouge a   { color: var(--color-rouge) !important; }
.widget-bouton .bouton.bouton-ghost.btn-rouge a:hover {
	background: var(--color-rouge) !important;
	border-color: var(--color-rouge);
	color: var(--color-blanc) !important;
}
.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-rouge) !important;
	border-color: var(--color-rouge);
	color: var(--color-blanc) !important;
}
.widget-bouton .bouton.bouton-ghost.btn-noir a:hover {
	background: var(--color-rouge) !important;
	border-color: var(--color-rouge);
	color: var(--color-blanc) !important;
}
.widget-bouton .bouton.bouton-ghost.btn-blanc a:hover {
	background: var(--color-rouge) !important;
	border-color: var(--color-rouge);
	color: var(--color-blanc) !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 .bloc-encadre {
	padding: 40px;
	border-radius: 25px;
}
.widget-texte .titre-label,
.widget .bloc-encadre .titre-label {
	margin: 0 0 var(--space-4) 0;
}
.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: 200px;
}
/* Mode carousel : flèches de part et d'autre, logos centrés dans leur slide. */
.logos-carousel-wrap {
	display: flex;
	align-items: center;
	gap: 25px;
}
.logos-carousel-wrap .swiper {
	flex: 1 1 auto;
	min-width: 0;
}
/* Les flèches ne doivent pas être comprimées par le flex (rond 40px). */
.logos-carousel-wrap .prog-carousel__prev,
.logos-carousel-wrap .prog-carousel__next {
	flex: 0 0 auto;
}
.logos-carousel .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.logos-carousel .logo {
	margin: 0;
}

/* ///////////////////////////// SECTION REASSURANCE //////////////////////*/
.section-reassurance p.titre-argument {
	font-family:var(--font-heading);
	font-weight: var(--fw-bold);
	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);
	border: none;
	border-radius: 100px;
	width: 45px;
	height: 45px;
	cursor: pointer;
	transition: all 0.3s;
}
/* Flèche en masque (et non en background-image) : sa couleur suit le CSS —
   blanche par défaut, noire au survol bleu clair (RGAA). */
.widget-carousel .swiper-button-prev::before,
.widget-carousel .swiper-button-next::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--color-blanc);
	-webkit-mask: url(img/arrow-left.svg) no-repeat center / 20px auto;
	        mask: url(img/arrow-left.svg) no-repeat center / 20px auto;
	transition: background-color 0.3s;
}
.widget-carousel .swiper-button-next::before {
	-webkit-mask-image: url(img/arrow-right.svg);
	        mask-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-rouge); /* flèche blanche sur rouge = 4,8:1 */
}
.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-rouge-texte) !important;
	text-decoration:underline!important;
}
.wpforms-container .wpforms-field-html a:hover {
	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);
}
#wpforms-680 .wpforms-submit-container {
	display: none !important;
}
div.wpforms-container-full .wpforms-field-label, .wp-core-ui div.wpforms-container-full .wpforms-field-label {
	font-size: var(--fs-normal) !important;
	line-height: 1.2 !important;
}
/* -------------------------------------------------------------- 
/////////////////////////////////// FOOTER
----------------------------------------------------------------- */
#footer {
	padding-top: 70px;
	background: var(--color-primary);
	color: var(--color-blanc);
}
#footer a {
	color: var(--color-blanc);
	text-decoration: none;
}

#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;
}
/* Fond bleu CCI : aucune couleur de la gamme ne contraste assez pour un
   survol par changement de teinte — le lien reste blanc et se souligne. */
#footer a:hover,
#footer a:focus-visible {
	color: var(--color-blanc);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* 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-rouge);
	border-color: var(--color-rouge);
}
#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 {
	padding: 25px 0;
}
.logo-credits-lien img {
	display: block;
	height: 38px;
	width: auto;
}
/* Logo CCI : lien calé à droite de la barre de crédits. */
.logo-credits-lien {
	display: block;
	width: fit-content;
}
#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;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal.is-open {
	opacity: 1;
	visibility: visible;
}
.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;
}
/* Le conteneur reçoit le focus à l'ouverture (tabindex -1) : pas d'anneau
   sur lui — le premier Tab atteint la croix avec son :focus-visible. */
.modal__inner:focus {
	outline: none;
}
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-rouge);
	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); }
}

/* --------------------------------------------------------------
/////////////////////////////////// TEMOIGNAGES (carte + section)
----------------------------------------------------------------- */
/* Carte partagée (parts/carte-temoignage.php) : section Témoignages
   en grille / carousel et widget Témoignage du constructeur. */
.carte-temoignage {
	margin: 0;
	text-align: left; /* ferré à gauche quel que soit le contexte */
}
/* Le plugin WebP remplace l'<img> par un <picture class="photo-temoignage">
   enveloppant l'<img> : le rond doit donc clipper aussi ce conteneur. */
.carte-temoignage .photo-temoignage {
	display: block;
	width: 160px;
	height: 160px;
	border-radius: 100%;
	overflow: hidden;
	object-fit: cover;
	margin-bottom: var(--space-6);
}
.carte-temoignage .photo-temoignage img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 100%;
	object-fit: cover;
}
.carte-temoignage blockquote {
	margin: 0;
	padding-left: 0;
	border-left: 0;
}
.carte-temoignage blockquote p {
	font-size: var(--fs-normal);
	font-style: italic;
	line-height: var(--lh-normal);
	color: var(--color-fg);
}
.carte-temoignage figcaption {
	margin-top: var(--space-4);
}
.carte-temoignage .auteur {
	display: block;
	font-size: var(--fs-normal);
	font-weight: var(--fw-bold);
	color: var(--color-fg);
}
.carte-temoignage .fonction {
	display: block;
	margin-top: 4px;
	color: var(--color-primary);
}
.section-temoignages__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
}
.temoignages-carousel__nav {
	display: flex;
	gap: 12px;
	flex: 0 0 auto;
}
.section-temoignages__cellule {
	margin-bottom: 40px;
}

/* --------------------------------------------------------------
/////////////////////////////////// SECTION CAROUSEL PLEIN ECRAN
----------------------------------------------------------------- */
/* Slide active centrée (largeur --slide-l), voisines qui dépassent de
   chaque côté, flèches en overlay aux bords de la slide active. */
.carousel-fullbleed {
	--slide-l: 66vw;
	position: relative;
	width: 100%;
	overflow: hidden;
}
.carousel-fullbleed .swiper-slide {
	width: var(--slide-l);
}
.carousel-fullbleed .swiper-slide img {
	display: block;
	width: 100%;
	aspect-ratio: 1920 / 1100; /* = crop de la taille d'image "parallax" */
	object-fit: cover;
	border-radius: 15px;
}
.carousel-fullbleed__prev,
.carousel-fullbleed__next {
	position: absolute;
	top: 50%;
	z-index: 5;
}
.carousel-fullbleed__prev {
	left: calc((100% - var(--slide-l)) / 2);
	transform: translate(-50%, -50%);
}
.carousel-fullbleed__next {
	right: calc((100% - var(--slide-l)) / 2);
	transform: translate(50%, -50%);
}
@media (max-width: 1025px) {
	.carousel-fullbleed {
		--slide-l: 85vw;
	}
}

/* --------------------------------------------------------------
/////////////////////////////////// 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-medium);
	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);
}

/* ====== Disposition horizontale : cartes blanches numérotées (01, 02…)
   reliées par des flèches — maquette « How it works ». ====== */
.widget-etapes--h {
	margin: 20px 0;          /* respiration au-dessus et en dessous du bloc */
}
.widget-etapes--h .liste-etapes {
	display: flex;
	align-items: stretch;
	gap: 60px;               /* la flèche vit dans cette gouttière */
}
.widget-etapes--h .etape {
	flex: 1;
	position: relative;
	margin: 0;
	padding: 25px;
	background: var(--color-blanc);
	border-radius: 16px;
	box-shadow: 0 10px 25px rgba(48, 46, 46, 0.06);
}
/* Étape cliquable : lien étiré sur toute la carte (libellé en sr-only),
   titre en rouge + légère élévation au survol / focus clavier. */
.etape--cliquable {
	position: relative;
}
.etape__lien {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
}
.etape__lien:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
}
.widget-etapes--h .etape--cliquable {
	transition: transform 0.3s ease;
}
.widget-etapes--h .etape--cliquable:hover {
	transform: translateY(-4px);
}
.etape--cliquable:hover .titre-etape,
.etape--cliquable:focus-within .titre-etape {
	color: var(--color-rouge);
}
/* Pastille : numéro sur deux chiffres (01, 02…), en flux au-dessus du titre. */
.widget-etapes--h .etape::before {
	content: counter(etape, decimal-leading-zero);
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	margin-bottom: 15px;
	border-radius: 100%;
	background: var(--color-primary);
	color: var(--color-blanc);
	font-size: 24px;
	font-weight: var(--fw-bold);
}
/* Flèche vers la carte suivante, centrée dans la gouttière. */
.widget-etapes--h .etape:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -42px;            /* centrée dans le gap de 60px (flèche 24px) */
	transform: translateY(-50%);
	left: auto;
	bottom: auto;
	width: 24px;
	height: 24px;
	background: url(img/arrow-right-bleu.svg) no-repeat center / contain;
	opacity: 1;              /* le trait vertical de la version de base est à .25 */
}
.widget-etapes--h .titre-etape {
	font-size: 22px;
	line-height: 1.2;
	margin: 0 0 6px;
}
.widget-etapes--h .titre-etape + .texte-etape {
	margin-top: 0;
}

/* --------------------------------------------------------------
/////////////////////////////////// WIDGET ZONE DE REASSURANCE
----------------------------------------------------------------- */
/* Grille d'arguments : 3 colonnes (défaut), 2 × 2 pour 4 items.
   Les .argument héritent des styles de la section Réassurance. */
.widget-reassurance {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px 50px;
}
.widget-reassurance--2x2 {
	grid-template-columns: repeat(2, 1fr);
}
.widget-reassurance .argument {
	margin: 0;
}
.widget-reassurance .argument .icone {
	margin: 0;
}
.widget-reassurance .icone img {
	width: auto;
	height: 46px;
}
.widget-reassurance .argument .titre-argument {
	font-weight: var(--fw-bold);
	margin: 5px 0;
}
.widget-reassurance .argument .texte-argument {
	margin-top: 10px;
}
/* --------------------------------------------------------------
/////////////////////////////////// WIDGET FOCUS AVEC ICONE
----------------------------------------------------------------- */
.widget-focus-icone {
	display: flex;
	align-items: flex-start;
	gap: 25px;
}
/* Disposition « Icône au-dessus » : empilé, pour les colonnes étroites. */
.widget-focus-icone--v {
	flex-direction: column;
	gap: 18px;
}
/* Avec fond : carte arrondie. */
.widget-focus-icone--carte {
	border-radius: 18px;
	padding: 30px;
	align-items: center;
}
.widget-focus-icone.blanc {
	background: var(--color-blanc);
}
.widget-focus-icone.gris {
	background: var(--color-gris);
}
.widget-focus-icone.primary {
	background: var(--color-primary);
}
.widget-focus-icone.primary .widget-focus-icone__titre,
.widget-focus-icone.primary .widget-focus-icone__texte {
	color: var(--color-blanc);
}
.widget-focus-icone__icone {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
}
.widget-focus-icone__titre {
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: var(--fw-bold);
	line-height: 1.2;
}
.widget-focus-icone__texte {
	margin: 0;
}
/* Texte en wysiwyg : premiers/derniers blocs sans marges parasites. */
.widget-focus-icone__texte > :first-child {
	margin-top: 0;
}
.widget-focus-icone__texte > :last-child {
	margin-bottom: 0;
}
.widget-focus-icone.primary .widget-focus-icone__texte li {
	color: var(--color-blanc);
}

/* --------------------------------------------------------------
/////////////////////////////////// WIDGET FOCUS AVEC BOUTON
----------------------------------------------------------------- */
.widget-focus-bouton {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	border-radius: 25px;
	padding: 40px;
	margin: 15px 0;
}
.widget-focus-bouton.gris {
	background: var(--color-gris);
}
.widget-focus-bouton.blanc {
	background: var(--color-blanc);
}
/* Fonds colorés : texte (gras compris) en blanc, bouton contrasté. */
.widget-focus-bouton.primary {
	background: var(--color-primary);
}
.widget-focus-bouton.rouge {
	background: var(--color-rouge);
}
.widget-focus-bouton.primary .widget-focus-bouton__texte,
.widget-focus-bouton.primary .widget-focus-bouton__texte p,
.widget-focus-bouton.primary .widget-focus-bouton__texte strong,
.widget-focus-bouton.primary .widget-focus-bouton__texte b,
.widget-focus-bouton.rouge .widget-focus-bouton__texte,
.widget-focus-bouton.rouge .widget-focus-bouton__texte p,
.widget-focus-bouton.rouge .widget-focus-bouton__texte strong,
.widget-focus-bouton.rouge .widget-focus-bouton__texte b {
	color: var(--color-blanc);
}
/* Fond bleu : bouton rouge (survol bleu foncé). */
.widget-focus-bouton.primary .bouton a {
	background: var(--color-rouge);
}
.widget-focus-bouton.primary .bouton a:hover {
	background: var(--color-secondary);
}
/* Fond rouge : bouton bleu CCI (survol bleu foncé). */
.widget-focus-bouton.rouge .bouton a {
	background: var(--color-primary);
}
.widget-focus-bouton.rouge .bouton a:hover {
	background: var(--color-secondary);
}
.widget-focus-bouton__texte {
	flex: 1 1 auto;
	font-size: var(--fs-medium);
	line-height: 1.25;
	align-self: center;
}
.widget-focus-bouton__texte p {
	margin: 0;
	line-height: inherit;
	font-size: inherit;
}
.widget-focus-bouton__bouton {
	flex: 0 0 auto;
	margin: 0;
}

/* --------------------------------------------------------------
/////////////////////////////////// WIDGET ACCREDITATIONS
----------------------------------------------------------------- */
/* Rangée de logos à hauteur fixe : 1 à 5+ logos, retour à la ligne
   automatique dans les colonnes étroites. */
.logos-accreditations {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 25px;
	list-style: none;
	margin: 0 0 var(--space-4) 0;
	padding: 0;
}
.logos-accreditations li {
	list-style: none;
	margin: 0;
}
.logos-accreditations img {
	display: block;
	height: 34px;
	width: auto;
}
/* Option « Taille des logos : grande » du widget. */
.logos-accreditations--grands img {
	height: 70px;
}
.widget-accreditations p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------
/////////////////////////////////// WIDGET AGENDA (liste compacte)
----------------------------------------------------------------- */
.widget-agenda .titre-agenda {
	margin: 0 0 var(--space-4) 0;
	color: var(--color-fg);
}
.widget-agenda__liste {
	list-style: none;
	margin: 0;
	padding: 0;
}
.widget-agenda__item {
	list-style: none;
	margin: 0;
	padding: 20px 0;
	border-bottom: 1px solid var(--color-trait);
}
.widget-agenda__item:first-child {
	padding-top: 0;
}
.widget-agenda__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}
.widget-agenda__date {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--fs-normal);
	font-weight: var(--fw-bold);
	color: var(--color-rouge-texte);
}
.widget-agenda__date img {
	flex: 0 0 auto;
}
.widget-agenda__titre {
	margin: 6px 0 0;
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
}
/* Titre cliquable : lien ou bouton (popup), même rendu. */
.widget-agenda__titre a,
.widget-agenda__titre button {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.3s ease;
}
.widget-agenda__titre a:hover,
.widget-agenda__titre a:focus-visible,
.widget-agenda__titre button:hover,
.widget-agenda__titre button:focus-visible {
	color: var(--color-rouge);
}
.widget-agenda__lien {
	margin: var(--space-4) 0 0;
}

/* --------------------------------------------------------------
/////////////////////////////////// WIDGET RESEAUX SOCIAUX
----------------------------------------------------------------- */
.widget-reseaux .liste-reseaux {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 25px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.widget-reseaux li {
	list-style: none;
	margin: 10px 5px;
}
.widget-reseaux a {
	display: block;
	transition: opacity 0.3s ease;
}
.widget-reseaux a:hover,
.widget-reseaux a:focus-visible {
	opacity: 0.6;
}
.widget-reseaux img {
	display: block;
	width: 30px;
	height: 30px;
}
/* Colonne centrée ou ferrée à droite : les icônes suivent (le retour à
   gauche en mobile est géré dans responsive.css). */
.text-center .widget-reseaux .liste-reseaux {
	justify-content: center;
}
.text-right .widget-reseaux .liste-reseaux {
	justify-content: flex-end;
}

/* --------------------------------------------------------------
/////////////////////////////////// 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-tint);
}
.widget-fichiers .nom-fichier {
	color: var(--color-fg);
	font-weight: var(--fw-medium);
}
.widget-fichiers .nom-fichier::before {
	content: "\2913"; /* flèche de téléchargement */
	color: var(--color-primary);
	margin-right: var(--space-2);
}
.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-bleu.svg) no-repeat center / contain;
	        mask: url(img/arrow-right-bleu.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-tint);
}
.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.secondary,
.section-flexible.rouge,
.section-flexible .noir,
.section-flexible .primary,
.section-flexible .secondary,
.section-flexible .rouge {
	--color-fg:    var(--color-blanc);
	--color-trait: var(--color-blanc);
	color: var(--color-fg);
}
.section-flexible:is(.noir, .primary, .secondary, .rouge) :is(h1, h2, h3, h4, h5, h6, p, li):not([class*="color-"]),
.section-flexible :is(.noir, .primary, .secondary, .rouge) :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:is(.noir, .primary, .secondary, .rouge) .color-noir,
.section-flexible :is(.noir, .primary, .secondary, .rouge) .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 : médaillon réduit */
	.carte-temoignage .photo-temoignage {
		width: 120px;
		height: 120px;
	}

	/* É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;
}