/*
 Theme Name:   MyCoWork Thème
 Description:  Thème pour le site de My CoWork
 Author:       Matthieu Devaux Webdesigner
 Author URI:   https://www.md-webdesigner.com/
 Template:     hello-elementor
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/


html {
    font-size: 62.5%;
}

.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 999;
}
.admin-bar .elementor-location-header { top: 32px; }

h1 strong, h2 strong, h3 strong {
	border-radius: 16px;
background: #FFC53A;
	color:#fff;
box-shadow: 4px 4px 0 0 #E8D9C5;
	display: inline-flex;
transform: rotate(-2deg);
padding: 8px 23.859px 8px 24.141px;
justify-content: center;
align-items: center;
}

.cartouche-insight strong {
	margin:0 10px;
}

h1.cartouche-bleu strong, h2.cartouche-bleu strong, h3.cartouche-bleu strong {
	border-radius: 12px;
background: #65AFE5;
	box-shadow:none;
}

.carousel-hero, .carousel-hero .elementor-widget-n-carousel, .carousel-hero .elementor-widget-n-carousel *:not(.elementor-widget-icon-list, .elementor-widget-icon-list, .swiper-pagination, .swiper-pagination-bullet) {
    height: 100%!important;
}

.carousel-hero .swiper-slide,
.carousel-hero .e-n-carousel.swiper,
.carousel-hero .elementor-image-carousel-wrapper,
.carousel-hero .swiper-slide .e-con,
.carousel-hero .swiper-slide .e-con-inner,
.carousel-hero .swiper-slide figure,
.carousel-hero .swiper-slide img {
  height: 100% !important;
}
.carousel-hero .swiper-slide img {
  object-fit: cover !important;
  width: 100% !important;
}

.carousel-salles .swiper-pagination {
	bottom:30px!important;
}

.carousel-salles .swiper-pagination-bullet { background:#fff!important;}
.swiper-pagination-bullet-active {width:32px!important;border-radius:25px!important}

/* bandeau bleu défilant */
:root{
  --marquee-bg: #4a90d9;
  --marquee-color: #ffffff;
  --marquee-speed: 100s;      /* plus grand = plus lent */
  --marquee-gap: 2.5rem;     /* espace entre les groupes */
}
 
.marquee{
  background: var(--marquee-bg);
  overflow: hidden;
  padding: 25px 0;
  display: flex;
  user-select: none;
}
 
.marquee__track{
  display: flex;
  flex-shrink: 0;
  gap: var(--marquee-gap);
  padding-right: var(--marquee-gap);
  min-width: 100%;
  animation: marquee-scroll var(--marquee-speed) linear infinite;
}
 
.marquee:hover .marquee__track{ animation-play-state: paused; }
 
.marquee__item{
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 3rem;
	line-height:3.6rem;
  letter-spacing: 0.15rem;
  color: var(--marquee-color);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--marquee-gap);
}
 
/* la puce séparatrice */
.marquee__item::after{
  content: "•";
  font-size:3rem;
  line-height: 3.6rem;
}
 
@keyframes marquee-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(calc(-100% - var(--marquee-gap))); }
}
 
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation: none; }
  .marquee{ overflow-x: auto; }
}

.marquee2{
  background: #2E1A10;
  overflow:hidden;
  padding:20px 0;
  display:flex;
  user-select:none;
}
.marquee2__track{
  display:flex;
  flex-shrink:0;
  gap:2.75rem;                 
  padding-right:2.75rem;
  min-width:100%;
  animation:marquee2-scroll 40s linear infinite;   /* vitesse : + grand = + lent */
}
.marquee2:hover .marquee2__track{animation-play-state:paused;}
.marquee2__item{
  font-family:"Space Grotesk",sans-serif;
  font-weight:700;
  font-size:1.7rem;
	line-height:2.55rem;
  letter-spacing:.03rem;
  color:#fff;                 /* doré */
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:2.75rem;
}

.marquee2__item svg {
	width:18px;
}
.marquee2__item::after{
  content:"\2726";               /* etoile ✦ */
  color:#c79a3b;
  font-size:0.7em;
  line-height:1;
}
@keyframes marquee2-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(calc(-100% - 2.75rem));}
}
@media (prefers-reduced-motion:reduce){
  .marquee2__track{animation:none;}
  .marquee2{overflow-x:auto;}
}

#map-beaubourg, #map-montorgueil, #map {
	border-radius: 48px;
border: 3px solid #E8D9C5;
background: #FFF;
box-shadow: 8px 8px 0 0 #E8D9C5;
}

