/* ============================================================
   DOONI — page QUI ON EST / WHO WE ARE (couche web)
   Réutilise dooni-web.css + sections.css. Ton : conviction, pas
   menu de services. Honnête, jamais posture d'expert. "Ugly workshop."
   ============================================================ */

/* ---------- 01 · EN-TÊTE : la conviction d'abord ---------- */
.belief { padding: clamp(40px,6vw,96px) var(--gutter) clamp(34px,4vw,64px); }
.belief .kicker { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(28px,4vw,52px); }
.belief .kicker .dot { width: 11px; height: 11px; background: var(--trace); display: block; }
.belief h1 { max-width: 22ch; }
.belief .belief-h { font-size: clamp(28px,4.2vw,62px); line-height: 1.0; }
.belief .amp { color: var(--ink-300); display: block; margin-top: 0.12em; }
.belief-sub { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,56px); margin-top: clamp(40px,5vw,72px); padding-top: clamp(28px,3.4vw,48px); border-top: var(--hair); align-items: start; }
.belief-sub .right { padding-top: 6px; }

/* ---------- 02 · OMAR & SYRINE : narratif ---------- */
.people-band { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 0; border-top: var(--rule); }
.people-band .portrait { border-right: var(--rule); }
.people-band .portrait .shot { border: none; height: 100%; min-height: 440px; }
.people-band .story { padding: clamp(30px,4vw,64px) var(--gutter); }
.people-band .story .who { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; }
.people-band .story p + p { margin-top: 18px; }
.people-band .story .sign { margin-top: 28px; display: inline-flex; align-items: center; gap: 12px; }

.dual { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--rule); }
.dual .person { padding: clamp(26px,3.4vw,48px) var(--gutter); }
.dual .person:first-child { border-right: var(--rule); }
.dual .person .ph { margin-bottom: 20px; }

/* ---------- 03 · CE QU'ON A APPRIS / POURQUOI DOONI ---------- */
.learned { border-top: var(--rule); }
.learned-head { max-width: 800px; }
.beliefs-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--rule); border-left: var(--rule); margin-top: clamp(28px,3.4vw,48px); }
.belief-cell { border-right: var(--rule); border-bottom: var(--rule); padding: clamp(24px,3vw,38px); display: flex; flex-direction: column; gap: 14px; min-height: 230px; }
.belief-cell .num { font-family: var(--font-tech); font-weight: 600; font-size: 13px; letter-spacing: 0.1em; color: var(--ink-300); }
.belief-cell .ttl { font-family: var(--font-headline); font-weight: 800; text-transform: uppercase; font-size: clamp(18px,1.7vw,23px); line-height: 1.04; color: var(--structure); }
.belief-cell .bd { font-family: var(--font-read); font-size: 15px; line-height: 1.5; color: var(--ink-700); margin-top: auto; }
.why { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(24px,4vw,56px); align-items: start; padding-top: clamp(36px,4vw,64px); }

/* ---------- 04 · AU-DELÀ DE LA SALLE (léger) ---------- */
.beyond { border-top: var(--rule); }
.beyond-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(20px,3vw,44px); }
.beyond .tag { align-self: start; }
.beyond .copy { max-width: 640px; }
.beyond .copy h3 { margin: 0 0 12px; }
.beyond .future { font-family: var(--font-read); font-style: italic; color: var(--ink-500); margin-top: 14px; }

/* ---------- 05 · PONT : notes + café ---------- */
.bridge2 { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--rule); }
.bridge2 .half { padding: clamp(32px,4vw,64px) var(--gutter); display: flex; flex-direction: column; gap: 18px; }
.bridge2 .half:first-child { border-right: var(--rule); }
.bridge2 .half .lbl { color: var(--ink-500); }
.bridge2 .half h3 { max-width: 14ch; }
.bridge2 .half .act { margin-top: auto; padding-top: 18px; }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 880px) {
  .belief-sub { grid-template-columns: 1fr; }
  .people-band { grid-template-columns: 1fr; }
  .people-band .portrait { border-right: none; border-bottom: var(--rule); }
  .people-band .portrait .shot { min-height: 320px; }
  .dual { grid-template-columns: 1fr; }
  .dual .person:first-child { border-right: none; border-bottom: var(--rule); }
  .beliefs-grid { grid-template-columns: 1fr; }
  .why { grid-template-columns: 1fr; }
  .beyond-row { grid-template-columns: 1fr; }
  .bridge2 { grid-template-columns: 1fr; }
  .bridge2 .half:first-child { border-right: none; border-bottom: var(--rule); }
}