/*
Theme Name: Blocksy Child — OCEANS
Theme URI: https://oceansmagazin.de
Description: Thème enfant de Blocksy pour OCEANS Magazin (oceansmagazin.de). 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-oceans
*/

/* ---------------------------------------------------------------------
   Personnalisations CSS — OCEANS Magazin
   Le style du thème parent Blocksy est chargé automatiquement.

   Charte extraite du snapshot du site live (oceansmagazin.de) :
   toutes les valeurs ci-dessous proviennent du CSS Blocksy compilé
   du site en production (bloc :root + règles data-header/data-footer).
   --------------------------------------------------------------------- */

/* =====================================================================
   1. VARIABLES GLOBALES (palette, typo, boutons, containers)
   Reproduit le bloc :root généré par le Customizer Blocksy du site live.
   ===================================================================== */

:root {
	/* --- Palette OCEANS --- */
	--theme-palette-color-1: #fff;      /* blanc (fonds header, texte sur bleu) */
	--theme-palette-color-2: #00a7e3;   /* bleu de marque OCEANS */
	--theme-palette-color-3: #5e5e5e;   /* gris — texte courant */
	--theme-palette-color-4: #000;
	--theme-palette-color-5: #e8ebed;   /* bordures */
	--theme-palette-color-6: #f4f5f6;
	--theme-palette-color-7: #fbfbfc;   /* fond du site */
	--theme-palette-color-8: #fff;
	--theme-palette-color-9: #000;
	--theme-palette-color-10: #fff;

	/* --- Couleurs sémantiques --- */
	--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 corps --- */
	--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;
	--theme-content-spacing: 1.5em;

	/* --- 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 (charte classique, focus bleu/blanc) --- */
	--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);

	/* --- Largeurs de containers --- */
	--theme-normal-container-max-width: 1290px;
	--theme-narrow-container-max-width: 750px;
	--theme-content-vertical-spacing: 40px;
	--theme-container-edge-spacing: 90vw;
	--theme-wide-offset: 130px;
}

/* Fond général du site */
body {
	background-color: var(--theme-palette-color-7);
}

/* =====================================================================
   2. TITRES — Fjalla One, couleur bleu de marque
   (valeurs du site live : h1 40 / h2 35 / h3 30 / h4 25, lh 1.5)
   ===================================================================== */

