/*
Theme Name: Cité de la Cosmétique
Theme URI: https://citedelacosmetique.fr
Author: MAP EMULSION
Author URI: https://map-emulsion.com
Description: Thème bloc (FSE) du site de la Cité de la Cosmétique — Marseille 13015. Styles globaux, en-tête, pied de page et motifs de sections.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 0.5.8
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cdlc
Tags: full-site-editing, block-theme, one-page, business
*/

/* =========================================================================
   Sommaire
   1. Base
   2. En-tête / navigation
   3. Sections
   4. Titres de section, surtitres, textes
   5. Cartes
   5b. Cartes issues des articles (bloc Requête)
   5c. Carrousel d'actualités (bloc cdlc/actualites)
   6. Grilles
   7. Étiquettes (tags)
   8. Boutons
   9. Héros et bandes photo
   10. Listes à puces rondes
   11. Cartes résidents
   12. Carte / iframe
   13. Formulaire Contact Form 7
   14. Pied de page
   15. Utilitaires
   16. Responsive
   17. Effet sur les images
   18. Atouts interactifs (bloc cdlc/atouts)	
   ========================================================================= */

/* 1. Base ---------------------------------------------------------------- */

/* Fond de page gris + tout le site dans une colonne blanche centrée de 1440 px.
   Les blocs « pleine largeur » vont bord à bord DE LA COLONNE, pas de l'écran. */
html {
	background: var(--wp--preset--color--gris, #eef1f5);
}
body {
	background: var(--wp--preset--color--gris, #eef1f5);
}
.wp-site-blocks {
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	background: var(--wp--preset--color--blanc, #fff);
	overflow-x: clip;
}

img {
	max-width: 100%;
	height: auto;
}

.cdlc-motif {
	position: absolute;
	pointer-events: none;
	z-index: 0;
}

.wp-site-blocks > main,
.wp-site-blocks > header,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

.is-center{
	margin-left: auto !important;
	margin-right: auto !important;
}
/* 2. En-tête / navigation ------------------------------------------------ */

.cdlc-header {
	position: sticky;
	top: 0;
	margin-left: auto;
	margin-right: auto;
	z-index: 100;
	background: var(--wp--preset--color--blanc);
	border-bottom: 1px solid rgba(23, 38, 58, .08);
	transition: box-shadow .25s ease;
}
.admin-bar .cdlc-header {
	top: 32px;
}
.cdlc-header.is-scrolled {
	box-shadow: 0 6px 24px rgba(23, 38, 58, .08);
}
.cdlc-header .wp-block-site-logo img {
	display: block;
	height: 38px;
	width: auto;
}
.cdlc-header .wp-block-button__link {
	padding: 11px 24px;
	font-size: 13px;
}

.cdlc-nav a,
.cdlc-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--encre);
	letter-spacing: .02em;
	text-decoration: none;
}
.cdlc-nav a:hover,
.cdlc-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--vert);
}

/* 3. Sections ------------------------------------------------------------ */

.cdlc-section {
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--60);
	position: relative;
}
.cdlc-section--compact {
	padding-top: var(--wp--preset--spacing--50);
	padding-bottom: var(--wp--preset--spacing--50);
}
.cdlc-section--blanc { background: var(--wp--preset--color--blanc); }
.cdlc-section--gris  { background: var(--wp--preset--color--gris-clair); }
.cdlc-section--bleu  { background: var(--wp--preset--color--bleu); }
.cdlc-section--encre { background: var(--wp--preset--color--encre); }

/* 4. Titres de section, surtitres, textes -------------------------------- */

.cdlc-section__head {
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	margin-bottom: var(--wp--preset--spacing--50);
}
.cdlc-section__head--left {
	margin-left: 0;
	text-align: left;
}

.cdlc-eyebrow {
	display: block;
	margin-bottom: 12px;
	font-family: var(--wp--preset--font-family--texte);
	font-weight: 700;
	font-size: 12px;
	line-height: 1;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--vert);
}
.cdlc-eyebrow--jaune { color: var(--wp--preset--color--jaune); }
.cdlc-eyebrow--blanc { color: rgba(255, 255, 255, .8); }

