/* ---------------------------------------------------------
	PAGE COACHING RELATIONNEL — MOIZARD CONSEIL
--------------------------------------------------------- */

/* ---------- POLICES ---------- */
@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay-Regular.woff2') format('woff2');
    font-weight: 400;
	font-style: normal; 
    font-display: swap;
}
@font-face {
    font-family: 'Playfair Display';
    src: url('../fonts/PlayfairDisplay-Bold.woff2') format('woff2');
    font-weight: 700;
	font-style: normal; 
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Regular.woff2') format('woff2');
    font-weight: 400;
	font-style: normal; 
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
    font-weight: 600;
	font-style: normal; 
    font-display: swap;
}

/* ---------- PALETTE DE COULEURS ---------- */
:root {
	--mc-blue: #1c53a5;           /* Bleu officiel */
	--mc-orange: #f19321;         /* Orange officiel */
	--mc-orange-light: #fbcf8a;   /* Orange clair harmonisé */
	--mc-beige: #f8f6f2;          /* Beige très doux */
	--mc-sage: #eef4f2;           /* Sauge très douce */
	--mc-grey: #f3f4f6;           /* Gris très léger */
	--text-default: #333333;
	--border-light: rgba(0,0,0,0.08);	
}

/* ---------- STRUCTURE DES SECTIONS ---------- */
.section {
	padding: 20px 0;
}

@media (max-width: 480px) {
    .section {
        padding: 10px 0;
	}
}

.section-light-coaching { background-color: var(--mc-beige); }
.section-sage-coaching { background-color: var(--mc-sage); }
.section-grey-coaching { background-color: var(--mc-grey); }
.section-blue-coaching { background-color: var(--mc-blue); }

/* ---------- BLOCS ROW ---------- */
.coaching-block {
    background-color: #fff;
    padding: 40px 20px;
	margin:0 5px;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.coaching-block-pleine-hauteur {
    background-color: #fff;
    padding: 40px 20px;
	margin:0 24px;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* ---------- TITRES ---------- */
h2, h3, h4 {
	font-family: "Playfair Display", serif;
	color: var(--mc-blue);
	margin-bottom: 25px;
	line-height: 1.4;
	margin-top: 0;
	
}

h2 { font-size: 30px; font-weight: 700; }
h3 { font-size: 22px; font-weight: 700; }
h4 { font-size: 18px; font-weight: 700; }

h2:hover, h3:hover {
	color: var(--mc-orange);
	transform: translateY(-2px);
	transition: color 0.25s ease, transform 0.25s ease;
}

@media (max-width: 480px) {
	h2 {
        font-size: 24px;
        letter-spacing: 0.2px;
	}
	
    h3 {
        font-size: 18px;
        letter-spacing: 0.15px;
        margin-bottom: 20px;
	}
	
	h4 {
        font-size: 17px;
        letter-spacing: 0.15px;
        margin-bottom: 18px;
	}
}

.icone-titre {
    font-size: 22px;
    margin-right: 10px;
    color: #4a4a4a;
    opacity: 0.85;
    vertical-align: middle;
}

html {
    scroll-behavior: smooth;
}

/* ---------- PARAGRAPHES ---------- */
.section p,
.section li {
    font-family: "Inter", sans-serif;
    font-size: 17px;
    color: var(--text-default);
    line-height: 1.7;
    margin-bottom: 18px;   
}

@media (max-width: 480px) {
    .section p,
    .section li {
        font-size: 16px;
        line-height: 1.65;
	}
}

.accent {
    font-weight: 500;
    font-style: italic;
    color: var(--mc-blue);
}

/* ---------- LISTES ---------- */
.section ul {
	list-style: none;
	padding-left: 28px;
	margin: 0 0 18px 0;
}

.section ul li {
	position: relative;
	padding-left: 22px;
	margin-bottom: 10px;
}

.section ul li::before {
	content: "\2022";
	position: absolute;
	left: 6px;
	top: 0.45em;
	color: var(--mc-orange);
	font-size: 18px;
	line-height: 1;
}

@media (max-width: 480px) {
    .section ul {
        padding-left: 12px;
	}
	
    .section ul li {
        padding-left: 16px; 
	}
	
    .section ul li::before {
        left: 0px;        
	}
}

/* ---------- BOUTONS ---------- */
.btn-moizard {
	background-color: var(--mc-orange);
	color: #fff;
	border-radius: 8px;
	padding: 12px 24px;
	border: none;
	font-weight: 600;
	font-family: "Inter", sans-serif;
	transition: background-color 0.35s ease, transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);	
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);	
	display: inline-flex;  
	align-items: center;
    gap: 6px;
	text-decoration: none;
}

.btn-moizard:focus {
    outline: 3px solid rgba(19,85,162,0.18);
    outline-offset: 2px;
}

