/*
================================================
LA PLACE — DESIGN SYSTEM
Visual language : The Rebel Optician
================================================
Display   : Bebas Neue
Condensed : Barlow Condensed 300 / 500
Body      : Barlow 300 / 500
Accent    : #FFD100 — une seule ligne par composition
Séparation entre blocs : 2px fond noir
Gutters desktop : 120px
================================================
*/

/* =============================================
   1. VARIABLES
   ============================================= */

:root {
  /* --- Couleurs --- */
  --black:   #080808;
  --white:   #F8F6F1;
  --yellow:  #FFD100;
  --red:     #C8001A;     /* erreurs uniquement */

  --gray-1:  #1A1A1A;
  --gray-2:  #2C2C2C;
  --gray-3:  #666666;
  --gray-4:  #999999;
  --gray-5:  #CCCCCC;
  --gray-6:  #E8E6E1;

  /* --- Aliases compatibilité templates --- */
  --ardoise:        var(--black);
  --pierre:         var(--white);
  --craie:          var(--white);
  --or:             var(--yellow);
  --ciment:         var(--gray-4);
  --gris-1:         var(--gray-1);
  --gris-2:         var(--gray-2);
  --gris-3:         var(--gray-3);
  --gris-4:         var(--gray-4);
  --gris-5:         var(--gray-5);
  --gris-6:         var(--gray-6);
  --yellow-primary: var(--yellow);
  --yellow-light:   #FFE44D;
  --black-primary:  var(--black);
  --black-light:    var(--gray-1);
  --white-primary:  var(--white);
  --white-cream:    var(--white);
  --white-warm:     var(--white);
  --gray-concrete:  var(--gray-3);
  --gray-light:     var(--gray-6);
  --gray-border:    var(--gray-2);

  /* --- Polices --- */
  --font-display:   'Bebas Neue', sans-serif;
  --font-condensed: 'Barlow Condensed', sans-serif;
  --font-body:      'Barlow', sans-serif;
  --font-primary:   var(--font-body);   /* alias */

  /* --- Poids --- */
  --font-light:     300;
  --font-regular:   300;
  --font-medium:    500;
  --font-semibold:  500;
  --font-bold:      500;
  --font-extrabold: 500;

  /* --- Échelle typographique --- */
  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.9375rem;  /* 15px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.375rem;   /* 22px */
  --text-2xl:  1.75rem;    /* 28px */
  --text-3xl:  2.25rem;    /* 36px */
  --text-4xl:  3rem;       /* 48px */
  --text-5xl:  4rem;       /* 64px */
  --text-6xl:  5.5rem;     /* 88px */
  --text-7xl:  clamp(5rem, 12vw, 9rem);

  /* --- Espacement --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Section padding standard */
  --section-pad: 120px;

  /* Gutter horizontal */
  --gutter: 120px;
  --seam:   2px;            /* séparation entre cellules */

  /* --- Rayons --- 0 partout */
  --radius-sm:   0;
  --radius-md:   0;
  --radius-lg:   0;
  --radius-xl:   0;
  --radius-2xl:  0;
  --radius-full: 0;

  /* --- Ombres --- */
  --shadow-sm:  none;
  --shadow-md:  none;
  --shadow-lg:  none;
  --shadow-xl:  0 8px 24px rgba(0,0,0,0.4);
  --shadow-2xl: 0 16px 48px rgba(0,0,0,0.6);

  /* --- Transitions --- */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Z-index --- */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-fixed:    300;
  --z-modal:    400;
  --z-popover:  500;
  --z-tooltip:  600;
}


/* =============================================
   2. RESET & BASE
   ============================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: var(--font-light);
  line-height: 1.7;
  overflow-x: hidden;
}


/* =============================================
   3. TYPOGRAPHIE
   ============================================= */

/* Bebas Neue — display, uppercase natif */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;           /* Bebas n'a qu'un seul weight */
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--white);
}

