/*
Theme Name: charlotte-theme
Theme URI: 
Author: 
Author URI: 
Description: 
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: charlotte-theme
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/* ==========================================================================
   1. RESET & BASE
   ========================================================================== */

* {
	box-sizing: border-box;
}

body {
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}

summary, a, a:focus, summary:focus {
	outline: 0;
}

.wp-site-blocks {
	overflow-x: hidden;
}

a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

.link__call a {
	text-decoration: none !important;
}

.link__call a mark strong:hover {
	color: var(--wp--preset--color--accent-2);
}

:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

.more-link {
	display: block;
}

/* ==========================================================================
   2. NAVIGATION & LIENS
   ========================================================================== */

.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

.wp-block-navigation-item__content {
	text-decoration: none;
	outline: 0;
}

.custom-logo-link:focus {
	outline: 0;
}

.wp-block-navigation-item__content:hover {
	color: #FF9445 !important;
}

.wp-block-navigation-item.current-menu-item > a,
.wp-block-navigation-item.current-menu-ancestor > a,
.wp-block-navigation-item.is-active > a {
	color: #FF9445 !important;
}

.wp-block-navigation__responsive-container-content li {
	margin-bottom: 1rem;
}

/* ==========================================================================
   3. LAYOUT HELPERS
   ========================================================================== */

.flex { display: flex; }
.justify { justify-content: space-between; }
.w-100 { width: 100%;}
.align-items { align-items: center; }
.gap-1 { gap: 1rem; }
.flex-direction-column { flex-direction: column !important;}

/* Responsive visibilité */
@media (min-width: 1200px) {
	.desktop-only { display: flex !important; }
	.mobile-only { display: none !important; }
}

@media (max-width: 1200px) {
	.wp-block-navigation__responsive-container:not(.is-menu-open) { display: none !important; }
	.wp-block-navigation__responsive-container.is-menu-open { display: block !important; }
	.wp-block-navigation__responsive-container-toggle { display: flex !important; }
	.wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
	.desktop-only { display: none !important; }
  	.mobile-only { display: flex !important; }
}

/* ==========================================================================
   4. FORMULAIRES (Contact Form 7)
   ========================================================================== */

.wpcf7-text, textarea {
	font-family: 'Helvetica', sans-serif;
	font-size: 1rem;
	background-color: #FFF;
	border: 0;
	border-bottom: 2px solid;
	color: #000;
	width: 100%;
	padding: 0.5rem;
}

.email__neswelleter input {
	background-color: transparent;
}

.wpcf7-text::placeholder,
.wpcf7-form-control-wrap > textarea::placeholder {
	color: #000;
}

.wpcf7-form-control-wrap > textarea {
	padding: 0.5rem;
}

.wpcf7-submit {
	color: #FFF;
	background-color: #FF4645;
	border: 0;
	border-radius: 4px;
	height: 3rem;
	padding: 1rem 2rem;
	cursor: pointer;
	font-size: 1.063rem;
	font-weight: normal;
}

.wpcf7-response-output { display: none; }
.wpcf7-checkbox { font-size: 0.75rem; }
.wpcf7-spinner { position: absolute; bottom: -25px; left: 20%; }

/* ==========================================================================
   5. NEWSLETTER
   ========================================================================== */

.newsletter {
	background-color: #FDEFDD !important;
	padding: 2rem;
	box-shadow: 5px 5px 5px #eee;
}

.newsletter__footer { max-width: 33.75rem; }
.newsletter__about { display: flex; flex-direction: column; align-items: center; }
.newsletter__title { text-transform: uppercase; text-align: center; font-size: 1rem; }
.newsletter__container { max-width: 850px; display: flex; flex-direction: column; align-items: center; }

.newsletter_button { width: min-content; }
.newsletter_button > p { margin: 0; display: flex; position: relative; }

@media screen and (max-width: 720px) {
	.newsletter__mobile { flex-direction: column; }
}

/* ==========================================================================
   6. SLIDER
   ========================================================================== */

.slider {
	margin: 0 auto 3rem 0;
	position: relative;
	max-width: 100vw !important;
	overflow: hidden;
}

.slider::before,
.slider::after {
	content: "";
	height: 100%;
	position: absolute;
	width: 300px;
	z-index: 2;
	top: 0;
}

.slider::after { right: 0; transform: rotateZ(180deg); }
.slider::before { left: 0; }

.slider .slide-track {
	display: flex;
	gap: 5rem;
	width: calc(300px * 12);
	animation: scroll 40s linear infinite;
}

