/* =================================================================
   Baz Notik — feuille de style du site (refonte 2026)
   Un seul fichier pour tout le site. Mobile d'abord. Variables dans :root.
   Identité : l'énergie des sports de glisse de la base nautique —
   bleu marine du logo Baz'Notik, jaune voile, corail ; une seule famille
   (Archivo) en version très condensée et italique pour les titres.
   Motif : les coupes en biais, comme une voile ou une aile de kite
   (bas du héros, images en parallélogramme, bandeau de la base).
   Volontairement différent d'oceansidebistro.net (vagues, photos rondes)
   et d'asianrestaurantvi.com (papier/encre, cadres laqués rouges).
   ================================================================= */

:root{
  --marine:      #0E2F5A;   /* bleu du logo : en-tête, bandeau de la base */
  --marine-deep: #0A2242;   /* pied de page */
  --voile:       #FFD23F;   /* jaune voile : fond du héros, accents */
  --corail:      #D23B26;   /* bouton principal */
  --ecume:       #F3F7FA;   /* fond de page */
  --ink:         #0B1B2E;   /* texte */
  --muted:       #4A5A6E;
  --line:        rgba(11,27,46,.14);

  --font: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1160px;
  --gutter: 20px;
  --slant: polygon(2.5% 0, 100% 0, 97.5% 100%, 0 100%);   /* parallélogramme « voile » */
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  background: var(--ecume);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--marine); }
a:hover{ color: var(--corail); }
:focus-visible{ outline: 3px solid var(--corail); outline-offset: 3px; }

h1,h2,h3{ margin: 0; line-height: 1; }

/* titres : Archivo très condensé (font-stretch 62%), 900, italique, capitales */

.skip-link{
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--voile); color: var(--ink); padding: 10px 16px; font-weight: 700; text-decoration: none;
}
.skip-link:focus{ top: 12px; }

/* ---------- En-tête + menu partagé (.bnet-menu, depuis gandor.tv) ---------- */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background: var(--marine);
  transition: box-shadow .2s ease;
}
.site-header.is-scrolled{ box-shadow: 0 8px 24px -12px rgba(0,0,0,.45); }
.site-header__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 10px var(--gutter);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.brand img{ height: 50px; width: auto; }
.nav-toggle{
  margin-left: auto;
  font: 700 15px/1 var(--font); color: var(--marine);
  background: var(--voile); border: 0; padding: 11px 18px; cursor: pointer;
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}
html:not(.js) .nav-toggle{ display: none; }

.site-nav{ flex-basis: 100%; }
.js .site-nav{ display: none; }
.js .site-nav.is-open{ display: block; }

.bnet-menu{ list-style: none; margin: 0; padding: 4px 0 12px; }
.bnet-menu a{
  display: block; padding: 12px 2px;
  font-weight: 600; font-size: 16px; color: #fff; text-decoration: none;
  border-top: 1px solid rgba(255,255,255,.14);
}
.bnet-menu a:hover{ color: var(--voile); }

/* page active : classe page-* sur <body> + classe bnet-* sur le <li> */
.page-home .bnet-home a,
.page-website-solutions .bnet-website-solutions a,
.page-thrive .bnet-thrive a,
.page-directory .bnet-directory a,
.page-photos .bnet-photos a,
.page-free-stuff .bnet-free-stuff a,
.page-blog-network .bnet-blog-network a{ color: var(--voile); }

@media (min-width: 1100px){
  .site-header__inner{ flex-wrap: nowrap; }
  .nav-toggle{ display: none; }
  .site-nav, .js .site-nav{ display: block; flex-basis: auto; margin-left: auto; }
  .bnet-menu{ display: flex; gap: 2px; padding: 0; }
  .bnet-menu a{ border-top: 0; padding: 10px 10px 13px; font-size: 15px; white-space: nowrap; position: relative; }
  .bnet-menu a::after{
    content: ""; position: absolute; left: 10px; right: 10px; bottom: 4px; height: 4px;
    background: var(--voile); transform: skewX(-20deg) scaleX(0); transform-origin: left;
    transition: transform .2s ease;
  }
  .bnet-menu a:hover::after{ transform: skewX(-20deg) scaleX(1); }
  .page-home .bnet-home a::after,
  .page-website-solutions .bnet-website-solutions a::after,
  .page-thrive .bnet-thrive a::after,
  .page-directory .bnet-directory a::after,
  .page-photos .bnet-photos a::after,
  .page-free-stuff .bnet-free-stuff a::after,
  .page-blog-network .bnet-blog-network a::after{ transform: skewX(-20deg) scaleX(1); }
}

