/* ═══════════════════════════════════════════════════════════════════
   index.css — Styles exclusifs à la page d'accueil (ID 7)
   Chargé uniquement via is_front_page() + éditeur page 7
   ═══════════════════════════════════════════════════════════════════ */

/* ─── USP Strip — chevauche le hero ─────────────────────────────── */
.usp-strip {
  /* Remonte légèrement sur le hero */
  position: relative;
  z-index: 10;
  margin-top: -32px;
  /* Retire le fond plein : la carte est sur .usp-columns */
  background-color: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
  padding-top: 0 !important;
}

/* Carte flottante fine */
.usp-columns {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  background: var(--c-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 28px rgba(22, 38, 61, 0.09), 0 1px 4px rgba(22, 38, 61, 0.05);
  border: 1px solid var(--c-border);
  overflow: hidden;
  /* les bordures des items respectent les coins arrondis */
}

.usp-item {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: 0.65rem;
  padding: 0.9rem 0.85rem;
  border-right: 1px solid var(--c-border);
  /* neutralise le margin-block-start de :where(.is-layout-flow) > * + * de Gutenberg core,
     qui décale vers le bas tous les items sauf le premier */
  margin-block-start: 0;
}

.usp-item:last-child {
  border-right: none;
}

.usp-item:hover .hex-badge {
  transform: translateY(-2px);
}

/* Icône plate, sans fond, couleur de marque (bandeau fin) */
.hex-badge {
  width: 28px;
  height: 28px;
  clip-path: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
  transition: transform var(--trans);
  flex-shrink: 0;
}

.usp-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--c-navy);
  margin-bottom: 0.1rem;
  display: block;
  line-height: 1.3;
}

.usp-desc {
  font-size: 0.74rem;
  color: var(--c-text-mid);
  display: block;
  line-height: 1.3;
}


/* ─── Chevauchement USP dans l'éditeur ──────────────────────────
   Les wrappers React [data-block] empêchent le margin-top négatif
   de traverser entre blocs. On compense en ciblant les wrappers
   directement (sélecteur Gutenberg stable depuis WP 6.2).
   ──────────────────────────────────────────────────────────────── */
.editor-styles-wrapper .wp-block[data-type="core/group"]:has(> .usp-strip) {
  margin-top: -72px;
  position: relative;
  z-index: 10;
}

/* Fallback : si :has() non supporté, on cible le bloc lui-même */
.editor-styles-wrapper .usp-strip {
  margin-top: -72px;
  position: relative;
  z-index: 10;
}


/* ─── Hero boutique (page d'accueil) ────────────────────────────
   Structure native : .svc-hero (largeur théme 1200px, layout constrained)
   > .svc-hero__inner (image en arrière-plan du groupe, ancrée à droite,
   via l'option "Image d'arrière-plan" du bloc Groupe — pas de wp:html)
   > .svc-hero__text (colonne de texte, largeur limitée pour rester
   lisible au-dessus de la zone libre laissée par l'image). */
.svc-hero__text {
  max-width: 680px;
  position: relative;
  z-index: 1;
}

/* La hauteur fixe (450px) du .svc-hero partagé force un ratio très large
   sur grand écran : avec background-size:cover, la photo doit alors être
   zoomée/recadrée fortement, ce qui donne une impression d'étirement.
   On fait suivre la hauteur à la largeur d'écran pour rester proche du
   ratio naturel de la photo et limiter ce zoom. */
.svc-hero {
  height: 450px !important;
}

.hero-badge-pill {
  display: inline-block;
  background: var(--c-fuchsia);
  color: var(--c-white);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  border-radius: 100px;
  margin: 0 0 1rem !important;
}

/* Hexagones décoratifs (motif logo) à la jonction texte / photo */
.svc-hero {
  position: relative;
}


@media (max-width: 900px) {
  .svc-hero { background-position: 65% center !important; }
  .svc-hero__text { max-width: 100%; }
  .svc-hero::before, .svc-hero::after { display: none; }
}

@media (max-width: 640px) {
  .svc-hero { background-image: none !important; }
}

/* ─── Nos produits : cartes catégories (photo + titre + description + lien) ───
   Grille dynamique générée par le shortcode [aplastic94_product_categories]
   (voir functions.php) : nom, image, description et lien viennent en direct
   des catégories WooCommerce, dans l'ordre défini sous Produits > Catégories.
   Carte cliquable pleine surface (balise <a>), même logique visuelle que
   les cartes .mat-card de la section "Nos matières" pour cohérence. */
