/*
  Socle landing — patch CSS
  ===========================
  Append-only stylesheet loaded after the inline base CSS on /socle/ and
  /socle-en/. Hosts the SCSS deltas that couldn't be re-compiled with
  modern dart-sass (legacy vendor imports). The next clean `gulp build_css`
  on a properly-configured machine will merge these into _socle.scss and
  this file should then be deleted.
*/

/* ---- Palette + typography ---- */
.c-socle {
  --socle-accent: #004CCC;
  --socle-accent-soft: #96BEFF;
  --socle-font-display: 'degular-display', 'degular', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
.c-socle-eyebrow {
  font-family: var(--socle-font-display);
}
.c-socle-hero__secondary {
  font-family: var(--socle-font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ---- Hero kicker (replaces the 4 tile boxes) ---- */
.c-socle-hero__kicker {
  margin: 12px 0 16px;
  font-family: var(--socle-font-display);
  font-size: 16px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--socle-ink-soft);
  letter-spacing: 0;
}
@media (min-width: 640px) {
  .c-socle-hero__kicker { font-size: 18px; }
}
.c-socle-hero__kicker-sep {
  margin: 0 8px;
  color: var(--socle-accent-soft);
  font-weight: 400;
}

/* Hero visual removed entirely — collapse grid to single column on desktop */
.c-socle-hero__visual,
.c-socle-hero__visual-grid,
.c-socle-hero__visual-tile,
.c-socle-hero__visual-caption,
.c-socle-hero__visual-card,
.c-socle-hero__visual-placeholder {
  display: none !important;
}
@media (min-width: 1024px) {
  .c-socle .c-socle-hero__inner {
    grid-template-columns: 1fr !important;
  }
  .c-socle-hero__content { max-width: 820px; }
}

/* ---- Reassurance + Perks: harmonised blue ---- */
.c-socle .c-socle-reassurance,
.c-socle .c-socle-perks {
  background: var(--socle-paper-cool);
  border: 1px solid var(--socle-accent-soft);
}
.c-socle .c-socle-reassurance__title,
.c-socle .c-socle-perks__title {
  color: var(--socle-accent);
}

/* ---- Tarif: bullet list under "hosting" card ---- */
.c-socle-tarif__list {
  margin: 8px 0 0;
  padding-left: 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--socle-ink-soft);
  list-style: none;
}
.c-socle-tarif__list > li {
  position: relative;
  padding-left: 16px;
  margin-top: 4px;
}
.c-socle-tarif__list > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--socle-accent-soft);
}

/* ---- Calendrier section ---- */
.c-socle-calendrier { background-color: var(--socle-paper); }
.c-socle-timeline {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 640px) {
  .c-socle-timeline {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}
.c-socle-timeline__step {
  position: relative;
  background: var(--socle-paper);
  border: 1px solid var(--socle-border);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 640px) {
  .c-socle-timeline__step::after {
    content: '→';
    position: absolute;
    right: -16px;
    top: 50%;
    transform: translate(50%, -50%);
    font-family: var(--socle-font-display);
    font-size: 24px;
    color: var(--socle-accent-soft);
    z-index: 1;
  }
  .c-socle-timeline__step:last-child::after { display: none; }
}
.c-socle-timeline__week {
  font-family: var(--socle-font-display);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--socle-accent);
}
.c-socle-timeline__title {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 800;
  color: var(--socle-ink);
}
.c-socle-timeline__body {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--socle-ink-soft);
}
.c-socle-calendrier__note {
  margin: 32px auto 0;
  max-width: 720px;
  text-align: center;
  font-size: 14px;
  line-height: 22px;
  color: var(--socle-ink-soft);
  font-style: italic;
}

/* ---- Pilier number: switch from sm to xs + uppercase guarantee ---- */
.c-socle-pilier__number {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---- Accent color override: replace #2d63ff with #004CCC across the landing ---- */
.c-socle .c-socle-btn {
  background-color: #004CCC;
  box-shadow: 0 8px 24px -8px rgba(0, 76, 204, 0.25);
}
.c-socle .c-socle-btn:hover,
.c-socle .c-socle-btn:focus,
.c-socle .c-socle-btn:active {
  box-shadow: 0 12px 32px -8px rgba(0, 76, 204, 0.32);
}
.c-socle .c-socle-btn--ghost {
  background-color: transparent;
  color: #004CCC;
  box-shadow: inset 0 0 0 1.5px #004CCC;
}
.c-socle .c-socle-btn--ghost:hover,
.c-socle .c-socle-btn--ghost:focus,
.c-socle .c-socle-btn--ghost:active {
  background-color: #004CCC;
  color: #FFFFFF;
}
.c-socle .c-socle-eyebrow:not(.c-socle-eyebrow--invert),
.c-socle .c-socle-pourquoi__link a,
.c-socle .c-socle-section__lede a,
.c-socle .c-socle-pourquoi__body p a,
.c-socle .c-socle-faq__answer a,
.c-socle .c-socle-tarif__kind,
.c-socle .c-socle-pilier__number,
.c-socle .c-socle-faq__question::after {
  color: #004CCC;
}
.c-socle .c-socle-tarif--featured {
  border-color: #004CCC;
  box-shadow: 0 16px 32px -16px rgba(0, 76, 204, 0.32);
}
.c-socle .c-socle-tarif--featured::before {
  background: #004CCC;
}
.c-socle-faq__item[open] {
  border-color: #004CCC;
  box-shadow: 0 8px 24px -16px rgba(0, 76, 204, 0.32);
}
.c-socle-faq__item[open] .c-socle-faq__question::after {
  background: #004CCC;
  color: #FFFFFF;
  border-color: #004CCC;
}
.c-socle .c-socle-compare__row--head .c-socle-compare__cell--socle { color: #004CCC; }
.c-socle .c-socle-compare__cell--socle[data-label]::before { color: #004CCC; }
@media (min-width: 640px) {
  .c-socle .c-socle-compare__cell--socle {
    background: linear-gradient(180deg, rgba(0, 76, 204, 0.04) 0%, rgba(0, 76, 204, 0) 100%);
    border-left: 2px solid #004CCC;
  }
}
/* ---- h3 weight reduction (titles in piliers + timeline) ---- */
.c-socle-pilier__title,
.c-socle-timeline__title {
  font-family: var(--socle-font-display);
  font-weight: 700;
}

/* ---- Conversion section button: ensure white text on blue bg
        (the .c-socle-btn--invert variant has been removed from the HTML,
         but if it ever reappears, force white text and white-bg to keep
         accessibility on the dark navy section background) ---- */
.c-socle .c-socle-btn--invert {
  background-color: #FFFFFF;
  color: var(--socle-ink);
}