/*
Theme Name: Blocksy Child — Plongez!
Theme URI: https://plongez.fr
Description: Thème enfant de Blocksy pour le magazine PLONGEZ! (plongez.fr). Surcharges CSS/PHP spécifiques au site.
Author: explorations360
Author URI: https://explorations360.com
Template: blocksy
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blocksy-child-plongez
*/

/* =====================================================================
   CHARTE GRAPHIQUE PLONGEZ! — reproduite depuis le snapshot du site live
   (plongez.fr, rendu Blocksy). Toutes les valeurs ci-dessous sont
   extraites du CSS inline généré par Blocksy sur le site en production.

   Palette :
     1  #ffffff  blanc (fond header, dropdowns)
     2  #00a7e3  bleu Plongez (accent, titres, liens hover)
     3  #5e5e5e  gris texte courant
     4  #000000
     5  #e8ebed  gris bordures
     6  #f4f5f6  gris clair
     7  #fbfbfc  fond de page
     8  #ffffff
     9  #000000
     10 #ffffff
   Couleurs secondaires relevées : #05005d (bleu nuit, hovers),
   #f3e304 (jaune, accents menu mobile / footer), #01a8e5 (boutons).

   Typo : corps Roboto (400/500 + italiques), titres Fjalla One (400).
   Les polices sont enfilées via functions.php (Google Fonts).
   ===================================================================== */

/* -------------------------------------------------------------------
   1. Variables globales Blocksy (équivalent des réglages Customizer)
   ------------------------------------------------------------------- */
:root {
	/* Palette */
	--theme-palette-color-1: #ffffff;
	--theme-palette-color-2: #00a7e3;
	--theme-palette-color-3: #5e5e5e;
	--theme-palette-color-4: #000000;
	--theme-palette-color-5: #e8ebed;
	--theme-palette-color-6: #f4f5f6;
	--theme-palette-color-7: #fbfbfc;
	--theme-palette-color-8: #ffffff;
	--theme-palette-color-9: #000000;
	--theme-palette-color-10: #ffffff;

	/* Couleurs fonctionnelles */
	--theme-text-color: var(--theme-palette-color-3);
	--theme-link-initial-color: var(--theme-palette-color-3);
	--theme-link-hover-color: var(--theme-palette-color-2);
	--theme-selection-text-color: var(--theme-palette-color-1);
	--theme-selection-background-color: var(--theme-palette-color-2);
	--theme-border-color: var(--theme-palette-color-5);
	--theme-headings-color: var(--theme-palette-color-2);

	/* Typographie de base */
	--theme-font-family: Roboto, Sans-Serif;
	--theme-font-weight: 400;
	--theme-text-transform: none;
	--theme-text-decoration: none;
	--theme-font-size: 17px;
	--theme-line-height: 1.65;
	--theme-letter-spacing: 0em;

	/* Boutons */
	--theme-button-font-family: Roboto, Sans-Serif;
	--theme-button-font-weight: 500;
	--theme-button-font-size: 18px;
	--theme-button-min-height: 40px;
	--theme-button-shadow: none;
	--theme-button-transform: none;
	--theme-button-text-initial-color: #fff;
	--theme-button-text-hover-color: #01a8e5;
	--theme-button-background-initial-color: #01a8e5;
	--theme-button-background-hover-color: #e7eaec;
	--theme-button-border: none;
	--theme-button-border-radius: 2px;
	--theme-button-padding: 5px 20px;

	/* Formulaires */
	--theme-form-field-border-initial-color: var(--theme-border-color);
	--theme-form-field-border-focus-color: var(--theme-palette-color-1);
	--theme-form-selection-field-initial-color: var(--theme-border-color);
	--theme-form-selection-field-active-color: var(--theme-palette-color-1);

	/* Badges (panier, etc.) */
	--badge-text-color: #11264d;
	--badge-background-color: #fff;

	/* Conteneurs / espacements */
	--theme-normal-container-max-width: 1230px;
	--theme-narrow-container-max-width: 750px;
	--theme-wide-offset: 130px;
	--theme-container-edge-spacing: 90vw;
	--theme-content-vertical-spacing: 20px;
	--theme-content-spacing: 1.5em;
}

