/* ============================================================
   HOME.CSS — Styles additifs pour la nouvelle page d'accueil
   générale et les pages "Impression" (Avocat, Médecin, etc.)
   Ne modifie AUCUNE règle de style.css — vient en complément.
   Réutilise les variables --cream / --black / --gold / etc.
   ============================================================ */

/* ---------- HEADER SIMPLIFIÉ (pages sans panier) ---------- */
.devis-nav-btn { white-space: nowrap; }
@media (max-width: 860px) {
  .devis-nav-btn { display: none; }
}

/* ---------- BREADCRUMB ---------- */
.breadcrumb {
  padding: 110px 0 0;
  font-size: 13px;
  color: var(--gray);
}
.breadcrumb a { color: var(--gray); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span.sep { margin: 0 6px; color: var(--gray-light); }
.breadcrumb span.current { color: var(--black); font-weight: 500; }

/* ---------- NAVBAR — opaque, coins arrondis en bas (page d'accueil) ---------- */
.page-home .navbar {
  border-radius: 0 0 28px 28px;
  overflow: hidden;
}
.page-home .navbar .nav-container { overflow: visible; }

/* Remplace le cadre de focus noir par défaut du navigateur sur le logo par un style doré discret et accessible */
.logo-img-link {
  display: inline-block;
  border-radius: 8px;
  outline: none;
}
.logo-img-link:focus-visible {
  box-shadow: 0 0 0 3px var(--gold-light);
}

/* ---------- TICKER BANNER (bande dorée défilante, accueil) ---------- */
.ticker-banner {
  position: relative;
  background: linear-gradient(
    135deg,
    #8c6a00 0%,
    #d4af37 25%,
    #fae371 50%,
    #d4af37 75%,
    #8c6a00 100%
  );
  overflow: hidden;
  height: 60px;
  display: flex;
  align-items: center;
  box-shadow:
    0 2px 16px rgba(212, 175, 55, 0.25),
    inset 0 1px 0 rgba(255,255,255,0.12);
}
.ticker-banner::before,
.ticker-banner::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.ticker-banner::before {
  left: 0;
  background: linear-gradient(to right, #8c6a00, transparent);
}
.ticker-banner::after {
  right: 0;
  background: linear-gradient(to left, #8c6a00, transparent);
}
.ticker-inner {
  width: 100%;
  overflow: hidden;
}
.ticker-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: ticker-scroll 36s linear infinite;
  will-change: transform;
}
.ticker-track:hover { animation-play-state: paused; }
@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 36px;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  white-space: nowrap;
}
.ticker-diamond {
  font-size: 7px;
  color: rgba(255, 255, 255, 0.5);
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .ticker-item { font-size: 12px; padding: 0 20px; }
}

/* ---------- NOS SERVICES (entête) ---------- */
.services-section { background: var(--cream); padding: 24px 0 96px; }
.services-header { text-align: center; margin-bottom: 28px; }
.services-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--gold);
  margin-bottom: 16px;
}
.services-eyebrow::before,
.services-eyebrow::after {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
}
.services-header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.6vw, 2.5rem);
  font-weight: 500;
  color: var(--black);
  margin-bottom: 10px;
}
.services-header h2 em { font-style: italic; }
.services-header p { font-size: 14.5px; color: var(--gray); }

/* ---------- 5 CARTES "VIGNETTES" PLEINE PHOTO ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
}
@media (max-width: 1100px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .services-grid { grid-template-columns: 1fr; } }

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 290px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--charcoal);
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  transition: transform var(--transition), box-shadow var(--transition);
}
@media (max-width: 460px) { .service-card { min-height: 240px; } }
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* Photo en fond plein cadre */
.service-card-media {
  position: absolute;
  inset: 0;
}
.service-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}
.service-card:hover .service-card-media img { transform: scale(1.08); }
.service-card-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.82) 100%);
  transition: background var(--transition);
}
.service-card:hover .service-card-media::after {
  background: linear-gradient(180deg, rgba(184,150,12,0.05) 25%, rgba(184,150,12,0.88) 100%);
}

