/*
 * ═══════════════════════════════════════════════════════
 *  CIRCADIEN — Charte graphique globale WordPress
 *  À coller dans : Apparence → Éditeur → style.css
 *  ou dans le champ CSS personnalisé de WordPress
 * ═══════════════════════════════════════════════════════
 */

/* ── IMPORT POLICES ── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,300;1,400;1,500&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Josefin+Sans:wght@300;400&display=swap');

/* ── VARIABLES GLOBALES ── */
:root {
  /* Couleurs */
  --c-bleu-nuit:  #0d2d5e;
  --c-bleu:       #1a4b8c;
  --c-bleu-clair: #2a6ab5;
  --c-or:         #c9a227;
  --c-or-clair:   #e0b93a;
  --c-olive:      #5a7042;
  --c-blanc:      #f9f6f0;
  --c-creme:      #f0ebe0;
  --c-sable:      #e4d9c4;
  --c-texte:      #0d1f3c;
  --c-mid:        #2c4060;
  --c-doux:       #6a7f9a;
  --c-bord:       rgba(26, 75, 140, .14);

  /* Typographie */
  --f-titre:    'Cinzel', Georgia, serif;
  --f-accroche: 'Cormorant Garamond', Georgia, serif;
  --f-corps:    'EB Garamond', Georgia, serif;
  --f-label:    'Josefin Sans', sans-serif;

  /* Espacements */
  --esp-xs: .5rem;
  --esp-sm: 1rem;
  --esp-md: 2rem;
  --esp-lg: 4rem;
  --esp-xl: 6rem;

  /* Transitions */
  --trans: all .25s ease;
}

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--f-corps);
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--c-texte);
  background: var(--c-blanc);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── TYPOGRAPHIE GLOBALE ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-titre);
  font-weight: 400;
  line-height: 1.1;
  color: var(--c-bleu-nuit);
  letter-spacing: .04em;
}

h1 { font-size: clamp(2.4rem, 7vw, 5rem); margin-bottom: 1.2rem; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.3rem); margin-bottom: 1rem; }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.6rem); margin-bottom: .8rem; }
h4 { font-size: 1.1rem; margin-bottom: .6rem; }

p {
  font-family: var(--f-corps);
  color: var(--c-mid);
  line-height: 1.85;
  margin-bottom: 1.1rem;
}

p:last-child { margin-bottom: 0; }

em {
  font-family: var(--f-accroche);
  font-style: italic;
}

a {
  color: var(--c-bleu);
  text-decoration: none;
  transition: var(--trans);
}

a:hover { color: var(--c-bleu-nuit); }

img { max-width: 100%; height: auto; display: block; }

/* ── NAVIGATION ── */
.site-header,
header.site-header,
#masthead {
  background: var(--c-blanc) !important;
  border-bottom: 1px solid var(--c-bord);
  position: sticky;
  top: 0;
  z-index: 500;
  padding: .9rem 2rem;
}

/* Logo */
.site-title,
.site-branding .site-title a,
.custom-logo-link {
  font-family: var(--f-titre) !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
  letter-spacing: .22em !important;
  color: var(--c-bleu-nuit) !important;
  text-decoration: none !important;
}

/* Menu principal */
.main-navigation ul,
.nav-menu {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.main-navigation a,
.nav-menu a {
  font-family: var(--f-label) !important;
  font-size: .68rem !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--c-mid) !important;
  text-decoration: none !important;
  transition: var(--trans);
}

.main-navigation a:hover,
.nav-menu a:hover {
  color: var(--c-bleu) !important;
}

/* Bouton CTA dans le menu */
.menu-item-cta a,
.nav-cta {
  font-family: var(--f-label) !important;
  font-size: .68rem !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  padding: .6rem 1.6rem !important;
  background: var(--c-or) !important;
  color: var(--c-bleu-nuit) !important;
  border: none !important;
  transition: var(--trans) !important;
  border-radius: 0 !important;
}

.menu-item-cta a:hover,
.nav-cta:hover {
  background: var(--c-or-clair) !important;
  transform: translateY(-1px);
}

/* ── BOUTONS GLOBAUX ── */
.btn,
button.btn,
a.btn,
input[type="submit"],
.wp-block-button__link {
  font-family: var(--f-label);
  font-size: .73rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .95rem 2.4rem;
  border: none;
  cursor: pointer;
  transition: var(--trans);
  display: inline-block;
  text-decoration: none;
  border-radius: 0;
}

.btn-or,
.wp-block-button.is-style-fill .wp-block-button__link {
  background: var(--c-or);
  color: var(--c-bleu-nuit);
}
.btn-or:hover { background: var(--c-or-clair); transform: translateY(-2px); }