@media (max-width: 999.98px) {
	:root { --theme-container-edge-spacing: 88vw; }
}

@media (max-width: 689.98px) {
	:root { --theme-container-edge-spacing: 86vw; }
}

/* Fond de page */
body {
	background-color: var(--theme-palette-color-7);
}

/* -------------------------------------------------------------------
   2. Titres — Fjalla One, graisse 400, couleur bleu Plongez
   (tailles relevées : h1 40 / h2 35 / h3 30 / h4 25 / h5 23)
   ------------------------------------------------------------------- */
h1 {
	--theme-font-family: "Fjalla One", Sans-Serif;
	--theme-font-weight: 400;
	--theme-font-size: 40px;
	--theme-line-height: 1.5;
}

h2 {
	--theme-font-family: "Fjalla One", Sans-Serif;
	--theme-font-weight: 400;
	--theme-font-size: 35px;
	--theme-line-height: 1.5;
}

h3 {
	--theme-font-family: "Fjalla One", Sans-Serif;
	--theme-font-weight: 400;
	--theme-font-size: 30px;
	--theme-line-height: 1.5;
}

h4 {
	--theme-font-family: "Fjalla One", Sans-Serif;
	--theme-font-weight: 400;
	--theme-font-size: 25px;
	--theme-line-height: 1.5;
}

h5 {
	--theme-font-family: "Fjalla One", Sans-Serif;
	--theme-font-weight: 400;
	--theme-font-size: 23px;
}

h6 {
	--theme-font-family: "Fjalla One", Sans-Serif;
	--theme-font-weight: 400;
}

/* Surcharges « CSS additionnel » présentes sur le site live :
   force Fjalla One aussi sur les blocs Gutenberg qui embarquent leur
   propre famille, et cale la taille du h5. */
:root h2,
:root h3,
:root h4,
:root h5,
h2.wp-block-heading,
h3.wp-block-heading,
h4.wp-block-heading,
h5.wp-block-heading {
	font-family: "Fjalla One", sans-serif;
}

h5 {
	font-size: 23px;
	line-height: 20px;
}

/* -------------------------------------------------------------------
   3. Header (fond blanc, 2 rangées, menu Fjalla One en pilule bleue)
   ------------------------------------------------------------------- */
.ct-header,
[data-sticky*="yes"] {
	background-color: var(--theme-palette-color-1);
	background-image: none;
}

/* Rangée du milieu : logo + recherche/compte/panier, 110px, filet gris */
.ct-header [data-row*="middle"] {
	--height: 110px;
	background-color: var(--theme-palette-color-1);
	--theme-border-top: none;
	--theme-border-bottom: none;
	--theme-box-shadow: none;
	background-image: none;
}

.ct-header [data-row*="middle"] > div {
	--theme-border-top: none;
	--theme-border-bottom: 1px solid #ededed;
}

/* Rangée du bas : menu principal, 70px, filet bleu */
.ct-header [data-row*="bottom"] {
	--height: 70px;
	background-color: var(--theme-palette-color-1);
	--theme-border-top: none;
	--theme-border-bottom: 1px solid var(--theme-palette-color-2);
	--theme-box-shadow: none;
	background-image: none;
}

/* Logo */
.ct-header [data-id="logo"] .site-logo-container {
	--logo-max-height: 75px;
}

.ct-header [data-id="logo"] {
	--horizontal-alignment: left;
}

/* Menu principal : Fjalla One 24px, MAJUSCULES, bleu ; au survol le
   texte passe en blanc sur pilule bleue (menu Blocksy "type-3"). */