/* Barlow Condensed — sous-titres, h3-h6 */
h3, h4, h5, h6 {
  font-family: var(--font-condensed);
  font-weight: var(--font-medium);
  line-height: 1.2;
  letter-spacing: 0.03em;
  color: var(--white);
}

h1 { font-size: var(--text-7xl); }
h2 { font-size: var(--text-5xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

/* Sur fond clair — couleur inversée */
.bg-white h1, .bg-white h2,
#manifeste h1, #manifeste h2 {
  color: var(--black);
}

p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-light);
  line-height: 1.7;
  color: var(--gray-4);
}

/* Label — Barlow Condensed uppercase */
.label,
.text-signature {
  font-family: var(--font-condensed);
  font-weight: var(--font-light);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-4);
}

/* Corps manifeste — Barlow weight 300, grand */
.text-manifeste {
  font-family: var(--font-body);
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight: var(--font-light);
  line-height: 1.55;
  color: var(--black);
}

/* Numéro de section — Bebas Neue, gros, atténué */
.section-num {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--yellow);
}


/* =============================================
   4. BOUTONS — Barlow Condensed, uppercase, 0 radius
   ============================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 32px;
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
  white-space: nowrap;
  position: relative;
}

/* Primaire — fond jaune, texte noir */
.btn-primary {
  background: var(--yellow);
  color: var(--black);
  border-color: var(--yellow);
}
.btn-primary:hover {
  background: var(--yellow-light);
  border-color: var(--yellow-light);
}

/* Secondaire — fond blanc, texte noir */
.btn-secondary {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}
.btn-secondary:hover {
  background: var(--gray-6);
  border-color: var(--gray-6);
}

/* Outline — transparent, bordure blanche */
.btn-outline {
  background: transparent;
  border-color: var(--gray-2);
  color: var(--white);
}
.btn-outline:hover {
  border-color: var(--white);
}

/* Outline-light — même usage, alias */
.btn-outline-light {
  background: transparent;
  border-color: var(--gray-2);
  color: var(--white);
}
.btn-outline-light:hover {
  border-color: var(--white);
}

/* Outline sur fond blanc */
.btn-outline-dark {
  background: transparent;
  border-color: var(--black);
  color: var(--black);
}
.btn-outline-dark:hover {
  background: var(--black);
  color: var(--white);
}

/* Ghost */
.btn-ghost {
  background: transparent;
  color: var(--gray-4);
  border-color: transparent;
  padding: 14px 0;
  letter-spacing: 0.12em;
}
.btn-ghost:hover { color: var(--white); }

/* Tailles */
.btn-lg {
  padding: 18px 48px;
  font-size: var(--text-sm);
}
.btn-sm {
  padding: 10px 20px;
  font-size: 10px;
  letter-spacing: 0.18em;
}


/* =============================================
   5. LIGNE JAUNE — usage unique par composition
   ============================================= */

.yellow-line {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--yellow);
  border: none;
  flex-shrink: 0;
}

.yellow-line--short {
  width: 40px;
}


/* =============================================
   6. BADGES
   ============================================= */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 12px;
  font-family: var(--font-condensed);
  font-size: 10px;
  font-weight: var(--font-light);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 0;
}

.badge-yellow,
.badge-ardoise {
  background: var(--yellow);
  color: var(--black);
}

.badge-black {
  background: var(--gray-1);
  color: var(--white);
}

.badge-outline {
  background: transparent;
  border: 1px solid var(--gray-2);
  color: var(--gray-4);
}


/* =============================================
   7. CARTES
   ============================================= */

.card {
  background: var(--gray-1);
  overflow: hidden;
  border-radius: 0;
  transition: background var(--transition-base);
}

.card-hover:hover { background: var(--gray-2); }


/* =============================================
   8. SECTIONS — 2px seam, pas de bordure
   ============================================= */

.section {
  padding: var(--section-pad) 0;
  position: relative;
}

.section-sm  { padding: 80px 0; }
.section-lg  { padding: 160px 0; }

