/* ==========================================================================
   Pages Dépannage (hub + pages service) - 2026-09-24
   Chargée après les feuilles de l'accueil (includes/home-page-styles.php),
   dont ces pages réutilisent le hero, le process, les avis et le contact.
   Ici seulement ce qui leur est propre : la carte tarif large et la fin de
   page (navigation rapide + sources). Préfixe .dep- : rien ne fuit ailleurs.
   Couleurs : jetons du bundle uniquement. Corps >= 1.05rem (cible seniors).
   ========================================================================== */

/* ------------------------------------------------------------------ hero -- */

/* Les titres des pages service sont plus longs que celui de l'accueil
   (« Nettoyage et Suppression de Virus ») : un cran plus bas, sinon ils
   passent sur trois lignes dans la colonne 7/12. */
.dep-hero .hero-title {
  font-size: clamp(1.8rem, 4.2vw, 2.6rem);
  text-wrap: balance;
}

/* L'accroche du hub porte deux <br> écrits pour l'ancien hero centré. */
.dep-hero .home-hero__pitch {
  max-width: 38em;
}

/* ---------------------------------------------------------------- tarifs -- */

.dep-tarifs__list {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  max-width: 1000px;
  margin: 0 auto;
}

.dep-tarif {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--text-primary) 9%, transparent);
  background: color-mix(in srgb, var(--text-primary) 3%, transparent);
  /* Pas d'overflow: hidden : il coupait l'infobulle de rj6_zone_info()
     (« Déplacement inclus ? » du hub), qui s'ouvre au-dessus de la ligne.
     Le liseré ::before reste dans la carte sans lui. */
}

.dep-tarif--pop {
  border-color: color-mix(in srgb, var(--accent-cyan) 28%, transparent);
  background:
    radial-gradient(120% 90% at 0% 0%,
      color-mix(in srgb, var(--accent-cyan) 9%, transparent) 0%,
      transparent 60%),
    color-mix(in srgb, var(--text-primary) 3%, transparent);
}

/* Liseré haut, même signature que .price-card.pop de l'accueil. */
.dep-tarif--pop::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
  opacity: 0.7;
}

.dep-tarif__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

/* Ligne du haut : badge du forfait + pastille « Disponible aujourd'hui »
   (même rendu que dans le hero, point vert .home-hero__dot). */
.dep-tarif__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0 0 0.9rem;
}

.dep-tarif__availability {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent-green) 40%, transparent);
  background: color-mix(in srgb, var(--bg-dark, #0a0a0a) 85%, transparent);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
}

.dep-tarif__badge {
  display: inline-block;
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent-cyan) 30%, transparent);
  background: color-mix(in srgb, var(--accent-cyan) 9%, transparent);
  color: var(--accent-cyan);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dep-tarif__label {
  margin: 0 0 0.75rem;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
}

.dep-tarif__label a {
  color: inherit;
  text-decoration: none;
}

.dep-tarif__label a:hover,
.dep-tarif__label a:focus-visible {
  color: var(--accent-cyan);
}

