/* ============================================================
   FOC STUDIO — COMPOSANTS RÉUTILISABLES
   Blocs partagés entre les pages, inclus via components/*.php :
   - Témoignages / résultats clients
   - Offres (les 2 portes d'entrée)
   - Contact (CTA de fin de page)
   ============================================================ */

/* ============================================================
   TÉMOIGNAGES / RÉSULTATS CLIENTS
   ============================================================ */
.temoignages {
  background: var(--rose);
  padding: var(--section-pad) var(--gutter);
}

.temoignages-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.temoignages-header {
  margin-bottom: clamp(2rem, 4vw, 4rem);
  max-width: 760px;
}

.temoignages-header .title-seo { color: var(--noir); }
.temoignages-header .title-user { color: var(--noir); }

/* Bloc principal : les 2 témoignages mis en avant (grand format). */
.temoignages-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

/* Carte témoignage : structure portée par .card (.card--solid-dark).
   Image pleine largeur en haut → on annule le padding de la carte
   (le padding revient sur .temoignage-body). */
.temoignage-card {
  --card-pad: 0;
  overflow: hidden;
  color: inherit;
}

.temoignage-visuel {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
  overflow: hidden;
}

.temoignage-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image:
    linear-gradient(135deg, rgba(255, 54, 0, 0.15), rgba(255, 153, 255, 0.12)),
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.02) 0 10px,
      rgba(255, 255, 255, 0) 10px 20px
    );
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.temoignage-img-placeholder span {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(0.9rem, 1.4vw, 1.2rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
}

.temoignage-body {
  position: relative;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

/* Média des grandes cartes (sous le texte) : image ou vidéo. La vidéo
   ne se lance qu'au survol ; un thumbnail fixe la recouvre au repos. */
.temoignage-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0a0a0a;
}

.temoignage-media img,
.temoignage-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Noir et blanc au repos, couleur au survol. */
  filter: grayscale(1);
  transition: filter 0.4s ease;
}

.temoignage-card.has-media:hover .temoignage-media img,
.temoignage-card.has-media:hover .temoignage-media video {
  filter: grayscale(0);
}

/* Thumbnail fixe par-dessus la vidéo, s'efface au survol de la carte. */
.temoignage-media-poster {
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: opacity 0.35s ease;
}

.temoignage-card.has-media:hover .temoignage-media-poster {
  opacity: 0;
}

.temoignage-client {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--feu);
}

/* « – N avis » accolé au nom du client — signale un avis Google rattaché. */
.temoignage-avis-count {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.85;
  color: var(--light-text);
font-family: var(--font-body);
  font-size: .9em;
}

/* Domaine en gris léger, juste sous le nom du client (grands uniquement). */
.temoignage-domaine {
  margin-top: -0.2rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.5);
}

.temoignage-chiffre {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.92;
  color: var(--blanc);
  margin-bottom: 0.25rem;
}

.temoignage-desc {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  color: var(--light-text);
  line-height: 1.5;
}

/* Bloc des liens (Voir le site + Lire son avis), sur une même ligne,
   repoussé en bas de carte. */
.temoignage-liens {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 0.75rem 1.1rem;
  flex-direction: column;
  align-items: start;
}

/* Liens « Voir le site » + « Lire son avis » — même gabarit. */
.temoignage-lien,
.temoignage-avis-lien {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: gap 0.2s ease, opacity 0.2s ease;
}



.temoignage-lien { color: var(--feu); }

.temoignage-lien:hover,
.temoignage-avis-lien:hover {
  gap: 0.7em;
}

/* Flèche FOC inline (suit la couleur du texte, taille en em). */
.foc-arrow {
  width: 0.72em;
  height: 0.72em;
  flex: none;
  fill: currentColor;
  transition: transform 0.2s ease;
}

.temoignage-lien:hover .foc-arrow,
.temoignage-avis-lien:hover .foc-arrow {
  transform: translateX(3px);
}

/* « Lire son avis » — bouton stylé en lien, plus léger et grisé. */
.temoignage-avis-lien {
    font-family: var(--font-body);
  padding: 0;
  background: none;
  border: 0;
  text-transform: none;
  cursor: pointer;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--light-text);
}

.temoignage-avis-lien:hover {
  color: var(--blanc);
}

/* ------------------------------------------------------------
   Aperçu compact — « en plus », plus petit et plus dense.
   ------------------------------------------------------------ */
.temoignages-secondary-label {
  margin: clamp(2rem, 4vw, 3rem) 0 1rem;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--noir);
  opacity: 0.55;
}