h1, h2, h3, h4, h5, h6 {
	--theme-font-family: "Fjalla One", Sans-Serif;
	--theme-font-weight: 400;
	--theme-line-height: 1.5;
	font-family: "Fjalla One", var(--theme-font-family, sans-serif);
	font-weight: 400;
	color: var(--theme-headings-color, #00a7e3);
}

h1 { --theme-font-size: 40px; font-size: 40px; }
h2 { --theme-font-size: 35px; font-size: 35px; }
h3 { --theme-font-size: 30px; font-size: 30px; }
h4 { --theme-font-size: 25px; font-size: 25px; }

/* =====================================================================
   3. BOUTONS — fallback direct au cas où le parent ne consomme pas
   toutes les variables (Gutenberg, formulaires, WooCommerce)
   ===================================================================== */

.wp-element-button,
.wp-block-button__link,
button[type="submit"],
input[type="submit"],
.ct-button {
	font-family: Roboto, sans-serif;
	font-weight: 500;
	font-size: 18px;
	color: var(--theme-button-text-initial-color, #fff);
	background-color: var(--theme-button-background-initial-color, #01a8e5);
	border: none;
	border-radius: 2px;
	padding: 5px 20px;
	min-height: 40px;
	text-transform: none;
}

.wp-element-button:hover,
.wp-block-button__link:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.ct-button:hover {
	color: var(--theme-button-text-hover-color, #01a8e5);
	background-color: var(--theme-button-background-hover-color, #e7eaec);
}

/* =====================================================================
   4. HEADER — fond blanc, menu Fjalla One majuscules bleu
   (site live : rangée middle 90px logo, rangée bottom 60px menu,
   liens bleus #00a7e3, survol = pastille bleue + texte blanc)
   ===================================================================== */

.ct-header,
.ct-header [data-sticky*="yes"] {
	background-color: var(--theme-palette-color-1);
	background-image: none;
}

.ct-header [data-row*="middle"] {
	--height: 90px;
	background-color: var(--theme-palette-color-1);
}

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

.ct-header [data-row*="bottom"] {
	--height: 60px;
	background-color: var(--theme-palette-color-1);
}

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

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

/* Menu principal */
.ct-header [data-id="menu"] {
	--menu-items-spacing: 15px;
	--menu-items-gap: 2px;
	--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;
	font-family: "Fjalla One", sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	font-size: 24px;
}

/* Sous-menus déroulants : fond blanc, texte bleu, survol fond bleu/texte blanc */
.ct-header [data-id="menu"] .sub-menu {
	--dropdown-background-color: var(--theme-palette-color-1);
	--dropdown-background-hover-color: var(--theme-palette-color-2);
	--dropdown-width: 255px;
	--dropdown-items-spacing: 5px;
	--dropdown-divider: 1px solid var(--theme-palette-color-2);
	--theme-box-shadow: 0px 10px 20px #29333d1a;
}

.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-family: "Fjalla One", Sans-Serif;
	--theme-font-weight: 400;
	--theme-text-transform: uppercase;
	--theme-font-size: 20px;
	font-family: "Fjalla One", sans-serif;
	text-transform: uppercase;
	font-size: 20px;
}

/* Menu mobile (panneau off-canvas bleu, liens blancs, survol jaune) */
[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;
}

#offcanvas .ct-panel-inner {
	background-color: var(--theme-palette-color-2);
}

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

/* =====================================================================
   5. FOOTER — dégradé bleu, menu majuscules, copyright italique
   (site live : linear-gradient(#00b1f1 33%, #01688e 100%))
   ===================================================================== */

.ct-footer {
	background-color: initial;
	background-image: linear-gradient(#00b1f1 33%, #01688e 100%);
}

.ct-footer [data-row] {
	background-color: transparent;
}

/* Rangée haute : 3 colonnes, filets blancs translucides */
.ct-footer [data-row*="top"] > div {
	--container-spacing: 10px;
	--vertical-alignment: center;
	--theme-border-top: 1px solid #fff3;
	--theme-border-bottom: 1px solid #fff3;
}

.ct-footer [data-row*="middle"] > div {
	--container-spacing: 5px;
	--vertical-alignment: center;
}

.ct-footer [data-row*="bottom"] > div {
	--container-spacing: 20px;
	--theme-border-top: 1px solid #fff3;
}

/* Texte et titres du footer en blanc sur le dégradé */
.ct-footer {
	--theme-text-color: var(--theme-palette-color-1);
	--theme-headings-color: var(--theme-palette-color-1);
	--theme-link-initial-color: var(--theme-palette-color-1);
	--theme-link-hover-color: #05005d;
	color: var(--theme-palette-color-1);
}

.ct-footer h1, .ct-footer h2, .ct-footer h3,
.ct-footer h4, .ct-footer h5, .ct-footer h6 {
	color: var(--theme-palette-color-1);
}

/* Menu footer : MAJUSCULES Roboto 16px/500, liens blancs, survol bleu nuit */
.ct-footer [data-id="menu"] {
	--menu-items-spacing: 30px;
}

.ct-footer [data-column="menu"] {
	--horizontal-alignment: center;
	--vertical-alignment: center;
}

.ct-footer [data-id="menu"] ul {
	--theme-font-weight: 500;
	--theme-text-transform: uppercase;
	--theme-font-size: 16px;
	--theme-line-height: 1.3;
	font-weight: 500;
	text-transform: uppercase;
	font-size: 16px;
}

.ct-footer [data-id="menu"] > ul > li > a {
	--theme-link-initial-color: var(--theme-palette-color-1);
	--theme-link-hover-color: #05005d;
}

/* Copyright : italique 15px, centré, blanc */
.ct-footer [data-id="copyright"] {
	--theme-font-weight: 400;
	--theme-font-style: italic;
	--theme-font-size: 15px;
	--theme-line-height: 1.3;
	--theme-text-color: var(--theme-palette-color-8);
	font-style: italic;
	font-size: 15px;
}

.ct-footer [data-column="copyright"] {
	--horizontal-alignment: center;
	text-align: center;
}

/* 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}

/* Corrige le contraste : les titres en "palette-color-1" doivent être blancs
   (le nom de palette ne l'emportait pas sur la couleur de titre du thème) */
.has-palette-color-1-color{color:#fff!important}

/* Aligne les couleurs de PRESET Gutenberg (utilisées par les blocs via
   .has-palette-color-N-*) sur la palette de marque Blocksy — sinon les blocs
   tombent sur les couleurs par défaut (bleu #1559ed au lieu du cyan #00a7e3). */
: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, logo centré)
   Live : rangée middle 90px (1 colonne, logo centré) puis rangée
   bottom 60px (3 colonnes : vide | menu centré | panier·compte·
   recherche). Pas de pub dans le header OCEANS (monétisation en
   sidebar + in-home sur le live). 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 et on recentre le menu sur desktop.
   Mobile (<1000px) : rangée injectée masquée, header natif inchangé.
   ===================================================================== */

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

@media (min-width: 1000px) {
	/* --- Rangée haute : logo seul, centré, 90px --- */
	.ocn-header-top { display: block; }

	.ocn-header-top-inner {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 90px;
		width: min(var(--theme-normal-container-max-width, 1290px), var(--theme-container-edge-spacing, 90vw));
		margin: 0 auto;
	}

	.ocn-header-top-inner img,
	.ocn-header-top-inner .custom-logo {
		display: block;
		max-height: 70px;
		width: auto;
	}

	/* --- Rangée native = rangée basse du live : menu centré + icônes ---
	   Le logo natif est masqué (il vit désormais dans la rangée haute) ;
	   hauteur 60px ; le menu est centré en absolu par rapport à la rangée
	   (le live utilise une rangée à 3 colonnes : vide | menu | icônes),
	   les icônes restent alignées à droite dans le flux normal. */
	.ct-header [data-device="desktop"] .site-branding { display: none; }

	.ct-header [data-device="desktop"] [data-row] {
		--height: 60px;
	}

	.ct-header [data-device="desktop"] [data-row] .ct-container {
		position: relative;
	}

	.ct-header [data-device="desktop"] [data-row] [data-id="menu"] {
		position: absolute;
		left: 50%;
		top: 0;
		bottom: 0;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
	}
}

/* ===== Ajouts polish (agent Fable) ===== */
/* ============================================================
   OCEANS Magazin — CSS additionnel (a fusionner dans style.css
   du child theme blocksy-child-oceans). Ne pas charger en double.
   ============================================================ */

/* ------------------------------------------------------------
   1. Titres de rubrique (bandeaux cyan)
   Reproduit le rendu du live (Kadence advancedheading) :
   centre, MAJUSCULES (casse via text-transform comme le live),
   26px, coins superieurs arrondis 50px.
   Cible : tout titre core avec fond palette-color-2, comme sur
   la home et les pages reconstruites.
   ------------------------------------------------------------ */
h1.wp-block-heading.has-palette-color-2-background-color,
h2.wp-block-heading.has-palette-color-2-background-color,
h3.wp-block-heading.has-palette-color-2-background-color {
	text-align: center;
	text-transform: uppercase;
	font-size: 26px;
	line-height: 1.35;
	border-radius: 50px 50px 3px 3px;
}

/* Contraste : les liens dans ces bandeaux restent blancs,
   survol jaune comme le live. */
h1.wp-block-heading.has-palette-color-2-background-color a,
h2.wp-block-heading.has-palette-color-2-background-color a,
h3.wp-block-heading.has-palette-color-2-background-color a {
	color: inherit;
	text-decoration: none;
}
h1.wp-block-heading.has-palette-color-2-background-color a:hover,
h2.wp-block-heading.has-palette-color-2-background-color a:hover,
h3.wp-block-heading.has-palette-color-2-background-color a:hover {
	color: #efe400;
}

/* ------------------------------------------------------------
   2. Cartes d'articles — bloc Kadence Posts (gratuit)
   Live : image 16:9 + titre seul, titre cyan 23px (20px mobile),
   survol gris, pas de meta/extrait. Les toggles (meta, excerpt,
   aboveCategories...) sont regles dans les attributs des blocs ;
   ici uniquement la typo/couleur des titres.
   ------------------------------------------------------------ */
.wp-block-kadence-posts .entry-title {
	margin: 0;
	padding: 10px 0 5px;
	font-size: 23px;
	line-height: 1.3;
}
.wp-block-kadence-posts .entry-title a {
	color: var(--theme-palette-color-2, #00a7e3);
	text-decoration: none;
}
.wp-block-kadence-posts .entry-title a:hover {
	color: var(--theme-palette-color-3, #5e5e5e);
}
@media (max-width: 767px) {
	.wp-block-kadence-posts .entry-title {
		font-size: 20px;
	}
}

/* Cartes posees sur un fond video/sombre (section magazin de la
   home, page magazin-taucher) : titres blancs, survol jaune. */
.wp-block-cover .wp-block-kadence-posts .entry-title a {
	color: #ffffff;
}
.wp-block-cover .wp-block-kadence-posts .entry-title a:hover {
	color: #efe400;
}

/* Alleger la "boite" par defaut du bloc Posts pour se rapprocher
   des cartes epurees du live (image + titre, sans cadre). */
.wp-block-kadence-posts.kb-posts-style-boxed article.loop-entry {
	background: transparent;
	box-shadow: none;
	border: 0;
}
.wp-block-kadence-posts.kb-posts-style-boxed article.loop-entry .entry-content-wrap {
	padding: 0.25rem 0 1rem;
}

/* ------------------------------------------------------------
   3. Page web-premium : l'apercu des articles premium garde
   extrait + bouton "Weiterlesen" comme le live (cartes blanches
   ombrees centrees).
   ------------------------------------------------------------ */
.kb-posts-id-oceanswp_teaser-aa article.loop-entry {
	background: #ffffff;
	border-radius: 5px;
	box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.2);
	overflow: hidden;
}
.kb-posts-id-oceanswp_teaser-aa article.loop-entry .entry-content-wrap {
	padding: 15px 25px 25px;
	text-align: center;
}


/* ---- 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 65954) — bandeau dégradé + grille d'articles
   --------------------------------------------------------------------- */
.oceans-premium-gradient {
	background: linear-gradient(300deg, #00bfff, #9400d3, #0000ff);
}
.oceans-premium-teasers .wp-block-post-featured-image img {
	border-radius: 10px;
}
.oceans-premium-teasers .wp-block-post-title a {
	text-decoration: none;
}
/* =====================================================================
   Landings magazine (tauchmagazin-oceans-N) — gabarit natif .mag-*,
   identique à Plongez (reproduit la prod). Contenu reconstruit en HTML
   propre sans dépendance GreenShift/Kadence.
   ===================================================================== */
body.oceans-magazine .entry-header,
body.oceans-magazine .page-title,
body.oceans-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; }

.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; }

.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; }

.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; }

.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; }
.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; }
}