.ct-header [data-id="menu"] {
	--menu-items-spacing: 15px;
	--menu-items-gap: 3px;
	--menu-indicator-hover-color: var(--theme-palette-color-2);
	--menu-indicator-active-color: var(--theme-palette-color-2);
}

.ct-header [data-id="menu"] > ul > li > a {
	--menu-item-height: 50%;
	--theme-font-family: "Fjalla One", Sans-Serif;
	--theme-font-weight: 400;
	--theme-text-transform: uppercase;
	--theme-font-size: 24px;
	--theme-line-height: 1.3;
	--theme-link-initial-color: var(--theme-palette-color-2);
	--theme-link-hover-color: var(--theme-palette-color-1);
	--theme-link-active-color: var(--theme-palette-color-1);
	--menu-item-radius: 4px;
}

/* Sous-menus déroulants : fond blanc, liens bleus 16px capitales */
.ct-header [data-id="menu"] .sub-menu {
	--dropdown-background-color: var(--theme-palette-color-1);
	--dropdown-horizontal-offset: 5px;
	--dropdown-width: 180px;
	--dropdown-items-spacing: 10px;
	--dropdown-divider: 1px solid var(--theme-palette-color-5);
	--theme-box-shadow: 0px 10px 20px rgba(41, 51, 61, 0.1);
	--theme-border-radius: 0px 0px 2px 2px;
}

.ct-header [data-id="menu"] .sub-menu .ct-menu-link {
	--theme-link-initial-color: var(--theme-palette-color-2);
	--theme-link-hover-color: var(--theme-palette-color-1);
	--theme-link-active-color: var(--theme-palette-color-1);
	--theme-font-weight: 500;
	--theme-text-transform: uppercase;
	--theme-font-size: 16px;
}

/* Icônes compte / panier (bleu, survol bleu nuit) */
[data-id="account"] .ct-account-item {
	--theme-link-initial-color: var(--theme-palette-color-8);
	--theme-link-hover-color: #084c61;
	--theme-icon-color: var(--theme-palette-color-2);
	--theme-icon-hover-color: #05005d;
}

[data-id="cart"] .ct-cart-item {
	--theme-icon-color: var(--theme-palette-color-2);
	--theme-icon-hover-color: #05005d;
}

/* Modale de recherche : bleu Plongez sur fond gris clair */
#search-modal {
	background-color: var(--theme-palette-color-5);
}

#search-modal .ct-search-form {
	--theme-link-initial-color: var(--theme-palette-color-2);
	--theme-link-hover-color: #05005d;
	--theme-form-text-initial-color: var(--theme-palette-color-2);
	--theme-form-text-focus-color: var(--theme-palette-color-2);
	--theme-form-field-border-initial-color: var(--theme-palette-color-2);
	--theme-form-field-border-focus-color: var(--theme-palette-color-2);
	--theme-button-text-initial-color: var(--theme-palette-color-2);
	--theme-button-text-hover-color: #05005d;
	--theme-button-background-initial-color: #05005d;
	--theme-button-background-hover-color: var(--theme-palette-color-2);
	--theme-form-border-radius: 20px;
}

#search-modal .ct-toggle-close {
	--theme-icon-color: var(--theme-palette-color-2);
	--theme-icon-size: 20px;
}

#search-modal .ct-toggle-close:hover {
	--theme-icon-color: #05005d;
}

/* -------------------------------------------------------------------
   4. Menu mobile / panneau off-canvas (fond bleu, liens blancs,
      survol jaune)
   ------------------------------------------------------------------- */
#offcanvas .ct-panel-inner {
	background-color: var(--theme-palette-color-2);
}

#offcanvas .ct-toggle-close {
	--theme-icon-color: #f3e304;
	--theme-icon-size: 25px;
}