/* Séparation cellules : 2px fond noir */
.section + .section,
section + section {
  margin-top: var(--seam);
}

/* Containers */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container-narrow {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

@media (max-width: 1280px) {
  .container, .container-narrow { padding: 0 80px; }
}
@media (max-width: 768px) {
  .container, .container-narrow { padding: 0 24px; }
  .section { padding: 80px 0; }
  :root { --gutter: 24px; }
}


/* =============================================
   9. EN-TÊTE DE SECTION — pattern TRO
   ============================================= */

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 80px;
  border-bottom: 1px solid var(--gray-2);
  padding-bottom: 32px;
}

.section-header.light {
  border-bottom-color: var(--black);
}

.section-title-group {
  display: flex;
  align-items: flex-end;
  gap: 24px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--white);
}

.section-title.dark { color: var(--black); }

.section-desc {
  font-family: var(--font-condensed);
  font-weight: var(--font-light);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  color: var(--gray-4);
  max-width: 280px;
  text-align: right;
  line-height: 1.6;
}

/* Eyebrow (nav breadcrumb style) */
.section-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.eyebrow-line {
  width: 32px;
  height: 1px;
  background: var(--gray-3);
  flex-shrink: 0;
}

.eyebrow-line.bg-yellow { background: var(--gray-3); } /* neutralisé */
.eyebrow-line.bg-black  { background: var(--white); }


/* =============================================
   10. GRILLES
   ============================================= */

.grid { display: grid; gap: var(--seam); }

.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-cols-4,
  .grid-cols-3,
  .grid-cols-2 { grid-template-columns: 1fr; }
}


/* =============================================
   11. UTILITAIRES
   ============================================= */

.bg-black   { background: var(--black); }
.bg-ardoise { background: var(--black); }
.bg-white   { background: var(--white); }
.bg-pierre  { background: var(--white); }
.bg-craie   { background: var(--white); }
.bg-warm    { background: var(--gray-1); }
.bg-yellow  { background: var(--gray-1); } /* pas d'aplat jaune */

.text-white   { color: var(--white); }
.text-black   { color: var(--black); }
.text-ardoise { color: var(--black); }
.text-craie   { color: var(--white); }
.text-ciment  { color: var(--gray-4); }
.text-yellow  { color: var(--yellow); } /* usage contrôlé */

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

/* Scroll reveal — même pattern que TRO */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }


/* =============================================
   12. PAGE MANIFESTE — fond blanc, texte noir
   ============================================= */

.manifeste-hero {
  background: var(--black);
  color: var(--white);
  padding: var(--section-pad) 0;
  position: relative;
}

/* Ligne jaune en bas du hero manifeste */
.manifeste-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 2px;
  background: var(--yellow);
}

.manifeste-hero-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.manifeste-title {
  font-family: var(--font-display);
  font-size: clamp(4rem, 10vw, 8rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--white);
  margin-bottom: var(--space-8);
}

.manifeste-introduction {
  font-size: var(--text-xl);
  font-weight: var(--font-light);
  line-height: 1.6;
  color: var(--gray-4);
  max-width: 600px;
  margin: 0 auto;
}

.manifeste-content {
  background: var(--white);
  padding: var(--section-pad) 0;
}

.manifeste-body {
  max-width: 720px;
  margin: 0 auto;
}

.manifeste-heading-h2 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  line-height: 0.9;
  color: var(--black);
  margin-top: 80px;
  margin-bottom: 40px;
}

.manifeste-heading-h3 {
  font-family: var(--font-condensed);
  font-size: var(--text-2xl);
  font-weight: var(--font-medium);
  color: var(--black);
  margin-top: 48px;
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.manifeste-paragraph {
  font-size: var(--text-lg);
  font-weight: var(--font-light);
  line-height: 1.8;
  color: var(--gray-3);
  margin-bottom: var(--space-6);
}

.manifeste-paragraph p { margin-bottom: var(--space-4); }

.manifeste-paragraph strong {
  font-weight: var(--font-medium);
  color: var(--black);
}

.manifeste-paragraph a {
  color: var(--black);
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Citation — fond noir dans section blanche */
.manifeste-quote {
  background: var(--black);
  color: var(--white);
  padding: 48px 40px 48px 48px;
  margin: 64px 0;
  position: relative;
}

/* Ligne jaune gauche — usage unique dans cette composition */
.manifeste-quote::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--yellow);
}