.temoignages-secondary {
  display: grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  width: 100%;
  gap: clamp(0.75rem, 1.5vw, 1rem);
  margin-top: clamp(2rem, 4vw, 4rem);
}

.temoignage-mini {
  position: relative;
  /* Carte transparente (texte foncé sur le rose) + filet à gauche. */
  --card-bg: transparent;
  --card-pad: 0;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  color: inherit;
  z-index: 1;
  border: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.27);
}

/* Média d'une mini : vignette en HAUT de la carte (comme les grandes cartes),
   noir & blanc au repos → couleur au survol. */
.temoignage-mini-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: 0.7rem;
  background: #0a0a0a;
}

.temoignage-mini-media img,
.temoignage-mini-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1);
  transition: filter 0.4s ease;
}

.temoignage-mini.has-media:hover .temoignage-mini-media img,
.temoignage-mini.has-media:hover .temoignage-mini-media video {
  filter: grayscale(0);
}

.temoignage-mini-client {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.9rem;
  text-transform: none;
  letter-spacing: -0.02em;
  color: rgb(0 0 0 / 75%);
}

.temoignage-mini-chiffre {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--noir);
  margin-top: 0.15rem;
}

.temoignage-mini-desc {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: rgba(10, 10, 10, 0.7);
  line-height: 1.25em;
  margin-bottom: .25em;
}

/* Compteur « – N avis » sur fond rose (mini) → foncé. */
.temoignage-mini .temoignage-avis-count { color: rgba(10, 10, 10, 0.55); }

.temoignage-lien--mini,
.temoignage-avis-lien--mini {
  font-size: .9rem;
}

/* « Lire son avis » des minis sur fond rose → gris foncé. */
.temoignage-avis-lien--mini { color: rgba(10, 10, 10, 0.6); }
.temoignage-avis-lien--mini:hover { color: var(--noir); }

/* ------------------------------------------------------------
   Bouton « Leurs mots » + modale témoignages.
   ------------------------------------------------------------ */
.temoignages-cta {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  justify-content: center;
}

/* ============================================================
   SLIDER D'AVIS (bulles — devils-touch · Swiper.js)
   Une bulle PLEINE LARGEUR à la fois, texte centré, flèches FOC de
   chaque côté, bouton « voir plus » (outline) dessous. Bulles en fond
   NOIR / texte blanc (jamais de fond blanc). Coins carrés + crochet ;
   nom + domaine sous la bulle. Drag via Swiper. Hauteurs égalisées
   (= la plus haute) → pas de saut au défilé ; texte centré V+H pour
   que les avis courts soient équilibrés (pas de vide en bas).
   ============================================================ */
.avis-slider {
  background: var(--rose);
  padding-block: var(--section-pad);
  color: var(--noir);
  overflow: hidden;
}

.avis-slider-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* Flèche | bulle | flèche */
.avis-slider-stage {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2.5vw, 2rem);
}

.avis-nav-btn {
  flex: none;
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.5px solid var(--noir);
  color: var(--noir);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.avis-nav-btn:hover { background: var(--noir); color: var(--blanc); }
.avis-nav-btn .foc-arrow { width: 1rem; height: 1rem; }
.foc-arrow--flip { transform: scaleX(-1); }
.avis-nav-btn.swiper-button-disabled { opacity: 0.3; pointer-events: none; }

.avis-swiper {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
/* Bulles de même hauteur (= la plus haute) → pas de saut quand on défile. */
.avis-swiper .swiper-wrapper { align-items: stretch; }

/* La slide = bulle (noire) + auteur dessous. */
.avis-card {
  box-sizing: border-box;
  height: auto;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2vw, 1.75rem);   /* > hauteur du crochet */
}

/* Bulle : fond NOIR, texte BLANC centré (H+V), coins CARRÉS + crochet. */
.avis-bubble {
  position: relative;
  flex: 1 1 auto;             /* remplit la hauteur commune */
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;    /* centrage vertical → avis courts équilibrés */
  text-align: center;
  background: var(--noir);
  color: var(--blanc);
  border-radius: 0;           /* coins CARRÉS */
  padding: clamp(2rem, 3.5vw, 3.5rem);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.125rem, 1.5vw, 1.25rem);   /* ~18 → 20px */
  line-height: 1.5;
}
/* Le crochet : petit triangle sous le bord bas-gauche, pointe vers l'auteur. */
.avis-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: clamp(2rem, 4vw, 3.5rem);
  width: 0;
  height: 0;
  border-top: 22px solid var(--noir);
  border-right: 22px solid transparent;
}