[data-id="mobile-menu"] {
	--items-vertical-spacing: 5px;
	--theme-font-family: "Fjalla One", Sans-Serif;
	--theme-font-weight: 400;
	--theme-text-transform: uppercase;
	--theme-font-size: 20px;
	--theme-link-initial-color: #fff;
	--theme-link-hover-color: #f3e304;
	--mobile-menu-divider: none;
}

[data-id="mobile-menu"] .sub-menu {
	--theme-font-family: "Fjalla One", Sans-Serif;
	--theme-font-weight: 400;
	--theme-text-transform: capitalize;
}

/* -------------------------------------------------------------------
   5. Footer — dégradé bleu Plongez, texte blanc
   ------------------------------------------------------------------- */
.ct-footer {
	background-color: initial;
	background-image: linear-gradient(#00b1f1 33%, #01688e 100%);
}

.ct-footer [data-row*="top"],
.ct-footer [data-row*="middle"],
.ct-footer [data-row*="bottom"] {
	--theme-border-top: none;
	--theme-border-bottom: none;
	background-color: transparent;
}

/* Rangée haute : filets translucides blancs */
.ct-footer [data-row*="top"] > div {
	--container-spacing: 25px;
	--theme-border: none;
	--theme-border-top: 1px solid rgba(255, 255, 255, 0.2);
	--theme-border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* Rangée médiane : 3 colonnes de widgets centrées */
.ct-footer [data-row*="middle"] > div {
	--container-spacing: 30px;
	--vertical-alignment: center;
	--theme-border: none;
	--theme-border-top: none;
	--theme-border-bottom: none;
	--grid-template-columns: repeat(3, 1fr);
}

/* Rangée basse (copyright) : filet haut translucide */
.ct-footer [data-row*="bottom"] > div {
	--container-spacing: 25px;
	--theme-border: none;
	--theme-border-top: 1px solid rgba(255, 255, 255, 0.2);
	--theme-border-bottom: none;
}

/* Widgets : texte blanc, survols bleu nuit / jaune */
.ct-footer [data-column="widget-area-1"] .ct-widget,
.ct-footer [data-column="widget-area-2"] .ct-widget {
	--theme-text-color: #fff;
	--theme-link-hover-color: #05005d;
}

.ct-footer [data-column="widget-area-3"] .ct-widget {
	--theme-text-color: #fff;
	--theme-link-hover-color: #f3e304;
}

.ct-footer [data-column="widget-area-1"],
.ct-footer [data-column="widget-area-2"],
.ct-footer [data-column="widget-area-3"] {
	--text-horizontal-alignment: center;
	--horizontal-alignment: center;
	--vertical-alignment: center;
}

/* Copyright */
[data-column="copyright"] {
	--horizontal-alignment: center;
}

[data-id="copyright"] {
	--theme-font-weight: 400;
	--theme-font-size: 15px;
	--theme-line-height: 1.3;
	--theme-text-color: var(--theme-palette-color-8);
}

/* Filet de secours : liens du footer lisibles en blanc même hors
   variables Blocksy (robustesse si la structure de widgets diffère). */
.ct-footer,
.ct-footer a {
	color: #fff;
}

.ct-footer a:hover {
	color: #f3e304;
}

/* Animation du dégradé du hero d'accueil (reproduit l'animation 18s du live) */
.plongez-gradient-anim{background-size:400% 400%;animation:plongezGradient 18s ease infinite}
@keyframes plongezGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* Accueil : masque la barre de titre de page (le live n'en a pas sur la home) */
.home .page-title,
.home .entry-header:has(.page-title),
.home .ct-page-title-container{display:none!important}

/* En-tête : un seul logo — masque le titre de site en double */
.site-title-container{display:none!important}
/* Accueil : supprime la barre de titre de page (le live n'en a pas) */
.home .hero-section{display:none!important}


/* Aligne les couleurs de preset Gutenberg sur la palette de marque Blocksy */
:root{
  --wp--preset--color--palette-color-1:#ffffff;
  --wp--preset--color--palette-color-2:#00a7e3;
  --wp--preset--color--palette-color-3:#5e5e5e;
  --wp--preset--color--palette-color-4:#000000;
  --wp--preset--color--palette-color-5:#e8ebed;
  --wp--preset--color--palette-color-6:#f4f5f6;
  --wp--preset--color--palette-color-7:#fbfbfc;
  --wp--preset--color--palette-color-8:#ffffff;
}


/* =====================================================================
   EN-TÊTE — reproduction du header live (2 rangées + leaderboard pub)
   Live : rangée middle 110px (logo | pub 728×90) puis rangée bottom
   70px (menu | recherche·compte·panier, filet bleu). La rangée haute
   est injectée via `blocksy:header:before` (voir functions.php) ; la
   rangée native Blocksy (une seule rangée : logo + menu + icônes)
   devient la rangée basse : on masque son logo sur desktop.
   Mobile (<1000px) : rangée injectée masquée, header natif inchangé.
   ===================================================================== */

/* Rangée haute injectée : masquée par défaut (mobile) */
.plz-header-top {
	display: none;
	background-color: #ffffff;
	border-bottom: 1px solid #ededed;
}

@media (min-width: 1000px) {
	/* --- Rangée haute : logo à gauche, leaderboard 728×90 à droite --- */
	.plz-header-top { display: block; }

	.plz-header-top-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		min-height: 110px;
		width: min(var(--theme-normal-container-max-width, 1230px), var(--theme-container-edge-spacing, 90vw));
		margin: 0 auto;
	}

	.plz-header-top-brand img,
	.plz-header-top-brand .custom-logo {
		display: block;
		max-height: 75px;
		width: auto;
	}

	.plz-header-top-ad img {
		display: block;
		width: 728px;
		max-width: 100%;
		height: auto;
	}

	/* --- Rangée native = rangée basse du live : menu + icônes ---
	   Le logo natif est masqué (il vit désormais dans la rangée haute) ;
	   hauteur 70px et filet bleu en bas comme sur le live. */
	.ct-header [data-device="desktop"] .site-branding { display: none; }

	.ct-header [data-device="desktop"] [data-row] {
		--height: 70px;
		border-bottom: 1px solid var(--theme-palette-color-2, #00a7e3);
	}
}

/* ===== Ajouts polish (agent Fable) ===== */
/* ============================================================
   PLONGEZ! — CSS additionnel (rebuild Blocksy, blocs gratuits)
   À fusionner dans le style.css du child theme blocksy-child-plongez.
   Aucune règle ici n'écrase la charte existante (#00a7e3, Roboto/
   Fjalla One) : uniquement des compléments pour coller au live.
   ============================================================ */

/* ---- Titres de rubrique (bandeaux bleus de la home) ----------
   Sur le live (Kadence adv-heading) : centrés, 26px, capitalize,
   coins supérieurs très arrondis (50px) et coins bas quasi droits.
   La classe est posée sur les core/heading du rebuild. */
.plongez-rubrique {
    border-radius: 50px 50px 3px 3px;
    text-transform: capitalize;          /* filet de sécurité si un titre reste en minuscules */
    font-family: "Fjalla One", sans-serif;
    letter-spacing: .5px;
}
.plongez-rubrique a {
    color: #fff;
    text-decoration: none;
}
.plongez-rubrique a:hover {
    color: #f3e304;                       /* jaune charte au survol, comme les liens du live */
}

/* ---- Titre « En Kiosque » ------------------------------------
   Le live l'affiche en jaune #f3e304, 50px, capitalize.
   Ombre légère ajoutée pour garder la lisibilité du jaune
   sur le bandeau clair (le live utilise le même artifice en footer). */
.plongez-kiosque-title {
    text-transform: capitalize;
    font-family: "Fjalla One", sans-serif;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .35);
    margin-bottom: 10px;
}

/* ---- Cartes d'articles (kadence/posts) -----------------------
   Rapproche les cartes du rendu live : titre compact,
   image légèrement arrondie, léger zoom au survol. */
.wp-block-kadence-posts .entry-title,
.kt-blocks-post-grid-item .entry-title {
    font-size: 1rem;
    line-height: 1.35;
}
.kt-blocks-post-grid-item .kadence-post-image {
    border-radius: 4px;
    overflow: hidden;
}
.kt-blocks-post-grid-item .kadence-post-image img {
    transition: transform .3s ease;
}
.kt-blocks-post-grid-item:hover .kadence-post-image img {
    transform: scale(1.04);
}

/* ---- Page Abonnez-vous : cartes d'offres ---------------------
   Reproduit les cartes tarifaires du live (Kadence Pro pricing
   table) avec de simples groupes bordés. */
.plongez-offre {
    border: 3px solid #00a7e3;
    border-radius: 12px;
    transition: box-shadow .2s ease;
}
.plongez-offre:hover {
    box-shadow: 0 6px 24px rgba(0, 27, 48, .18);
}
.plongez-offre .plongez-offre-prix {
    font-family: "Fjalla One", sans-serif;
}

/* ---- Page Boutique : vignettes de catégories -----------------
   Légende centrée sous l'image, capitalize comme le live. */
.plongez-cat-tile figcaption,
.plongez-cat-tile + .wp-block-heading {
    text-transform: capitalize;
}
.plongez-cat-tile img {
    border-radius: 6px;
    transition: transform .3s ease;
}
.plongez-cat-tile:hover img {
    transform: scale(1.05);
}

/* ---- Accordéons (wp:details utilisés en FAQ) -----------------
   Harmonise les FAQ (contact, web premium, abonnez-vous)
   avec le style accordéon Kadence du live. */
.wp-block-details {
    border: 1px solid #e3e6e8;
    border-radius: 6px;
    margin-bottom: 10px;
    padding: 12px 16px;
}
.wp-block-details summary {
    font-weight: 600;
    cursor: pointer;
    color: #002337;
}
.wp-block-details[open] summary {
    color: #00a7e3;
    margin-bottom: 8px;
}

/* ---- Menu principal : centré et agrandi (comme OCEANS) -------- */
@media (min-width: 1000px) {
	.ct-header [data-device="desktop"] [data-row] [data-id="menu"] {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	.ct-header [data-id="menu"] > ul > li > a {
		--theme-font-family: "Fjalla One", sans-serif;
		--theme-font-size: 24px;
		--theme-text-transform: uppercase;
		font-family: "Fjalla One", sans-serif;
		font-size: 24px;
		text-transform: uppercase;
	}
}


/* ---- Palette de marque forcée dans l en-tête -----------------
   Blocksy impose sa palette par défaut (bleu #2872fa) via des variables
   locales sur #header → dropdowns/sous-menus bleu sur bleu illisibles.
   On réaffirme la palette de marque sur tout le header. */
#header,
.ct-header,
#header [data-row],
#header .sub-menu {
	--theme-palette-color-1: #ffffff !important;
	--theme-palette-color-2: #00a7e3 !important;
	--theme-palette-color-3: #5e5e5e !important;
	--theme-palette-color-4: #000000 !important;
	--theme-palette-color-5: #e8ebed !important;
	--theme-palette-color-6: #f4f5f6 !important;
	--theme-palette-color-7: #fbfbfc !important;
	--theme-palette-color-8: #ffffff !important;
}


/* ---- Sous-menus : contraste garanti (couleurs littérales) --------
   Repos : texte cyan sur fond blanc. Survol/item courant : texte blanc
   sur fond cyan. Indépendant des variables de palette (qui posaient
   des soucis fond/texte identiques dans le contexte header). */
.ct-header [data-id="menu"] .sub-menu { background-color: #ffffff !important; }
.ct-header [data-id="menu"] .sub-menu .ct-menu-link { color: #00a7e3 !important; background-color: transparent !important; }
.ct-header [data-id="menu"] .sub-menu .ct-menu-link:hover,
.ct-header [data-id="menu"] .sub-menu li[class*="current"] > .ct-menu-link {
	color: #ffffff !important;
	background-color: #00a7e3 !important;
}


/* ---- Menu haut : couleurs live (cyan au repos, pilule cyan si sélectionné/survol) ----
   Corrige : repos tombé en gris + item sélectionné blanc sur blanc. */
.ct-header [data-id="menu"] > ul > li > a { color: #00a7e3 !important; }
.ct-header [data-id="menu"] > ul > li > a:hover,
.ct-header [data-id="menu"] > ul > li[class*="current-menu"] > a {
	color: #ffffff !important;
	background-color: #00a7e3 !important;
	border-radius: 4px;
}


/* ---- Pilule du menu haut : resserrée autour du texte -------------
   (le lien fait 60px de haut ; on ramène le fond à ~hauteur du texte) */
.ct-header [data-id="menu"] > ul > li { align-items: center; }
.ct-header [data-id="menu"] > ul > li > a:hover,
.ct-header [data-id="menu"] > ul > li[class*="current-menu"] > a {
	height: auto !important;
	min-height: 0 !important;
	align-self: center !important;
	padding: 5px 12px !important;
	line-height: 1.2 !important;
	border-radius: 4px;
}

/* ---- Bandeau newsletter footer ---- */
.turtle-footer-newsletter{background:linear-gradient(#00b1f1 33%,#01688e 100%);padding:35px 20px;color:#fff}
.turtle-nl-inner{max-width:900px;margin:0 auto;text-align:center}
.turtle-nl-title{color:#fff!important;font-family:"Fjalla One",sans-serif;text-transform:uppercase;font-size:28px;margin:0 0 18px}
.turtle-footer-newsletter .ff-el-group{display:inline-block;vertical-align:top;margin:0 6px 10px;text-align:left}
.turtle-footer-newsletter .ff-el-input--label label{color:#fff}
.turtle-footer-newsletter .ff-btn-submit{background:#f3e304!important;color:#05005d!important;font-weight:700}

/* Réduit la grande marge blanche entre le header (bandeau pub + menu) et le
   contenu — on ne touche qu'au haut, l'espacement bas reste inchangé. */
#main > .ct-container-full[data-vertical-spacing*="top"],
#main > .ct-container[data-vertical-spacing*="top"] {
	padding-top: 15px;
}

/* ---------------------------------------------------------------------
   Page Web Premium (post 86089) — vidéos de fond Bunny CDN
   --------------------------------------------------------------------- */
.plongez-premium-hero h1 {
	text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}
.plongez-premium-band h2,
.plongez-premium-offer-bg h2 {
	text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}
.plongez-premium-offer {
	background: #ffffff;
	box-shadow: 0 12px 30px rgba(0, 27, 48, .35);
}
/* =====================================================================
   Landings magazine (magazine-plongez-NN) — gabarit natif reproduisant
   la prod plongez.fr/magazine-plongez-XX/. Contenu reconstruit en HTML
   propre (.mag-*), sans dépendance GreenShift/Kadence. Valeurs (couleurs,
   lettrine, sommaire) reprises telles quelles du live.
   ===================================================================== */
/* Masque le titre Blocksy natif : remplacé par le bandeau cyan du contenu */
body.plongez-magazine .entry-header,
body.plongez-magazine .page-title,
body.plongez-magazine .ct-page-title {
	display: none !important;
}

.mag-band {
	background: #00a7e3;
	color: #fff;
	font-family: 'Fjalla One', sans-serif;
	text-transform: uppercase;
	font-size: 2rem;
	letter-spacing: .02em;
	text-align: center;
	padding: 22px 20px;
	margin: 0 0 34px;
}

.mag-wrap {
	--mag-accent: #06b6d4;
	--mag-primary: #0f172a;
	--mag-bg-light: #f1f5f9;
	--mag-font: 'Inter', 'Helvetica Neue', Arial, sans-serif;
	display: flex;
	gap: 40px;
	align-items: flex-start;
	max-width: 1290px;
	margin: 0 auto;
	padding: 0 20px 40px;
}
.mag-side { flex: 0 0 33%; }
.mag-main { flex: 1 1 auto; min-width: 0; font-family: var(--mag-font); color: #334155; line-height: 1.8; }

/* Carte couverture + boutons (encart bordé, ombre) */
.mag-card {
	background: #fff;
	border: 2px solid #cacaca;
	box-shadow: 0 24px 40px rgba(0, 0, 0, .15);
	padding: 16px;
}
.mag-cover { display: block; width: 100%; height: auto; }

/* Bouton « Feuilleter le Magazine » (vert -> cyan au survol) */
.mag-feuilleter {
	display: block;
	margin: 14px 0 6px;
	padding: 12px 20px;
	text-align: center;
	background: #1c7c54;
	color: #fff !important;
	font-family: 'Fjalla One', sans-serif;
	font-size: 26px;
	text-decoration: none;
	cursor: pointer;
	border-radius: 2px;
}
.mag-feuilleter:hover { background: #00a7e3; }

/* Boutons achat Papier (rose) / Digitale (orange) */
.mag-buy {
	display: block;
	margin: 6px 0 0;
	padding: 10px 20px 12px;
	text-align: center;
	color: #fff !important;
	font-family: 'Fjalla One', sans-serif;
	font-size: 20px;
	line-height: 1.15;
	text-decoration: none;
	border-radius: 3px;
}
.mag-buy small { display: block; font-size: 26px; }
.mag-buy-papier { background: #d81e5b; }
.mag-buy-papier:hover { background: #b81a4d; }
.mag-buy-digitale { background: #f58549; }
.mag-buy-digitale:hover { background: #e0703a; }

/* Éditorial (lettrine + citation manifeste) */
.mag-main .editorial-lead { font-size: 1.4rem; color: var(--mag-primary); font-weight: 300; margin-bottom: 2.5rem; }
.mag-main .editorial-lead::first-letter { font-size: 5rem; font-weight: 800; float: left; padding-right: 15px; color: var(--mag-accent); line-height: 1; }
.mag-main .editorial-manifesto { background: linear-gradient(135deg, var(--mag-primary), #1e293b); color: #fff; padding: 40px; border-left: 6px solid var(--mag-accent); margin: 3rem 0; border-radius: 4px; font-style: italic; }

/* Sommaire (grille 2 colonnes, cartes) */
.mag-main .sommaire-header h2 { font-size: 2.5rem; color: var(--mag-primary); text-transform: uppercase; border-bottom: 3px solid var(--mag-accent); display: inline-block; margin-bottom: 40px; }
.mag-main .sommaire-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.mag-main .sommaire-item { background: #fff; border: 1px solid #e2e8f0; padding: 25px; border-radius: 8px; transition: .3s; }
.mag-main .sommaire-item:hover { border-color: var(--mag-accent); transform: translateY(-5px); }
.mag-main .sommaire-item.featured { grid-column: span 2; background: var(--mag-bg-light); border-left: 5px solid var(--mag-accent); }
.mag-main .item-rubric { font-weight: 900; color: var(--mag-accent); text-transform: uppercase; font-size: .75rem; letter-spacing: .15em; }
.mag-main .item-page { font-weight: 800; color: var(--mag-primary); }

@media (max-width: 900px) {
	.mag-wrap { flex-direction: column; }
	.mag-side { flex: none; width: 100%; max-width: 420px; margin: 0 auto; }
	.mag-main .sommaire-grid { grid-template-columns: 1fr; }
	.mag-main .sommaire-item.featured { grid-column: span 1; }
}