/* =========================================================
   Les Truffines — home.css
   Blocs propres à la page d'accueil (index.html) : bandeau de
   confiance et présentation Blandine & Volt. Chargé après
   style.css, dont il réutilise les tokens et composants.
   ========================================================= */

/* ---------- Bandeau de confiance ---------- */
.trust-bar{ padding-block: 26px; }
/* Les services suivent directement le bandeau : écart resserré */
.trust-bar + #services{ margin-top: 0; padding-top: 32px; }
@media (min-width: 760px){ .trust-bar + #services{ padding-top: 40px; } }
.trust-list{
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px;
  padding-block: 18px;
  border-block: 1px solid var(--border);
}
.trust-list li{
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: .92rem; color: var(--ink);
}
.trust-list .icon{ flex-shrink: 0; color: var(--cyan-dark); }
.trust-list li:nth-child(even) .icon{ color: var(--pink); }
@media (max-width: 399px){ .trust-list{ grid-template-columns: minmax(0, 1fr); gap: 10px; } }
@media (min-width: 900px){
  .trust-list{ grid-template-columns: repeat(4, auto); justify-content: space-between; }
}

/* ---------- À propos : Blandine & Volt ---------- */
.about-grid{ display: grid; gap: 32px; align-items: center; }
.about-media{ position: relative; max-width: 460px; }
.about-media::before{
  content: ""; position: absolute; z-index: -1; inset: -14px 18px 18px -14px;
  border-radius: 32px; background: linear-gradient(135deg, var(--pink-light), var(--cyan-light));
}
@media (max-width: 899px){ .about-media::before{ inset: -8px 10px 10px -8px; } .about-media{ margin-left: 8px; } }
.about-media img{ width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 28px; }
.about-lead{ font-size: 1.05rem; max-width: 56ch; }
.about-creds{ display: grid; gap: 10px; margin: 20px 0 26px; }
.about-creds li{ display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink); font-size: .95rem; }
.about-creds .icon{ flex-shrink: 0; color: var(--pink); }
.about-volt{ padding: 18px 20px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); }
.about-volt h3{ font-size: 1.15rem; margin-bottom: 6px; }
.about-volt p{ margin: 0; }
@media (min-width: 900px){
  .about-grid{ grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
  .about-creds{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
}

/* Bannière : Volt décalé vers la droite, hors du fondu clair (grand écran).
   L'image est légèrement élargie et calée à gauche ; seul le bord droit est rogné. */
@media (min-width: 760px){
  #volt .banner-media img{ width: 110%; max-width: none; object-position: 0 12%; }
}

/* Titre de la bannière sur deux lignes */
#volt .hero-title{ max-width: 22ch; }

/* ---------- Mes prestations : Bento ----------
   Grand écran : 2 grandes cartes photo (7/5 colonnes), puis 2 cartes
   compactes (5/7). Tablette : 2 colonnes. Mobile : 1 colonne. */
.svc-bento{
  display: grid; gap: 18px;
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--space-lg);
}
.svc-tile{
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 14px 34px -26px rgba(20,40,45,.45);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
.svc-tile:hover{ transform: translateY(-3px); box-shadow: 0 24px 44px -26px rgba(20,40,45,.5); }
.svc-tile-media{ display: block; overflow: hidden; }
.svc-tile-media img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.svc-tile:hover .svc-tile-media img{ transform: scale(1.05); }
.svc-tile h3{ font-size: 1.3rem; margin: 0 0 6px; }
.svc-tile-body p{ margin: 0; font-size: .95rem; line-height: 1.55; }

.svc-tag{
  display: inline-block; margin: 0 0 10px !important;
  padding: 4px 11px; border-radius: 999px;
  font-size: .74rem !important; font-weight: 700; letter-spacing: .03em;
  background: var(--cyan-light); color: var(--cyan-dark);
}
.svc-tag-pink{ background: var(--pink-light); color: var(--pink-dark); }

.svc-cta{
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px; font-weight: 700; font-size: .92rem; color: var(--cyan-dark);
}
.svc-cta .icon{ color: currentColor; transition: transform .25s ease; }
.svc-cta:hover .icon, .svc-cta:focus-visible .icon{ transform: translateX(4px); }
.svc-cta-group{ display: flex; flex-wrap: wrap; gap: 0 22px; }

/* Grandes cartes : photo plein cadre, texte sur un dégradé en bas */
.svc-tile-main{ min-height: 380px; display: flex; align-items: flex-end; border: 0; }
.svc-tile-main .svc-tile-media{ position: absolute; inset: 0; z-index: -2; }
.svc-tile-pension .svc-tile-media img{ object-position: 56% 30%; }
.svc-tile-education .svc-tile-media img{ object-position: center 45%; }
.svc-tile-main::after{
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* Dégradé turquoise de la charte (assombri pour le contraste du texte blanc) */
  background: linear-gradient(180deg, rgba(8,96,104,0) 28%, rgba(8,96,104,.62) 60%, rgba(6,82,90,.92) 100%);
}
.svc-tile-main .svc-tile-body{ padding: 26px; color: #fff; max-width: 52ch; }
.svc-tile-main h3{ color: #fff; font-size: clamp(1.45rem, 2.6vw, 1.85rem); }
.svc-tile-main .svc-tile-body p{ color: rgba(255,255,255,.9); }
.svc-tile-main .svc-tile-body .svc-tag{ background: rgba(255,255,255,.94); color: var(--cyan-dark); }
/* Bouton des grandes cartes : même composant et même taille que le hero (.btn .btn-pink) */
.svc-cta-btn{ margin-top: 16px; }
.svc-cta-btn .icon{ color: #fff; transition: transform .25s ease; }
.svc-cta-btn:hover .icon, .svc-cta-btn:focus-visible .icon{ transform: translateX(4px); }

/* Cartes compactes : photo à gauche, texte sur fond pastel */
.svc-tile-side{
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  background: linear-gradient(135deg, #fff 0%, var(--cyan-light) 140%);
}
.svc-tile-side + .svc-tile-side{ background: linear-gradient(135deg, #fff 0%, var(--pink-light) 140%); }
.svc-tile-side .svc-tile-media{ min-height: 100%; }
.svc-tile-side .svc-tile-body{ padding: 20px 22px; align-self: center; }
.svc-tile-side .svc-tile-media img{ object-position: center 40%; }

/* Jusqu'à 1079 px : photo au-dessus du texte dans les cartes compactes */
@media (max-width: 1079px){
  .svc-tile-side{ grid-template-columns: minmax(0, 1fr); }
  .svc-tile-side .svc-tile-media{ height: 180px; min-height: 0; }
}
@media (max-width: 479px){
  .svc-tile-main{ min-height: 340px; }
  .svc-tile-main .svc-tile-body{ padding: 22px 20px; }
}
@media (min-width: 760px){
  .svc-bento{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1080px){
  .svc-bento{ grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
  .svc-tile-pension{ grid-column: span 7; }
  .svc-tile-education{ grid-column: span 5; }
  .svc-tile-side:nth-of-type(3){ grid-column: span 7; }
  .svc-tile-side:nth-of-type(4){ grid-column: span 5; }
  .svc-tile-main{ min-height: 420px; }
  .svc-tile-side{ min-height: 210px; }
}
@media (prefers-reduced-motion: reduce){
  .svc-tile, .svc-tile-media img, .svc-cta .icon, .svc-cta-btn .icon{ transition: none; }
  .svc-tile:hover{ transform: none; }
  .svc-tile:hover .svc-tile-media img{ transform: none; }
}

/* La carte Éducation (style Bento) dans le bloc Services actuel :
   même hauteur que la carte Toilettage voisine, sans vide intérieur. */
.services-grid .svc-tile-education{ min-height: 300px; align-self: stretch; }
@media (min-width: 900px){
  .services-grid .svc-tile-education{ min-height: 0; grid-column: span 6; }
  .services-grid .service-card:nth-child(3){ align-self: stretch; }
}