/* theme.css : branche brand.css sur Bootstrap et définit les composants du site.
   N'utiliser QUE des variables --ot-* (voir brand.css). */

:root {
  --bs-primary: var(--ot-signal);
  --bs-primary-rgb: 14, 120, 212;           /* garder synchronisé avec --ot-signal */
  --bs-body-color: var(--ot-ink);
  --bs-body-bg: var(--ot-white);
  --bs-body-font-family: var(--ot-font-body);
  --bs-heading-color: var(--ot-ink);
  --bs-secondary-color: var(--ot-slate);
  --bs-link-color: var(--ot-signal);
  --bs-link-hover-color: var(--ot-signal-hover);
  --bs-link-color-rgb: 14, 120, 212;
  --bs-border-radius: var(--ot-radius);
  --bs-border-radius-lg: var(--ot-radius-lg);
  --bs-focus-ring-color: rgba(14, 120, 212, 0.35);
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .btn {
  font-family: var(--ot-font-heading);
}
h1, h2, h3, h4 { font-weight: var(--ot-heading-weight); letter-spacing: var(--ot-heading-tracking); }
h3, h4 { font-weight: 500; }

.eyebrow {
  font-family: var(--ot-font-heading); font-weight: 500; font-size: .8rem;
  text-transform: uppercase; letter-spacing: var(--ot-eyebrow-tracking); color: var(--ot-signal);
}

/* Boutons */
.btn { font-weight: 500; border-radius: var(--ot-radius); padding: .7rem 1.4rem; }
.btn-primary {
  --bs-btn-bg: var(--ot-signal); --bs-btn-border-color: var(--ot-signal); --bs-btn-color: var(--ot-white);
  --bs-btn-hover-bg: var(--ot-signal-hover); --bs-btn-hover-border-color: var(--ot-signal-hover); --bs-btn-hover-color: var(--ot-white);
  --bs-btn-active-bg: var(--ot-signal-hover); --bs-btn-active-border-color: var(--ot-signal-hover);
}
.btn-outline-dark {
  --bs-btn-color: var(--ot-ink); --bs-btn-border-color: var(--ot-ink);
  --bs-btn-hover-bg: var(--ot-ink); --bs-btn-hover-border-color: var(--ot-ink); --bs-btn-hover-color: var(--ot-white);
}
.btn-outline-light { --bs-btn-hover-color: var(--ot-night); }

/* Navigation */
.site-nav { background: var(--ot-white); border-bottom: var(--ot-border); }
.site-nav .navbar-brand img { height: 3.5rem; width: auto; }
.site-nav .nav-link { color: var(--ot-ink); font-weight: 500; }
.site-nav .nav-link:hover, .site-nav .nav-link.active { color: var(--ot-signal); }

/* Sections */
.section { padding-block: var(--ot-section-pad); }
.section-mist { background: var(--ot-mist); }
.section-night { background: var(--ot-night); color: var(--ot-white); --bs-heading-color: var(--ot-white); --bs-secondary-color: rgba(255,255,255,.75); }
.section-night .eyebrow { color: var(--ot-white); opacity: .8; }
.lead { color: var(--ot-slate); font-weight: 400; }
.section-night .lead { color: rgba(255,255,255,.82); }

/* Hero */
.hero { padding-block: clamp(3rem, 8vw, 6rem); }
.hero h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); line-height: 1.08; }
.hero-mark { width: min(100%, 26rem); height: auto; display: block; margin-inline: auto; }

/* Cartes sobres (pas d'ombre lourde, pas de dégradé) */
.card-ot { background: var(--ot-white); border: var(--ot-border); border-radius: var(--ot-radius-lg); padding: 2rem; height: 100%; }
.card-ot h3 { font-size: 1.25rem; margin-bottom: .75rem; }
.card-ot p { color: var(--ot-slate); margin-bottom: 0; }
.card-ot .num { font-family: var(--ot-font-heading); font-weight: 300; font-size: 2.5rem; color: var(--ot-signal); line-height: 1; margin-bottom: 1rem; }

/* Photos : cadrage fixe, coins arrondis de la charte, sans filtre ni dégradé */
.photo { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; border-radius: var(--ot-radius-lg); display: block; }
.audience { margin: 0; }
.audience .photo { aspect-ratio: 3 / 2; }
.audience h3 { font-size: 1.1rem; margin-top: 1rem; margin-bottom: 0; }

/* Étapes : trois cercles, écho aux trois ensō du logo */
.step-ring { width: 3.25rem; height: 3.25rem; border-radius: 50%; border: 2px solid var(--ot-signal);
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--ot-font-heading); font-weight: 500; color: var(--ot-signal); }

/* Formulaires */
.form-control, .form-select { border-radius: var(--ot-radius); border-color: rgba(91,107,124,.5); padding: .7rem .9rem; }
.form-control:focus { border-color: var(--ot-signal); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); }
.form-label { font-weight: 500; }
.hp-field { position: absolute; left: -10000px; height: 0; overflow: hidden; } /* anti-pourriel */

/* Pied de page */
.site-footer { background: var(--ot-ink); color: rgba(255,255,255,.75); padding-block: 3.5rem 2rem; }
.site-footer a { color: var(--ot-white); text-decoration: none; }
.site-footer a:hover { color: var(--ot-signal); }
.site-footer img { height: 4.5rem; width: auto; }
.site-footer .small { color: rgba(255,255,255,.55); }

:focus-visible { outline: 3px solid var(--ot-signal); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Page Liens : cartes cliquables */
.link-card { display: block; text-decoration: none; color: inherit; transition: border-color .15s; }
.link-card:hover { border-color: var(--ot-signal); }
.link-card h3 { color: var(--ot-ink); }
.link-card .meta { display: block; margin-top: 1rem; font-size: .8rem; color: var(--ot-signal); font-weight: 500; }
.link-card:hover h3 { color: var(--ot-signal); }

/* Tableau sobre (crédits) */
.table-ot { --bs-table-bg: transparent; --bs-table-border-color: rgba(91,107,124,.25); }
.table-ot thead th { font-family: var(--ot-font-heading); font-weight: 500; font-size: .8rem; text-transform: uppercase; letter-spacing: var(--ot-eyebrow-tracking); color: var(--ot-slate); border-bottom-color: var(--ot-slate); }
.table-ot tbody th { font-weight: 500; }

/* Responsive : pas de débordement horizontal en mobile */
.table-responsive { position: relative; }
.site-footer a, .card-ot a { overflow-wrap: anywhere; }

.audience p { color: var(--ot-slate); margin: .35rem 0 0; }

/* Ancres : ne pas cacher le titre sous la barre collante */
[id] { scroll-margin-top: 5rem; }

/* À propos : portrait ; Liens : logo de collaborateur */
.portrait { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 20% top; border-radius: var(--ot-radius-lg); display: block; }
.collab-logo { display: block; max-height: 3rem; max-width: 70%; width: auto; margin-bottom: 1.25rem; }

/* Page légale */
.legal h2 { margin-top: 2.25rem; margin-bottom: .75rem; }
.legal p { max-width: 60ch; }

/* Nom de la marque en sur-titre : bleu, grand, très aéré (même esprit que le mot-symbole du logo) */
.eyebrow-brand { font-weight: 400; font-size: clamp(1.5rem, 3.4vw, 2.25rem); letter-spacing: var(--ot-wordmark-tracking); line-height: 1.1; }