.cdlc-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 700;
	line-height: 1.2;
	text-wrap: pretty;
}
.cdlc-lead {
	margin: 14px 0 0;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(23, 38, 58, .7);
}
.cdlc-text-muted { color: rgba(23, 38, 58, .7); }
.cdlc-text-inverse { color: var(--wp--preset--color--blanc); }
.cdlc-text-inverse-muted { color: rgba(255, 255, 255, .8); }
.cdlc-section--bleu .cdlc-lead,
.cdlc-section--encre .cdlc-lead { color: rgba(255, 255, 255, .8); }

/* 5. Cartes -------------------------------------------------------------- */

.cdlc-card {
	background: var(--wp--preset--color--gris-clair);
	border-radius: 16px;
	overflow: hidden;
	height: 100%;
}
.cdlc-card--blanc { background: var(--wp--preset--color--blanc); }
.cdlc-card--lg { border-radius: 20px; }
.cdlc-card--bordered {
	background: var(--wp--preset--color--blanc);
	border: 2px solid transparent;
}
.cdlc-card--bordered.is-active,
.cdlc-card--bordered:hover {
	border-color: var(--wp--preset--color--vert);
}
.cdlc-card__media img,
.cdlc-card > figure img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
}
.cdlc-card__media--sm img { height: 160px; }
.cdlc-card__body {
	padding: 28px;
}
.cdlc-card__body--sm { padding: 20px; }
.cdlc-card__body > * { margin-top: 0; }
.cdlc-card__body h3 {
	margin: 0 0 12px;
}
.cdlc-card__body p {
	margin: 0 0 16px;
	font-size: 14.5px;
	line-height: 1.6;	
}
.cdlc-card__extract{
	color: rgba(23, 38, 58, .7);
}
.cdlc-card__date {
	font-weight: 600;
	font-size: 12px;
	line-height: 1;
	color: rgba(23, 38, 58, .5);
	margin: 14px 0 10px;
}
.cdlc-panel {
	background: var(--wp--preset--color--blanc);
	border-radius: 16px;
	padding: 36px 44px;
}
.cdlc-panel--plat { border-radius: 4px; padding: 32px; }

/* 5b. Cartes issues des articles (bloc Requête) ------------------------- */

.cdlc-posts .wp-block-post-template {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cdlc-posts .wp-block-post {
	margin: 0;
}
.cdlc-posts .cdlc-card__media,
.cdlc-posts .wp-block-post-featured-image {
	margin: 0;
}
.cdlc-posts .wp-block-post-featured-image img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
}
.cdlc-posts .wp-block-post-terms {
	display: inline-block;
}
.cdlc-posts .wp-block-post-terms a,
.cdlc-posts .wp-block-post-terms .wp-block-post-terms__separator {
	color: inherit;
	text-decoration: none;
}
.cdlc-posts .wp-block-post-terms .wp-block-post-terms__separator {
	margin: 0 4px;
}
.cdlc-posts .wp-block-post-title {
	margin: 0 0 12px;
	font-size: var(--wp--preset--font-size--grand);
	line-height: 1.3;
}
.cdlc-posts .wp-block-post-title a {
	color: var(--wp--preset--color--encre);
	text-decoration: none;
}
.cdlc-posts .wp-block-post-title a:hover {
	color: var(--wp--preset--color--vert);
}
.cdlc-posts .wp-block-post-excerpt {
	margin: 0 0 16px;
}
.cdlc-posts .wp-block-post-excerpt__excerpt {
	font-size: 14.5px;
	line-height: 1.6;
	color: rgba(23, 38, 58, .7);
}
.cdlc-posts .wp-block-post-excerpt__more-text {
	margin: 0;
}
.cdlc-readmore,
.cdlc-posts .wp-block-read-more {
	display: inline-block;
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
	color: var(--wp--preset--color--bleu);
	text-decoration: none;
}
.cdlc-readmore:hover,
.cdlc-posts .wp-block-read-more:hover {
	color: var(--wp--preset--color--vert);
}
.cdlc-posts .wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--50);
	font-size: 13px;
	font-weight: 600;
}

/* 5c. Carrousel d'actualités (bloc cdlc/actualites) ---------------------- */

