/* =========================================================
   Les Merveilles de Philomène — feuille de styles principale
   Palette prélevée sur la planche graphique fournie.
   Les valeurs marquées "approximation" ne sont pas issues
   directement des fichiers sources et devront être ajustées
   si des références plus précises sont fournies.
   ========================================================= */

/* =========================================================
   Polices personnalisées (fournies dans /static/fonts)
   ========================================================= */
@font-face {
  font-family: 'Coneria Script';
  src: url('/fonts/Demo_ConeriaScript.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Coneria Script';
  src: url('/fonts/Demo_ConeriaScript_Slanted.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

:root {
  /* --- Palette de marque (issue de la planche graphique) --- */
  --color-cream: rgb(234, 238, 221);      /* fond crème */
  --color-olive: rgb(124, 153, 11);       /* vert olive - marque */
  --color-lemon: rgb(223, 222, 18);       /* jaune citron - accents décoratifs */
  --color-forest: rgb(58, 74, 46);        /* vert forêt sombre - texte */

  /* --- Teintes dérivées (approximations pour états/ombres) --- */
  --color-forest-dark: rgb(40, 52, 32);       /* approximation : survol boutons foncés */
  --color-olive-dark: rgb(96, 119, 9);        /* approximation : survol boutons olive */
  --color-cream-dark: rgb(220, 224, 205);     /* approximation : fond de carte légèrement plus soutenu */
  --color-border-soft: rgb(197, 205, 171);    /* approximation : bordures discrètes */
  --shadow-soft: 0 4px 14px rgba(58, 74, 46, 0.12); /* approximation : ombre légère */

  --font-heading: 'Coneria Script', Georgia, "Times New Roman", serif;
  --font-body: "Segoe UI", Verdana, Arial, sans-serif;

  --radius-soft: 18px;
  --container-width: 1100px;
}

/* --- Réinitialisation légère --- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--color-forest);
  font-family: var(--font-body);
  line-height: 1.6;

  /* Fleur en filigrane, très estompée derrière le contenu, à gauche en haut de page. */
  background-color: var(--color-cream);
  background-image:
    linear-gradient(rgba(234, 238, 221, 0.93), rgba(234, 238, 221, 0.93)),
    url('/images/fleur_2.png');
  background-repeat: no-repeat, no-repeat;
  background-position: left top, 15% 25%;
  background-size: cover, min(420px, 55vw);
  background-attachment: scroll, fixed;
}

/* Image « fleur_fond_3 » (visuel texte) en filigrane, sous le contenu mais visible
   au-dessus du fond crème. Positionnée sous l'en-tête (sticky, opaque) pour rester
   visible, tout en étant remontée en haut de page. */
body::after {
  content: "";
  position: fixed;
  top: 150px;
  right: 0;
  left: auto;
  width: min(480px, 60vw);
  aspect-ratio: 3508 / 2480;
  background-image: url('/images/fleur_fond_3.png');
  background-repeat: no-repeat;
  background-position: right top;
  background-size: contain;
  opacity: 0.5;
  pointer-events: none;
  z-index: -1;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--color-forest);
  line-height: 1.25;
}

a {
  color: var(--color-forest);
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* --- Focus visible, partout --- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-olive);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-forest);
  color: var(--color-cream);
  padding: 0.6rem 1rem;
  z-index: 100;
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  left: 0;
}

/* =========================================================
   En-tête
   ========================================================= */
.site-header {
  background: var(--color-cream);
  border-bottom: 4px solid var(--color-lemon);
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.brand-link { display: inline-flex; align-items: center; }

.brand-logo {
  height: 84px;
  width: auto;
  display: block;
}

@media (min-width: 600px) {
  .brand-logo {
    height: 110px;
  }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: 2px solid var(--color-forest);
  border-radius: 8px;
  width: 44px;
  height: 44px;
  cursor: pointer;
}

.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto;
  background: var(--color-forest);
}