/* =====================================================================
   Archive magazine (page magazin-taucher) — grille [oceans_magazine_grid]
   « Das Neueste » en vedette + grille des numéros (couvertures cliquables).
   ===================================================================== */
/* Hero pleine largeur avec vidéo de fond « bulles / océan » (Bunny CDN) */
.oc-mag-hero {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	overflow: hidden;
	padding: 30px 0 20px;
	background: linear-gradient(180deg, #0a6e9e, #062a3f); /* secours si la vidéo ne charge pas */
}
.oc-mag-bgvideo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	pointer-events: none;
}
.oc-mag-archive { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 10px 20px 30px; text-align: center; }
.oc-mag-latest {
	font-family: 'Fjalla One', sans-serif;
	color: #e2b100;                 /* jaune OCEANS, comme la prod */
	font-size: 2.4rem;
	margin: 0 0 30px;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.oc-mag-featured {
	display: inline-block;
	max-width: 340px;
	text-decoration: none;
	transition: transform .25s ease;
}
.oc-mag-featured:hover { transform: translateY(-6px); }
.oc-mag-featured img {
	display: block;
	width: 100%;
	height: auto;
	box-shadow: 0 18px 34px rgba(0, 0, 0, .22);
}
.oc-mag-featured-title,
.oc-mag-card-title {
	display: block;
	font-family: 'Fjalla One', sans-serif;
	color: #fff;
	margin-top: 14px;
	font-size: 1.15rem;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.oc-mag-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 34px;
	margin-top: 50px;
}
.oc-mag-card { text-decoration: none; transition: transform .25s ease; }
.oc-mag-card:hover { transform: translateY(-6px); }
.oc-mag-card img {
	display: block;
	width: 100%;
	height: auto;
	box-shadow: 0 12px 24px rgba(0, 0, 0, .18);
}
.oc-mag-card-title { font-size: 1rem; margin-top: 12px; }

@media (max-width: 780px) {
	.oc-mag-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 480px) {
	.oc-mag-grid { grid-template-columns: 1fr; }
}