/* =========================================================
   ORGANISATION — CSS DÉDIÉ (organisation.php)
   - Cohérent avec style.css (tokens/variables)
   - Light/Dark OK
   - Pie progress anti “rond noir”
   ========================================================= */

/* =========================================================
   0) BASE / HELPERS
   ========================================================= */
.org-wrap{ position:relative; }
.org-step{ position:relative; }
.org-note, .org-brands{ position:relative; }

/* =========================================================
   1) STEP TOP (fond media + overlay lisible)
   ========================================================= */
.org-step-top{
  position:relative;
  min-height:520px;
  padding:70px 0 60px;
  overflow:hidden;
  isolation:isolate;
}

.org-step-top::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background: var(--org-bg) center/cover no-repeat;
  transform:scale(1.02);
}

/* overlay clair */
.org-step-top::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.88));
}

/* overlay sombre */
html[data-theme="dark"] .org-step-top::after{
  background:linear-gradient(180deg, rgba(11,12,16,.66), rgba(11,12,16,.88));
}

/* option “fond scroll” */
.org-step-top--scroll::before{ background-attachment:fixed; }
@media (max-width:980px){
  .org-step-top--scroll::before{ background-attachment:scroll; }
}

.org-step-wrap{ position:relative; z-index:1; }

/* titres / lead */
.org-step-title{
  margin:0 0 22px;
  font-size:clamp(26px, 3vw, 40px);
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--text);
}
.org-step-title--center{ text-align:center; }

.org-step-head{
  max-width:980px;
  margin:0 auto 10px;
}

.org-step-lead{
  margin:8px auto 0;
  max-width:860px;
  text-align:center;
  line-height:1.6;
  color:var(--text-muted);
}

/* =========================================================
   2) LAYOUT STEP (bloc + timeline)
   ========================================================= */
.org-step-row{
  display:grid;
  grid-template-columns:420px 1fr; /* bloc + timeline */
  gap:34px;
  align-items:flex-start;
}

.org-step-left{ display:block; }

.org-step-box{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg, 16px);
  padding:18px 20px;
  box-shadow:var(--shadow, 0 16px 38px rgba(0,0,0,.18));
}

.org-step-box p{
  margin:0;
  line-height:1.7;
  color:var(--text);
}

/* Reveal */
.reveal-item{
  transform:translateY(10px);
  opacity:0;
  transition:transform .6s ease, opacity .6s ease;
}
.reveal-item.is-in{
  transform:translateY(0);
  opacity:1;
}

/* =========================================================
   3) TIMELINE (couleur = --primary)
   ========================================================= */
.org-step-time{
  position:relative;
  min-height:320px;
  padding-left:48px;
}

.org-step-time::before{
  content:"";
  position:absolute;
  left:22px;
  top:0;
  bottom:0;
  width:3px;
  background:linear-gradient(to bottom, var(--primary), rgba(201,162,39,.25));
  border-radius:999px;
}

.org-step-dot{
  position:absolute;
  left:14px;
  top:36px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--surface);
  border:3px solid var(--primary);
}

.org-step-hour{
  position:absolute;
  top:34px;
  left:48px;
  font-weight:700;
  color:var(--text-muted);
}

/* =========================================================
   4) ÉTAPE “CAPTURE” (shot vertical + bulle)
   ========================================================= */
.org-step-row--with-shot{
  grid-template-columns:240px 420px 1fr; /* shot | bloc | timeline */
  gap:34px;
}

.org-shot{
  width:240px;
  height:360px;
  border-radius:34px;
  overflow:hidden;
  background:rgba(0,0,0,.08);
  border:1px solid var(--border);
  box-shadow:var(--shadow, 0 18px 44px rgba(0,0,0,.18));
}

.org-shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.org-step-box--bubble{ position:relative; }
.org-step-box--bubble::after{
  content:"";
  position:absolute;
  right:-10px;
  top:22px;
  width:0; height:0;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:10px solid var(--surface);
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.12));
}

/* =========================================================
   5) BANDEAUX PROGRESS (fond + centrage)
   ========================================================= */
.org-step-bottom{
  background:var(--bg-soft, #f7f1e3);
  border-top:1px solid var(--border, rgba(0,0,0,.08));
  padding:34px 0;
}

.org-step-bottom-inner{
  width:100%;
  display:grid;
  place-items:center;
  text-align:center;
  gap:10px;
}

.org-step-caption{
  margin:0;
  font-size:1.05rem;
  font-weight:700;
  color:var(--text-muted);
}

.org-step-centertext{
  margin:6px auto 0;
  max-width:980px;
  text-align:center;
  line-height:1.8;
  color:var(--text-muted);
  font-style:italic;
}

html[data-theme="dark"] .org-step-bottom{
  background:rgba(255,255,255,.06);
}

/* =========================================================
   6) PIE PROGRESS (anti rond noir)
   ========================================================= */
.org-pie{
  width:120px;
  height:120px;
  position:relative;
  margin:0 auto;
}

.org-pie-svg{
  width:120px !important;
  height:120px !important;
  display:block !important;
  transform:rotate(-90deg);
}

.org-pie-svg circle{ fill:none !important; }

.org-pie-track{
  stroke:rgba(201,162,39,.20) !important;
  stroke-width:10 !important;
}

.org-pie-arc{
  stroke:var(--primary) !important;
  stroke-width:10 !important;
  stroke-linecap:round;
  stroke-dasharray:289;
  stroke-dashoffset:289;
  transition:stroke-dashoffset 1.2s ease;
}

.org-pie-center{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
}

.org-pie-val{
  font-weight:900;
  font-size:1.4rem;
  color:var(--primary);
}

/* =========================================================
   7) BLOC “SOFT” (si utilisé ailleurs)
   ========================================================= */
.org-soft{
  background:var(--bg-soft, #f7f1e3);
  padding:38px 0 40px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

html[data-theme="dark"] .org-soft{
  background:rgba(255,255,255,.06);
}

.org-soft-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns:420px 140px 1fr;
  gap:28px;
  align-items:start;
}

.org-soft-time{
  position:relative;
  min-height:360px;
}

.org-soft-time::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:3px;
  background:linear-gradient(to bottom, var(--primary), rgba(201,162,39,.25));
  border-radius:999px;
  transform:translateX(-50%);
}

.org-soft-dot{
  position:absolute;
  left:50%;
  top:64px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--surface);
  border:3px solid var(--primary);
  transform:translateX(-50%);
}

