/* =========================
Surcharge de styles pour le thème de base
========================= */
/* =========================
1. VARIABLES
========================= */
:root {
  --color-bg: #fbfaf7;
  --color-surface: #ffffff;
  --color-text: #1a1a1a;
  --color-muted: #6b6b6b;
  --color-border: #e5e2dc;

  --color-accent: #d96b4a;
  --color-accent-soft: #f3ddd6;
}

/* =========================
2. BASE
========================= */

.ul-icon svg {
  color: var(--color-accent);
}

/* =========================
3. TYPOGRAPHIE
========================= */
/*style minimal*/
h2.h2--minimal::after {
  width: 60px;
  height: 4px;
  background: var(--color-accent);
}
/*style luxe*/
h2.h2--luxe::after {
  left: 0;
  bottom: 0;
  width: 70%;
  height: 1px;
  background: var(--color-accent-soft, currentColor);
  opacity: 0.6;
}

h2.h2--luxe::before {
  left: 0;
  bottom: -3px;
  width: 25px;
  height: 2px;
  background: var(--color-accent-soft, currentColor);
  opacity: 0.9;
}
/*style moderne*/
h2.h2--moderne::after {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    var(--color-accent, currentColor) 40%,
    transparent
  );
  opacity: 0.6;
}

h2.h2--moderne::before {
  left: 0;
  bottom: -2px;
  width: 6px;
  height: 6px;
  background: var(--color-accent, currentColor);
  border-radius: 50%;
  opacity: 0.9;
}
/* =========================
4. LAYOUT
========================= */
/*sections*/
.section {
  background: var(--color-bg);
}

/*grids*
.grid--2 {
  gap: 0;
}*/

/* =========================
6. FOOTER — SKIN (thème)
========================= */

.site-footer {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.footer-name {
  color: var(--color-text);
}

.footer-baseline {
  color: var(--color-muted);
}

/* navigation */

.footer-nav a {
  color: var(--color-muted);
  transition: color 0.2s ease;
}

.footer-nav a:hover {
  color: var(--color-accent);
}

.footer-nav span {
  color: var(--color-border);
}

/* socials */

.footer-socials a {
  color: var(--color-muted);
  transition: color 0.2s ease;
}

.footer-socials a:hover {
  color: var(--color-accent);
}

/* =========================
7. HERO — SKIN (thème)
========================= */
/* 1. HERO HOME (impact éditorial, sans image)
    usage : accueil simple, message fort*/
.hero--home {
  padding: calc(var(--space-xl) * 1.2) 0;
}

.hero--home .hero__content {
  max-width: 760px;
}

.hero--home .hero__title {
  font-size: clamp(2.4rem, 5vw, 3.2rem);
}
/* 2. HERO HOME IMAGE + PARALLAX (version signature)
    usage : home principale “maracuja” */
.hero--image {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}
.hero--image::before {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35),
    rgba(0, 0, 0, 0.55)
  );
}
.hero--home.hero--image {
  min-height: 80vh;
  display: flex;
  align-items: center;
}

.hero--home.hero--image .hero__content {
  text-align: center;
  margin: 0 auto;
  color: white;
}

.hero--home.hero--image .hero__title {
  color: white;
}

/*3. HERO PAGE (secondaire propre)
👉 usage : services / contact / articles*/
.hero--page {
  padding: var(--space-l) 0;
  position: relative;
  overflow: hidden;
  background-image: url("../images/desk-lamp.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 30vh;
}
.hero--page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.6),
    rgba(0, 0, 0, 0.1)
  );
  z-index: 1;
}
.hero--page .hero__content {
  max-width: 640px;
  color: white;
  position: relative;
  z-index: 2;
}

.hero--page .hero__title {
  font-size: clamp(1.8rem, 3vw, 2.2rem);
}
/* 4. HERO SOFT (secondaire doux)*/
.hero--soft {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

/* =========================================================
   HERO MARACUJA — HOME SIGNATURE
   ========================================================= */

/* image de fond */
.hero--maracuja {
  position: relative;
  overflow: hidden;
  background-image: url("../images/passiflora-background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .hero--image.hero--maracuja {
    background-attachment: scroll;
    background-size: 80vh;
  }
}
/* overlay doux (lisibilité + identité) */
.hero--maracuja::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.35),
    rgba(0, 0, 0, 0.6)
  );
  z-index: 1;
}

/* centrage + lecture premium */
.hero--maracuja.hero--center .hero__content {
  text-align: center;
  color: white;
  position: relative;
  z-index: 2;
}

/* titre */
.hero--maracuja .hero__title {
  color: white;
}

/* texte secondaire */
.hero--maracuja .hero__subtitle {
  color: rgba(255, 255, 255, 0.85);
}

/* option : bouton plus visible */
.hero--maracuja .btn {
  border-color: white;
  color: white;
}

.hero--maracuja .btn:hover {
  background: white;
  color: #1a1a1a;
}

/* =========================
8. COMPONENTS - SKIN (thème)
========================= */
/* boutons */
/* primaire : action principale */
.btn-primary {
  background: var(--color-accent);
  color: #fff;
  border: 1px solid var(--color-accent);
}

.btn-primary:hover {
  opacity: 0.9;
}
/* secondaire : action douce */
.btn-ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn-ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
/* cartes */
.card-icon {
  stroke: var(--color-accent);
}
.card-image {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.card--highlight {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
}

.card--featured {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 1.5rem;
  border-radius: 5px;
}

.card--featured p {
  padding-top: var(--space-m);
  /* color: var(--color-muted); */
}

.card--featured ul {
  margin: 0;
  padding-left: 1.2rem;
}

.card--ghost {
  background: transparent;
  border: none;
}

.card--maracuja {
  padding-right: 200px;
  background:
    url("../images/passiflora-rameau.png") no-repeat right 1rem center / 200px,
    var(--color-surface);
}

@media (max-width: 768px) {
  .card--maracuja {
    padding-right: var(--space-m);
    background:
      linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)),
      url("../images/passiflora-rameau.png") no-repeat right 1rem center / 200px,
      var(--color-surface);
  }
}
/*carousel*/
/* usage : visuels, porfolios, produits, projets, fiches, réalisations */
.carousel--cards {
  scroll-behavior: smooth;
  padding: 10px 0;
}

.carousel--cards .carousel-item {
  height: 420px;
  background: var(--color-surface);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  font-style: italic;
  color: var(--color-muted);
}

.carousel--cards .carousel-item p {
  padding-left: 12px;
}

.carousel--cards .carousel-item img {
  width: 100%;
  height: 80%;
  object-fit: cover;
}

.carousel--cards .carousel-item .content {
  padding: 12px;
}

/* navigation fluide / storytelling. effet “on voit la carte suivante” → donne envie de scroller
usage : témoignages, étapes d’un processus, storytelling */
.carousel--peek {
  scroll-behavior: smooth;
  padding: 10px 0;
}

.carousel--peek .carousel-item {
  flex: 0 0 80%;
}

@media (min-width: 768px) {
  .carousel--peek .carousel-item {
    flex: 0 0 60%;
  }
}

/*tableaux*/
.table--featured {
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.table--featured tr {
  transition: background 0.2s ease;
}

.table--featured tr:hover td {
  background: rgba(198, 169, 107, 0.08);
}

.table--featured svg {
  padding-right: 1.5rem;
  color: var(--color-accent);
}