.cdlc-actus__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: var(--wp--preset--spacing--40);
}
.cdlc-actus__nav {
	display: flex;
	gap: 10px;
	flex: none;
}
.cdlc-arrow {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid rgba(23, 38, 58, .15);
	border-radius: 50%;
	background: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--encre);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.cdlc-arrow svg {
	width: 20px;
	height: 20px;
}
.cdlc-arrow:hover:not( :disabled ) {
	background: var(--wp--preset--color--vert);
	border-color: var(--wp--preset--color--vert);
	color: var(--wp--preset--color--blanc);
}
.cdlc-arrow:disabled {
	opacity: .3;
	cursor: default;
}

.cdlc-actus__piste {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc( ( 100% - 24px ) / 2 );
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.cdlc-actus__piste::-webkit-scrollbar {
	display: none;
}
.cdlc-actus[data-visibles="1"] .cdlc-actus__piste { grid-auto-columns: 100%; }
.cdlc-actus[data-visibles="3"] .cdlc-actus__piste { grid-auto-columns: calc( ( 100% - 48px ) / 3 ); }
.cdlc-actus[data-visibles="4"] .cdlc-actus__piste { grid-auto-columns: calc( ( 100% - 72px ) / 4 ); }

.cdlc-actus__item {
	scroll-snap-align: start;
	margin: 0;
}
.cdlc-actus__item .cdlc-card__media {
	display: block;
}
.cdlc-actus__item .cdlc-card__media img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
}
.cdlc-actus__item .cdlc-title a {
	color: var(--wp--preset--color--encre);
	text-decoration: none;
}
.cdlc-actus__item .cdlc-title a:hover {
	color: var(--wp--preset--color--vert);
}
.cdlc-card__date-fin {
	color: var(--wp--preset--color--vert);
	font-weight: 700;
}
.cdlc-card__date-fin::before {
	content: "·";
	margin: 0 6px;
	color: rgba(23, 38, 58, .35);
}

/* 6. Grilles ------------------------------------------------------------- */

.cdlc-grid {
	display: grid;
	gap: 24px;
}
.cdlc-grid--2 { grid-template-columns: repeat(2, 1fr); }
.cdlc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.cdlc-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cdlc-grid--gap-sm { gap: 16px; }
.cdlc-grid--gap-lg { gap: 56px; }

/* 7. Étiquettes ---------------------------------------------------------- */

.cdlc-tag {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 3px;
	font-family: var(--wp--preset--font-family--texte);
	font-weight: 700;
	font-size: 11px !important;
	line-height: 1;
	letter-spacing: .04em;
	text-transform: uppercase;
	background: var(--wp--preset--color--vert);
	color: var(--wp--preset--color--blanc);
	margin-bottom: 14px;
}
.cdlc-tag--bleu  { background: var(--wp--preset--color--bleu); color: #fff; }
.cdlc-tag--jaune { background: var(--wp--preset--color--jaune); color: var(--wp--preset--color--encre); }
.cdlc-tag--lieu {
	padding: 7px 14px;
	font-size: 12px;
	letter-spacing: .06em;
	border-radius: 2px;
	margin-bottom: 22px;
}

/* 8. Boutons ------------------------------------------------------------- */

.cdlc-btn .wp-block-button__link,
.wp-block-button.cdlc-btn > a {
	border-radius: 24px;
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	padding: 15px 28px;
}
.cdlc-btn--clair .wp-block-button__link {
	background: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--encre);
}
.cdlc-btn--clair .wp-block-button__link:hover {
	background: var(--wp--preset--color--jaune);
	color: var(--wp--preset--color--encre);
}

/* 9. Héros et bandes photo ---------------------------------------------- */

.cdlc-hero.wp-block-cover {
	min-height: 640px;
	padding: 0;
	align-items: flex-end;
	overflow: hidden;
}
.cdlc-hero .wp-block-cover__inner-container {
	padding: var(--wp--preset--spacing--70);
}
.cdlc-hero__panel {
	max-width: 600px;
	padding: 48px 52px;
	border-radius: 4px;
	background: var(--wp--preset--color--jaune);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
	position: relative;
	z-index: 1;
}
.cdlc-hero.masque::after {
    position: fixed;
    opacity: 30% !important;
}
.cdlc-hero__panel h1 {
	margin: 0 0 20px;
	color: var(--wp--preset--color--blanc);
}
.cdlc-hero__panel p {
	margin: 0 0 32px;
	font-size: 17px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .88);
}