/* Badge icône flottant en haut à gauche : fond foncé opaque + icône blanche,
   pour un contraste net sur n'importe quelle photo. */
.service-card-icon {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 3;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,20,20,0.72);
  border: 1.5px solid rgba(255,255,255,0.4);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.service-card-icon i { width: 21px; height: 21px; color: var(--white); stroke-width: 2px; transition: color var(--transition); }
.service-card:hover .service-card-icon { background: var(--gold); border-color: var(--gold); transform: scale(1.08); }
.service-card:hover .service-card-icon i { color: var(--white); }

/* Libellé en overlay bas, grand et lisible */
.service-card-text {
  position: relative;
  z-index: 2;
  padding: 22px 20px;
}
.service-card-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--white);
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.service-card-label i.chevron {
  width: 18px; height: 18px;
  margin-left: auto;
  flex-shrink: 0;
  color: var(--white);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--transition), transform var(--transition);
}
.service-card:hover .service-card-label i.chevron {
  opacity: 1;
  transform: translateX(0);
}
@media (max-width: 460px) { .service-card-label { font-size: 17px; } }
.section-pad { padding: 96px 0; }
.section-pad.alt { background: var(--white); }

/* ---------- ACTIVITÉS (4 cartes) ---------- */
.activities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
}
@media (max-width: 980px) { .activities-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .activities-grid { grid-template-columns: 1fr; } }

.activity-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}
.activity-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.activity-card-media {
  height: 170px;
  position: relative;
  background: var(--cream-dark);
}
.activity-card-media img { width: 100%; height: 100%; object-fit: cover; }
.activity-card-media.icon-media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--charcoal), var(--black));
}
.activity-card-media.icon-media i { width: 46px; height: 46px; color: var(--gold-light); stroke-width: 1.4; }

.activity-card-body { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.activity-card-body h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--black);
}
.activity-card-body p { font-size: 13.5px; color: var(--gray); line-height: 1.55; flex: 1; }
.activity-card-body .btn { margin-top: 6px; align-self: flex-start; }

/* ---------- SOUS-CATÉGORIES IMPRESSION (cartes riches) ---------- */
.impression-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
  margin-top: 48px;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

.sub-card {
  background: var(--cream);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: var(--radius-lg);
  padding: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.sub-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(184,150,12,0.35); }

/* Visuel en haut de carte */
.sub-card-media {
  position: relative;
  height: 350px;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a1a, #0d0d0d);
}
.sub-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s ease;
}
.sub-card:hover .sub-card-media img { transform: scale(1.07); }
.sub-card-media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
}

/* Icône flottante à cheval sur l'image et le corps de carte */
.sub-card-icon {
  position: absolute;
  left: 24px;
  bottom: -24px;
  z-index: 2;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--black);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
  border: 3px solid var(--cream);
}
.sub-card-icon i { width: 22px; height: 22px; color: var(--gold-light); }

.sub-card-body { padding: 36px 28px 28px; flex: 1; display: flex; flex-direction: column; }
.sub-card h3 { font-family: var(--font-display); font-size: 21px; font-weight: 600; margin-bottom: 8px; color: var(--black); }
.sub-card p { font-size: 13.5px; color: var(--gray); line-height: 1.6; margin-bottom: 18px; }

/* Mini liste d'avantages avec coches */
.sub-card-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: rgba(0,0,0,0.03);
  border-radius: var(--radius);
}
.sub-card-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--charcoal);
  list-style: none;
}
.sub-card-features i {
  width: 15px; height: 15px;
  flex-shrink: 0;
  color: var(--gold);
  stroke-width: 2.4px;
}

.sub-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.sub-card-tags span {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(0,0,0,0.05);
  color: var(--gray);
}
.sub-card-body .btn-full { margin-top: auto; }