.map-accordeon .e-n-accordion-item-title {
	background: #FFF;
	border-radius:32px!important;
	border-bottom: 2px solid #E8D9C5!important;
	border-style:solid!important;
	box-shadow: 5.88px 5.88px 0 0 #E8D9C5;
}

.map-accordeon .e-n-accordion-item[open] .e-n-accordion-item-title {
	border-radius:32px 32px 0 0!important;
	border: 2px solid #E8D9C5!important;
	border-bottom:none!important;
	box-shadow:none;
}


.faq .e-n-accordion-item[open] {
	border-radius: 32px;
border: 2px solid #FFC53A!important;
background: #FFF;
box-shadow: 6px 6px 0 0 #FFC53A!important;
}

.faq .e-n-accordion-item[open] .e-n-accordion-item-title {
	border:none!important;
	border-color:transparent!important;
	box-shadow:none;
}
.faq .e-n-accordion-item .e-n-accordion-item-title {
	border-radius: 31px;
	background:#fff;
	border-bottom: 1.96px solid #E8D9C5!important;
	border-style:solid!important;
box-shadow: 5.88px 5.88px 0 0 #E8D9C5;
}

.btn-icon svg {
    width: 6.17px!important;
}

.card-avantages .elementor-icon {
	border-radius: 24px;
border: 2px solid #E8D9C5;
background: #FFF;
box-shadow: 4px 4px 0 0 #E8D9C5;
}

.box-contact a {
	color:inherit!important;
}

.btn-readmore .elementor-button-content-wrapper,
.btn-icon .elementor-button-content-wrapper{
	align-items:center;
}

.btn-readmore svg {
	width:32px!important
}

.dialog-lightbox-widget-content {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  max-width: 90vw !important;
  max-height: 90vh !important;
}

.carousel-logos figure.swiper-slide-inner {
    border-radius: 16px;
    border: 2px solid #E8D9C5;
    background: #FFF;
    box-shadow: 3px 3px 0 0 #E8D9C5;
    width: 171px;
    height: 96px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-logos img {
	width:97px;
	height:90px!important;
	object-fit:contain;
	border-radius: 16px;
}

.carousel-logos .swiper-pagination {
	bottom:-30px!important
}

.carousel-hero.carousel-salles.carousel-privatisation .swiper-slide img {
    max-height: 630px !important;
}

figcaption.elementor-image-carousel-caption {
    display: none;
}

.carousel img.swiper-slide-image {
    height: 350px;
    object-fit: cover;
    width: 100%;
}

.single .elementor-widget-theme-post-content .elementor-widget-text-editor p {
    font-family: 'Sora';
    color: #1C1009;
    font-size: 1.6rem;
    line-height: 2.8rem;
	margin-bottom:25px;
}

.single .elementor-widget-theme-post-content .elementor-widget-text-editor h1	, .single .elementor-widget-theme-post-content .elementor-widget-text-editor h2, .single .elementor-widget-theme-post-content .elementor-widget-text-editor h3, .single .elementor-widget-theme-post-content .elementor-widget-text-editor h4, .single .elementor-widget-theme-post-content .elementor-widget-text-editor h5, .single .elementor-widget-theme-post-content .elementor-widget-text-editor h6, 
.single .elementor-widget-theme-post-content .elementor-heading-title {
	margin:30px 0 20px;
	color:#1C1009!important;
	font-family:'Space Grotesk'!important;
}

.single .elementor-widget-theme-post-content .elementor-widget-text-editor a {
	color:#3D2008
}


/* effets d'apparition */
@media (prefers-reduced-motion: no-preference) {

  /* ---------- Titres ---------- */
  .md-js .md-title:not(.is-visible) {
    opacity: 0;
  }
  .md-js .md-title.is-visible {
    opacity: 1;
    animation: md-title-in 3.5s cubic-bezier(.19, 1, .22, 1) backwards;
  }

  /* ---------- Cards / éléments en cascade ---------- */
  .md-js .md-stagger .md-item {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s ease, transform .9s cubic-bezier(.19, 1, .22, 1);
    transition-delay: calc(var(--i, 0) * 120ms);
  }
  .md-js .md-stagger.is-visible .md-item {
    opacity: 1;
    transform: none;
  }

  /* ---------- Fondu simple ---------- */
  .md-js .md-fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .8s ease, transform .9s cubic-bezier(.19, 1, .22, 1);
  }
  .md-js .md-fade.is-visible {
    opacity: 1;
    transform: none;
  }
}