/* ---------- Héros : aplat jaune voile coupé en biais ---------- */
.hero{ position: relative; isolation: isolate; }
.hero::before{
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0;
  height: calc(100% - 140px);
  background: var(--voile);
  clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%);
}
.hero__inner{ max-width: var(--wrap); margin: 0 auto; padding: 44px var(--gutter) 40px; }
.hero__title{
  font-stretch: 62%; font-weight: 900; font-style: italic; text-transform: uppercase;
  font-size: clamp(46px, 8vw, 108px);
  line-height: .92;
  word-spacing: .08em;
  color: var(--marine);
  max-width: 21ch;
  text-wrap: balance;
}
.hero__row{ display: grid; gap: 20px; margin: 26px 0 40px; align-items: end; }
.hero__lede{ margin: 0; max-width: 46ch; font-size: clamp(17px, 1.5vw, 20px); font-weight: 500; color: var(--ink); }
.hero__lede a{ color: var(--ink); text-decoration-color: var(--corail); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.hero__actions{ margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 900px){
  .hero__row{ grid-template-columns: 1.2fr 1fr; gap: 40px; }
  .hero__actions{ justify-content: flex-end; }
}

.hero--page .hero__title{ font-size: clamp(44px, 7vw, 92px); }
.hero--page .hero__lede{ margin: 18px 0 36px; }
.hero--page::before{ height: calc(100% - 110px); }
.hero--no-image::before{ height: 100%; clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%); }
.hero--no-image .hero__inner{ padding-bottom: 72px; }
.hero--no-image .hero__lede{ margin-bottom: 0; }

.btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 12px 26px;
  font: 800 16px/1.2 var(--font); text-decoration: none;
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
  transition: background-color .2s ease, color .2s ease;
}
.btn--coral{ background: var(--corail); color: #fff; }
.btn--coral:hover{ background: #B32F1C; color: #fff; }
.btn--navy{ background: var(--marine); color: #fff; }
.btn--navy:hover{ background: var(--marine-deep); color: var(--voile); }
.btn--sun{ background: var(--voile); color: var(--marine); }
.btn--sun:hover{ background: #fff; color: var(--marine); }

/* image « feature » coupée en biais (includes/banner.incl.php) */
.banner{ margin: 0; aspect-ratio: 1280 / 500; clip-path: var(--slant); background: var(--marine); }
.banner img{ width: 100%; height: 100%; object-fit: cover; }
.hero--page .banner{ aspect-ratio: 1280 / 400; }
@media (max-width: 600px){
  .hero--page .banner{ aspect-ratio: 1280 / 500; }
  .hero::before{ height: calc(100% - 70px); }
}

/* ---------- Sections génériques ---------- */
.section{ padding: 40px 0 80px; }
.section__inner{ max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section__title{
  font-stretch: 62%; font-weight: 900; font-style: italic; text-transform: uppercase; word-spacing: .08em;
  font-size: clamp(38px, 5vw, 60px); color: var(--marine); margin-bottom: 28px;
}
.embed{ min-height: 320px; }

/* le contenu occupe toute la largeur, comme « Continuer l'exploration » ;
   les widgets gandor.tv se limitent eux-mêmes à 920px */
.network-embed > div[class^="gtv-"]{ max-width: none; margin-top: 0; margin-bottom: 0; }

/* Les intégrations tierces peignent leurs propres panneaux blancs/crème :
   on laisse voir le fond de page (les cartes à l'intérieur gardent le leur).
   !important car ces widgets injectent leur CSS après le nôtre. */
.page-home .eapps-facebook-feed-inner,
.page-photos .eapps-instagram-feed-header,
.page-thrive .cc-thrive-widget,
.page-directory .network-embed .ui-tabs,
.page-directory .network-embed .ui-tabs-nav,
.page-directory .network-embed .ui-tabs-panel,
.page-directory .network-embed .directory-card{ background: transparent !important; }

/* ---------- La base nautique (accueil) ---------- */
.base{
  background: var(--marine); color: rgba(255,255,255,.88);
  clip-path: polygon(0 48px, 100% 0, 100% calc(100% - 48px), 0 100%);
  padding: 110px 0;
}
.base__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: 40px; align-items: center;
}
.base__logo{ height: 54px; width: auto; margin-bottom: 22px; }
.base h2{
  font-stretch: 62%; font-weight: 900; font-style: italic; text-transform: uppercase; word-spacing: .08em;
  font-size: clamp(36px, 4.6vw, 56px); color: #fff; margin-bottom: 18px;
}
.base p{ margin: 0 0 22px; max-width: 58ch; font-size: 18px; }
.base__sports{ list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.base__sports li{
  padding: 6px 16px; font-weight: 800; color: var(--marine); background: var(--voile);
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}
.base__photo{ margin: 0; clip-path: var(--slant); max-width: 420px; justify-self: center; width: 100%; }
.base__photo img{ width: 100%; aspect-ratio: 1; object-fit: cover; }
@media (min-width: 860px){
  .base__inner{ grid-template-columns: 1.3fr 1fr; gap: 64px; }
}

/* ---------- À propos du blog ---------- */
.about-blog{ padding: 80px 0 40px; }
.about-blog__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: 32px; align-items: center;
}
.about-blog__photo{ margin: 0; clip-path: var(--slant); }
.about-blog__photo img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.about-blog h2{
  font-stretch: 62%; font-weight: 900; font-style: italic; text-transform: uppercase; word-spacing: .08em;
  font-size: clamp(36px, 4.6vw, 56px); color: var(--marine); margin-bottom: 18px;
}
.about-blog p{ margin: 0; max-width: 62ch; font-size: 18px; }
.about-blog .follow-label{ margin-top: 22px; font-size: 16px; color: var(--muted); }
.follow{ list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.follow a{
  display: inline-block; padding: 9px 20px; background: var(--marine); color: #fff;
  text-decoration: none; font-weight: 700; font-size: 15px;
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}
.follow a:hover{ background: var(--corail); color: #fff; }
@media (min-width: 860px){
  .about-blog__inner{ grid-template-columns: 1fr 1.25fr; gap: 64px; }
}

/* ---------- Continuer l'exploration ---------- */
.explore{ padding: 72px 0 32px; }
.explore__inner{ max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.explore h2{
  font-stretch: 62%; font-weight: 900; font-style: italic; text-transform: uppercase; word-spacing: .08em;
  font-size: clamp(34px, 4.2vw, 52px); color: var(--marine); margin-bottom: 28px;
}
.explore__grid{ display: grid; gap: 36px; }
@media (min-width: 760px){ .explore__grid{ grid-template-columns: 1fr 1fr; } }
.tile{ display: block; text-decoration: none; color: var(--ink); }
.tile:hover{ color: var(--ink); }
.tile__img{ display: block; aspect-ratio: 2 / 1; overflow: hidden; clip-path: var(--slant); }
.tile__img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.tile:hover .tile__img img{ transform: scale(1.04); }
.tile__title{
  display: block; margin-top: 16px;
  font-stretch: 75%; font-weight: 900; font-style: italic; text-transform: uppercase;
  font-size: 30px; line-height: 1; color: var(--marine);
}
.tile__text{ display: block; margin-top: 8px; color: var(--muted); }

/* ---------- Partage ---------- */
.share{ padding: 32px 0 80px; }
.share__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px;
}
.share__label{ margin: 0; font-weight: 600; color: var(--muted); }
.share__list{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.share__list a{
  display: grid; place-items: center; width: 46px; height: 46px;
  background: #fff; border: 2px solid var(--marine);
  transition: background-color .2s ease;
}
.share__list a:hover{ background: var(--voile); }
.share__list img{ width: 30px; height: 30px; }

/* ---------- Pied de page ---------- */
.site-footer{ background: var(--marine-deep); color: rgba(255,255,255,.78); font-size: 15px; border-top: 6px solid var(--voile); }
.site-footer__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 56px var(--gutter) 64px;
  display: grid; gap: 40px;
}
.site-footer a{ color: #fff; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 3px; }
.site-footer a:hover{ color: var(--voile); }
.site-footer__brand img{ height: 54px; width: auto; }
.site-footer__brand p{ margin: 18px 0 0; }
.site-footer h2{ font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 14px; line-height: 1.3; }
.site-footer ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer__network p{ margin: 0 0 14px; }
.site-footer__network .site-footer__gtv{ margin-bottom: 22px; }
.site-footer__cc{ display: inline-block; background: #fff; padding: 10px 14px; }
.site-footer__cc img{ width: 170px; }
@media (min-width: 900px){
  .site-footer__inner{ grid-template-columns: 1fr 1.4fr 1fr; gap: 56px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .tile__img img, .bnet-menu a::after{ transition: none; }
}