/* ═══ Accueil ═════════════════════════════════════════════════ */

/* ── Hero : la thèse — l'indigo, et la lumière dedans ────────── */
.hero {
  background: var(--paper);
  padding: calc(var(--nav-h) + clamp(40px, 6vw, 72px)) var(--pad-x) clamp(72px, 8vw, 112px);
}

.hero__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* ── La scène : tous les métiers passent par le même écran ────
   Aplats pastel en fond, vignettes au trait à l'encre, écran au
   centre. Posée à même le papier — aucun cadre.
   ───────────────────────────────────────────────────────────── */
.hero-scene {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.hero-scene svg { width: 100%; height: auto; display: block; }

.hero-scene__caption {
  max-width: 52ch;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink-55);
}

/* Fonds */
.sc-blob { opacity: 0.55; }

.sc-dash {
  fill: none;
  stroke: rgba(22, 23, 58, 0.22);
  stroke-width: 2;
  stroke-dasharray: 2 9;
  stroke-linecap: round;
}

/* Le trait commun à toutes les vignettes */
.sc-line,
.sc-w,
.sc-halo,
.sc-mint,
.sc-lilac,
.sc-sand {
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sc-line  { fill: none; }
.sc-w     { fill: var(--white); }
.sc-halo  { fill: var(--halo); }
.sc-mint  { fill: var(--seafoam); }
.sc-lilac { fill: var(--lilac); }
.sc-sand  { fill: var(--paper-2); }

/* Les à-plats sans contour : l'intérieur de l'écran */
.sc-flat      { stroke: none; }
.sc-ink       { fill: var(--ink); stroke: none; }
.sc-soft      { fill: var(--ink-14); stroke: none; }
.sc-soft-line { fill: none; stroke: var(--ink-14); stroke-width: 2; }

/* Les éclats respirent */
.sc-spark circle { animation: sc-twinkle 4.5s ease-in-out infinite; }
.sc-spark circle:nth-child(2) { animation-delay: 1.1s; }
.sc-spark circle:nth-child(3) { animation-delay: 2.2s; }
.sc-spark circle:nth-child(4) { animation-delay: 3.3s; }

@keyframes sc-twinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50%      { opacity: 1;    transform: scale(1); }
}

.sc-spark circle { transform-box: fill-box; transform-origin: center; }

/* Entrée en séquence */
.sc-in { opacity: 0; animation: sc-in 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) forwards; }
.sc-in--7 { animation-delay: 0.05s; }
.sc-in--1 { animation-delay: 0.22s; }
.sc-in--2 { animation-delay: 0.3s; }
.sc-in--3 { animation-delay: 0.38s; }
.sc-in--4 { animation-delay: 0.46s; }
.sc-in--5 { animation-delay: 0.54s; }
.sc-in--6 { animation-delay: 0.62s; }

@keyframes sc-in { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .sc-spark circle { animation: none; opacity: 1; }
  .sc-in { opacity: 1; animation: none; }
}

/* ── Les quatre domaines ──────────────────────────────────────
   Une couleur par domaine, portée par le bandeau de titre ;
   le corps reste blanc pour que la liste respire.
   ───────────────────────────────────────────────────────────── */
.solutions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: stretch;
}

.solution {
  --tone: var(--seafoam);
  display: flex;
  flex-direction: column;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--ink-08);
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1),
              box-shadow 0.3s ease;
}

/* Tous les bandeaux sont indigo : seul le liseré du haut identifie
   le domaine. Les teintes sont celles des plaques de la page Offres. */
.solution--audit     { --tone: var(--seafoam); }
.solution--concept   { --tone: var(--halo); }
.solution--formation { --tone: var(--lilac); }
.solution--cloud     { --tone: var(--mist); }

.solution:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 44px rgba(22, 23, 58, 0.09);
}

.solution__head {
  display: block;
  background: var(--ink);
  border-top: 6px solid var(--tone);
  padding: 26px 26px 24px;
}

.solution__head h3 {
  font-family: var(--display);
  font-size: 1.42rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--paper);
}

.solution__body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 26px;
  flex-grow: 1;
}

.solution__desc {
  font-size: 0.92rem;
  line-height: 1.62;
  color: var(--ink-70);
}

.solution__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
}

.solution__list span {
  position: relative;
  padding-left: 26px;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

/* La flèche : discrète, elle se colore et avance au survol */
.solution__list span::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ink-55);
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), color 0.3s ease;
}

.solution:hover .solution__list span::before {
  transform: translateX(3px);
  color: var(--ink);
}

/* ── La mission : quatre convictions, quatre pictogrammes ────── */
.missions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(40px, 7vw, 88px);
}

.mission {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: clamp(18px, 2.4vw, 28px);
  padding: 34px 0;
}

/* Filets : horizontal au-dessus de chaque bloc, vertical entre colonnes */
.mission::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 1px;
  background: rgba(22, 23, 58, 0.16);
}

.mission:nth-child(2)::after,
.mission:nth-child(4)::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(clamp(40px, 7vw, 88px) / -2);
  width: 1px;
  height: 100%;
  background: rgba(22, 23, 58, 0.16);
}

.mission__icon {
  flex: 0 0 auto;
  width: clamp(64px, 7vw, 92px);
}

.mission__icon svg { width: 100%; height: auto; display: block; }

/* Le trait à l'encre, les aplats en blanc, l'ambre pour l'accent */
.pic-line,
.pic-line-rect {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pic-fill {
  fill: var(--white);
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linejoin: round;
}

/* Le fût du crayon : un trait plus gras que les autres */
.pic-bar { stroke-width: 8; }

.pic-hi {
  fill: var(--halo);
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linejoin: round;
}

.mission__text { display: flex; flex-direction: column; gap: 10px; }

.mission h3 {
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
}

.mission p {
  font-size: 0.93rem;
  line-height: 1.7;
  color: var(--ink-70);
}

/* ── Aperçu des réalisations ─────────────────────────────────── */
.work-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 1000px) {
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }

  /* Le viewBox rétrécit avec la colonne : on remonte les corps de
     texte en unités utilisateur pour rester lisible. */
  .hero-scene { width: 100%; max-width: 660px; justify-self: center; }

  .solutions    { grid-template-columns: 1fr 1fr; }
  .work-preview { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .solutions { grid-template-columns: 1fr; }

  .missions { grid-template-columns: 1fr; }
  .mission:nth-child(2)::after,
  .mission:nth-child(4)::after { display: none; }

  .work-preview { grid-template-columns: 1fr; }

  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
}