@keyframes md-title-in {
  from {
    opacity: 1;
    clip-path: inset(100% -2em 0 -2em);
    transform: translateY(.6em);
  }
  to {
    opacity: 1;
    clip-path: inset(-2em);
    transform: none;
  }
}

@media (min-width:1650px) {
	.page h1:not(.center-title) {
    	margin-right: 11vw !important;
	}
	
	.page h1:not(.center-title) + p {
    	margin-right: 6vw !important;
	}
}

@media (min-width:1025px) {
	.desktop-nopagination .swiper-pagination {display:none;}
}

@media (max-width:767px) {
	
h1 strong, h2 strong, h3 strong {padding: 8px 14px 8px 14px;}
	.carousel-logos figure.swiper-slide-inner { width:100%}
}

/* ==========================================================================
   TEST (06/10/2026) — Plafond de hauteur des carrousels hero — DEBUT
   Sur ordinateur, le carrousel ne dépasse plus la hauteur de l'écran et reste
   collé sous le header pendant le défilement, au lieu de s'étirer sur toute la
   hauteur de la colonne de texte (photos moins agrandies et moins rognées).
   Pour revenir en arrière : supprimer tout ce bloc, jusqu'à la ligne "FIN".
   ========================================================================== */
@media (min-width: 1025px) {
	.elementor-widget.carousel-hero {
		position: sticky;
		top: 85px;
		align-self: flex-start;
		max-height: calc(100vh - 85px) !important;
	}
}
/* TEST — Plafond de hauteur des carrousels hero — FIN */

/* ==========================================================================
   TEST (07/10/2026) — Cartouches de titre qui épousent le texte — DEBUT
   La cartouche devient un surlignage ligne par ligne : quand le titre passe sur
   plusieurs lignes, chaque ligne a son propre fond, ajusté à la largeur du texte
   (plus de grand fond vide à droite). Contrepartie : plus d'inclinaison (-2deg),
   une transformation ne s'applique pas à un élément "inline".
   Pour revenir en arrière : supprimer tout ce bloc, jusqu'à la ligne "FIN".
   ========================================================================== */
h1 strong, h2 strong, h3 strong {
	display: inline;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transform: none;
	padding: 8px 20px;
	line-height: 1.4; /* les lignes se chevauchent : une seule cartouche en escalier */
}
/* TEST — Cartouches de titre qui épousent le texte — FIN */

/* Cartouches inclinées : s'applique quand le script a ajouté la balise interne */
h1 strong.cartouche-js, h2 strong.cartouche-js, h3 strong.cartouche-js {
	display: inline-block;
	transform: rotate(-2deg);
	transform-origin: center;
	background: none;
	box-shadow: none;
	padding: 10px 0; /* réserve la hauteur du fond pour ne pas chevaucher la ligne voisine */
	margin: 4px 10px 4px 0; /* espace après la cartouche ; rien à gauche pour rester aligné en début de ligne */
	border-radius: 0;
	line-height: inherit;
}
strong.cartouche-js > span {
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	background: #FFC53A;
	border-radius: 16px;
	box-shadow: 4px 4px 0 0 #E8D9C5;
	padding: 8px 20px;
	line-height: 1.4;
}
.cartouche-bleu strong.cartouche-js > span {
	background: #65AFE5;
	border-radius: 12px;
	box-shadow: none;
}

/* ==========================================================================
   TEST (07/10/2026) — Espace uniforme de 60px sous les hero avec photo — DEBUT
   S'applique au premier bloc de chaque page quand il contient un carrousel/photo
   "carousel-hero" : 60px sous la photo, et plus de marge variable (0, 20 ou 50px)
   au-dessus de la section suivante.
   Pour revenir en arrière : supprimer tout ce bloc, jusqu'à la ligne "FIN".
   ========================================================================== */
[data-elementor-type="wp-page"] > .elementor-element:first-child:has(.carousel-hero) {
	padding-bottom: 60px !important;
}
[data-elementor-type="wp-page"] > .elementor-element:first-child:has(.carousel-hero) + .elementor-element {
	margin-top: 0 !important;
}
/* Accueil : supprime les 22px réservés à la pagination sous le carrousel */
.carousel-hero .e-n-carousel.swiper {
	padding-bottom: 0 !important;
}
/* Montorgueil : la photo remplit toute la hauteur de la colonne (plus de vide de 88px dessous) */
.elementor-11046 .carousel-hero.carousel-privatisation .swiper-slide img {
	max-height: none !important;
}
/* Bureaux : la colonne photo suit la hauteur de la colonne texte (plus de vide de 62px dessous) */
.elementor-10754 > .elementor-element:first-child > .elementor-element:has(> .carousel-hero) {
	height: auto !important;
	min-height: 100vh;
	align-self: stretch !important;
}
/* TEST — Espace uniforme de 60px sous les hero avec photo — FIN */