/* ----- Variante "bientôt disponible" ----- */
.sub-card.soon .sub-card-media img { filter: grayscale(65%); opacity: 0.75; }
.sub-card.soon .sub-card-icon { background: var(--charcoal); }
.sub-card.soon .sub-card-icon i { color: rgba(245,240,232,0.55); }
.soon-ribbon {
  position: absolute;
  top: 16px; right: -34px;
  z-index: 2;
  background: var(--gold);
  color: var(--white);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 5px 40px;
  transform: rotate(35deg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.soon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--gray);
  background: rgba(0,0,0,0.05);
  padding: 12px 14px;
  border-radius: var(--radius);
  margin-top: auto;
  width: 100%;
  box-sizing: border-box;
}
.soon-badge i { width: 14px; height: 14px; }

/* ---------- BANDEAU (Cachets / Grand Format) ---------- */
.feature-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 56px;
  background: var(--black);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.feature-band.reverse { grid-template-columns: 1fr 1fr; }
.feature-band.reverse .feature-band-visual { order: 2; }
@media (max-width: 860px) {
  .feature-band, .feature-band.reverse { grid-template-columns: 1fr; }
  .feature-band.reverse .feature-band-visual { order: 0; }
}
.feature-band-visual {
  height: 100%;
  min-height: 320px;
  background: linear-gradient(135deg, #1a1a1a, #0d0d0d);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.feature-band-visual i { width: 84px; height: 84px; color: var(--gold-light); stroke-width: 1.1; opacity: 0.9; }
.feature-band-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.feature-band-text { padding: 48px 48px 48px 0; }
.feature-band.reverse .feature-band-text { padding: 48px 0 48px 48px; }
@media (max-width: 860px) {
  .feature-band-text, .feature-band.reverse .feature-band-text { padding: 36px 28px 44px; }
}
.feature-band-text .section-eyebrow { color: var(--gold-light); }
.feature-band-text h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  color: var(--cream);
  margin-bottom: 14px;
}
.feature-band-text p { color: rgba(245,240,232,0.72); font-size: 14.5px; line-height: 1.65; margin-bottom: 24px; }
.feature-band-list {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 28px;
}
.feature-band-list span {
  font-size: 12px;
  color: rgba(245,240,232,0.85);
  background: rgba(245,240,232,0.08);
  padding: 6px 12px;
  border-radius: 20px;
}

/* ---------- POURQUOI NOUS CHOISIR (4-5 colonnes) ---------- */
.why-us-grid-wide {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}
@media (max-width: 980px) { .why-us-grid-wide { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .why-us-grid-wide { grid-template-columns: 1fr; } }
.why-us-grid-wide .why-us-item { background: var(--white); }

/* ---------- RÉALISATIONS ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
}
@media (max-width: 860px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
.gallery-item {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  position: relative;
  box-shadow: var(--shadow);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item span {
  position: absolute; left: 12px; bottom: 12px;
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--white);
  background: rgba(13,13,13,0.55);
  padding: 5px 12px;
  border-radius: 20px;
}

/* ---------- CTA FINALE ---------- */
.final-cta {
  background: linear-gradient(135deg, var(--charcoal), var(--black));
  border-radius: var(--radius-lg);
  padding: 64px 40px;
  text-align: center;
  margin: 0 24px;
}
.final-cta h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--cream);
  margin-bottom: 14px;
}
.final-cta p { color: rgba(245,240,232,0.72); max-width: 560px; margin: 0 auto 30px; font-size: 15px; }
.final-cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.final-cta .btn-ghost { color: var(--cream); border-color: rgba(245,240,232,0.3); }
.final-cta .btn-ghost:hover { border-color: var(--cream); background: rgba(245,240,232,0.08); }