.btn-moizard:hover {
	background-color: var(--mc-orange-light);	
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.btn-moizard i {
    vertical-align: middle;  
}

/* ---------- BOUTONS CENTRAGE ---------- */
.btn-wrapper {
    text-align: center;
	margin-top: 40px;
}

/* ---------------------------------------------------------
	IMAGES — HAUTEUR PLEINE (avec décalage)
--------------------------------------------------------- */
.hauteur-pleine {
    display: flex;
    align-items: stretch;
	gap: 10px;
	
}

.hauteur-pleine .colonne-image {
    padding: 20px;
	flex: 1 1 50%;
}

.hauteur-pleine .colonne-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 18px;
    transform: translateY(20px) translateX(-6px);
	display: block;
}

/* Correction mobile */
@media (max-width: 768px) {
    .hauteur-pleine {
        flex-direction: column;
	}
	
    .colonne-image {
        padding: 0 15px;
        margin-top: 20px;
	}
	
    .hauteur-pleine .colonne-image img {
        transform: none;        /* normal sur mobile */
        max-height: 180px;
        object-fit: cover;
	}
}

/* ---------------------------------------------------------
	IMAGES SPOT PETITE HAUTEUR
--------------------------------------------------------- */
.img-spot-small {
    display: block;
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 18px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* Mobile */
@media (max-width: 480px) {
    .img-spot-small {
        height: 100px;
	}
}

/* ---------------------------------------------------------
	IMAGES
--------------------------------------------------------- */
.img-spot {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	margin-top: 25px;
	margin-bottom: 25px;
	object-position: center;
	object-fit: contain;    
	max-height: 60vh;       
}

/* Mobile : réduire la hauteur maximale */
@media (max-width: 480px) {
	.img-spot {
		max-height: 40vh;
	}
}

/* ---------------------------------------------------------
	SECTION 6 Témoignages
--------------------------------------------------------- */
.quote {
    font-style: italic;
    color: var(--mc-blue);
    border-left: 3px solid var(--mc-orange);
    padding-left: 18px;
    margin: 28px 0;
    line-height: 1.65;
}

/* Titre du témoignage */
.quote h4 {
    font-family: "Playfair Display", serif;
    color: var(--mc-blue);
    font-size: 20px;       
    font-weight: 700;
    font-style: italic;    
    margin-bottom: 12px;
    line-height: 1.3;
}

/* Texte du témoignage */
.quote p {
    font-size: 17px;
    line-height: 1.65;
    color: var(--text-default);
    font-style: normal;
    margin-bottom: 12px;
}

/* Auteur */
.quote .auteur {
    font-size: 15px;   
    color: var(--text-default);
    opacity: 0.85;
    margin-top: 10px;
	font-style: normal;
    text-align: left;
}

/* ---------- MOBILE ---------- */
@media (max-width: 480px) {
    .quote {
        padding-left: 14px;
        margin: 22px 0;
        border-left-width: 2px;
	}
	
    .quote h4 {
        font-size: 17px;
        font-style: italic;
        margin-bottom: 10px;
        line-height: 1.35;
	}
	
    .quote p {
        font-size: 15px;
        line-height: 1.55;
	}
	
    .quote .auteur {
        font-size: 14px;
	}
}

/* ---------------------------------------------------------
	SECTION 7 Outils
--------------------------------------------------------- */

/* ---------------------------------------------------------
	OUTILS — grille 2 colonnes desktop / 1 colonne mobile
	+ dernier élément pleine largeur si nombre impair
--------------------------------------------------------- */

.tools-flex {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

/* Chaque bloc outil */
.coaching-panel {
    background: #fff;
    border: 1px solid var(--border-light);
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
}

/* Dernier élément pleine largeur si nombre impair */
.tools-flex .coaching-panel:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/* Mobile : 1 colonne */
@media (max-width: 768px) {
    .tools-flex { grid-template-columns: 1fr; }
	
    .coaching-panel {
        margin-bottom: 20px;
	}
}

/* Mini phrase d’introduction */
.tool-intro {
    font-size: 16px;
    color: var(--mc-orange);
    margin: 6px 0 10px 0;
	font-weight: 600;
}

/* Texte de l’outil */
.tool-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-default);
    margin-top: 10px;
}

/* Titres des outils */
.coaching-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--mc-blue);
	margin-top: 8px;
}

.coaching-title i {
    margin-right: 10px;
    color: var(--mc-orange);
    font-size: 18px;
}

/* ---------------------------------------------------------
	SECTION 8 Consultation
--------------------------------------------------------- */

/* Décalage du texte uniquement dans la section 8 */
.section-consultations .consultation-text {
    padding-left: 100px;
}

@media (max-width: 767px) {
    .section-consultations .consultation-text {
        padding-left: 15px;
        padding-right: 15px;
	}
}

/* ---------------------------------------------------------
	SECTION 9 Prise de RDV
--------------------------------------------------------- */
.section-blue-coaching .coaching-block {
    text-align: center;
}