.cdlc-band.wp-block-cover {
	min-height: 340px;
	padding: 0;
	overflow: hidden;
}
.cdlc-band .wp-block-cover__inner-container {
	padding: 0 var(--wp--preset--spacing--70);
	max-width: 620px;
	margin-right: auto;
}
.cdlc-band h2,
.cdlc-band h3 {
	margin: 0 0 12px;
	font-size: 26px;
	color: var(--wp--preset--color--blanc);
	text-shadow: 0 4px 12px rgba(0, 0, 0, .5);
}
.cdlc-band p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .85);
	text-shadow: 0 4px 12px rgba(0, 0, 0, .55);
}

/* 10. Listes à puces rondes --------------------------------------------- */

.cdlc-list-dots {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 28px;
}
.cdlc-list-dots li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	line-height: 1.5;
	color: rgba(23, 38, 58, .78);
}
.cdlc-list-dots li::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--jaune);
}
.cdlc-list-dots--col {
	flex-direction: column;
	gap: 8px;
}
.cdlc-list-dots--bleu li::before { background: var(--wp--preset--color--bleu); }
.cdlc-list-dots--bleu li {
	font-size: 13px;
	font-weight: 500;
	color: rgba(23, 38, 58, .65);
}

/* 11. Cartes résidents -------------------------------------------------- */

.cdlc-resident {
	background: rgba(255, 255, 255, .08);
	border-radius: 12px;
	padding: 20px;
	min-height: 110px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
}
.cdlc-resident__nom {
	font-family: var(--wp--preset--font-family--titre);
	font-weight: 700;
	font-size: 14.5px;
	line-height: 1.3;
	color: var(--wp--preset--color--blanc);
	margin: 0;
}
.cdlc-resident__note {
	margin: 10px 0 0;
	font-weight: 500;
	font-size: 11.5px;
	line-height: 1.4;
	color: rgba(236, 236, 236, .55);
}
.cdlc-resident--visuel {
	background: transparent;
	padding: 0;
	min-height: 0;
}
.cdlc-resident--visuel img {
	width: 100%;
	display: block;
	border-radius: 12px;
}
.cdlc-social-widget{
	height: 100%;
}

.cdlc-section-residents .is-style-card {
    width: 100%;
	height: 100%;
    justify-content: space-between;
}
.cdlc-section-residents .is-style-card figure {
	height: 100px;
	justify-content: center;
    align-items: center;
    display: flex;
    width: 100%;
}
.cdlc-section-residents .is-style-card img {
    max-height: 100px;
    width: auto;
}

figure.capsudev{
	height: auto !important;
}
 .capsudev img{
    max-width: 100%;
    width: 200px !important;
    height: auto !important;
    max-height: none !important;
}

/* 12. Carte / iframe ---------------------------------------------------- */

.cdlc-map {
	border-radius: 4px;
	overflow: hidden;
	height: 260px;
	width: 100%;
}
.cdlc-map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}



/* 13. Formulaire Contact Form 7 ----------------------------------------- */