.slider .slide {
	width: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.slider img {
	width: 150px;
	height: auto;
}

@keyframes scroll {
	0% { transform: translateX(0); }
	100% { transform: translateX(calc(-300px * 6)); }
}

@media screen and (max-width: 720px) {
	.slider img { width: auto; }
	.slider .slide { width: 200px; }
	.slider::before, .slider::after { width: 100px; }
	.slider .slide-track { animation: scroll 30s linear infinite; }
	.has-background { background-attachment: initial !important; }
}

/* ==========================================================================
   7. CITATIONS & IMAGES DÉCORATIVES
   ========================================================================== */

.citation { position: relative; text-align: center; width: fit-content; margin: auto; }
.citation__img { 
	position: absolute; 
    top: -99px;
    left: 231px;
}
.citation__about--img { 
	position: absolute;
	top: 77px;
    left: 152px;
}
.citation__abouthero--img {
	position: absolute;
    top: -82px;
    left: -12px;
}
.citation__contact--img { 
	position: absolute; 
    top: -122px;
    left: -12px;
}

.emission__img  { 
	position: absolute;
	top: -70px;
    left: -100px; 
}

.wake__img {
	position: absolute;
	top: 6px;
    left: -83px;
}

.hear__img {
	position: absolute;
	top: -103px;
    left: -53px;
}

.mentoring__img {
	position: absolute;
    top: -77px;
    left: -61px;
}


@media screen and (max-width: 720px) {
	.citation__about--img, .wake__img, .citation__img, .citation__abouthero--img, .mentoring__img, .emission__img, .citation__about--img, .citation__contact--img { 
		position: absolute;
		width: 30%;
	}

	.citation__img {
		top: -68px;
        left: 21px;
	}

	.wake__img {
		top: 57px;
		left: 15px;
	}

	.citation__abouthero--img {
		top: -32px;
		left: 0px;
	}

	.mentoring__img {
		top: -46px;
    	left: -6px;
	}

	.emission__img {
		top: -20px;
		left: -13px;
	}

	.citation__about--img {
		top: 108px;
    	left: 23px;
	}

	.citation__contact--img {
		top: -33px;
    	left: -19px;
	}
}

/* ==========================================================================
   8. DIVIDERS & ELEMENTS GRAPHIQUES
   ========================================================================== */

/* Divider */

.bloc__red {
    position: absolute;
    bottom: -19px;
    width: 300px;
    left: 40%;
    height: 200px;
    z-index: -1;
}

.divider {
	border: 3px solid #000;
    width: 2.75rem;
}

.divider--white {
	border: 3px solid #fff;
    width: 2.75rem;
}

.divider-vertical {
    width: 2px;
    height: 100%;
    background-color: #FF7A00;
    margin: 0 auto;
}

@media screen and (min-width: 1500px) {
	.bloc__montreuil::before {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 24px;
		height: 24px;
		background-color: #FF9445;
		border-radius: 50%;
		z-index: 10;
	}

	.bloc__child::before {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 24px;
		height: 24px;
		background-color: #FF4645;
		border-radius: 50%;
		z-index: 10;
	}

	.divider__vertical::after {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 1px;
		height: 100%;
		background-color: #000;
		z-index: 9;
	}
}

/* ==========================================================================
   9. CARTES & CONTENUS
   ========================================================================== */

.card__ebooks, .shadow { box-shadow: 5px 5px 5px #eee; }

.card {
	cursor: pointer;
	transition: transform .1s ease;
}

.card:hover {
	transform: scale(1.05);
}

.card a {
	text-decoration: none;
	outline: 0;
}

/* ==========================================================================
   10. ARTICLES
   ========================================================================== */

.single-post p { margin-bottom: 1.6em; line-height: 1.7; }
.single-post h1, .single-post h2, .single-post h3,
.single-post h4, .single-post h5, .single-post h6 {
	margin-top: 1.8em;
	margin-bottom: 1.2em;
}

.single-post img {
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}

.single-post ul, .single-post ol {
	margin-top: 1em;
	margin-bottom: 1em;
}

.single-post blockquote {
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	padding-left: 1em;
	border-left: 4px solid #ccc;
}

blockquote {
	font-family: 'Gloock', sans-serif;
	font-size: 2rem;
	width: 80%;
	position: relative;
	margin: auto !important;
}

@media screen and (min-width: 720px) {
	blockquote > p::before {
		content: '';
		position: absolute;
		z-index: -1;
		left: -212px;
		top: -180px;
		width: 500px;
		height: 500px;
		background-image: url("http://localhost:8080/wp-content/uploads/2025/09/‘‘.svg");
	}
}

/* ==========================================================================
   11. WIDGETS, GOOGLE & WOOCOMMERCE
   ========================================================================== */

.ti-widget.ti-goog .ti-review-header .ti-profile-img img {
	filter: grayscale(1);
}

.ti-widget.ti-goog:not(.ti-no-profile-img) .ti-review-header .ti-platform-icon {
	z-index: 1;
}

.ti-star { filter: brightness(0); }

.taxonomy-category { display: flex; gap: 0.25rem; }
.wp-block-post-terms__separator { opacity: 0; }

@media (max-width: 767px) {
	.wc-block-product-template__responsive {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 20px;
	}
	.wc-block-product-template__responsive li.wc-block-product {
		width: 100% !important;
	}
}

/* ==========================================================================
   12. BOUTONS & LIENS
   ========================================================================== */

.wc-appointments-appointment-form-button {
	padding: 1rem !important;
    background-color: var(--wp--preset--color--accent-1) !important;
    border: 0 !important;
    color: #fff !important;
    font-weight: 400 !important;
    font-size: 1rem !important;
    border-radius: 2px !important;
    cursor: pointer !important;
}
   
.wpcf7-submit:hover,
.wp-element-button:hover,
.wc-appointments-appointment-form-button:hover {
	background-color: var(--wp--preset--color--accent-2) !important;
	transition: background-color 200ms ease;
	color: #FFF !important;
	outline: 0;
}

.wp-block-button .has-accent-2-background-color:hover {
	background-color: var(--wp--preset--color--accent-1) !important;
}

.btn-white > a:focus {
	outline: 0;
}

.btn-white > a:hover {
	background-color: var(--wp--preset--color--accent-2) !important;
	color: #FFF !important;
	outline: 0;
	border: 0;
}

.form-contact .wpcf7-submit:hover {
	background-color: var(--wp--preset--color--accent-1) !important;
}

.form-contact .wpcf7-submit {
	background-color: var(--wp--preset--color--accent-2) !important;
}
.form-contact p {
	text-align: center;
}

/* ==========================================================================
   13. DIVERS
   ========================================================================== */
@media (max-width: 767px) {
	.slide img { min-width: 150px; max-width: 200px !important; }

	.about {
		flex-direction: column-reverse;
	}
}

.link { text-decoration: underline var(--wp--preset--color--accent-1); }
.video, .mejs-video, .mejs-controls { border-radius: 25px !important; }
.lien-panier { position: relative; display: inline-block; }

.compteur-panier {
	background: red;
	color: white;
	border-radius: 50%;
	font-size: 12px;
	padding: 2px 6px;
	position: absolute;
	top: -8px;
	right: -12px;
	min-width: 20px;
	text-align: center;
	font-weight: bold;
}

.written_by > div { align-items: flex-start; }

.coming_soon {
	display: none;
}

.wp-block-list {
	padding-left: 18px;
}
.price {
	font-weight: bold;
	font-size: var(--wp--preset--font-size--small) !important;
}

.amount {
	font-weight: 400;
}

.link_blog:hover {
	color: var(--wp--preset--color--accent-2) !important;
}

.card_product {
	max-width: 320px;
}

.wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent-2) !important;
	text-decoration: none !important;
}