.main-nav .nav-list {
  list-style: none;
  display: flex;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
}

.main-nav a {
  text-decoration: none;
  white-space: nowrap;
  font-weight: 600;
  padding: 0.4rem 0.2rem;
  border-bottom: 2px solid transparent;
}

.main-nav a:hover {
  color: var(--color-olive-dark);
}

.main-nav a.is-active {
  border-bottom-color: var(--color-olive);
  color: var(--color-forest);
}

.main-nav a.is-active::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-lemon);
  margin-right: 0.4rem;
  vertical-align: middle;
}

/* --- Lien panier (icône + libellé + badge), tout à droite de l'en-tête --- */
.cart-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  font-weight: 600;
  color: var(--color-forest);
  padding: 0.35rem 0.2rem;
  border-bottom: 2px solid transparent;
  position: relative;
}

.cart-link:hover {
  color: var(--color-olive-dark);
}

.cart-link.is-active {
  border-bottom-color: var(--color-olive);
}

.cart-icon {
  flex-shrink: 0;
}

.cart-badge {
  display: inline-block;
  min-width: 1.4em;
  padding: 0.05em 0.4em;
  background: var(--color-olive);
  color: var(--color-cream);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}

/* =========================================================
   Section héro (accueil)
   ========================================================= */
.hero {
  padding: 3rem 0;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2.5rem;
  align-items: center;
}

.hero h1 {
  font-size: clamp(1.9rem, 3.2vw, 2.75rem);
  margin: 0 0 1rem;
}

.hero-lead {
  font-size: 1.05rem;
  max-width: 46ch;
}

.hero-visual {
  position: relative;
  overflow: visible;
}

.hero-image {
  width: 130%;
  max-width: 130%;
  height: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
  position: relative;
  left: -22%;
  border-radius: 0 var(--radius-soft) var(--radius-soft) 0;
  box-shadow: var(--shadow-soft);
  /* L'image déborde vers la gauche et s'estompe en fondu juste avant le texte. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 16%, black 42%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 16%, black 42%);
}

/* --- Bouton principal --- */
.btn {
  display: inline-block;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  border: 2px solid transparent;
}

.btn-primary {
  background: var(--color-forest);
  color: var(--color-cream);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--color-forest-dark);
}

.link-arrow {
  color: var(--color-olive-dark);
  font-weight: 600;
  text-decoration: underline;
}

/* =========================================================
   Sections génériques
   ========================================================= */
.selection,
.page-intro,
.catalog {
  padding: 2.5rem 0;
}

.selection { background: var(--color-cream-dark); }

.section-note {
  color: var(--color-forest);
  opacity: 0.85;
  max-width: 65ch;
}

/* =========================================================
   Quatre façons de faire graver une merveille (accueil)
   4 cartes "Material" côte à côte, alignées sur la même largeur
   que le reste du site (.container).
   ========================================================= */
.value-props {
  background: var(--color-cream-dark);
  padding: 2.5rem 0;
}

.value-grid {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.value-card {
  background: var(--color-cream);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 6px rgba(58, 74, 46, 0.10), 0 8px 24px rgba(58, 74, 46, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  cursor: pointer;
}

.value-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(58, 74, 46, 0.12), 0 14px 30px rgba(58, 74, 46, 0.12);
}

.value-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.value-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
  padding: 1.25rem 1.5rem 1.75rem;
}

.value-title {
  margin: 0;
  font-size: 1.15rem;
}

.value-subtitle {
  margin: 0;
  font-style: italic;
  font-weight: 600;
  color: var(--color-olive-dark);
}

.value-description {
  margin: 0;
  font-size: 0.92rem;
  flex-grow: 1;
}

.value-btn {
  display: inline-block;
  margin-top: auto;
  padding: 0.55rem 1.35rem;
  background: var(--color-olive);
  color: var(--color-cream);
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  border-radius: 4px;
  border: 2px solid transparent;
  transition: background 0.15s ease;
}