.prod-cat-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin-bottom: 1.75rem;
}
.prod-cat-grid .prod-card {
  flex: 1 1 calc(25% - 0.6rem);
  max-width: calc(25% - 0.6rem);
  min-width: 0;
  box-sizing: border-box;
}
/* Accueil uniquement : grille "Nos produits" en 2 lignes de 5 (10 cartes,
   count="10" dans le shortcode) — la page "Nos produits" garde 4 cartes/ligne
   pour ses 17 catégories (voir .prod-cat-grid ci-dessus, classe partagée). */
.prod-cat-section .prod-cat-grid .prod-card {
  flex: 1 1 calc(20% - 0.64rem);
  max-width: calc(20% - 0.64rem);
}
@media (max-width: 900px) {
  .prod-cat-grid .prod-card { flex-basis: calc(33.33% - 0.534rem); max-width: calc(33.33% - 0.534rem); }
}
@media (max-width: 600px) {
  .prod-cat-grid .prod-card { flex-basis: calc(50% - 0.4rem); max-width: calc(50% - 0.4rem); }
}
@media (max-width: 480px) {
  .prod-cat-grid .prod-card { flex-basis: 100%; max-width: 100%; }
}
.prod-card {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, border-color var(--trans);
  display: flex;
  flex-direction: column;
  /* "auto" (pas 100%) : une hauteur explicite désactive align-items:stretch
     sur un enfant flex — voir .mat-card dans sections.css, même piège. */
  height: auto;
  text-decoration: none;
}
.prod-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(158, 27, 90, 0.35);
}
.prod-card__media {
  width: 100%;
  /* Hauteur fixe (pas aspect-ratio) : "Nos produits" est en 5 colonnes sur
     l'accueil (.prod-cat-section) contre 4 pour "Nos matières" (.mat-card) —
     avec un ratio, des cartes plus étroites donnent une image plus basse et
     les deux grilles n'ont plus la même hauteur de carte. Valeur à garder
     synchronisée avec .mat-card__img-slot dans sections.css. */
  height: 180px;
  overflow: hidden;
  flex-shrink: 0;
}
.prod-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.prod-card:hover .prod-card__media img {
  transform: scale(1.07);
}
.prod-card__body {
  padding: 1rem 1rem 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.prod-card__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--c-navy);
  line-height: 1.3;
  margin: 0 0 0.4rem;
  min-height: calc(1.3em * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prod-card__desc {
  font-size: 0.82rem;
  color: var(--c-text-mid);
  line-height: 1.5;
  margin: 0 0 0.75rem;
  min-height: calc(1.5em * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prod-card__link {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--c-fuchsia);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: auto;
}
.prod-card__link span {
  transition: transform var(--trans);
}
.prod-card:hover .prod-card__link span {
  transform: translateX(3px);
}
.prod-card:focus-visible {
  outline: 2px solid var(--c-fuchsia);
  outline-offset: 2px;
}

/* ─── Bandeau témoignages Google ────────────────────────────── */
.section-temoignages {
  --tem-card-bg: rgba(255,255,255,0.06);
  --tem-card-border: rgba(255,255,255,0.10);
}

/* Badge Google (wp:html — SVG logo + layout inline) */
.temoignages-badge-wrap {
  text-align: center;
  margin-bottom: 1.4rem;
}

.temoignages-google-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 100px;
  padding: 0.4rem 1rem 0.4rem 0.6rem;
}

.temoignages-google-icon { flex-shrink: 0; }

.temoignages-note {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}

.temoignages-note-sur {
  font-size: 0.8rem;
  font-weight: 400;
  color: rgba(255,255,255,0.6);
}

.temoignages-stars {
  display: flex;
  align-items: center;
  gap: 1px;
}

.temoignages-nb-avis {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
}

/* Carte — wp:group natif */
.temoignage-card {
  background: var(--tem-card-bg);
  border: 1px solid var(--tem-card-border);
  border-radius: var(--radius-lg, 12px);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.section-temoignages .wp-block-columns {
  gap: 1.5rem;
}

/* Étoiles — wp:paragraph natif ★★★★★ */
p.temoignage-stars {
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  line-height: 1;
  margin: 0;
  color: #F2C34A;
}

/* Citation — wp:quote natif */
.section-temoignages .wp-block-quote {
  flex: 1;
  padding: 0;
  border-left: none;
  margin: 0;
}

.section-temoignages .wp-block-quote p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.88);
  font-style: italic;
  margin: 0;
}

