/* ================================================================
   sections.css — Système de classes de section
   4 niveaux de densité : section / section-md / section-sm / section-xs

   Usage HTML :
     <section class="section icp">          ← 128px / gap 80px
     <section class="section-md marquee">   ← 128px / gap 64px
     <section class="section-sm logo">      ← 64px  / no gap
     <section class="section-xs how">       ← 16px  / gap 80px
================================================================ */

/* ── Wrapper principal — marquee → faq ──────────────────────── */
#main {
  background: var(--cyan-50);
}

/* ── Plein — icp, character, folio, testimonials, pricing, versus, faq, footer ── */
.section {
  display:         flex;
  padding:         128px 0;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  gap:             80px;
  align-self:      stretch;
}

/* ── Moyen — marquee ─────────────────────────────────────────── */
.section-md {
  display:         flex;
  padding:         128px 0;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  gap:             64px;
  align-self:      stretch;
}

/* ── Petit — logo ────────────────────────────────────────────── */
.section-sm {
  display:         flex;
  padding:         64px 0;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  align-self:      stretch;
}

/* ── Container heading — titre de section centré (854px) ──────── */
.container-heading {
  display:         flex;
  max-width:       854px;
  width:           100%;
  padding:         0 32px;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  gap:             16px;   /* gap suptitle+H2 → subtitle */
}

/* Stack suptitle + H2 (gap interne 8px, conformément Figma) */
.ch__stack {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  align-self:     stretch;
  align-items:    center;
}

/* ── Container gap XS — 3 panneaux côte à côte, gap 8px ─────── */
.container-gap-xs {
  display:     flex;
  gap:         8px;
  align-items: flex-start;
  padding:     0 32px;
  align-self:  stretch;
}

/* ── Container MD — badges / services (max-width 854px) ──────── */
.container-md {
  display:         flex;
  flex-wrap:       wrap;
  gap:             4px;
  justify-content: center;
  max-width:       854px;
  padding:         0 32px;
  width:           100%;
}

/* ── Container — max-width 1280px, col principale ────────────── */
.container {
  display:         flex;
  max-width:       1280px;
  padding:         0 32px;
  flex-direction:  column;
  align-items:     flex-start;
  gap:             64px;
  align-self:      stretch;
}

/* ── Row — enfants en ligne horizontale ─────────────────────── */
.row {
  display:         flex;
  flex-direction:  row;
  align-items:     flex-start;
  align-content:   flex-start;
  gap:             32px;
  align-self:      stretch;
}

/* ── Padding top — décalage en haut d'une row ───────────────── */
.padding-top {
  padding-top: 64px;
}

/* ── Pixel pattern — bande décorative pixel-art en absolute ─── */
.pixel__pattern {
  position:          absolute;
  left:              0;
  right:             0;
  height:            48px;
  background-repeat: repeat-x;
  background-size:   304px 48px;
  pointer-events:    none;
}
.pixel__pattern--top    { top:    0; }
.pixel__pattern--bottom { bottom: 0; }

.pixel__pattern--purple {
  background-image: url('../img/assets/ribbon_pattern_purple.svg');
}

.pixel__pattern--cyan {
  background-image: url('../img/assets/ribbon_pattern_cyan.svg');
}

/* ── Corner pixel-art décoratif — 20×20px absolu ────────────── */
.corner {
  position:       absolute;
  width:          20px;
  height:         20px;
  pointer-events: none;
  z-index:        2;
}
.corner--tl { top:    0; left:  0; }
.corner--tr { top:    0; right: 0; }
.corner--bl { bottom: 0; left:  0; }
.corner--br { bottom: 0; right: 0; }

/* ── Wrapper générique — inner wrapper avec padding 128px ───── */
.wrapper {
  position:        relative;
  display:         flex;
  padding:         128px 16px;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  gap:             64px;
  width:           100%;
}

/* ── Micro — how ─────────────────────────────────────────────── */
.section-xs {
  display:         flex;
  padding:         16px;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  gap:             80px;
  align-self:      stretch;
}