/* =========================================================
   Onglets — Styles partagés (front + éditeur)
   Design : Raffiné / Editorial — palette sobre avec accent vif
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300&family=Playfair+Display:wght@500;600&display=swap');

/* ---------- Variables ---------- */
:root {
  --onglets-accent:     #5b4fcf;
  --onglets-accent-rgb: 91, 79, 207;
  --onglets-bg:         #ffffff;
  --onglets-surface:    #f7f7fb;
  --onglets-border:     #e2e2ee;
  --onglets-text:       #1a1a2e;
  --onglets-muted:      #7a7a9a;
  --onglets-radius:     12px;
  --onglets-font-ui:    'DM Sans', sans-serif;
  --onglets-shadow:     0 4px 24px rgba(91,79,207,.10), 0 1px 4px rgba(0,0,0,.04);
  --onglets-transition: 220ms cubic-bezier(.4,0,.2,1);
}

/* ---------- Wrapper ---------- */
.onglets-wrapper {
  --onglets-accent: attr(data-accent); /* override inline si besoin */
  display:          grid;
  grid-template-columns: 1fr;
  grid-template-rows:    auto 1fr;
  font-family:      var(--onglets-font-ui);
  width:            100%;
  position:         relative;
}

/* =========================================================
   ONGLETS AU-DESSUS (≥ 768 px)
   ========================================================= */
@media (min-width: 768px) {

  .onglets-wrapper {
    grid-template-areas:
      "nav"
      "panels";
  }

  /* --- Barre de navigation --- */
  .onglets-nav {
    grid-area:        nav;
    display:          flex;
    flex-direction:   row;
    align-items:      flex-end;
    gap:              2px;
    padding:          0 4px;
    background:       var(--onglets-surface);
    border-radius:    var(--onglets-radius) var(--onglets-radius) 0 0;
    border:           1px solid var(--onglets-border);
    border-bottom:    none;
    overflow-x:       auto;
    scrollbar-width:  thin;
  }

  .onglets-tab {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    padding:          10px 22px 11px;
    background:       transparent;
    border:           1px solid transparent;
    border-bottom:    none;
    border-radius:    8px 8px 0 0;
    font-family:      var(--onglets-font-ui);
    font-size:        .875rem;
    font-weight:      500;
    color:            var(--onglets-muted);
    cursor:           pointer;
    white-space:      nowrap;
    transition:       color var(--onglets-transition),
                      background var(--onglets-transition),
                      border-color var(--onglets-transition);
    position:         relative;
    top:              1px;       /* chevauche le bord bas de la nav */
    letter-spacing:   .02em;
  }

  .onglets-tab:hover {
    color:      var(--onglets-text);
    background: rgba(var(--onglets-accent-rgb), .06);
  }

  .onglets-tab.is-active {
    background:   var(--onglets-bg);
    color:        var(--onglets-accent);
    border-color: var(--onglets-border);
    font-weight:  600;
    box-shadow:   0 -2px 0 0 var(--onglets-accent) inset;
  }

  /* indicateur accent sous l'onglet actif */
  .onglets-tab.is-active::after {
    content:    '';
    position:   absolute;
    bottom:     0;
    left:       10%;
    width:      80%;
    height:     2px;
    background: var(--onglets-accent);
    border-radius: 2px 2px 0 0;
  }

  /* Panneau */
  .onglets-panels {
    grid-area:      panels;
    background:     var(--onglets-bg);
    border:         1px solid var(--onglets-border);
    border-radius:  0 var(--onglets-radius) var(--onglets-radius) var(--onglets-radius);
    box-shadow:     var(--onglets-shadow);
    min-height:     220px;
  }

}

/* =========================================================
   ONGLETS SUR LE CÔTÉ (≤ 767 px)
   ========================================================= */
@media (max-width: 767px) {

  .onglets-wrapper {
    grid-template-areas:   "nav panels";
    grid-template-columns: auto 1fr;
    grid-template-rows:    1fr;
  }

  /* --- Barre latérale --- */
  .onglets-nav {
    grid-area:      nav;
    display:        flex;
    flex-direction: column;
    align-items:    flex-end;
    gap:            2px;
    padding:        4px 0;
    background:     var(--onglets-surface);
    border:         1px solid var(--onglets-border);
    border-right:   none;
    border-radius:  var(--onglets-radius) 0 0 var(--onglets-radius);
    overflow-y:     auto;
    scrollbar-width: thin;
  }

  .onglets-tab {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    writing-mode:     vertical-rl;
    text-orientation: mixed;
    transform:        rotate(180deg);
    padding:          20px 10px;
    background:       transparent;
    border:           1px solid transparent;
    border-right:     none;
    border-radius:    8px 0 0 8px;
    font-family:      var(--onglets-font-ui);
    font-size:        .82rem;
    font-weight:      500;
    color:            var(--onglets-muted);
    cursor:           pointer;
    white-space:      nowrap;
    transition:       color var(--onglets-transition),
                      background var(--onglets-transition),
                      border-color var(--onglets-transition);
    position:         relative;
    right:            -1px;
    letter-spacing:   .04em;
  }

  .onglets-tab:hover {
    color:      var(--onglets-text);
    background: rgba(var(--onglets-accent-rgb), .06);
  }

  .onglets-tab.is-active {
    background:   var(--onglets-bg);
    color:        var(--onglets-accent);
    border-color: var(--onglets-border);
    font-weight:  600;
    box-shadow:   -2px 0 0 0 var(--onglets-accent) inset;
  }

  /* Panneau */
  .onglets-panels {
    grid-area:      panels;
    background:     var(--onglets-bg);
    border:         1px solid var(--onglets-border);
    border-radius:  0 var(--onglets-radius) var(--onglets-radius) 0;
    box-shadow:     var(--onglets-shadow);
    min-height:     180px;
  }

}

/* =========================================================
   PANNEAUX — commun
   ========================================================= */
.onglets-panel {
  display:  none;
  padding:  28px 32px;
  color:    var(--onglets-text);
  line-height: 1.7;
  animation: onglets-fadein 200ms ease;
}

.onglets-panel.is-active {
  display: block;
}

@keyframes onglets-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Typographie intérieure */
.onglets-panel h1,
.onglets-panel h2,
.onglets-panel h3 {
  font-family: 'Playfair Display', Georgia, serif;
  color:       var(--onglets-text);
  line-height: 1.25;
}

.onglets-panel p {
  font-size: .9375rem;
  color:     var(--onglets-text);
  margin:    0 0 1em;
}

.onglets-panel a {
  color:           var(--onglets-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Accentuation — barre colorée au survol de l'onglet */
.onglets-tab-label {
  position: relative;
  z-index:  1;
}

/* Responsive mobile : padding réduit dans le panneau */
@media (max-width: 767px) {
  .onglets-panel {
    padding: 20px 16px;
  }
}

/* =========================================================
   Sélecteur couleur accent  — petit aperçu
   ========================================================= */
.onglets-color-swatch {
  display:       inline-block;
  width:         16px;
  height:        16px;
  border-radius: 50%;
  border:        2px solid rgba(0,0,0,.15);
  background:    var(--onglets-accent);
  vertical-align: middle;
}