.btn-bleu { background: var(--c-bleu); color: #fff; }
.btn-bleu:hover { background: var(--c-bleu-nuit); transform: translateY(-2px); }

.btn-ghost {
  background: transparent;
  color: var(--c-bleu);
  border: 1.5px solid var(--c-bleu);
}
.btn-ghost:hover { background: var(--c-bleu); color: #fff; }

.btn-olive { background: var(--c-olive); color: #fff; }
.btn-olive:hover { filter: brightness(1.1); transform: translateY(-2px); }

/* ── LAYOUT — SECTIONS ── */
.circ-section {
  padding: 5rem 2rem;
}

.circ-section--creme { background: var(--c-creme); }
.circ-section--bleu  { background: var(--c-bleu-nuit); }
.circ-section--bleu .circ-title,
.circ-section--bleu h2,
.circ-section--bleu h3 { color: var(--c-blanc); }
.circ-section--bleu p,
.circ-section--bleu .circ-lead { color: rgba(249,246,240,.7); }

.circ-inner {
  max-width: 740px;
  margin: 0 auto;
}

.circ-inner--sm { max-width: 560px; margin: 0 auto; }
.circ-inner--lg { max-width: 960px; margin: 0 auto; }

/* ── COMPOSANTS TEXTE ── */
.circ-eyebrow {
  font-family: var(--f-label);
  font-size: .67rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--c-or);
  display: block;
  text-align: center;
  margin-bottom: 1rem;
}

.circ-title {
  font-family: var(--f-titre);
  font-size: clamp(1.5rem, 3.5vw, 2.3rem);
  font-weight: 400;
  color: var(--c-bleu-nuit);
  text-align: center;
  margin-bottom: .6rem;
  letter-spacing: .04em;
}

.circ-lead {
  font-family: var(--f-accroche);
  font-style: italic;
  font-size: 1.18rem;
  color: var(--c-mid);
  text-align: center;
  max-width: 540px;
  margin: 0 auto 2.5rem;
  line-height: 1.6;
}

.circ-quote {
  font-family: var(--f-accroche);
  font-style: italic;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  color: var(--c-bleu-nuit);
  line-height: 1.45;
  text-align: center;
  max-width: 660px;
  margin: 0 auto 1.5rem;
}

/* ── DIVIDER ornement ── */
.circ-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin: 2rem auto;
  max-width: 340px;
}

.circ-divider__line {
  flex: 1;
  height: 1px;
  background: var(--c-bord);
}

.circ-divider__ornement {
  color: var(--c-or);
  font-size: 1rem;
  flex-shrink: 0;
}

/* ── FRISES MÉANDRES (classes CSS) ── */
/*
  Usage dans le HTML WordPress :
  <div class="circ-frise circ-frise--bleu"></div>
  <div class="circ-frise circ-frise--or"></div>
  <div class="circ-frise circ-frise--vagues"></div>

  Les SVG sont injectés via le fichier circadien-frises.js
*/
.circ-frise {
  width: 100%;
  overflow: hidden;
  line-height: 0;
  display: block;
  height: 16px;
}

.circ-frise--large  { height: 20px; }
.circ-frise--fine   { height: 12px; }
.circ-frise--vagues { height: 20px; }

.circ-frise svg {
  display: block;
  width: 100%;
}

/* ── CARDS GÉNÉRIQUES ── */
.circ-card {
  border: 1.5px solid var(--c-bord);
  padding: 2rem 1.5rem;
  background: var(--c-blanc);
  transition: var(--trans);
  position: relative;
}

.circ-card:hover {
  border-color: var(--c-bleu);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(26,75,140,.09);
}

.circ-card--accent::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--c-bleu);
}

.circ-card--or::before {
  background: var(--c-or);
}

/* ── GRILLES ── */
.circ-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.circ-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.circ-grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

/* ── FORMULAIRES ── */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  font-family: var(--f-corps);
  font-size: 1rem;
  color: var(--c-texte);
  background: var(--c-blanc);
  border: 1.5px solid var(--c-bord);
  border-radius: 0;
  padding: .75rem 1rem;
  width: 100%;
  transition: var(--trans);
  outline: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  border-color: var(--c-bleu);
  box-shadow: 0 0 0 3px rgba(26,75,140,.08);
}

input[type="submit"] {
  background: var(--c-or);
  color: var(--c-bleu-nuit);
  cursor: pointer;
  font-family: var(--f-label);
  font-size: .73rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: none;
  padding: .95rem 2.4rem;
  transition: var(--trans);
}