.value-btn:hover,
.value-btn:focus-visible {
  background: var(--color-olive-dark);
}

/* Rend toute la carte cliquable (technique du "stretched link") :
   le lien du bouton s'étire sur toute la surface de la carte parente. */
.value-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

@media (max-width: 960px) {
  .value-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================
   Mon atelier — bloc de présentation (accueil)
   Collage de deux photos avec un aplat de couleur en arrière-plan,
   texte à droite et bouton d'appel à l'action vers la page dédiée.
   ========================================================= */
.atelier-teaser {
  padding: 4.5rem 0;
}

.atelier-teaser-inner {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 3.5rem;
  align-items: center;
}

.atelier-teaser-visual {
  position: relative;
  padding: 1.25rem 2.25rem 2.25rem 0.5rem;
}


.atelier-teaser-image {
  display: block;
  border-radius: calc(var(--radius-soft) - 4px);
  box-shadow: var(--shadow-soft);
  position: relative;
}

.atelier-teaser-image--main {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transform: rotate(-1.5deg);
  z-index: 1;
}

.atelier-teaser-image--accent {
  width: 46%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  position: absolute;
  right: -0.5rem;
  bottom: -1.75rem;
  border: 6px solid var(--color-cream);
  transform: rotate(4deg);
  z-index: 2;
}

.atelier-teaser-text {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.atelier-teaser-eyebrow {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--color-olive-dark);
}

.atelier-teaser-text .section-title {
  margin: 0;
}

.atelier-teaser-lead {
  max-width: 52ch;
}

.atelier-teaser-text .btn {
  align-self: flex-start;
  margin-top: 0.5rem;
}

@media (max-width: 860px) {
  .atelier-teaser-inner {
    grid-template-columns: 1fr;
  }

  .atelier-teaser-visual {
    order: -1;
    padding: 1.5rem 2.5rem 3rem 1rem;
    max-width: 420px;
    margin: 0 auto;
  }
}

/* =========================================================
   Grille de produits / cartes
   ========================================================= */
.product-grid {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: grid;
  /* auto-fill (et non auto-fit) : les colonnes vides restantes ne sont pas
     réparties entre les cartes existantes, qui gardent donc toujours la
     même taille, qu'il y ait 1 ou 8 produits. */
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.5rem;
  justify-content: start;
}

.product-card {
  background: var(--color-cream);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-soft);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: var(--shadow-soft);
  max-width: 100%;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.product-card:hover,
.product-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(58, 74, 46, 0.2);
  border-color: var(--color-olive);
}

.product-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(var(--radius-soft) - 6px);
  display: block;
}

.product-image-placeholder {
  background: var(--color-cream-dark);
  border: 1px dashed var(--color-olive);
  border-radius: calc(var(--radius-soft) - 6px);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-forest);
  font-size: 0.9rem;
  text-align: center;
}

.product-name {
  margin: 0.25rem 0 0;
  font-size: 1.1rem;
}

.product-description {
  font-size: 0.95rem;
  margin: 0;
}

.product-price {
  font-weight: 700;
  margin: 0;
  color: var(--color-forest);
}

.product-availability {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  display: inline-block;
  width: fit-content;
}

.product-availability.is-available {
  background: var(--color-lemon);
  color: var(--color-forest);
}

.product-availability.is-unavailable {
  background: var(--color-border-soft);
  color: var(--color-forest);
}

.product-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* Rend toute la carte cliquable : le lien s'étire sur toute la surface
   de la carte (technique du "stretched link"), tout en restant sémantiquement
   attaché à l'image + au titre. */
.product-card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.add-to-cart-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
}

.qty-input {
  width: 4rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--color-border-soft);
  border-radius: 8px;
  font-size: 0.9rem;
}

.add-to-cart-feedback {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-olive-dark);
}

.unavailable-note {
  font-style: italic;
  opacity: 0.85;
}

/* =========================================================
   Fil d'Ariane
   ========================================================= */