.section-temoignages .wp-block-quote cite {
  display: block;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255,255,255,0.10);
  margin-top: 0.6rem;
  font-size: 0.88rem;
  font-style: normal;
  font-weight: 600;
  color: rgba(255,255,255,0.72);
}

/* CTA — wp:button natif */
.temoignages-cta-btn .wp-block-button__link {
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.temoignages-cta-btn .wp-block-button__link:hover,
.temoignages-cta-btn .wp-block-button__link:focus-visible {
  background-color: rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.35) !important;
  color: #fff !important;
}

/* Listes à puces stylisées — coche teal */
.checklist-teal {
  list-style: none;
  padding-left: 0;
}
.checklist-teal li {
  position: relative;
  padding-left: 1.8rem;
  margin-bottom: 0.55rem;
}
.checklist-teal li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--c-teal-text);
  font-weight: 700;
  font-size: 1.05em;
  line-height: inherit;
}


/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .usp-strip {
    margin-top: -24px;
  }

  .usp-columns {
    flex-wrap: wrap;
    border-radius: var(--radius-lg);
  }

  .usp-item {
    flex-basis: 50%;
    max-width: 50%;
    border-right: none;
    border-bottom: 1px solid var(--c-border);
  }

  .usp-item:nth-child(odd) {
    border-right: 1px solid var(--c-border);
  }

  .usp-item:nth-last-child(-n+2) {
    border-bottom: none;
  }
}

@media (max-width: 640px) {
  .usp-strip {
    margin-top: -12px;
  }

  .usp-columns {
    border-radius: var(--radius);
  }

  .usp-item {
    flex-basis: 100%;
    max-width: 100%;
    border-right: none;
  }
}

/* ─── Bandeau témoignages Google — repris à l'identique de ap94.skuria.fr
   (même thème, mêmes classes temoignages-*/temoignage-card), absent de ce
   fichier jusqu'ici : le HTML collé depuis le site source n'avait donc
   aucun style tant que ces règles n'existaient pas ici. ────────────────── */
.section-temoignages {
  --tem-card-bg: rgba(255,255,255,0.06);
  --tem-card-border: rgba(255,255,255,0.10);
}

/* Badge Google (wp:html — SVG logo + layout inline) */
.temoignages-badge-wrap {
  text-align: center;
  margin-bottom: 1.4rem;
}

.temoignages-google-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 100px;
  padding: 0.4rem 1rem 0.4rem 0.6rem;
}

.temoignages-google-icon { flex-shrink: 0; }

.temoignages-note {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}

.temoignages-note-sur {
  font-size: 0.8rem;
  font-weight: 400;
  color: rgba(255,255,255,0.6);
}

.temoignages-stars {
  display: flex;
  align-items: center;
  gap: 1px;
}

.temoignages-nb-avis {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
}

/* Carte — wp:group natif */
.temoignage-card {
  background: var(--tem-card-bg);
  border: 1px solid var(--tem-card-border);
  border-radius: var(--radius-lg, 12px);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.section-temoignages .wp-block-columns {
  gap: 1.5rem;
}

/* Étoiles — wp:paragraph natif */
p.temoignage-stars {
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  line-height: 1;
  margin: 0;
  color: #F2C34A;
}

/* Citation — wp:quote natif */
.section-temoignages .wp-block-quote {
  flex: 1;
  padding: 0;
  border-left: none;
  margin: 0;
}

.section-temoignages .wp-block-quote p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.88);
  font-style: italic;
  margin: 0;
}

.section-temoignages .wp-block-quote cite {
  display: block;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255,255,255,0.10);
  margin-top: 0.6rem;
  font-size: 0.88rem;
  font-style: normal;
  font-weight: 600;
  color: rgba(255,255,255,0.72);
}

/* CTA — wp:button natif */
.temoignages-cta-btn .wp-block-button__link {
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.temoignages-cta-btn .wp-block-button__link:hover,
.temoignages-cta-btn .wp-block-button__link:focus-visible {
  background-color: rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.35) !important;
  color: #fff !important;
}