/*
Theme Name: Onze Degrés
Theme URI: https://onzedegres.com
Author: Onze Degrés
Description: Thème sur mesure Onze Degrés, direction Balise. Surf en eau froide.
Version: 1.0.1
Requires at least: 6.5
Requires PHP: 8.0
Text Domain: onze-degres
*/

:root {
  --ardoise: #16303D;
  --ecume: #EEF0EC;
  --balise: #C2410C;
  --balise-fonce: #9A3412;
  --sable: #BFAE93;
  --brume: #4C6370;
  --brume-clair: #BFCAD0;
  --texte-clair: #DCE3E6;
  --ligne: #D3D9D6;
  --blanc: #FFFFFF;
  --f-titre: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-texte: 'IBM Plex Sans', system-ui, sans-serif;
  --f-data: 'IBM Plex Mono', ui-monospace, monospace;
  --max: 1280px;
  --r: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ecume); color: var(--ardoise); font-family: var(--f-texte); font-size: 16px; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ardoise); }
a:hover { color: var(--balise); }
:focus-visible { outline: 3px solid var(--balise); outline-offset: 2px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 1000; width: auto; height: auto; clip: auto; background: var(--blanc); padding: 12px 16px; }

.od-wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.od-data { font-family: var(--f-data); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.od-titre { font-family: var(--f-titre); font-weight: 700; text-transform: uppercase; line-height: 0.95; letter-spacing: 0.01em; margin: 0; }
.od-deg { color: var(--balise); }

/* Boutons */
.od-btn, .button, button.button, input.button, .wc-block-components-button:not(.is-link) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  border: none; border-radius: 4px; background: var(--balise); color: var(--blanc) !important;
  font-family: var(--f-texte); font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer;
}
.od-btn:hover, .button:hover, .wc-block-components-button:not(.is-link):hover { background: var(--balise-fonce); color: var(--blanc); }
.od-btn--ghost { background: transparent; border: 1px solid var(--brume-clair); }
.od-btn--ghost:hover { background: rgba(255,255,255,0.08); }
.od-btn--dark { background: var(--ardoise); }
.od-btn--dark:hover { background: #0E2029; }

/* Bandeau */
.od-topbar { background: var(--ardoise); color: var(--ecume); text-align: center; padding: 9px 16px; font-family: var(--f-data); font-size: 12px; letter-spacing: 0.06em; }

/* En-tête */
.od-header { background: var(--ecume); border-bottom: 1px solid var(--ligne); position: sticky; top: 0; z-index: 50; }
.od-header .od-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 14px; padding-bottom: 14px; }
.od-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ardoise); }
.od-logo__rond { width: 46px; height: 46px; border-radius: 50%; background: var(--ardoise); color: var(--blanc); display: flex; align-items: center; justify-content: center; font-family: var(--f-titre); font-weight: 700; font-size: 23px; }
.od-logo__mot { font-family: var(--f-titre); font-weight: 700; font-size: 23px; letter-spacing: 0.16em; }
.od-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 24px; }
.od-nav a { text-decoration: none; font-weight: 500; font-size: 15px; }
.od-nav .current-menu-item > a, .od-nav .current-product_cat-ancestor > a { color: var(--balise); }
.od-actions { display: flex; gap: 8px; align-items: center; }
.od-icone { width: 44px; height: 44px; border: 1px solid #C9D0CC; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; color: var(--ardoise); text-decoration: none; }
.od-panier { min-height: 44px; padding: 0 16px; border-radius: 4px; background: var(--ardoise); color: var(--blanc); display: inline-flex; align-items: center; font-weight: 600; font-size: 14px; text-decoration: none; }
.od-panier:hover { color: var(--blanc); background: #0E2029; }
.od-menu-toggle { display: none; }
@media (max-width: 860px) {
  .od-menu-toggle { display: inline-flex; }
  .od-nav { order: 3; width: 100%; display: none; }
  .od-nav.is-open { display: block; }
  .od-nav ul { flex-direction: column; gap: 0; }
  .od-nav li a { display: block; padding: 12px 0; border-top: 1px solid var(--ligne); }
}

/* Héro */
.od-hero { background: var(--ardoise); color: var(--blanc); }
.od-hero .od-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; padding-top: 72px; padding-bottom: 72px; }
.od-hero__texte { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.od-hero__texte .od-data { color: var(--brume-clair); }
.od-hero h1 { font-size: clamp(52px, 8vw, 92px); }
.od-hero p { margin: 0; max-width: 520px; font-size: 19px; color: var(--texte-clair); }
.od-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.od-hero__visuel { flex: 1 1 400px; min-width: 0; min-height: 440px; border-radius: var(--r); background: var(--sable) center / cover no-repeat; }

/* Bulletin du jour */
.od-bulletin { background: var(--blanc); border-bottom: 1px solid var(--ligne); }
.od-bulletin .od-wrap { display: flex; flex-wrap: wrap; gap: 8px 32px; padding-top: 16px; padding-bottom: 16px; font-family: var(--f-data); font-size: 14px; }
.od-bulletin__label { color: var(--brume); }

/* Sections */
.od-section { padding: 80px 0; }
.od-section--serre { padding: 40px 0; }
.od-section__tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 32px; }
.od-section__tete h2 { font-size: clamp(38px, 5vw, 54px); }
.od-section__tete p { margin: 0; max-width: 460px; color: var(--brume); }

/* Moments */
.od-moments { display: flex; flex-wrap: wrap; gap: 24px; }
.od-moment { flex: 1 1 300px; min-width: 0; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r); overflow: hidden; text-decoration: none; color: var(--ardoise); display: flex; flex-direction: column; transition: border-color .15s; }
.od-moment:hover { border-color: var(--balise); color: var(--ardoise); }
.od-moment__img { height: 240px; background: var(--sable) center / cover no-repeat; }
.od-moment__corps { padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.od-moment__corps .od-titre { font-size: 34px; }
.od-moment__corps p { margin: 0; color: var(--brume); font-size: 15px; }

/* Produits (boucle Woo) */
.woocommerce ul.products, .od-produits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; }
.woocommerce ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; }
.woocommerce ul.products li.product a img { margin: 0 !important; aspect-ratio: 1 / 1; object-fit: cover; background: var(--sable); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--f-texte); font-weight: 600; font-size: 17px !important; padding: 16px 18px 0 !important; margin: 0; color: var(--ardoise); }
.woocommerce ul.products li.product .price { padding: 4px 18px 0; color: var(--brume) !important; font-size: 16px; }
.woocommerce ul.products li.product .button { margin: auto 18px 18px !important; }
.woocommerce ul.products li.product .onsale, .woocommerce span.onsale { background: var(--balise); border-radius: 4px; min-height: 0; min-width: 0; padding: 4px 10px; line-height: 1.4; font-family: var(--f-data); font-size: 12px; }