.breadcrumb {
  padding: 1rem 0;
}

.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
}

.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 0.4rem;
  color: var(--color-olive);
}

.breadcrumb li[aria-current="page"] {
  font-weight: 600;
}

/* =========================================================
   Page de détail produit
   ========================================================= */
.product-detail {
  padding-bottom: 3rem;
}

.product-detail-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.product-image-placeholder--large {
  aspect-ratio: 1 / 1;
  font-size: 1.1rem;
}

.product-photo--large {
  aspect-ratio: 1 / 1;
}

.product-detail-price {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0.5rem 0;
}

.product-detail-description {
  max-width: 55ch;
}

.add-to-cart-form--detail {
  margin: 1.5rem 0;
}

.add-to-cart-form--detail .qty-input {
  width: 5rem;
}

/* =========================================================
   Formulaire de demande de devis (page Personnalisation)
   ========================================================= */
.devis-form-wrapper {
  margin: 1.5rem 0;
  padding: 1.5rem;
  background: var(--color-cream);
  border-radius: var(--radius-soft);
}

.devis-form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.devis-form label {
  font-weight: bold;
  margin-top: 0.75rem;
}

.devis-form input[type="text"],
.devis-form input[type="email"],
.devis-form input[type="tel"],
.devis-form textarea {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-border-soft);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
}

.devis-form button[type="submit"] {
  margin-top: 1.25rem;
  align-self: flex-start;
}

.devis-field-error {
  color: rgb(150, 20, 20);
  font-size: 0.85rem;
  margin: 0.15rem 0 0;
}

.devis-alert {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin: 1rem 0;
}

.devis-alert--success {
  background: rgba(124, 153, 11, 0.15);
  color: var(--color-forest);
}

.devis-alert--error {
  background: rgba(200, 40, 40, 0.12);
  color: rgb(150, 20, 20);
}

/* =========================================================
   Pages "Votre objet" et "Grands projets"
   ========================================================= */
.projet-hero {
  padding: 3.5rem 0 3rem;
}

.projet-hero-inner {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3rem;
  align-items: center;
}

.projet-hero-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.projet-eyebrow {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--color-olive-dark);
}

.projet-title {
  margin: 0;
  font-size: clamp(2rem, 3.6vw, 3rem);
}

.projet-tagline {
  margin: 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  color: var(--color-olive-dark);
  padding-left: 1rem;
  border-left: 4px solid var(--color-lemon);
}

.projet-lead {
  margin: 0;
  max-width: 52ch;
}

.projet-hero-text .btn {
  align-self: flex-start;
  margin-top: 0.5rem;
}

.projet-hero-visual {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 380px;
}

/* Arche : forme douce et moderne, rappelant une vitrine d'atelier. */
.projet-hero-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 999px 999px var(--radius-soft) var(--radius-soft);
  box-shadow: var(--shadow-soft);
  outline: 2px solid var(--color-olive);
  outline-offset: 10px;
}

.projet-hero-badge {
  position: absolute;
  left: -1.5rem;
  bottom: 1.5rem;
  margin: 0;
  max-width: 190px;
  display: flex;
  flex-direction: column;
  padding: 0.85rem 1.1rem;
  background: var(--color-cream);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(58, 74, 46, 0.2);
  font-size: 0.85rem;
  line-height: 1.35;
}

.projet-hero-badge-number {
  font-family: var(--font-heading);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--color-olive);
}

/* --- Déroulé en 3 étapes --- */
.projet-steps {
  background: var(--color-cream-dark);
  padding: 3rem 0;
}

.projet-steps-title {
  text-align: center;
  margin: 0 0 2rem;
}

.projet-steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.projet-step {
  position: relative;
  background: var(--color-cream);
  border-radius: var(--radius-soft);
  padding: 2.25rem 1.5rem 1.5rem;
  box-shadow: var(--shadow-soft);
}

.projet-step p {
  margin: 0;
  font-size: 0.95rem;
}