.cdlc-form {
	background: var(--wp--preset--color--blanc);
	border-radius: 4px;
	padding: 32px;
}
.cdlc-form .wpcf7-form > p,
.cdlc-form form > p {
	margin: 0 0 16px;
}
.cdlc-form label {
	display: block;
	font-weight: 600;
	font-size: 13px;
	color: var(--wp--preset--color--encre);
	margin-bottom: 6px;
}
.cdlc-form input[type="text"],
.cdlc-form input[type="email"],
.cdlc-form input[type="tel"],
.cdlc-form input[type="url"],
.cdlc-form input[type="date"],
.cdlc-form input[type="number"],
.cdlc-form select,
.cdlc-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 14px 16px;
	border: 1px solid rgba(23, 38, 58, .15);
	border-radius: 2px;
	background: var(--wp--preset--color--blanc);
	font-family: var(--wp--preset--font-family--texte);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.4;
	color: var(--wp--preset--color--encre);
	transition: border-color .2s ease;
}
.cdlc-form textarea {
	resize: vertical;
	min-height: 110px;
}
.cdlc-form input::placeholder,
.cdlc-form textarea::placeholder {
	color: rgba(23, 38, 58, .45);
}
.cdlc-form input:focus,
.cdlc-form select:focus,
.cdlc-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--vert);
}
.cdlc-form input[type="submit"],
.cdlc-form .wpcf7-submit {
	width: 100%;
	padding: 15px 28px;
	border: none;
	border-radius: 24px;
	background: var(--wp--preset--color--vert);
	color: var(--wp--preset--color--blanc);
	font-family: var(--wp--preset--font-family--texte);
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease;
}
.cdlc-form input[type="submit"]:hover,
.cdlc-form .wpcf7-submit:hover {
	background: var(--wp--preset--color--encre);
}
.cdlc-form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}
.cdlc-form .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
	font-size: 12.5px;
	line-height: 1.5;
	color: rgba(23, 38, 58, .7);
}
.cdlc-form .wpcf7-acceptance input[type="checkbox"] {
	width: auto;
	margin-top: 2px;
	accent-color: var(--wp--preset--color--vert);
}
.cdlc-form .wpcf7-not-valid {
	border-color: #d94141;
}
.cdlc-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 500;
	color: #d94141;
}
.cdlc-form .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 14px 16px;
	border: none;
	border-radius: 4px;
	font-size: 13.5px;
	line-height: 1.5;
	background: var(--wp--preset--color--gris-clair);
	color: var(--wp--preset--color--encre);
}
.cdlc-form .wpcf7 form.sent .wpcf7-response-output {
	background: rgba(33, 168, 92, .12);
	color: #14713d;
}
.cdlc-form .wpcf7 form.invalid .wpcf7-response-output,
.cdlc-form .wpcf7 form.failed .wpcf7-response-output {
	background: rgba(217, 65, 65, .1);
	color: #a72c2c;
}
.cdlc-form .wpcf7-spinner {
	margin: 12px auto 0;
	display: block;
}

/* 14. Pied de page ------------------------------------------------------ */

.cdlc-footer {
	border-top: 1px solid rgba(23, 38, 58, .08);
	font-size: 12.5px;
}
.cdlc-footer p { margin: 0; }
.cdlc-footer .wp-block-site-logo img {
	height: 26px;
	width: auto;
	display: block;
}

/* 15. Utilitaires ------------------------------------------------------- */

.cdlc-radius-sm { border-radius: 4px; overflow: hidden; }
.cdlc-radius-md { border-radius: 12px; overflow: hidden; }
.cdlc-radius-lg { border-radius: 16px; overflow: hidden; }
.cdlc-shadow    { box-shadow: 0 12px 40px rgba(0, 0, 0, .18); }
.cdlc-clip      { overflow: hidden; }
.cdlc-relative  { position: relative; z-index: 1; }
.cdlc-center    { text-align: center; }
.cdlc-mb-0 { margin-bottom: 0; }
.cdlc-mb-sm { margin-bottom: 12px; }
.cdlc-mb-md { margin-bottom: 24px; }
.cdlc-mb-lg { margin-bottom: 48px; }

/* 16. Responsive -------------------------------------------------------- */

@media (max-width: 1024px) {
	.cdlc-grid--4 { grid-template-columns: repeat(3, 1fr); }
	.cdlc-hero__panel { padding: 36px 32px; }
}

@media (max-width: 781px) {
	.wp-block-navigation__responsive-container-content{
    	padding: 24px;
	}
	.wp-block-columns{
		gap: 24px;
	}
	.cdlc-actus__piste,
	.cdlc-actus[data-visibles="3"] .cdlc-actus__piste,
	.cdlc-actus[data-visibles="4"] .cdlc-actus__piste { grid-auto-columns: 100%; }
	.cdlc-actus__head { align-items: flex-start; flex-direction: column; }
	.cdlc-grid--2,
	.cdlc-grid--3 { grid-template-columns: 1fr; }
	.cdlc-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.cdlc-section-residents .cdlc-grid--4 { grid-template-columns: repeat(1, 1fr); }
	.cdlc-hero.wp-block-cover { min-height: 520px; }
	.cdlc-hero__panel { max-width: 100%; }
	.cdlc-band .wp-block-cover__inner-container { max-width: 100%; z-index: 1;}
	.cdlc-panel { padding: 24px; }
	.cdlc-form { padding: 24px; }
	.cdlc-header .wp-block-group.is-content-justification-space-between { gap: 12px; }
	.cdlc-footer .wp-block-group { gap: 16px; }
}


/* 17. Effet sur les images ---------------------------------------------- */

.masque {
  position: relative;
}

