/*
Theme Name: Divi 5 Child Theme
Description: Just a new Child Theme
Version: 1.1.0
Author: Morgan Barba
Author URI: www.arkt.com
Theme URI: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: Divi
*/

/* ========== Supports de Formation : identité marine et ciel ========== */
:root {
	--sf-marine: #191F3A;
	--sf-marine-profond: #11162B;
	--sf-ciel: #18ADDD;
	--sf-ciel-fonce: #0B78A0;
	--sf-fond: #F5F7FA;
	--sf-texte: #3A4157;
	--sf-texte-2: #5A6178;
	--sf-filet: #DDE3EC;
	--sf-r-sm: 6px;
	--sf-r-md: 12px;
	--sf-r-bulle: 18px;
}

body { background: var(--sf-fond); color: var(--sf-texte); }
#page-container, #main-content { background: transparent; }
h1, h2, h3, h4, h5, h6 { color: var(--sf-marine); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; padding-bottom: 0.4em; }
p { line-height: 1.65; }
a { color: var(--sf-ciel-fonce); }
.sf-measure { max-width: 680px; }
.sf-center { text-align: center; }
.sf-center .sf-measure { margin-left: auto; margin-right: auto; }

/* ---------- Boutons ---------- */
body .et_pb_button,
body .woocommerce a.button, body .woocommerce button.button, body .woocommerce input.button,
body.woocommerce-page a.button, body.woocommerce-page button.button, body .woocommerce #respond input#submit {
	background: var(--sf-marine) !important;
	color: #fff !important;
	border: 2px solid var(--sf-marine) !important;
	border-radius: var(--sf-r-sm) !important;
	font-family: 'Montserrat', sans-serif !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	letter-spacing: 0.01em;
	padding: 13px 26px !important;
	line-height: 1.2 !important;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