.org-soft-hour{
  position:absolute;
  top:62px;
  left:calc(50% + 18px);
  font-weight:800;
  color:var(--text-muted);
}

.org-soft-right{
  display:grid;
  gap:18px;
}

.org-photo{
  margin:0;
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow, 0 16px 34px rgba(0,0,0,.18));
}

.org-photo img{
  width:100%;
  height:auto;
  display:block;
}

/* =========================================================
   8) NOTE
   ========================================================= */
.org-note{
  padding:48px 0 34px;
  background:var(--bg);
}

.org-note h2{
  margin:0 0 10px;
  font-size:2rem;
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--text);
}

.org-note p{
  margin:0;
  max-width:980px;
  line-height:1.75;
  color:var(--text-muted);
}

/* =========================================================
   9) NOS MARQUES
   ========================================================= */
.org-brands{
  padding:70px 0 80px;
  background:linear-gradient(180deg, #2b1f1c 0%, #1e1614 100%);
}

.org-brands h2{
  margin:0 0 36px;
  font-size:2rem;
  font-weight:800;
  letter-spacing:-0.02em;
  color:#f2f2f2;
}

.org-brands-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}

.org-brand{
  height:160px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid rgba(255,255,255,.70);
  background:rgba(255,255,255,.03);
  transition:transform .2s ease, background .2s ease;
}

.org-brand:hover{
  background:rgba(255,255,255,.06);
  transform:translateY(-2px);
}

.org-brand img{
  max-width:75%;
  max-height:70%;
  object-fit:contain;
  display:block;
}

/* =========================================================
   10) RESPONSIVE
   ========================================================= */
@media (max-width:980px){
  .org-step-row,
  .org-step-row--with-shot{ grid-template-columns:1fr; }

  .org-step-time{ min-height:180px; }

  .org-shot{
    width:min(280px, 100%);
    height:360px;
  }

  .org-step-box--bubble::after{ display:none; }

  .org-soft-grid{ grid-template-columns:1fr; }
  .org-soft-time{ min-height:220px; }
  .org-soft-hour{ left:calc(50% + 20px); }
}

@media (max-width:900px){
  .org-brands-grid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:520px){
  .org-brands-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   11) FIX — RÉGLAGES (scopé, pas global)
   IMPORTANT : ne sert que si tu n’ajoutes pas
   .org-step-row--with-shot dans intro_reglages.php
   ========================================================= */

/* Si tu gardes seulement .org-step-row, alors la timeline paraît “plus basse”.
   Ce fix remonte le dot/heure uniquement sur l’étape réglages. */
#etape-reglages .org-step-dot{ top: 12px; }
#etape-reglages .org-step-hour{ top: 10px; }

/* =========================================================
   FIN
   ========================================================= */

   /* =========================================================
   VARIANTE — RÉGLAGES (photo rectangle + texte + timeline)
   Objectif : rendu comme ta capture (photo1.png)
   ========================================================= */

.org-step-row--reglages{
  display: grid;
  grid-template-columns: minmax(360px, 520px) minmax(420px, 1fr) 140px;
  gap: 34px;
  align-items: start;
}

/* Photo gauche grand rectangle */
.org-step-row--reglages .org-photo{
  border-radius: 0;              /* rectangle comme ta capture */
  box-shadow: none;              /* si tu veux “plat” */
  background: transparent;
  border: 0;
}
.org-step-row--reglages .org-photo img{
  width: 100%;
  height: auto;
  display: block;
}

/* Texte : un peu plus large et propre */
.org-step-row--reglages .org-step-box{
  max-width: 720px;
}

/* Timeline alignée sur le haut de la photo */
.org-step-row--reglages .org-step-time{
  min-height: 260px;
  padding-left: 48px;
  margin-top: 0;
}
.org-step-row--reglages .org-step-dot{ top: 10px; }
.org-step-row--reglages .org-step-hour{ top: 8px; }

/* Responsive */
@media (max-width: 980px){
  .org-step-row--reglages{
    grid-template-columns: 1fr;
  }
  .org-step-row--reglages .org-step-time{
    min-height: 160px;
  }
}