input[type="submit"]:hover {
  background: var(--c-or-clair);
  transform: translateY(-2px);
}

/* ── FOOTER ── */
.site-footer,
footer.site-footer,
#colophon {
  background: var(--c-bleu-nuit) !important;
  color: rgba(249,246,240,.4) !important;
  padding: 3rem 2rem !important;
  text-align: center;
}

.site-footer .site-title,
.site-footer a {
  font-family: var(--f-titre) !important;
  font-size: 1.2rem !important;
  letter-spacing: .22em !important;
  color: var(--c-or) !important;
}

.site-footer p {
  font-family: var(--f-accroche);
  font-style: italic;
  font-size: .95rem;
  color: rgba(249,246,240,.3);
}

/* ── COLONNES GRECQUES ── */
/*
  Usage :
  <div class="circ-colonnes">
    <div class="circ-col circ-col--gauche"></div>
    <div class="circ-col circ-col--droite"></div>
  </div>
  Les SVG colonnes sont injectés via circadien-frises.js
*/
.circ-colonnes {
  position: relative;
  overflow: hidden;
}

.circ-col {
  position: absolute;
  bottom: 0;
  pointer-events: none;
  opacity: .12;
}

.circ-col--gauche { left: 0; }
.circ-col--droite { right: 0; }

/* ── SWATCHES palette (pour page charte) ── */
.circ-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

.circ-swatch__color {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.07);
}

.circ-swatch__name {
  font-family: var(--f-label);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-doux);
}

/* ── PRIX ── */
.circ-prix {
  font-family: var(--f-titre);
  font-size: 2.6rem;
  color: var(--c-or);
  line-height: 1;
  letter-spacing: .05em;
}

.circ-prix--detail {
  font-family: var(--f-corps);
  font-style: italic;
  font-size: .95rem;
  color: var(--c-doux);
}

/* ── BADGE ── */
.circ-badge {
  display: inline-block;
  font-family: var(--f-label);
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: .3rem 1rem;
  border: 1px solid var(--c-or);
  color: var(--c-or);
}

.circ-badge--bleu {
  border-color: var(--c-bleu);
  color: var(--c-bleu);
}

.circ-badge--olive {
  border-color: var(--c-olive);
  color: var(--c-olive);
}

/* ── ANIMATIONS ── */
@keyframes circ-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes circ-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.circ-anim-up   { animation: circ-fade-up  .7s ease both; }
.circ-anim-in   { animation: circ-fade-in  .6s ease both; }
.circ-delay-1   { animation-delay: .1s; }
.circ-delay-2   { animation-delay: .25s; }
.circ-delay-3   { animation-delay: .4s; }
.circ-delay-4   { animation-delay: .55s; }
.circ-delay-5   { animation-delay: .7s; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .circ-section { padding: 3.5rem 1.25rem; }
  .circ-grid-4  { grid-template-columns: repeat(2, 1fr); }

  .main-navigation ul,
  .nav-menu {
    flex-direction: column;
    gap: .5rem;
  }

  h1 { font-size: clamp(2rem, 8vw, 3rem); }
  h2 { font-size: clamp(1.3rem, 5vw, 1.9rem); }

  .circ-col { display: none; } /* Colonnes masquées sur mobile */
}

@media (max-width: 480px) {
  .circ-section { padding: 2.5rem 1rem; }
  .circ-grid-2  { grid-template-columns: 1fr; }
  .circ-grid-3  { grid-template-columns: 1fr; }
  .circ-grid-4  { grid-template-columns: repeat(2, 1fr); }
}

/* ── UTILITAIRES ── */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-or     { color: var(--c-or) !important; }
.text-bleu   { color: var(--c-bleu) !important; }
.text-blanc  { color: var(--c-blanc) !important; }
.text-doux   { color: var(--c-doux) !important; }

.bg-blanc    { background: var(--c-blanc); }
.bg-creme    { background: var(--c-creme); }
.bg-bleu     { background: var(--c-bleu-nuit); }
.bg-bleu-m   { background: var(--c-bleu); }

.mt-sm { margin-top: 1rem; }
.mt-md { margin-top: 2rem; }
.mt-lg { margin-top: 4rem; }
.mb-sm { margin-bottom: 1rem; }
.mb-md { margin-bottom: 2rem; }
.mb-lg { margin-bottom: 4rem; }

.w-full   { width: 100%; }
.mx-auto  { margin-left: auto; margin-right: auto; }

.border-bleu { border: 1.5px solid var(--c-bord); }
.border-or   { border: 1.5px solid var(--c-or); }