/* Cartouches : espace selon le contexte (classes posées par le script de functions.php).
   .cartouche-ctx   = le script contextuel tourne ; on annule la marge fixe
   .cartouche-avant = il y a un mot avant la cartouche sur la même ligne
   .cartouche-apres = il y a un mot après la cartouche sur la même ligne */
:is(h1, h2, h3) strong.cartouche-js.cartouche-ctx {
	margin-left: 0;
	margin-right: 0;
}
:is(h1, h2, h3) strong.cartouche-js.cartouche-ctx.cartouche-avant {
	margin-left: 10px;
}
:is(h1, h2, h3) strong.cartouche-js.cartouche-ctx.cartouche-apres {
	margin-right: 10px;
}

/* ===== EDITEUR ELEMENTOR : effets md- desactives - DEBUT =====
   Dans l'editeur, les elements .md-title / .md-fade / .md-stagger restent
   visibles (sinon ils sont invisibles tant que le script ne les a pas reveles).
   Aucun effet sur le site public. */
body.elementor-editor-active .md-title,
body.elementor-editor-active .md-fade,
body.elementor-editor-active .md-stagger .md-item {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
	animation: none !important;
}
/* ===== EDITEUR ELEMENTOR : effets md- desactives - FIN ===== */

/* ===== Carrousels hero sur mobile/tablette : plus de fond flou (09/10/2026) - DEBUT =====
   Sous 1025px, le carrousel prend un format 4:3 et le fond du conteneur (photo
   agrandie et floue) n'apparait plus. Pour revenir en arriere : supprimer ce bloc. */
@media (max-width: 1024px) {
	.e-con:has(> .elementor-widget.carousel-hero),
	.e-con:has(> .e-con-inner > .elementor-widget.carousel-hero) {
		background-image: none !important;
		min-height: 0 !important;
		height: auto !important;
	}
	.elementor-widget.carousel-hero {
		height: auto !important;
		min-height: 0 !important;
		aspect-ratio: 4 / 3;
		max-height: 70vh;
	}
	.elementor-widget.carousel-hero .elementor-widget-container,
	.elementor-widget.carousel-hero .swiper,
	.elementor-widget.carousel-hero .swiper-wrapper,
	.elementor-widget.carousel-hero .swiper-slide,
	.elementor-widget.carousel-hero .swiper-slide-inner {
		height: 100% !important;
	}
	.elementor-widget.carousel-hero .swiper-slide-image {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}
}
/* ===== Carrousels hero sur mobile/tablette : plus de fond flou - FIN ===== */

/* ===== Retours Anais/Marin 09/10/2026 - DEBUT ===== */
/* Curseur "main" sur tous les boutons (dont les boutons Reserver qui ouvrent une popup) */
button.e-button-base,
.e-button-base,
.elementor-button,
[data-elementor-open-lightbox] { cursor: pointer; }

/* Accueil : carrousel de photos sous "L'ambiance myCowork" */
.carousel-insta .swiper-slide-image {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	border-radius: 16px;
}
/* Coches vertes des listes (cartes formules) : pastille verte pleine + coche blanche */
.elementor-icon-list-icon svg path[fill-opacity="0.125"] { fill-opacity: 1; }
.elementor-icon-list-icon svg path[stroke="#81B29A"] { stroke: #fff; stroke-width: 2; }
/* ===== Retours Anais/Marin 09/10/2026 - FIN ===== */

/* ===== Header compact sur ecrans moyens (12/10/2026) - DEBUT =====
   Entre 1025 et 1279 px : police et espacements du menu reduits pour que tout tienne
   avant le passage au menu burger. Pour revenir en arriere : supprimer ce bloc. */
@media (min-width: 1025px) and (max-width: 1279px) {
	[data-elementor-type="header"] .elementor-nav-menu--main .elementor-item { font-size: 14px !important; padding-left: 8px !important; padding-right: 8px !important; margin-left: 2px !important; margin-right: 2px !important; }
	[data-elementor-type="header"] .elementor-nav-menu--main .elementor-nav-menu > li { flex-grow: 0 !important; }
	[data-elementor-type="header"] .elementor-widget-nav-menu { flex-grow: 0 !important; width: auto !important; }
}
/* ===== Header compact - FIN ===== */