.quote-text {
  font-family: var(--font-body);
  font-size: var(--text-2xl);
  font-weight: var(--font-light);
  line-height: 1.45;
  margin-bottom: var(--space-4);
  color: var(--white);
}

.quote-attribution {
  display: block;
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  font-weight: var(--font-light);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-4);
  text-align: right;
}

.manifeste-image { margin: 64px 0; }
.manifeste-image img { width: 100%; height: auto; display: block; }

.image-caption {
  margin-top: var(--space-3);
  font-family: var(--font-condensed);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--gray-4);
  text-align: center;
}

.manifeste-two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--seam);
  margin: 48px 0;
}

.manifeste-spacer-small  { height: 40px; }
.manifeste-spacer-medium { height: 80px; }
.manifeste-spacer-large  { height: 120px; }

.manifeste-cta {
  background: var(--black);
  padding: var(--section-pad) 0;
  text-align: center;
}

.manifeste-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 0.9;
  color: var(--white);
  margin-bottom: 48px;
}

.manifeste-cta-block {
  background: var(--gray-1);
  padding: 48px;
  margin: 48px 0;
  text-align: center;
}

.cta-block-title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  color: var(--white);
  margin-bottom: var(--space-4);
}

.cta-block-text {
  font-size: var(--text-lg);
  font-weight: var(--font-light);
  color: var(--gray-4);
  margin-bottom: var(--space-6);
}

.manifeste-video { margin: 48px 0; }

.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.video-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}


/* =============================================
   13. PAGES LÉGALES
   ============================================= */

.legal-header {
  background: var(--black);
  color: var(--white);
  padding: var(--section-pad) 0 80px;
  position: relative;
}

.legal-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--gutter); right: var(--gutter);
  height: 2px;
  background: var(--yellow);
}

.legal-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 0.9;
  color: var(--white);
  margin-bottom: var(--space-6);
  text-align: center;
}

.legal-introduction {
  font-size: var(--text-lg);
  font-weight: var(--font-light);
  color: var(--gray-4);
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.legal-content {
  background: var(--white);
  padding: var(--section-pad) 0;
}

.legal-body {
  max-width: 720px;
  margin: 0 auto;
  font-size: var(--text-base);
  font-weight: var(--font-light);
  line-height: 1.8;
  color: var(--gray-3);
}

.legal-body h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  color: var(--black);
  margin-top: 64px;
  margin-bottom: 32px;
}

.legal-body h3 {
  font-family: var(--font-condensed);
  font-size: var(--text-2xl);
  font-weight: var(--font-medium);
  color: var(--black);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 40px;
  margin-bottom: 20px;
}

.legal-body p { margin-bottom: var(--space-4); }

.legal-body strong {
  font-weight: var(--font-medium);
  color: var(--black);
}

.legal-body a {
  color: var(--black);
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 2px;
}

.legal-body hr {
  border: none;
  border-top: 1px solid var(--gray-6);
  margin: 48px 0;
}

.legal-footer {
  background: var(--gray-1);
  padding: 64px 0;
  text-align: center;
}


/* =============================================
   RESPONSIVE GLOBAL
   ============================================= */

@media (max-width: 768px) {
  .manifeste-title { font-size: clamp(3rem, 10vw, 5rem); }
  .manifeste-two-columns { grid-template-columns: 1fr; }
  .manifeste-hero::after { left: 24px; right: 24px; }
  .legal-title { font-size: clamp(2.5rem, 10vw, 4rem); }
  .legal-header::after { left: 24px; right: 24px; }
  .section-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .section-desc { text-align: left; max-width: 100%; }
}