.wp-block-post-title a:focus, .wp-block-post-featured-image a:focus, .wc-block-components-product-image a {
	outline: 0 !important;
}

footer {
	margin: 0 !important;
}

.wc-block-components-product-price {
	font-weight: bold;
}

/* Style du compteur sur le lien Panier */
.wp-block-navigation-item__content.panier-link {
  position: relative;
  display: inline-block;
}

/* Bulle compteur via pseudo-élément */
.wp-block-navigation-item__content.panier-link::after {
  content: attr(data-count);
  position: absolute;
  top: -6px;
  right: -12px;
  background: red;
  color: white;
  font-size: 11px;
  font-weight: 600;
  border-radius: 50%;
  padding: 1px 6px;
  line-height: 1.4;
  display: none; /* cachée si 0 */
}

/* N'affiche la bulle que si > 0 */
.wp-block-navigation-item__content.panier-link[data-count]:not([data-count="0"])::after {
  display: inline-block;
}

footer .panier-link {
	margin: 0 !important;
}

.duration-time {
	font-weight: normal;
}

.cat-item-390, .cat-item-388, .cat-item-381, .cat-item-391, .cat-item-453, .cat-item-384, .cat-item-387, .cat-item-392, .cat-item-383, .cat-item-386, .cat-item-380, .cat-item-389, .cat-item-382 {
	display: none;
}

.wp-block-categories {
    list-style: none;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
	justify-content: center;
}

@media (max-width: 767px) {
	.wp-block-categories {
		justify-content: flex-start;
	}
}

.wp-block-categories a, .taxonomy-category a {
		text-decoration: none !important;
}

.wp-block-categories a:hover, .wp-block-categories a:focus, .taxonomy-category a:focus, .taxonomy-category a:hover {
	outline: 0;
}

.toc-fse a:hover {
	font-weight: bold;
	outline: 0;
}

.wp-block-post-author-name a:hover {
	outline: 0;
}

.social-share {
    margin: 20px 0;
    display: flex;
    gap: 15px;
    align-items: center;
}

.social-share a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    transition: transform 0.3s, opacity 0.3s;
}

.social-share a:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

.social-share svg {
    fill: currentColor;
    color: #0077B5; /* Couleur LinkedIn */
}

.social-share a[title="Partager sur Pinterest"] svg {
    color: #BD081C; /* Couleur Pinterest */
}