/* Auteur SOUS la bulle (sur le rose), aligné sous le crochet. */
.avis-card-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: center;
  padding-left: clamp(2rem, 4vw, 3.5rem);
}
.avis-card-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--noir);
}
.avis-card-domaine {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--noir);
  opacity: 0.6;
}

/* Pagination (un point par avis) sous le slider — indique combien à lire. */
.avis-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.55rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.avis-pagination .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  margin: 0 !important;        /* on gère l'espacement via le gap */
  background: var(--noir);
  opacity: 0.25;
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease, width 0.2s ease;
}
.avis-pagination .swiper-pagination-bullet-active {
  opacity: 1;
  width: 26px;                 /* l'actif s'allonge en pilule feu */
  border-radius: 5px;
  background: var(--feu);
}

/* Bouton « voir plus » (outline) centré sous le slider. */
.avis-slider-foot {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  justify-content: center;
}

@media (max-width: 768px) {
  /* Mobile : la bulle prend toute la largeur ; les flèches passent dessous
     (sinon, coincées sur les côtés, elles écrasent la bulle → hauteur énorme).
     Le swipe reste le geste principal. */
  .avis-slider-stage { flex-wrap: wrap; justify-content: center; gap: 1rem; }
  .avis-swiper { order: -1; flex: 0 0 100%; }
  .avis-nav-btn { width: 2.75rem; height: 2.75rem; }
  /* Hauteur naturelle par avis (Swiper autoHeight) → pas de boîte géante pour
     les avis courts ; on n'égalise plus (on ne voit qu'une bulle à la fois). */
  .avis-swiper .swiper-wrapper { align-items: flex-start; }
  .avis-bubble { flex: 0 0 auto; }
}
@media (max-width: 600px) {
  .avis-bubble { font-size: 1.125rem; }
}

/* ============================================================
   POPUPS PLEIN ÉCRAN — base partagée (.foc-overlay)
   Montée plein écran depuis le bas (« page qui s'ouvre par-dessus »),
   fermable (X / fond / Échap). Deux variantes, toutes deux sur fond ROSE
   comme l'accueil :
   - .avis-results  → grille de cartes (mise en page accueil) « Voir plus de résultats »
   - .avis-overlay  → slider de bulles « Leurs avis »
   On reste rendu (visibility) pour que la montée s'anime vraiment.
   ============================================================ */
.foc-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;                /* au-dessus de tout, y compris le CTA jumpy docké (1001) */
  visibility: hidden;
}
.foc-overlay[aria-hidden="false"] { visibility: visible; }

.foc-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out-quart);
}
.foc-overlay[aria-hidden="false"] .foc-overlay-backdrop { opacity: 1; }

/* Le panneau = la page plein écran (fond rose). Monte depuis le bas. */
.foc-overlay-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--rose);
  color: var(--noir);
}
@media (prefers-reduced-motion: no-preference) {
  .foc-overlay-panel {
    transform: translateY(100%);
    /* la translation s'anime ; on retarde le masquage en sortie le temps qu'elle finisse */
    transition: transform 0.5s var(--ease-out-quart), visibility 0s linear 0.5s;
  }
  .foc-overlay[aria-hidden="false"] .foc-overlay-panel {
    transform: none;
    transition: transform 0.5s var(--ease-out-quart), visibility 0s;
  }
}