.projet-step-number {
  position: absolute;
  top: -1.1rem;
  left: 1.5rem;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-olive);
  color: var(--color-cream);
  font-weight: 700;
  box-shadow: 0 0 0 4px var(--color-lemon);
}

.projet-step-title {
  margin: 0 0 0.4rem;
  font-size: 1.25rem;
}

/* --- Formulaire de demande de devis --- */
.projet-demande {
  padding: 3.5rem 0 2rem;
  scroll-margin-top: 140px;
}

.projet-card {
  max-width: 820px;
  margin: 0 auto;
  background: var(--color-cream);
  border: 1px solid var(--color-border-soft);
  border-top: 4px solid var(--color-olive);
  border-radius: var(--radius-soft);
  padding: 2rem 2.25rem 2.25rem;
  box-shadow: var(--shadow-soft);
}

.projet-card-intro .section-title {
  margin: 0 0 0.35rem;
}

.projet-card-intro .section-note {
  margin: 0 0 1rem;
}

.projet-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem 1.25rem;
}

.projet-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.projet-field--full {
  grid-column: 1 / -1;
}

.projet-optional {
  font-weight: 400;
  opacity: 0.7;
}

.projet-form input,
.projet-form textarea {
  width: 100%;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.devis-form input[type="number"],
.devis-form input[type="date"] {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-border-soft);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
}

.projet-form input:focus,
.projet-form textarea:focus {
  outline: none;
  border-color: var(--color-olive);
  box-shadow: 0 0 0 3px rgba(124, 153, 11, 0.2);
}

.projet-input-suffix {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.projet-input-suffix span {
  font-weight: 600;
  opacity: 0.8;
}

/* Occasions : boutons radio présentés en « pastilles » */
.projet-occasions {
  border: 0;
  margin: 0 0 0.5rem;
  padding: 0;
}

.projet-occasions legend {
  font-weight: bold;
  padding: 0;
  margin-bottom: 0.6rem;
}

.projet-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.devis-form .projet-chip {
  margin: 0;
  font-weight: 600;
  cursor: pointer;
}

.projet-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.projet-chip span {
  display: inline-block;
  padding: 0.45rem 1rem;
  border: 1.5px solid var(--color-border-soft);
  border-radius: 999px;
  background: #fff;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.projet-chip:hover span {
  border-color: var(--color-olive);
}

.projet-chip input:checked + span {
  background: var(--color-olive);
  border-color: var(--color-olive);
  color: var(--color-cream);
}

.projet-chip input:focus-visible + span {
  outline: 3px solid var(--color-olive);
  outline-offset: 2px;
}

@media (max-width: 860px) {
  .projet-hero-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .projet-hero-visual {
    order: -1;
    max-width: 300px;
  }

  .projet-steps-list {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media (max-width: 600px) {
  .projet-card {
    padding: 1.5rem 1.25rem;
  }

  .projet-form-grid {
    grid-template-columns: 1fr;
  }

  .projet-hero-badge {
    left: -0.5rem;
  }
}

/* =========================================================
   Panier
   ========================================================= */
.cart-flash-message {
  background: var(--color-lemon);
  color: var(--color-forest);
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-weight: 600;
}

.cart-empty {
  text-align: center;
  padding: 2rem 0;
}

.cart-list {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cart-line {
  display: grid;
  grid-template-columns: 90px 1fr auto auto auto;
  gap: 1rem;
  align-items: center;
  background: var(--color-cream);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-soft);
  padding: 0.75rem 1rem;
}

.cart-line-image .product-image-placeholder {
  width: 80px;
  height: 80px;
  aspect-ratio: auto;
  font-size: 0.7rem;
}

.cart-line-image .product-photo {
  width: 80px;
  height: 80px;
  aspect-ratio: auto;
}

.cart-line-name {
  font-size: 1.05rem;
  margin: 0;
}

.cart-line-name a {
  text-decoration: none;
}

.cart-line-unit-price {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  opacity: 0.85;
}

.cart-line-quantity-form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cart-line-total {
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
}

.cart-remove-btn {
  background: none;
  border: none;
  color: var(--color-olive-dark);
  text-decoration: underline;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.cart-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  border-top: 2px solid var(--color-border-soft);
  padding-top: 1.25rem;
}

.cart-total {
  font-size: 1.15rem;
  margin: 0;
}

.cart-summary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.btn-outline {
  background: transparent;
  color: var(--color-forest);
  border-color: var(--color-forest);
}

.btn-outline:hover,
.btn-outline:focus-visible {
  background: var(--color-forest);
  color: var(--color-cream);
}

/* =========================================================
   Points forts (accueil)
   Section claire, intégrée au flux de la page (et non un
   bandeau sombre qui ferait doublon visuel avec le pied de
   page). Icônes fournies en PNG sur fond blanc, neutralisées
   via mix-blend-mode: multiply pour s'intégrer à la carte.
   ========================================================= */
.highlights {
  padding: 3rem 0 3.5rem;
}

.highlights-eyebrow {
  margin: 0;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--color-olive-dark);
}

.highlights-title {
  text-align: center;
  margin: 0.35rem 0 2.25rem;
}

.highlights-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.highlight-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9rem;
  padding: 1.5rem 1rem;
  background: var(--color-cream);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-soft);
  box-shadow: var(--shadow-soft);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.highlight-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(58, 74, 46, 0.12), 0 14px 30px rgba(58, 74, 46, 0.12);
}

