/* ═══════ HOMEPAGE SPÉCIFIQUE ═══════ */
.hero-video {
position: relative;
width: 100%;
height: 480px;
overflow: hidden;
background: linear-gradient(135deg, #1a6b8a 0%, #2a8dad 50%, #1a6b8a 100%);
}
.hero-video iframe {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border: 0;
}
/* 3 piliers description école */
.piliers-section { padding: var(--space-3xl) var(--space-xl); }
.piliers-grid {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-xl);
}
.piliers-grid .card .card-image { height: 240px; background: var(--gris-doux); }
.piliers-grid .card .card-image img {
width: 100%; height: 100%; object-fit: cover;
}
.piliers-grid .card .card-body { text-align: center; }
.piliers-grid .card .card-title {
text-transform: uppercase;
letter-spacing: 1px;
font-size: 18px;
}
/* Section Citation + ProBleu Blog */
.citation-blog { padding: var(--space-3xl) var(--space-xl); }
.citation-blog-inner {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3xl);
align-items: center;
}
.citation-card {
background: var(--papier);
border-radius: var(--radius-xl);
padding: var(--space-2xl);
position: relative;
box-shadow: var(--shadow-soft);
transition: transform 0.5s ease, box-shadow 0.4s ease;
}
.citation-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-medium);
}
.citation-card::before {
content: "“";
position: absolute;
top: -30px;
left: 20px;
font-family: var(--font-display);
font-size: 140px;
line-height: 1;
color: var(--orange);
opacity: 0.3;
}
.citation-text {
font-family: var(--font-script);
font-size: 26px;
font-weight: 600;
color: var(--gris-fonce);
line-height: 1.5;
margin-bottom: var(--space-lg);
position: relative;
z-index: 1;
}
.citation-author {
font-family: var(--font-display);
font-weight: 700;
color: var(--orange);
font-size: 17px;
}
.citation-author::before { content: ""; }
.blog-card { max-width: 420px; margin-left: auto; }
.blog-card .card-image { height: 220px; background: var(--gris-doux); }
.blog-card .card-image img {
width: 100%; height: 100%; object-fit: cover;
}
/* Section Tarif + Galerie */
.tarif-galerie {
padding: var(--space-3xl) var(--space-xl);
background: var(--papier);
}
.tarif-galerie-inner {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: var(--space-3xl);
align-items: center;
}
.tarif-side h3 {
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: var(--space-md);
color: var(--teal);
}
.tarif-side p {
margin-bottom: var(--space-lg);
color: var(--gris-fonce);
}
.galerie-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
}
.galerie-item {
aspect-ratio: 1;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--gris-doux);
transition: transform 0.5s ease, box-shadow 0.4s ease;
box-shadow: var(--shadow-soft);
}
.galerie-item:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-medium);
}
.galerie-item img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.galerie-item:hover img { transform: scale(1.08); }
/* Section Nous visiter */
.nous-visiter {
background: var(--vert-light);
padding: var(--space-4xl) var(--space-xl);
}
.nous-visiter-inner {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-3xl);
align-items: center;
}
.nous-visiter h2 {
color: var(--teal);
margin-bottom: var(--space-lg);
}
.nous-visiter h2::after {
content: "";
display: block;
width: 60px; height: 4px;
background: var(--teal);
border-radius: 2px;
margin-top: var(--space-md);
}
.contact-info { margin-top: var(--space-xl); }
.contact-info-item {
display: flex;
align-items: flex-start;
gap: var(--space-md);
margin-bottom: var(--space-lg);
font-size: 16px;
color: var(--gris-fonce);
}
.contact-info-item svg {
width: 22px; height: 22px;
color: var(--teal);
flex-shrink: 0;
margin-top: 3px;
}
.contact-info-item a {
color: var(--gris-fonce);
transition: color 0.3s ease;
}
.contact-info-item a:hover { color: var(--teal); }
.map-container {
width: 100%;
height: 400px;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-medium);
}
.map-container iframe { width: 100%; height: 100%; border: 0; }
/* Responsive */
@media (max-width: 1024px) {
.piliers-grid { grid-template-columns: repeat(2, 1fr); }
.citation-blog-inner,
.tarif-galerie-inner,
.nous-visiter-inner {
grid-template-columns: 1fr;
}
.blog-card { margin: 0 auto; }
}
@media (max-width: 768px) {
.piliers-grid { grid-template-columns: 1fr; }
.hero-video { height: 320px; }
.galerie-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ═══════ FAQ (integré en bas de homepage) ═══════ */
.faq-section {
background: linear-gradient(180deg, var(--rose-light) 0%, var(--creme) 100%);
padding: var(--space-4xl) var(--space-xl);
}
.faq-section .section-header {
text-align: center;
max-width: 700px;
margin: 0 auto var(--space-3xl);
}
.faq-section .section-header h2 {
color: var(--rose);
margin-bottom: var(--space-md);
}
.qp-list {
max-width: 900px;
margin: 0 auto;
}
.qp-group {
margin-bottom: var(--space-3xl);
}
.qp-group:last-child { margin-bottom: 0; }
.qp-group-title {
display: flex;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-lg);
color: var(--bleu);
}
.qp-group-title .dot {
width: 14px; height: 14px;
border-radius: 50%;
}
.qp-group.rose .qp-group-title .dot { background: var(--rose); }
.qp-group.bleu .qp-group-title .dot { background: var(--bleu); }
.qp-group.vert .qp-group-title .dot { background: var(--vert); }
.qp-group.orange .qp-group-title .dot { background: var(--orange); }
.qp-item {
background: var(--blanc);
border-radius: var(--radius-lg);
margin-bottom: var(--space-md);
box-shadow: var(--shadow-soft);
overflow: hidden;
transition: transform 0.5s ease, box-shadow 0.4s ease;
}
.qp-item:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-medium);
}
.qp-item summary {
padding: var(--space-lg) var(--space-xl);
font-family: var(--font-display);
font-weight: 700;
font-size: 17px;
color: var(--noir-doux);
cursor: pointer;
list-style: none;
position: relative;
padding-right: 60px;
transition: background 0.3s ease;
}
.qp-item summary::-webkit-details-marker { display: none; }
.qp-item summary::after {
content: "+";
position: absolute;
right: var(--space-xl);
top: 50%;
transform: translateY(-50%);
width: 32px; height: 32px;
border-radius: 50%;
background: var(--orange-light);
color: var(--orange);
font-size: 24px;
line-height: 28px;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease, background 0.3s ease;
}
.qp-item[open] summary::after {
content: "−";
background: var(--orange);
color: var(--blanc);
transform: translateY(-50%) rotate(180deg);
}
.qp-item[open] summary { background: var(--craie); }
.qp-answer {
padding: 0 var(--space-xl) var(--space-lg);
color: var(--gris-fonce);
line-height: 1.7;
font-size: 16px;
}
.qp-answer p { margin-bottom: var(--space-md); }
.qp-answer p:last-child { margin-bottom: 0; }
.qp-answer ul {
margin: var(--space-sm) 0 var(--space-md) var(--space-lg);
list-style: disc;
}
.qp-answer ul li { margin-bottom: 6px; }
.qp-answer a {
color: var(--bleu);
text-decoration: underline;
font-weight: 700;
}
@media (max-width: 768px) {
.qp-item summary { font-size: 15px; padding: var(--space-md); padding-right: 56px; }
.qp-item summary::after { right: var(--space-md); }
}
/* ════════════════════════════════════════════════════════════════════════
PONT ELEMENTOR — rend les classes du DS fidèles dans la structure native
(colonnes/inner-sections/widgets), SANS les classes de layout grille.
Chargé après le kit : corrige notamment la police "Caveat" globale qui
fuyait sur tous les widgets text-editor.
════════════════════════════════════════════════════════════════════════ */
/* --- HERO : le widget vidéo Elementor garde un ratio 16:9 (720px à 1280px),
qui débordait la bande de 480px. On force toute la chaîne à remplir 480px,
et l'overlay (poster + bouton play) à couvrir en cover, centré. --- */
.hero-video > .elementor-container,
.hero-video > .elementor-container > .elementor-column,
.hero-video .elementor-column > .elementor-widget-wrap,
.hero-video .elementor-widget-video,
.hero-video .elementor-widget-video > .elementor-widget-container,
.hero-video .elementor-wrapper {
height: 100%;
width: 100%;
}
.hero-video .elementor-column > .elementor-widget-wrap { padding: 0 !important; }
.hero-video .elementor-wrapper {
position: absolute;
inset: 0;
padding: 0 !important;
}
/* Tag flottant (widget HTML) : hors du flux pour ne pas pousser la video (qui doit couvrir la bande). */
.hero-video .elementor-widget-html { position: absolute; top: 0; left: 0; z-index: 5; width: auto; height: 0; }
/* overlay (avant clic) : remplit la bande, image en cover centrée */
.hero-video .elementor-custom-embed-image-overlay {
position: absolute;
inset: 0;
height: 100%;
width: 100%;
background-size: cover;
background-position: center;
}
.hero-video .elementor-custom-embed-image-overlay img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* après clic : l'iframe injectée couvre déjà via la règle .hero-video iframe */
/* --- Corps de texte : le kit assigne la typo globale "text" = Caveat aux
widgets text-editor. On rétablit Nunito pour le corps de la home. --- */
.card-text,
.card-text p,
.tarif-side,
.tarif-side p,
.elementor-widget-accordion .elementor-tab-content,
.elementor-widget-accordion .elementor-tab-content p,
.elementor-widget-accordion .elementor-tab-content li {
font-family: var(--font-body) !important;
font-style: normal;
}
/* --- CARTE (pilier / blog) : la colonne porte .card ; on annule le padding
du widget-wrap pour que image + corps forment une carte unie. --- */
.elementor-column.card > .elementor-widget-wrap {
padding: 0 !important;
align-content: flex-start;
}
/* l'image de carte remplit le haut, hauteur fixe, recadrage cover */
.card-image.elementor-widget-image,
.card-image .elementor-widget-container { line-height: 0; }
.card-image.elementor-widget-image img {
width: 100%;
height: 240px;
object-fit: cover;
display: block;
border-radius: 0;
}
/* corps de carte : padding DS, pas de marge d'inner-section parasite */
.card-body.elementor-inner-section { width: 100%; }
.card-body.elementor-inner-section > .elementor-container { padding: var(--space-xl); }
.card-body.elementor-inner-section > .elementor-container > .elementor-column > .elementor-widget-wrap { padding: 0 !important; }
/* PILIERS : titres en capitales centrés, texte centré, bouton centré.
On cible le contexte "pilier" via la carte qui n'est pas .blog-card. */
.elementor-column.card:not(.blog-card) .card-body { text-align: center; }
.elementor-column.card:not(.blog-card) .card-title .elementor-heading-title {
text-transform: uppercase;
letter-spacing: 1px;
font-size: 18px;
}
.elementor-column.card:not(.blog-card) .card-body .elementor-widget-button .elementor-button-wrapper { text-align: center; }
.elementor-column.card:not(.blog-card) .card-body .elementor-widget-button { width: 100%; }
/* BLOG CARD (article) : image 220px, largeur contenue alignée à droite. */
.elementor-column.blog-card .card-image.elementor-widget-image img { height: 220px; }
.elementor-column.blog-card { max-width: 440px; margin-left: auto; }
/* overline « ACTU » en gris (comme la maquette), pas teal */
.elementor-column.blog-card .overline,
.elementor-column.blog-card .overline p { color: var(--gris-moyen); }
/* --- CITATION : la colonne porte .citation-card. Le widget-wrap doit garder
le padding de la carte (48px) ; le guillemet déco vient de ::before. --- */
.elementor-column.citation-card { align-self: center; }
.elementor-column.citation-card > .elementor-widget-wrap {
padding: var(--space-2xl) !important;
}
.citation-card::before { z-index: 2; }
/* texte de citation en Caveat (script) — on l'IMPOSE ici car le widget est un
text-editor ; .citation-text est sur le widget. */
.citation-text,
.citation-text p {
font-family: var(--font-script) !important;
font-size: 26px;
font-weight: 600;
color: var(--gris-fonce);
line-height: 1.5;
margin: 0;
position: relative;
z-index: 3;
}
.citation-author,
.citation-author p {
font-family: var(--font-display) !important;
font-weight: 700;
color: var(--orange);
font-size: 17px;
margin: var(--space-lg) 0 0;
position: relative;
z-index: 3;
}
/* le DS pose un "— " sur .citation-author (prévu pour un nu). Ici le widget
est un DIV contenant un
, donc on neutralise le ::before du div et ne garde
que celui du
(sinon double tiret). */
.elementor-widget.citation-author::before { content: none !important; }
.citation-author p::before { content: ""; }
/* --- TARIFS : titre teal capitales. .tarif-side porté par le heading. --- */
.tarif-side .elementor-heading-title,
h3.tarif-side {
text-transform: uppercase;
letter-spacing: 1px;
color: var(--teal);
}
/* --- GALERIE (widget HTML) : grille 2x2 de carrés. --- */
.galerie-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-md);
}
.galerie-grid .galerie-item {
aspect-ratio: 1;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--gris-doux);
box-shadow: var(--shadow-soft);
transition: transform 0.5s ease, box-shadow 0.4s ease;
}
.galerie-grid .galerie-item:hover { transform: translateY(-6px); box-shadow: var(--shadow-medium); }
.galerie-grid .galerie-item img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform 0.5s ease;
}
.galerie-grid .galerie-item:hover img { transform: scale(1.08); }
/* --- NOUS VISITER : icônes de contact teal (widget HTML géré inline). --- */
.map-container.elementor-widget-html .elementor-widget-container,
.map-container iframe { height: 400px; }
/* --- FAQ : en colonne unique centrée (≈900px), comme la maquette. --- */
.faq .section-header .elementor-heading-title { color: var(--rose); }
/* en-tête FAQ centré (overline + titre + intro) */
.faq .section-header { text-align: center; }
.faq .section-header .elementor-widget-container { text-align: center; }
.faq .section-header .elementor-heading-title,
.faq .section-header .elementor-widget-text-editor { text-align: center; }
/* liste en colonne unique, largeur lisible centrée */
.elementor-column.qp-list {
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.faq .qp-group-title .elementor-heading-title {
display: inline-flex; align-items: center; gap: var(--space-md);
}
/* puce colorée injectée devant le titre de groupe */
.faq .qp-group-title .elementor-heading-title::before {
content: ""; width: 14px; height: 14px; border-radius: 50%;
background: currentColor; flex-shrink: 0; display: inline-block;
}
/* accordéon natif habillé "pill" comme .qp-item */
.faq .elementor-widget-accordion .elementor-accordion-item {
background: var(--blanc);
border: 0;
border-radius: var(--radius-lg);
margin-bottom: var(--space-md);
box-shadow: var(--shadow-soft);
overflow: hidden;
}
.faq .elementor-widget-accordion .elementor-tab-title {
border: 0; padding: var(--space-lg) var(--space-xl);
}
/* Questions : pas de soulignement (le titre est un , souligné par le style de lien du kit) */
.faq .elementor-widget-accordion .elementor-accordion-title,
.faq .elementor-widget-accordion .elementor-accordion-title:hover,
.faq .elementor-widget-accordion .elementor-accordion-title:focus { text-decoration: none; }
.faq .elementor-widget-accordion .elementor-tab-content { border: 0; }
/* ── Responsive home (Elementor casse les colonnes via ses propres breakpoints,
on ajuste seulement les hauteurs d'image et la galerie). ── */
@media (max-width: 767px) {
.card-image.elementor-widget-image img { height: 200px; }
.elementor-column.blog-card { max-width: 100%; }
.elementor-column.citation-card > .elementor-widget-wrap { padding: var(--space-xl) !important; }
}
/* Piliers : double padding-top (la section .card-body ET son conteneur Elementor avaient
chacun 32px) -> on retire celui du conteneur et on reduit celui de la section. */
section.card-body { padding-top: 14px !important; padding-bottom: 18px !important; }
section.card-body > .elementor-container { padding-top: 0 !important; padding-bottom: 0 !important; }