.foc-overlay-close {
  position: absolute;
  top: clamp(1rem, 2.5vw, 1.75rem);
  right: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 3;
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  line-height: 1;
  background: transparent;
  border: 1.5px solid var(--noir);
  color: var(--noir);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.foc-overlay-close:hover { background: var(--noir); color: var(--rose); }

/* ---- Variante RÉSULTATS : grille de cartes façon accueil --------------- */
/* Zone défilante (le CTA reste fixe en bas, hors de ce scroll). */
.avis-results-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* La section témoignages réutilisée telle quelle, dégraissée en haut pour
   laisser respirer la croix de fermeture. */
.temoignages--in-overlay {
  padding-top: clamp(4rem, 9vw, 6rem);
}
/* La grille de minis de l'accueil est en 4 colonnes fixes (minmax 240px) → elle
   déborde dans la fenêtre étroite d'une popup. Ici on la rend auto-adaptative
   (sans toucher au rendu de l'accueil). */
.temoignages--in-overlay .temoignages-secondary {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

/* Barre CTA fixe en bas de la popup. */
.avis-results-cta {
  flex: none;
  display: flex;
  justify-content: center;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) var(--gutter);
  background: var(--rose);
  border-top: 1px solid rgba(10, 10, 10, 0.12);
}

/* ---- Variante AVIS : slider de bulles « Leurs avis » ------------------- */
.avis-overlay { z-index: 1200; } /* au-dessus de la popup résultats (cartes → lire son avis) */

.avis-overlay-inner {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: clamp(4.5rem, 10vw, 7rem) var(--gutter) clamp(2.5rem, 5vw, 4rem);
}
.avis-overlay-head {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.avis-overlay-surtitre {
  font-family: var(--font-body);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--feu);
  margin-bottom: 0.5rem;
}
.avis-overlay-titre {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--noir);
}
.avis-overlay-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.55rem;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.avis-overlay-pagination .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  margin: 0 !important;
  background: var(--noir);
  opacity: 0.25;
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease, width 0.2s ease;
}
.avis-overlay-pagination .swiper-pagination-bullet-active {
  opacity: 1;
  width: 26px;
  border-radius: 5px;
  background: var(--feu);
}

/* ============================================================
   OFFRES — les 2 portes d'entrée
   ============================================================ */
/* Fond ROUGE partout où le bloc s'affiche (accueil, à-propos, page offres).
   Diagnostic = carte rose pleine (1re porte d'entrée, doit ressortir) ;
   Devil's Touch = carte bordée 2px sur le rouge. */
.offres {
  background: var(--feu);
  padding: var(--section-pad) var(--gutter);
}

.offres-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.offres-header {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 4rem);
}

.offres-header .title-seo { color: var(--noir); }
.offres-header .title-user { color: var(--noir); }

.offres-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
  align-items: stretch;
}

/* Carte offre : structure portée par .card.
   Diagnostic = .card--outline · Devil's Touch = .card--solid-dark */
.offre-card h3 {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.88;
  color: var(--noir);
  margin-bottom: 1rem;
}

.offre-intro {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 1.1vw, 1rem);
  color: var(--noir);
  line-height: 1.4;
  margin-bottom: 1.5rem;
}

.offre-card ul {
  list-style: none;
  margin-bottom: 1.5rem;
}

.offre-card ul li {
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  color: var(--noir);
  line-height: 1.4;
  padding: 0.4rem 0 0.4rem 1rem;
  border-bottom: 1px solid rgba(10, 10, 10, 0.1);
  position: relative;
}

.offre-card ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--feu);
  font-weight: 700;
}

/* Devil's Touch = carte transparente sur fond rouge → une flèche feu s'y
   fondrait (même couleur que le fond). On la passe en noir. */
.offre-card--dt ul li::before {
  color: var(--noir);
}

.offre-tech {
  font-size: 0.85em;
  opacity: 0.7;
}

/* Le CTA est poussé en bas (margin-top auto) mais garde une largeur
   naturelle — jamais 100 %. Aligné à gauche dans la carte. */
.offre-card .btn {
  align-self: flex-start;
  margin-top: auto;
}

/* ============================================================
   CONTACT — CTA de fin de page (fond rose, centré)
   ============================================================ */
.contact {
  background: var(--rose);
  padding: clamp(5rem, 6vw, 10rem) var(--gutter);
  text-align: center;
}

.contact-inner {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* .contact-label hérite de .title-seo — on n'ajuste QUE la couleur. */
.contact-label {
  color: var(--noir);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

/* .contact-title hérite de .title-user — on n'ajuste QUE couleur + espacement
   sous le titre (position), jamais la taille ni la typo. */
.contact-title {
  color: var(--noir);
  margin-bottom: var(--title-gap);
}

.contact-title .text-feu { color: var(--feu); }

.contact-cta {
  align-self: center;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .temoignages-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .temoignages-header {
    text-align: center;
  }
  .temoignages-grid {
    grid-template-columns: 1fr;
  }

  .temoignages-secondary {
    grid-template-columns: repeat(2, 1fr);
  }

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

@media (max-width: 520px) {
  .temoignages-secondary {
    grid-template-columns: 1fr;
  }

  /* En 1 colonne, le filet passe en séparateur HORIZONTAL (plus clair). */
  .temoignage-mini {
    border-left: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.27);
            padding: 1.5rem .5em .5em;
  }

  .temoignages-secondary .temoignage-mini:first-child {
    border-top: 0;
    padding-top: 0;
  }
}