.masque::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--mask-color, #ff4d3d);    
  mask-position: center;
  mask-size: auto 100%;  
  pointer-events: none;  
  opacity: 50%;
}
.masque.overlay::after{
  mix-blend-mode: lighten;  
  opacity: 80%;
}
.masque.rayons::after{
	mask-image: url("./assets/rayons.svg");
	mask-repeat: no-repeat;
}
.masque.soleil::after{
	mask-image: url("./assets/soleil.svg");
	mask-repeat: no-repeat;
}
.masque.m::after{
	mask-image: url("./assets/monogramme.svg");
	mask-repeat: no-repeat;
}
.masque.vagues::after{
	mask-image: url("./assets/vagues.svg");
	mask-repeat: repeat;
    mask-size: auto;
}
.masque.gauche::after{
	mask-position: left;
}
.masque.droite::after{
	mask-position: right;
}
.masque.blanc{
	--mask-color: #fff;
}
.masque.jaune{
	--mask-color: var(--wp--preset--color--jaune);
}
.masque.bleu{
	--mask-color: var(--wp--preset--color--bleu);
}
.masque.vert{
	--mask-color: var(--wp--preset--color--vert);
}


/* 18. Atouts interactifs (bloc cdlc/atouts) ----------------------------- */

.cdlc-atouts {
	display: grid;
	grid-template-columns: repeat(var(--cdlc-atouts-cols, 3), 1fr);
	gap: 20px;
}
.cdlc-atout {
	display: contents;
}
.cdlc-atout__tab {
	grid-row: 1;
	display: block;
	width: 100%;
	text-align: left;
	padding: 0;
	background: var(--wp--preset--color--blanc);
	border: 2px solid transparent;
	border-radius: 16px;
	overflow: hidden;
	cursor: pointer;
	font: inherit;
	transition: border-color .2s ease, transform .2s ease;
}
.cdlc-atout__tab:hover,
.cdlc-atout__tab:focus-visible {
	border-color: var(--wp--preset--color--vert);
}
.cdlc-atout__tab.is-active {
	border-color: var(--wp--preset--color--vert);
}
.cdlc-atout__img {
	display: block;
	width: 100%;
	height: var(--cdlc-atouts-img, 160px);
	object-fit: cover;
}
.cdlc-atout__titre {
	display: block;
	padding: 20px;
	font-family: var(--wp--preset--font-family--titre, "Poppins", sans-serif);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.3;
	color: rgba(23, 38, 58, .45);
	transition: color .2s ease;
}
.cdlc-atout__tab.is-active .cdlc-atout__titre,
.cdlc-atout__tab:hover .cdlc-atout__titre {
	color: var(--wp--preset--color--marine, #17263a);
}
.cdlc-atout__panel {
	grid-column: 1 / -1;
	grid-row: 2;
	background: var(--wp--preset--color--blanc);
	border-radius: 16px;
	padding: 36px 44px;
}
.cdlc-atout__panel[hidden] {
	display: none;
}

/* Éditeur : même grille 3 colonnes que le front, panneaux empilés dessous. */
.cdlc-atouts--editeur {
	display: block;
}

.cdlc-atouts--editeur > .block-editor-inner-blocks > .block-editor-block-list__layout {
	display: grid;
	grid-template-columns: repeat(var(--cdlc-atouts-cols, 3), 1fr);
	gap: 20px;
	align-items: start;
}
.cdlc-atouts--editeur .cdlc-atout {
	display: block;
}
.cdlc-atouts--editeur .cdlc-atout__tab {
	grid-row: auto;
	border-color: var(--wp--preset--color--vert);
	cursor: default;
}
.cdlc-atouts--editeur .cdlc-atout__panel {
	grid-column: auto;
	grid-row: auto;
	margin-top: 12px;
	padding: 20px;
}

.cdlc-atouts--editeur .cdlc-atout__titre {
	color: var(--wp--preset--color--marine, #17263a);
}

.cdlc-atouts--editeur .block-list-appender {
	grid-row: 1;
	align-self: center;
}

@media (max-width: 781px) {
	.cdlc-atouts {
		grid-template-columns: 1fr;
	}
	.cdlc-atout__tab { grid-row: auto; }
	.cdlc-atout__panel {
		grid-row: auto;
		padding: 24px;
	}
}