/*
Theme Name: Olivier Le Bon
Theme URI: https://olivier-lebon.fr
Author: Maxime Taillebois
Description: Thème sur mesure pour le site personnel d'Olivier Le Bon — univers « carnet ligné » crème, lavis pastel aquarellés et griffonnages corail. Construit à partir des maquettes Olivier-draw.
Version: 1.0.4
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: olivier-le-bon
*/

/* ─────────────────────────────────────────────────────────
   Olivier Le Bon — Système visuel partagé (base)
   Univers : cahier ligné crème + lavis pastel + griffon corail
   ───────────────────────────────────────────────────────── */

:root{
  --paper:#F7F4EC;
  --paper-warm:#F2EDDF;
  --rule:rgba(201,210,224,0.55);
  --rule-strong:rgba(167,182,206,0.85);
  --ink:#23263F;
  --ink-soft:rgba(35,38,63,0.72);
  --ink-mute:rgba(35,38,63,0.5);
  --sage:#A5DBC1;
  --lilac:#C6B5DA;
  --peach:#F5C0A0;
  --coral:#F2774E;
  --coral-soft:#FBD8C5;
  --yellow:#F5E2A8;
  --serif:'Spectral','Source Serif Pro',Georgia,serif;
  --sans:'DM Sans','Helvetica Neue',sans-serif;
  --hand:'Caveat',cursive;
  --line:32px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--serif);
  color:var(--ink);
  background-color:var(--paper);
  background-image:
    repeating-linear-gradient(to bottom,
      transparent 0,
      transparent 31px,
      var(--rule) 31px,
      var(--rule) 32px);
  font-size:19px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
html{overflow-x:hidden;}
.olb-canvas{position:relative;overflow:hidden;}
.grain{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  opacity:0.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.5  0 0 0 0 0.4  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ── Navigation ─────────────────────────────────────────── */
.nav{
  position:relative;z-index:8;
  display:flex;align-items:center;justify-content:space-between;
  padding:36px 80px 14px 80px;
}
.wordmark{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:22px;letter-spacing:0.01em;
  color:var(--ink);text-decoration:none;
  display:inline-flex;align-items:baseline;gap:6px;
  white-space:nowrap;
  background:rgba(247,244,236,0.6);
  padding:4px 10px;border-radius:2px;
  backdrop-filter:blur(2px);
}
.wordmark::before{
  content:"";display:inline-block;width:18px;height:18px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 6 L20 19 M20 6 L4 19' stroke='%23F2774E' stroke-width='2.6' fill='none' stroke-linecap='round'/></svg>") center/contain no-repeat;
  transform:translateY(2px) rotate(8deg);
}
.nav-links{display:flex;gap:36px;align-items:center;}
.nav-links a{
  font-family:var(--sans);font-weight:500;font-size:13px;
  letter-spacing:0.06em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  position:relative;padding:6px 0;
}
.nav-links a.is-active{color:var(--ink);}
.nav-links a.is-active::after{
  content:"";position:absolute;left:-4px;right:-4px;bottom:-4px;height:7px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'><path d='M2 5 Q 18 1 38 4 T 78 4 Q 90 5 98 3' stroke='%23F2774E' stroke-width='2.6' fill='none' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
}
.nav-links a:hover{color:var(--coral);}

/* ── Footer ─────────────────────────────────────────────── */
.foot{
  position:relative;z-index:5;
  padding:36px 80px 56px 80px;
  border-top:1px dashed rgba(35,38,63,0.18);
  display:flex;justify-content:space-between;align-items:flex-end;gap:32px;
}
.foot .salute{
  font-family:var(--hand);
  font-size:34px;color:var(--coral);line-height:1;
  transform:rotate(-2deg);
}
.foot .meta{
  font-family:var(--sans);
  font-size:12px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--ink-mute);
  max-width:340px;text-align:right;line-height:1.6;
}

/* ── Helpers : washes & scribbles ───────────────────────── */
.bleed-wash{position:absolute;pointer-events:none;z-index:0;}
.scrib{position:absolute;pointer-events:none;z-index:4;}
.scrib svg{display:block;width:100%;height:100%;}
/* Griffonnage ondulé flottant retiré (ne souligne rien) */
.scrib.s1{display:none !important;}

/* ── Section eyebrow + title ─────────────────────────────── */
.section-eyebrow{
  display:flex;align-items:baseline;gap:18px;
  font-family:var(--sans);
  font-size:12px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--ink-mute);
  margin-bottom:6px;
}
.section-eyebrow .num{
  font-family:var(--hand);
  font-size:38px;color:var(--coral);
  letter-spacing:0;text-transform:none;
  line-height:1;transform:translateY(6px) rotate(-3deg);
}
.section-title{
  font-family:var(--serif);
  font-weight:500;font-size:clamp(36px,3.6vw,52px);
  line-height:1.05;letter-spacing:-0.01em;
  margin:0 0 8px 0;
  max-width:680px;
}
.section-title em{
  font-family:var(--hand);font-style:normal;
  color:var(--coral);font-size:1.04em;
}
.section-sub{
  font-family:var(--serif);font-style:italic;
  font-size:18px;color:var(--ink-soft);
  margin:0 0 40px 0;max-width:620px;
}

/* ── Genre / rubric chips ───────────────────────────────── */
.chip{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sans);font-size:11px;font-weight:500;
  letter-spacing:0.16em;text-transform:uppercase;
  color:var(--ink);
  padding:6px 12px 6px 10px;
  border-radius:2px;
  background:rgba(247,244,236,0.7);
  border:1px solid rgba(35,38,63,0.14);
}
.chip .dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--sage);
}
.chip[data-tint="theatre"]  .dot{background:var(--sage);}
.chip[data-tint="recit"]    .dot{background:var(--peach);}
.chip[data-tint="roman"]    .dot{background:var(--lilac);}
.chip[data-tint="chanson"]  .dot{background:var(--coral);}
.chip[data-tint="discours"] .dot{background:var(--lilac);}

/* ── Mobile global ──────────────────────────────────────── */
@media (max-width:720px){
  body{font-size:17px;}
  .nav{padding:22px 22px 8px 22px;flex-direction:column;align-items:flex-start;gap:18px;}
  .nav-links{flex-wrap:wrap;gap:18px 22px;}
  .nav-links a{font-size:12px;}
  .foot{padding:24px 22px 40px 22px;flex-direction:column;align-items:flex-start;gap:14px;}
  .foot .meta{text-align:left;}
  .section-title{font-size:32px;}
}