/* ---------- FOOTER — colonnes étendues ---------- */
.footer-inner-wide {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
}
@media (max-width: 860px) { .footer-inner-wide { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-inner-wide { grid-template-columns: 1fr; } }
.footer-col-title { color: var(--gold-light); margin-bottom: 10px; }
.footer-col a { display: block; padding: 4px 0; color: rgba(245,240,232,0.75); font-size: 13.5px; }
.footer-col a:hover { color: var(--gold-light); }
.footer-contact-item { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: rgba(245,240,232,0.75); margin-bottom: 10px; }
.footer-contact-item i { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--gold-light); }

/* ---------- VARIANTES DE COULEUR POUR SUB-CARDS (pages métier) ---------- */
/* Chaque carte peut porter une classe tone-* pour varier l'icône, le liseré
   du haut et le dégradé de secours (si la photo ne charge pas encore). */
.sub-card { border-top: 3px solid transparent; }

.sub-card.tone-gold   { border-top-color: var(--gold); }
.sub-card.tone-navy   { border-top-color: #2c3e5c; }
.sub-card.tone-burgundy { border-top-color: #7a2e2e; }
.sub-card.tone-forest { border-top-color: #33513f; }
.sub-card.tone-charcoal { border-top-color: var(--charcoal); }

.sub-card.tone-gold .sub-card-media     { background: linear-gradient(135deg, #8c6a00, #1a1a1a); }
.sub-card.tone-navy .sub-card-media     { background: linear-gradient(135deg, #2c3e5c, #10141c); }
.sub-card.tone-burgundy .sub-card-media { background: linear-gradient(135deg, #7a2e2e, #1a1010); }
.sub-card.tone-forest .sub-card-media   { background: linear-gradient(135deg, #33513f, #10160f); }
.sub-card.tone-charcoal .sub-card-media { background: linear-gradient(135deg, #3a3a3a, #0d0d0d); }

.sub-card.tone-navy .sub-card-icon     { background: #2c3e5c; }
.sub-card.tone-burgundy .sub-card-icon { background: #7a2e2e; }
.sub-card.tone-forest .sub-card-icon   { background: #33513f; }
.sub-card.tone-charcoal .sub-card-icon { background: var(--charcoal); }

/* Photo produit dans la media zone : si le fichier n'existe pas encore,
   on masque l'image en JS (onerror) et le dégradé de couleur ci-dessus
   sert de fond — la carte reste donc toujours propre. */
.sub-card-media img.product-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 0;
}

/* ---------- BANNIÈRE VISUELLE (photo pleine largeur, en-tête de page métier) ---------- */
.metier-visual {
  position: relative;
  height: 280px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 40px;
  background: linear-gradient(135deg, #2c3e5c 0%, #10141c 100%);
}
.metier-visual img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.metier-visual::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,13,13,0.15) 0%, rgba(13,13,13,0.75) 100%);
}
.metier-visual-caption {
  position: absolute; left: 32px; bottom: 24px; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  color: var(--cream);
  font-size: 13.5px;
  letter-spacing: 0.4px;
}
.metier-visual-caption i { width: 18px; height: 18px; color: var(--gold-light); }

/* ---------- PAGE MÉTIER (avocat.php) — grille produits ---------- */
.product-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
@media (max-width: 860px) { .product-info-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .product-info-grid { grid-template-columns: 1fr; } }

.product-info-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px 20px;
  box-shadow: var(--shadow);
  transition: transform var(--transition);
}
.product-info-card:hover { transform: translateY(-4px); }
.product-info-card-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--cream-dark);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.product-info-card-icon i { width: 20px; height: 20px; color: var(--gold); }
.product-info-card h4 { font-size: 15px; font-weight: 600; color: var(--black); margin-bottom: 4px; }
.product-info-card p { font-size: 12.5px; color: var(--gray); line-height: 1.5; }

/* ---------- FORMULAIRE DE DEVIS ---------- */
.devis-section {
  background: var(--cream-dark);
  border-radius: var(--radius-lg);
  padding: 48px;
  margin-top: 20px;
}
@media (max-width: 640px) { .devis-section { padding: 30px 22px; } }
.devis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 860px) { .devis-grid { grid-template-columns: 1fr; } }
.devis-intro h3 { font-family: var(--font-display); font-size: 24px; margin-bottom: 12px; color: var(--black); }
.devis-intro p { font-size: 14px; color: var(--gray); line-height: 1.65; margin-bottom: 20px; }
.devis-intro-list { display: flex; flex-direction: column; gap: 10px; }
.devis-intro-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--charcoal); }
.devis-intro-list i { width: 16px; height: 16px; color: var(--gold); margin-top: 2px; flex-shrink: 0; }

.devis-form { display: flex; flex-direction: column; gap: 14px; }
.devis-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .devis-form .form-row { grid-template-columns: 1fr; } }
.devis-form .form-group { display: flex; flex-direction: column; gap: 6px; }
.devis-form label { font-size: 13px; font-weight: 500; color: var(--charcoal); }
.devis-form input,
.devis-form textarea,
.devis-form select {
  padding: 12px 16px;
  border: 1.5px solid rgba(0,0,0,0.12);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 14px;
  color: var(--black);
  background: var(--white);
  outline: none;
  transition: border-color var(--transition);
  resize: vertical;
}
.devis-form input:focus, .devis-form textarea:focus, .devis-form select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184,150,12,0.12);
}
.devis-form input.invalid, .devis-form textarea.invalid { border-color: var(--error); }
.devis-form .err-msg { font-size: 12px; color: var(--error); min-height: 14px; }
.devis-checklist { display: flex; flex-wrap: wrap; gap: 8px; }
.devis-checklist label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 400;
  background: var(--white);
  border: 1.5px solid rgba(0,0,0,0.1);
  padding: 8px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.devis-checklist input { width: auto; padding: 0; accent-color: var(--gold); }
.devis-checklist label:has(input:checked) { border-color: var(--gold); background: rgba(184,150,12,0.08); }

/* ---------- TOAST (réutilisé si absent de style.css) ---------- */
#toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--black); color: var(--white);
  padding: 14px 22px; border-radius: 50px;
  font-size: 13.5px; display: flex; align-items: center; gap: 8px;
  opacity: 0; pointer-events: none; transition: all 0.3s ease; z-index: 999;
  box-shadow: var(--shadow-lg);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
#toast i { width: 16px; height: 16px; color: var(--gold-light); }

/* ===== PANNEAU PRODUIT (au clic sur "Demander un devis") ===== */
body.modal-open { overflow: hidden; }
.product-modal {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; overflow-y: auto;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.product-modal.open { opacity: 1; visibility: visible; }
.product-modal-dialog {
  position: relative; background: #fff; border-radius: 6px;
  width: 92vw; max-width: 1400px; margin: auto;
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px;
  padding: 48px; box-shadow: 0 24px 60px rgba(0,0,0,0.35);
  transform: translateY(20px); transition: transform .25s ease;
}
.product-modal.open .product-modal-dialog { transform: translateY(0); }
.product-modal-media {
  border: 1px solid #ddd; background: #fafafa;
  display: flex; align-items: center; justify-content: center; min-height: 420px;
}
.product-modal-media img { width: 100%; height: auto; max-height: 80vh; object-fit: contain; display: block; }
.product-modal-media.no-image { background: linear-gradient(135deg, #2c3e5c, #10141c); }
.product-modal-info h3 { font-family: var(--font-display, serif); font-size: 36px; font-weight: 600; margin: 4px 56px 18px 0; color: var(--black, #111); }
.product-modal-info hr { border: 0; border-top: 2px solid #ddd; margin-bottom: 26px; }
.product-modal-info h4 { font-size: 26px; font-weight: 500; margin-bottom: 14px; color: var(--black, #111); }
.product-modal-specs { list-style: none; padding: 0; margin: 0 0 36px; }
.product-modal-specs li { font-size: 21px; line-height: 1.5; padding: 9px 0 9px 20px; position: relative; color: var(--charcoal, #333); }
.product-modal-specs li::before { content: "•"; position: absolute; left: 0; color: var(--gold, #b8960c); }
.product-modal-specs strong { font-weight: 600; color: var(--black, #111); }
.product-modal-info .btn { font-size: 17px; padding: 16px 30px; }
.product-modal-info .btn i { width: 20px; height: 20px; }
.product-modal-close {
  position: absolute; top: 18px; right: 18px; width: 44px; height: 44px;
  border: 0; border-radius: 50%; background: #e8590c; color: #fff;
  font-size: 28px; line-height: 1; cursor: pointer; transition: transform .15s ease, background .15s ease;
}
.product-modal-close:hover { background: #c94a06; transform: scale(1.08); }
@media (max-width: 760px) {
  .product-modal { padding: 12px; align-items: flex-start; }
  .product-modal-dialog { grid-template-columns: 1fr; padding: 20px; gap: 20px; width: 100%; }
  .product-modal-media { min-height: 220px; }
  .product-modal-info h3 { font-size: 24px; }
  .product-modal-info h4 { font-size: 20px; }
  .product-modal-specs li { font-size: 16px; }
}

/* Choix de couleur dans le panneau produit */
.product-modal-specs .spec-colors { padding-left: 20px; }
.color-list { display: inline-flex; flex-wrap: wrap; gap: 10px; vertical-align: middle; margin-left: 4px; }
.color-opt {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 18px; color: var(--charcoal, #333);
  background: #fff; border: 1.5px solid #ddd; border-radius: 999px;
  padding: 6px 16px 6px 10px; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.color-opt:hover { border-color: var(--gold, #b8960c); transform: translateY(-1px); }
.color-opt.active { border-color: var(--gold, #b8960c); box-shadow: 0 0 0 2px rgba(184,150,12,0.3); font-weight: 600; }
.color-dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.25); flex: none; }
/* Images entières (non rognées) pour chemises et sous-chemises */
.sub-card .sub-card-media.media-contain {
  background: #eceff3;
  display: flex; align-items: center; justify-content: center;
  padding: 18px 18px 44px; /* espace en bas pour l'icône ronde */
  box-sizing: border-box;
}
.sub-card .sub-card-media.media-contain img.product-photo {
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  object-fit: contain;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.sub-card:hover .sub-card-media.media-contain img { transform: none; }
.sub-card .sub-card-media.media-contain::after { display: none; }

/* ---------- CARTES VEDETTES : Chemises / Sous-chemises ---------- */
/* Grille dédiée : deux grandes cartes horizontales, mises en avant
   par rapport aux petites cartes produits de la grille du dessous. */
.featured-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin: 48px auto 64px;
  max-width: 1100px;
}

.sub-card.featured {
  flex-direction: column;
}
/* Grand visuel en haut, cadré au plus près de l'image : c'est le document
   lui-même qui doit se voir clairement, pas un aplat de couleur autour. */
.sub-card.featured .sub-card-media.media-contain {
  height: 460px;
  padding: 26px 26px 56px; /* espace en bas pour l'icône ronde */
}
.sub-card.featured .sub-card-media.media-contain img.product-photo {
  max-width: 92%;
  max-height: 92%;
  border-radius: 4px;
}
.sub-card.featured .sub-card-body {
  padding: 34px 30px 28px;
}
.sub-card.featured h3 { font-size: 25px; margin-bottom: 10px; }
.sub-card.featured p { font-size: 14.5px; margin-bottom: 20px; }
.sub-card.featured .sub-card-features { padding: 16px 18px; gap: 10px; }
.sub-card.featured .sub-card-features li { font-size: 13px; }
.sub-card.featured .btn-full { padding-top: 14px; padding-bottom: 14px; font-size: 14px; }

@media (max-width: 860px) {
  .featured-grid { grid-template-columns: 1fr; max-width: 480px; }
  .sub-card.featured .sub-card-media.media-contain { height: 380px; }
}

/* Icône ronde entière : elle déborde de l'image (bottom:-24px) et n'est plus coupée.
   Le zoom de l'image au survol est masqué par le corps de la carte. */
.sub-card .sub-card-media { overflow: visible; }
.sub-card .sub-card-body { position: relative; z-index: 1; background: var(--cream); }
.sub-card .sub-card-icon { z-index: 2; }

/* Icônes de carte plus lisibles (cartes de visite et tampons : fond doré au lieu de noir) */
.sub-card .sub-card-icon i,
.sub-card .sub-card-icon svg { width: 26px; height: 26px; color: #fff; stroke: #fff; stroke-width: 2; }
.sub-card.tone-gold .sub-card-icon { background: var(--gold, #b8960c); }
/* Carte "Autre article personnalisé" */
.sub-card-custom .sub-card-media.media-custom { display: flex; align-items: center; justify-content: center; }
.sub-card-custom .custom-visual {
  width: 120px; height: 120px; border-radius: 50%;
  border: 3px dashed rgba(255,255,255,0.55);
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s ease, border-color .3s ease;
}
.sub-card-custom .custom-visual svg { width: 56px; height: 56px; color: #fff; stroke: #fff; stroke-width: 2; }
.sub-card-custom:hover .custom-visual { transform: rotate(90deg) scale(1.05); border-color: var(--gold-light, #e6c75a); }
.sub-card-custom .btn i, .sub-card-custom .btn svg { width: 20px; height: 20px; }
 



/* Modèles de cachets : références en rouge */
.ref-red { color: #d0021b; font-weight: 700; }
.product-modal-specs .model-detail { padding-left: 20px; }
.product-modal-specs .model-detail::before { content: none; }
.product-modal-specs .model-detail em { color: #777; font-size: 17px; }
.spec-models .color-opt { padding: 6px 14px; }

/* ============================================================
   VERSION SMARTPHONE (ajouté à la fin de home.css)
   Objectif : cartes en 1 colonne, textes lisibles, boutons faciles
   à toucher. Aucune règle desktop n'est modifiée (tout est dans
   des media queries, placées en dernier pour l'emporter).
   ============================================================ */

/* ---------- 1. Cartes produits : UNE colonne pleine largeur ---------- */
@media (max-width: 700px) {

  .impression-grid,
  .featured-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    margin: 28px auto 36px;
    max-width: 520px;
  }
}

/* Filet de sécurité : quel que soit le conteneur de cartes (même si sa classe
   est définie ailleurs, dans style.css ou dans la page), on l'empile en
   une colonne. Règle séparée pour ne pas être ignorée si :has() n'existe pas. */
@media (max-width: 700px) {
  *:has(> .sub-card) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
    overflow: visible !important;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 700px) {

  .sub-card {
    width: 100%;
    min-width: 0;
    flex: none;
    border-radius: 20px;
  }

  /* Visuel : hauteur adaptée à une carte large (au lieu de 350px étroits) */
  .sub-card .sub-card-media { height: 240px; }
  .sub-card .sub-card-media img.product-photo,
  .sub-card .sub-card-media img { object-position: center; }

  .sub-card.featured .sub-card-media.media-contain,
  .sub-card .sub-card-media.media-contain {
    height: 280px;
    padding: 16px 16px 46px;
  }
  .sub-card-custom .custom-visual { width: 96px; height: 96px; }
  .sub-card-custom .custom-visual svg { width: 44px; height: 44px; }

  /* Icône ronde */
  .sub-card-icon { left: 20px; bottom: -26px; width: 54px; height: 54px; }
  .sub-card .sub-card-icon i,
  .sub-card .sub-card-icon svg { width: 24px; height: 24px; }

  /* Texte : plus grand, pas de coupure de mots */
  .sub-card-body,
  .sub-card.featured .sub-card-body { padding: 38px 20px 22px; }

  .sub-card h3,
  .sub-card.featured h3 {
    font-size: 23px;
    line-height: 1.2;
    margin-bottom: 10px;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: none;
  }
  .sub-card p,
  .sub-card.featured p {
    font-size: 15.5px;
    line-height: 1.6;
    margin-bottom: 18px;
    hyphens: none;
  }

  .sub-card-features,
  .sub-card.featured .sub-card-features { padding: 14px 16px; gap: 10px; }
  .sub-card-features li,
  .sub-card.featured .sub-card-features li { font-size: 14px; align-items: flex-start; }
  .sub-card-features i { width: 17px; height: 17px; margin-top: 1px; }

  .sub-card-tags span { font-size: 12.5px; padding: 5px 12px; }

  /* Bouton : grande zone tactile */
  .sub-card-body .btn-full,
  .sub-card.featured .btn-full {
    min-height: 50px;
    font-size: 15.5px;
    padding: 14px 20px;
    justify-content: center;
  }

  /* Bandeau "bientôt" */
  .soon-ribbon { font-size: 11px; }
}

/* Pas d'effet de survol « collant » sur écran tactile */
@media (hover: none) {
  .sub-card:hover,
  .service-card:hover,
  .activity-card:hover,
  .product-info-card:hover { transform: none; }
  .sub-card:hover .sub-card-media img,
  .service-card:hover .service-card-media img { transform: none; }
}

/* ---------- 2. Autres blocs de la page ---------- */
@media (max-width: 700px) {

  .services-section { padding: 16px 0 60px; }
  .services-header h2 { font-size: 28px; line-height: 1.2; }
  .services-header p { font-size: 15px; }

  .activity-card-body { padding: 20px; }
  .activity-card-body h3 { font-size: 20px; }
  .activity-card-body p { font-size: 15px; }
  .activity-card-body .btn { align-self: stretch; justify-content: center; min-height: 48px; }

  .metier-visual { height: 200px; margin-top: 24px; }
  .metier-visual-caption { left: 18px; bottom: 16px; font-size: 13px; }

  .product-info-card { padding: 20px 18px; }
  .product-info-card h4 { font-size: 16px; }
  .product-info-card p { font-size: 14px; }

  .final-cta-actions { flex-direction: column; align-items: stretch; }
  .final-cta-actions .btn { width: 100%; justify-content: center; min-height: 50px; }

  .breadcrumb { padding-top: 96px; font-size: 12.5px; }
}

/* ---------- 3. Formulaire de devis ---------- */
@media (max-width: 640px) {
  .devis-section { padding: 24px 16px; border-radius: 16px; }
  .devis-intro h3 { font-size: 22px; }
  .devis-intro p, .devis-intro-list li { font-size: 15px; }

  /* 16px minimum = iOS/Android ne zooment pas au clic dans un champ */
  .devis-form input,
  .devis-form textarea,
  .devis-form select { font-size: 16px; padding: 14px 14px; }
  .devis-form label { font-size: 14px; }
  .devis-checklist label { font-size: 14px; padding: 10px 14px; }

  #toast { width: calc(100% - 32px); justify-content: center; text-align: center; }
}

/* ---------- 4. Fenêtre produit (« Demander un devis ») ---------- */
@media (max-width: 760px) {
  .product-modal { padding: 0; }
  .product-modal-dialog {
    border-radius: 0;
    min-height: 100%;
    padding: 16px 16px 28px;
    gap: 16px;
  }
  .product-modal-media { min-height: 200px; }
  .product-modal-info h3 { margin: 4px 52px 12px 0; }
  .product-modal-info hr { margin-bottom: 16px; }
  .product-modal-specs { margin-bottom: 22px; }
  .product-modal-specs li { font-size: 16px; padding: 7px 0 7px 18px; }
  .product-modal-specs .model-detail em { font-size: 14px; }
  .color-opt { font-size: 15px; padding: 8px 14px 8px 10px; }
  .product-modal-info .btn { width: 100%; justify-content: center; font-size: 16px; padding: 15px 20px; }
  .product-modal-close { top: 10px; right: 10px; width: 44px; height: 44px; }
}