body .et_pb_button:after, body .woocommerce a.button:after { display: none !important; }
body .et_pb_button:hover,
body .woocommerce a.button:hover, body .woocommerce button.button:hover, body.woocommerce-page a.button:hover {
	background: var(--sf-ciel) !important;
	border-color: var(--sf-ciel) !important;
	color: var(--sf-marine) !important;
	padding: 13px 26px !important;
}
body .et_pb_button:active { transform: translateY(1px); }
/* Bouton clair sur fond marine */
body .sf-btn-ciel.et_pb_button { background: var(--sf-ciel) !important; border-color: var(--sf-ciel) !important; color: var(--sf-marine) !important; }
body .sf-btn-ciel.et_pb_button:hover { background: #fff !important; border-color: #fff !important; }
/* Bouton contour */
body .sf-btn-contour.et_pb_button { background: transparent !important; color: var(--sf-marine) !important; }
body .sf-btn-contour.et_pb_button:hover { background: var(--sf-marine) !important; color: #fff !important; border-color: var(--sf-marine) !important; }
body .sf-on-dark .sf-btn-contour.et_pb_button { color: #fff !important; border-color: rgba(255,255,255,.55) !important; }
body .sf-on-dark .sf-btn-contour.et_pb_button:hover { background: #fff !important; color: var(--sf-marine) !important; border-color: #fff !important; }
.sf-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.sf-btns .et_pb_button_module_wrapper { margin: 0 !important; }

/* ---------- Sections sombres ---------- */
.sf-on-dark, .sf-on-dark p, .sf-on-dark li { color: #C9D1E3; }
.sf-on-dark h1, .sf-on-dark h2, .sf-on-dark h3 { color: #fff; }
.sf-on-dark a:not(.et_pb_button) { color: var(--sf-ciel); }

/* ---------- Hero ---------- */
.sf-hero .et_pb_row { align-items: center; }
.sf-hero h1 { font-size: clamp(32px, 4.2vw, 50px); line-height: 1.08; max-width: 14ch; }
.sf-hero h1 em { font-style: normal; color: var(--sf-ciel); }
.sf-hero .sf-lead { font-size: 18px; line-height: 1.6; max-width: 34em; margin-top: 4px; }
.sf-hero .sf-btns { margin-top: 28px; }
.sf-mosaic { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px; }
.sf-mosaic .et_pb_image { margin: 0 !important; }
.sf-mosaic img { display: block; width: 100%; border-radius: var(--sf-r-bulle) var(--sf-r-bulle) var(--sf-r-bulle) 0; box-shadow: 0 0 0 1px rgba(255,255,255,.16); }
.sf-mosaic .et_pb_image:nth-child(2), .sf-mosaic .et_pb_image:nth-child(4) { transform: translateY(28px); }

/* ---------- Chiffres sous le hero ---------- */
.sf-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,.14); margin-top: 8px; }
.sf-chiffres div { padding: 26px 24px 0 0; }
.sf-chiffres strong { display: block; font-size: 30px; line-height: 1.1; color: #fff; font-weight: 700; }
.sf-chiffres span { font-size: 14px; color: #9AA4BD; }

/* ---------- Thématiques ---------- */
.sf-tiles .et_pb_column { margin-bottom: 22px !important; }
.sf-tiles .et_pb_image { margin: 0 !important; overflow: hidden; border-radius: var(--sf-r-md); }
.sf-tiles .et_pb_image img { display: block; width: 100%; transition: transform .35s ease; }
.sf-tiles .et_pb_image a:hover img { transform: scale(1.04); }
.sf-tiles .et_pb_image a:focus-visible { outline: 3px solid var(--sf-ciel); outline-offset: 3px; }

/* ---------- Formats ---------- */
.sf-formats { list-style: none; padding: 0 !important; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.sf-formats li { padding: 22px 0; border-top: 1px solid var(--sf-filet); }
.sf-formats li strong { display: block; color: var(--sf-marine); font-size: 17px; margin-bottom: 4px; }
.sf-formats li span { color: var(--sf-texte-2); font-size: 15px; }
.sf-tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sf-ciel-fonce); background: rgba(24,173,221,.1); border-radius: 999px; padding: 5px 12px; margin-bottom: 14px; }

/* ---------- Bandeau réassurance ---------- */
.sf-reassurance { list-style: none; padding: 0 !important; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.sf-reassurance li { padding-left: 18px; border-left: 3px solid var(--sf-ciel); }
.sf-reassurance strong { display: block; color: #fff; font-size: 17px; margin-bottom: 4px; }

/* ---------- Bloc gratuit (bulle) ---------- */
.sf-bulle { background: #fff; border: 1px solid var(--sf-filet); border-radius: var(--sf-r-bulle) var(--sf-r-bulle) var(--sf-r-bulle) 0; padding: 40px 44px !important; }
.sf-bulle .et_pb_row { align-items: center; }

/* ---------- Produits WooCommerce ---------- */
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product { background: #fff; border: 1px solid var(--sf-filet); border-radius: var(--sf-r-md); padding: 14px 14px 18px !important; transition: box-shadow .2s ease, transform .2s ease; }
.woocommerce ul.products li.product:hover { box-shadow: 0 10px 28px rgba(25,31,58,.08); transform: translateY(-2px); }
.woocommerce ul.products li.product img { border-radius: 8px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { color: var(--sf-marine); font-size: 16px !important; line-height: 1.3; padding-top: 10px; }
.woocommerce ul.products li.product .price, .woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--sf-ciel-fonce) !important; font-weight: 700; }
.woocommerce span.onsale { background: var(--sf-ciel) !important; color: var(--sf-marine) !important; }

/* ---------- En-tête Divi ---------- */
#main-header { box-shadow: 0 1px 0 var(--sf-filet) !important; }
#logo { max-height: 64% !important; }
#top-menu li a, .et_mobile_menu li a { font-weight: 600; }
#top-menu li.current-menu-item > a, #top-menu li.current-menu-ancestor > a { color: var(--sf-ciel-fonce) !important; }
#top-menu .sub-menu { border-top-color: var(--sf-ciel) !important; border-radius: 0 0 var(--sf-r-sm) var(--sf-r-sm); }
.et-cart-info span { font-weight: 600; }

/* ---------- Pied de page ---------- */
#main-footer { background: var(--sf-marine-profond) !important; }
#footer-widgets { padding: 64px 0 24px; }
#main-footer .footer-widget h4, #main-footer .footer-widget .wp-block-heading { color: #fff !important; font-size: 16px; }
#main-footer .footer-widget, #main-footer .footer-widget p, #main-footer .footer-widget li { color: #C9D1E3; font-size: 14px; line-height: 1.7; }
#main-footer .footer-widget a { color: #fff; }
#main-footer .footer-widget a:hover { color: var(--sf-ciel); }
#main-footer .footer-widget ul { list-style: none; padding: 0; }
#main-footer .footer-widget li:before { display: none; }
#footer-bottom { background: #0B0F1E !important; }
#footer-info, #footer-info a { color: #9AA4BD !important; }

/* ---------- Pages de contenu (mentions, CGV) ---------- */
.sf-legal h2 { font-size: 22px; margin-top: 34px; }
.sf-legal h3 { font-size: 18px; margin-top: 26px; }
.sf-legal p, .sf-legal li { max-width: 760px; }
.sf-page-head h1 { font-size: clamp(30px, 3.6vw, 42px); }

/* ---------- Contact ---------- */
.sf-contact-infos p { margin-bottom: 18px; }
.sf-contact-infos strong { display: block; color: var(--sf-marine); }
.et_pb_contact_form_container .et_pb_contact_field input, .et_pb_contact_form_container .et_pb_contact_field textarea { background: #fff !important; border: 1px solid var(--sf-filet) !important; border-radius: var(--sf-r-sm) !important; color: var(--sf-texte) !important; font-size: 15px !important; padding: 14px !important; }
.et_pb_contact_form_container .et_pb_contact_field input:focus, .et_pb_contact_form_container .et_pb_contact_field textarea:focus { border-color: var(--sf-ciel-fonce) !important; outline: 2px solid rgba(24,173,221,.25); }
.et_pb_contact_form_container .et_pb_contact_submit { margin-left: 0 !important; }

/* ---------- Mobile ---------- */
@media (max-width: 980px) {
	.sf-mosaic .et_pb_image:nth-child(2), .sf-mosaic .et_pb_image:nth-child(4) { transform: none; }
	.sf-formats { grid-template-columns: 1fr; }
	.sf-reassurance { grid-template-columns: 1fr; gap: 20px; }
	.sf-bulle { padding: 28px 22px !important; }
}
@media (max-width: 600px) {
	.sf-chiffres { grid-template-columns: 1fr 1fr; }
	.sf-chiffres div { padding-top: 18px; }
	.sf-hero .sf-lead { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}

/* Bas de page */
#footer-bottom .et-social-icons { display: none; }
#footer-bottom .bottom-nav a { color: #9AA4BD; font-weight: 500; }
#footer-bottom .bottom-nav a:hover { color: #fff; }

/* Grille des thématiques */
.sf-tiles-grid { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sf-tiles-grid .et_pb_image { margin: 0 !important; overflow: hidden; border-radius: var(--sf-r-md); }
@media (max-width: 767px) { .sf-tiles-grid { grid-template-columns: 1fr 1fr; gap: 12px; } }

/* Listes de mise en page sans puces */
.et_pb_text ul.sf-formats, .et_pb_text ul.sf-reassurance { list-style: none !important; padding-left: 0 !important; }
.et_pb_text ul.sf-formats li, .et_pb_text ul.sf-reassurance li { list-style: none !important; }

/* ---------- Hero vidéo : filtre marine 55 % + bouton pause ---------- */
.sf-hero.et-pb-has-background-video { position: relative; overflow: hidden; isolation: isolate; }
.sf-hero .et-pb-background-video { position: absolute; inset: 0; z-index: 0; }
.sf-hero .et-pb-background-video video { width: 100%; height: 100%; object-fit: cover; }
.sf-hero.et-pb-has-background-video::before {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background-color: rgba(25, 31, 58, var(--sf-filtre-opacite, 0.55)); /* Marine #191F3A, opacité réglable dans Divi : section Hero > Avancé > Attributs > data-filtre-opacite */
}
.sf-hero.et-pb-has-background-video > .et_pb_row { position: relative; z-index: 2; }
.sf-video-toggle {
	position: absolute; right: 24px; bottom: 24px; z-index: 3;
	display: inline-flex; align-items: center; gap: 8px;
	padding: 9px 14px 9px 12px; border: 1px solid rgba(255,255,255,.45); border-radius: var(--sf-r-sm);
	background: rgba(17, 22, 43, 0.6); color: #fff; cursor: pointer;
	font: 600 13px/1 'Montserrat', sans-serif;
	transition: background-color .2s ease, border-color .2s ease;
}
.sf-video-toggle:hover { background: var(--sf-marine); border-color: var(--sf-ciel); }
.sf-video-toggle:focus-visible { outline: 3px solid var(--sf-ciel); outline-offset: 2px; }
.sf-video-toggle svg { width: 14px; height: 14px; fill: currentColor; flex: none; }
.sf-video-toggle .sf-ico-play { display: none; }
.sf-video-toggle[aria-pressed="true"] .sf-ico-play { display: block; }
.sf-video-toggle[aria-pressed="true"] .sf-ico-pause { display: none; }
/* Mobile et économie de données : pas de vidéo, fond marine seul */
.sf-hero.sf-video-off .et-pb-background-video, .sf-hero.sf-video-off .sf-video-toggle { display: none; }
@media (max-width: 767px) { .sf-video-toggle { right: 16px; bottom: 16px; } }
.sf-hero.sf-video-off .et_pb_row { visibility: visible !important; opacity: 1 !important; }

/* La hauteur 69vh devient une hauteur minimale : le contenu n'est jamais coupé */
.sf-hero.et_pb_section { height: auto !important; min-height: 69vh; }
.sf-hero.sf-video-off::before { display: none; }
/* Lisibilité du texte sur la vidéo */
.sf-hero.et-pb-has-background-video h1, .sf-hero.et-pb-has-background-video .sf-lead { text-shadow: 0 1px 18px rgba(17,22,43,.45); }
.sf-hero.et-pb-has-background-video .sf-lead { color: #E6EAF3; }

/* ---------- Parallaxe du hero ---------- */
.sf-hero.sf-parallax .et-pb-background-video { top: -18% !important; bottom: -18% !important; left: 0; right: 0; height: auto !important; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .sf-hero.sf-parallax .et-pb-background-video { inset: 0; transform: none !important; } }