/* Pourquoi 11° */
.od-pourquoi { background: var(--ardoise); color: var(--blanc); }
.od-pourquoi .od-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; padding-top: 88px; padding-bottom: 88px; }
.od-pourquoi__chiffre { flex: 1 1 320px; font-family: var(--f-titre); font-weight: 700; font-size: clamp(140px, 22vw, 240px); line-height: 0.85; }
.od-pourquoi__texte { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.od-pourquoi__texte h2 { font-size: 48px; }
.od-pourquoi__texte p { margin: 0; font-size: 18px; color: var(--texte-clair); }
.od-pourquoi__texte a { color: var(--blanc); font-weight: 600; }

/* Journal */
.od-journal { display: flex; flex-wrap: wrap; gap: 24px; }
.od-article { flex: 1 1 300px; min-width: 0; text-decoration: none; color: var(--ardoise); display: flex; flex-direction: column; gap: 12px; }
.od-article__img { height: 200px; border-radius: var(--r); background: #C9D0CC center / cover no-repeat; }
.od-article .od-data { color: var(--brume); font-size: 12px; }
.od-article h3 { margin: 0; font-size: 20px; line-height: 1.3; }

/* Réassurance */
.od-reassurance { background: var(--blanc); border-top: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); }
.od-reassurance .od-wrap { display: flex; flex-wrap: wrap; gap: 24px; padding-top: 36px; padding-bottom: 36px; }
.od-reassurance div { flex: 1 1 220px; }
.od-reassurance strong { display: block; font-size: 16px; }
.od-reassurance span { font-size: 14px; color: var(--brume); }

/* Inscription */
.od-inscription { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between; }
.od-inscription h2 { font-size: 44px; }
.od-inscription form { flex: 1 1 420px; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.od-inscription label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.od-champ { flex: 1 1 240px; }
input[type=email], input[type=text], input[type=tel], input[type=password], input[type=search], input[type=number], textarea, select {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid #8E9C9F; border-radius: 4px; background: var(--blanc); font: inherit; color: var(--ardoise);
}

/* Pied de page */
.od-footer { background: var(--ardoise); color: var(--texte-clair); }
.od-footer .od-wrap { padding-top: 56px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 40px; }
.od-footer__cols { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; }
.od-footer__marque { flex: 1 1 260px; }
.od-footer__marque .od-titre { font-size: 28px; letter-spacing: 0.16em; color: var(--blanc); }
.od-footer__marque .od-data { color: var(--brume-clair); margin-top: 8px; display: block; }
.od-footer nav { flex: 0 1 180px; }
.od-footer h2 { font-family: var(--f-texte); font-size: 15px; color: var(--blanc); margin: 0 0 10px; }
.od-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.od-footer a { color: var(--texte-clair); text-decoration: none; }
.od-footer a:hover { color: var(--blanc); text-decoration: underline; }
.od-footer__bas { border-top: 1px solid #2E4A58; padding-top: 20px; display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 13px; color: var(--brume-clair); }
.od-footer__bas a { color: var(--brume-clair); }
.od-footer__bas ul.od-legal { flex-direction: row; flex-wrap: wrap; gap: 12px 24px; font-size: 13px; }

/* Contenu générique, pages, WooCommerce */
.od-contenu { padding: 56px 0 80px; }
.od-contenu .od-wrap > h1, .od-page-titre { font-family: var(--f-titre); font-weight: 700; text-transform: uppercase; font-size: clamp(40px, 6vw, 64px); line-height: 1; margin: 0 0 32px; }
.od-prose { max-width: 760px; }
.od-prose h2 { font-family: var(--f-titre); text-transform: uppercase; font-size: 34px; line-height: 1.05; margin: 40px 0 12px; }
.od-prose h3 { font-size: 20px; margin: 28px 0 8px; }
.woocommerce .woocommerce-breadcrumb { font-family: var(--f-data); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brume); margin-bottom: 20px; }
.woocommerce div.product .product_title { font-family: var(--f-titre); text-transform: uppercase; font-size: clamp(38px, 5vw, 56px); line-height: 1; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--ardoise); font-size: 22px; font-weight: 600; }
.woocommerce div.product form.cart .button { min-height: 52px; }
.woocommerce-message, .woocommerce-info { border-top-color: var(--balise); }
.woocommerce-message::before, .woocommerce-info::before { color: var(--balise); }
.woocommerce-store-notice, p.demo_store { background: var(--ardoise); }

/* Tableaux dans les articles du Journal */
.od-prose table { width: 100%; border-collapse: collapse; margin: 24px 0; background: var(--blanc); font-size: 15px; }
.od-prose th, .od-prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.od-prose thead th { font-family: var(--f-data); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brume); border-bottom: 2px solid var(--ardoise); }
.od-prose blockquote { margin: 24px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--balise); }

/* Bandeau cookies aux couleurs Balise : accepter et refuser ont le même poids */
[id^="cookieadmin"] { font-family: var(--f-texte) !important; }
.cookieadmin_btn { border-radius: 4px !important; font-weight: 600 !important; }
.cookieadmin_btn.cookieadmin_accept_btn, .cookieadmin_btn.cookieadmin_reject_btn { background: var(--ardoise) !important; border-color: var(--ardoise) !important; color: var(--blanc) !important; }
.cookieadmin_btn.cookieadmin_customize_btn { background: transparent !important; border-color: var(--ardoise) !important; color: var(--ardoise) !important; }