.highlight-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--color-cream-dark);
  border: 2px solid var(--color-olive);
}

.highlight-icon-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.highlight-label {
  margin: 0;
  color: var(--color-forest);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

@media (max-width: 720px) {
  .highlights-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================
   Pied de page
   ========================================================= */
.site-footer {
  background: var(--color-forest);
  color: var(--color-cream);
  padding: 2rem 0;
  margin-top: 2rem;
  border-top: 4px solid var(--color-lemon);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.footer-monogram {
  height: 44px;
  width: auto;
}

.footer-brand-name {
  font-family: var(--font-heading);
  margin: 0;
}

.footer-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
}

.footer-nav a,
.footer-copyright {
  color: var(--color-cream);
  text-decoration: none;
}

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

.footer-copyright {
  width: 100%;
  text-align: center;
  opacity: 0.85;
  font-size: 0.9rem;
}

/* =========================================================
   Responsive : menu burger (6 onglets, bascule plus tôt)
   ========================================================= */
@media (max-width: 1080px) {
  .nav-toggle {
    display: flex;
  }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-cream);
    border-bottom: 2px solid var(--color-border-soft);
    display: none;
  }

  .main-nav.is-open {
    display: block;
  }

  .main-nav .nav-list {
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 1.25rem 1rem;
  }
}

/* =========================================================
   Responsive : mobile
   ========================================================= */
@media (max-width: 720px) {
  .header-actions {
    gap: 0.75rem;
  }

  .cart-label {
    display: none;
  }

  .hero-inner {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    order: -1;
    overflow: hidden;
    border-radius: var(--radius-soft);
  }

  .hero-image {
    width: 100%;
    max-width: 100%;
    left: 0;
    border-radius: var(--radius-soft);
    -webkit-mask-image: none;
    mask-image: none;
  }

  .value-grid {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    justify-content: center;
    text-align: center;
  }

  .product-detail-inner {
    grid-template-columns: 1fr;
  }

  .cart-line {
    grid-template-columns: 70px 1fr;
    grid-template-areas:
      "image info"
      "image qty"
      "image total"
      "image remove";
    row-gap: 0.4rem;
  }

  .cart-line-image { grid-area: image; }
  .cart-line-info { grid-area: info; }
  .cart-line-quantity-form { grid-area: qty; }
  .cart-line-total { grid-area: total; }
  .cart-line-remove-form { grid-area: remove; }
}