.dep-tarif__price {
  margin: 0;
  font-size: clamp(3.2rem, 7vw, 4.4rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

.dep-tarif--pop .dep-tarif__price {
  background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dep-tarif__price span {
  margin-left: 0.1em;
  font-size: 0.42em;
  font-weight: 400;
}

.dep-tarif__unit {
  margin: 0.6rem 0 0;
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.5;
}

/* Délai réel sous le prix (repris des infos déjà publiées : FAQ « dans
   l'heure » à distance, « sous 24-48h » à domicile). */
.dep-tarif__delay {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.45rem 0 0;
  color: var(--text-primary);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
}

.dep-tarif__delay i {
  color: var(--accent-green);
}

/* Vrai bouton d'appel : .btn-call (dégradé cyan-violet profond, réservé à l'appel) du bundle.
   On n'en règle que la place : pas de marge héritée, largeur pleine sur
   mobile, retour à la ligne permis avant le numéro (320 px). */
.dep-tarif .dep-tarif__call {
  margin: 1.2rem 0 0;
  min-height: 56px;
  padding-inline: clamp(16px, 4vw, 32px);
  font-size: clamp(1rem, 3.4vw, 1.1rem);
  font-weight: 700;
  white-space: normal;
  text-align: center;
  text-decoration: none;
}

.dep-tarif__number {
  white-space: nowrap;
}

.dep-tarif__note {
  margin: 0.8rem 0 0;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.5;
}

.dep-tarif__incl {
  min-width: 0;
  padding-top: clamp(1.25rem, 3vw, 1.5rem);
  border-top: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
}

.dep-tarif__incl-title {
  margin: 0 0 0.6rem;
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dep-tarif__feat {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dep-tarif__feat li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.6rem 0;
  color: var(--text-primary);
  font-size: 1.05rem;
  line-height: 1.5;
}

.dep-tarif__feat li + li {
  border-top: 1px solid color-mix(in srgb, var(--text-primary) 6%, transparent);
}

.dep-tarif__feat i {
  flex-shrink: 0;
  margin-top: 0.15em;
  color: var(--accent-cyan);
  font-size: 1.1rem;
}

/* Avis Google réel (vérifié contre data/reviews.json par le composant) :
   bande sous les deux colonnes, séparée par un filet. */
.dep-tarif__review {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: clamp(1rem, 2.5vw, 1.4rem);
  border-top: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
}

.dep-tarif__quote {
  margin: 0 0 0.6rem;
}

.dep-tarif__quote p {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(1.02rem, 1.6vw, 1.1rem);
  font-style: italic;
  line-height: 1.6;
}

.dep-tarif__cite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

/* Étoiles : or des avis (même teinte que la pastille de note du hero). */
.dep-tarif__stars {
  color: #fbbf24;
  letter-spacing: 0.08em;
}

.dep-tarif__author {
  color: var(--text-primary);
  font-weight: 600;
}

/* Renvoi page tarifs : une ligne, même traitement que .home-tarifs__pro. */
.dep-tarifs__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.7rem;
  max-width: 1000px;
  margin: clamp(1.5rem, 3vw, 2rem) auto 0;
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.5;
  text-align: center;
}

.dep-tarifs__more i {
  color: var(--accent-cyan);
  font-size: 1.2rem;
}

.dep-tarifs__more a {
  color: var(--accent-cyan);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dep-tarifs__more a:hover,
.dep-tarifs__more a:focus-visible {
  color: var(--text-primary);
}

@media (min-width: 768px) {
  /* Tablette : colonnes égales, sinon la colonne prix (5/12 de ~700 px)
     coupait le bouton d'appel sur deux lignes. 5/7 à partir de 992 px. */
  .dep-tarif {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }

  .dep-tarif__incl {
    padding-top: 0;
    padding-left: clamp(1.5rem, 3vw, 2.5rem);
    border-top: 0;
    border-left: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
  }
}

@media (min-width: 992px) {
  .dep-tarif {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

/* Variante « duo » (page tarifs, 2026-09-26, 2e passe) : deux cartes
   compactes centrées, dans l'esprit des .price-card de l'accueil. Lecture en
   un coup d'oeil : badge, nom, prix, délai, bouton, puis les pannes couvertes
   en étiquettes. Rangées partagées (subgrid) : prix et boutons alignés d'une
   carte à l'autre. Règles hors media : elles valent aussi sur mobile. */
.dep-tarifs--duo .dep-tarifs__list {
  max-width: 520px;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.dep-tarifs--duo .dep-tarif {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.25rem);
  text-align: center;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--text-primary) 4%, transparent), transparent 55%),
    color-mix(in srgb, var(--bg-dark, #0a0a0a) 70%, transparent);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.dep-tarifs--duo .dep-tarif--pop {
  background:
    radial-gradient(90% 60% at 50% 0%,
      color-mix(in srgb, var(--accent-cyan) 10%, transparent) 0%,
      transparent 70%),
    color-mix(in srgb, var(--bg-dark, #0a0a0a) 70%, transparent);
  box-shadow: 0 30px 80px -45px color-mix(in srgb, var(--accent-purple) 60%, transparent);
}

.dep-tarifs--duo .dep-tarif__main {
  align-items: center;
}

.dep-tarifs--duo .dep-tarif__top {
  justify-content: center;
  margin-bottom: 1rem;
}

.dep-tarifs--duo .dep-tarif__badge {
  padding: 0.2rem 0.75rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
}

.dep-tarifs--duo .dep-tarif__label {
  margin-bottom: 0.9rem;
  font-size: clamp(1.15rem, 1.8vw, 1.3rem);
}

.dep-tarifs--duo .dep-tarif__price {
  font-size: clamp(3.4rem, 6vw, 4.2rem);
  font-weight: 700;
}

/* Prix blanc plein, comme la grille : pas de dégradé (lecture senior). */
.dep-tarifs--duo .dep-tarif--pop .dep-tarif__price {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--text-primary);
}

.dep-tarifs--duo .dep-tarif__unit {
  margin-top: 0.55rem;
  font-size: 0.98rem;
}

.dep-tarifs--duo .dep-tarif__delay {
  justify-content: center;
  margin-top: 0.9rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent-green) 35%, transparent);
  font-size: 0.95rem;
  text-wrap: balance;
}

.dep-tarifs--duo .dep-tarif .dep-tarif__call {
  width: 100%;
  max-width: 320px;
  margin-top: 1.5rem;
}

.dep-tarifs--duo .dep-tarif__note {
  margin-top: 0.7rem;
  font-size: 0.92rem;
  text-wrap: pretty;
}

.dep-tarifs--duo .dep-tarif__incl {
  margin-top: 1.75rem;
  padding: 1.5rem 0 0;
  border-left: 0;
  border-top: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
}

.dep-tarifs--duo .dep-tarif__incl-title {
  margin-bottom: 0.7rem;
  color: var(--text-secondary);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
}

/* Pannes couvertes : vraie liste à coches, serrée (retour client 2026-09-26 :
   des listes, pas d'étiquettes ; lisible pour un senior). Bloc centré dans la
   carte, lignes alignées à gauche. */
.dep-tarifs--duo .dep-tarif__feat {
  display: grid;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: left;
}

.dep-tarifs--duo .dep-tarif__feat li,
.dep-tarifs--duo .dep-tarif__feat li + li {
  gap: 0.55rem;
  padding: 0.28rem 0;
  border: 0;
  font-size: 1.05rem;
  line-height: 1.4;
}

.dep-tarifs--duo .dep-tarif__feat i {
  margin-top: 0.1em;
  font-size: 1.1rem;
}

.dep-tarifs--duo .dep-tarif__feat strong {
  color: var(--accent-cyan);
}

/* Deux colonnes dès que le bouton d'appel tient sur une ligne. */
@media (min-width: 860px) {
  .dep-tarifs--duo .dep-tarifs__list {
    max-width: 940px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    row-gap: 0;
  }

  .dep-tarifs--duo .dep-tarif {
    grid-row: span 2;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    align-items: start;
  }

  .dep-tarifs--duo .dep-tarif__incl {
    padding-left: 0;
    border-left: 0;
  }

  .dep-tarifs--duo .dep-tarif__feat:has(li:nth-child(8)) {
    grid-template-columns: repeat(2, auto);
    column-gap: 1.5rem;
  }

  .dep-tarifs--duo .dep-tarif:hover {
    border-color: color-mix(in srgb, var(--accent-cyan) 40%, transparent);
    transform: translateY(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dep-tarifs--duo .dep-tarif,
  .dep-tarifs--duo .dep-tarif:hover {
    transition: none;
    transform: none;
  }
}

@media (max-width: 767.98px) {
  .dep-tarif .dep-tarif__call {
    width: 100%;
  }
}

/* ------------------------------------------------------------ fin de page --
   Navigation rapide puis sources : une seule colonne, même largeur que la
   section contact (1080px), mêmes marges, même hiérarchie (étiquette, H2,
   chapo dessous). Avant : la carte de navigation prenait toute la largeur
   du conteneur et les sources une colonne de 900px, sans lien entre elles. */
.dep-closing {
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 6vw, 4.5rem);
}

/* seo-link-hub.php pose `py-4` (padding !important de Bootstrap) : sans ce
   !important la section gardait 1.5rem en haut et en bas et décalait
   l'espacement entre les deux cartes. */
.dep-closing > .section,
.dep-closing > .section.py-4 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.dep-closing > .section + .section {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
}

.dep-closing > .section > .container {
  max-width: 1080px;
}

.dep-closing .seo-hub-card {
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
}

.dep-closing .seo-hub-title,
.dep-closing .sources-section h2 {
  margin: 0 0 0.4rem;
  font-size: clamp(1.25rem, 2vw, 1.45rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
}

.dep-closing .seo-hub-sub {
  font-size: 1.05rem;
  line-height: 1.55;
}

.dep-closing .seo-hub-pill {
  min-height: 44px;
  font-size: 0.98rem;
}

/* Sources : même gabarit que la carte de navigation, sans lueur ni survol,
   c'est une note de bas de page, pas un appel à l'action. */
.dep-closing .sources-section__inner {
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--text-primary) 2%, transparent);
}

.dep-closing .sources-section h2 i {
  color: var(--accent-cyan);
}

.dep-closing .sources-section p {
  font-size: 1.05rem !important;
}

.dep-closing .sources-section li {
  padding: 0.5rem 0;
  font-size: 1.05rem;
  line-height: 1.5;
}

.dep-closing .sources-section li + li {
  border-top: 1px solid color-mix(in srgb, var(--text-primary) 6%, transparent);
}

.dep-closing .sources-section li a {
  color: var(--accent-cyan);
  font-weight: 600;
}

/* ------------------------------------------------- pannes par situation -- */

/* Bloc du hub : liste de CHAQUE page de panne, regroupee par situation.
   Colonnes a filet haut plutot que cartes : il se lit comme un index, sous
   les 12 cartes de familles, sans refaire une seconde grille identique. */
.dep-pannes {
  max-width: 1200px;
  margin: clamp(3rem, 6vw, 4.5rem) auto 0;
}

.dep-pannes__title {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  text-align: center;
  text-wrap: balance;
}

.dep-pannes__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem);
}

.dep-pannes__group {
  padding-top: 1rem;
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--accent-cyan), color-mix(in srgb, var(--accent-cyan) 0%, transparent)) 1;
}

.dep-pannes__situation {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text-primary);
}

.dep-pannes__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dep-pannes__list li + li {
  border-top: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
}

.dep-pannes__link {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.7rem 0;
  text-decoration: none;
}

.dep-pannes__label {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
}

.dep-pannes__desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.dep-pannes__link:hover .dep-pannes__label,
.dep-pannes__link:focus-visible .dep-pannes__label {
  color: var(--accent-cyan);
}

@media (max-width: 991px) {
  .dep-pannes__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .dep-pannes__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Cible tactile : la ligne entiere reste cliquable, >= 44 px. */
  .dep-pannes__link {
    min-height: 44px;
    justify-content: center;
  }
}