/*-----------------------------------*\
  #pages.css — Dr Khamlich
  Styles spécifiques aux pages dédiées Google Ads
  (breadcrumb, hero landing, tarifs, FAQ, contenu SEO)
  ⚠️ MOBILE FIRST — media queries en min-width UNIQUEMENT.
\*-----------------------------------*/


/*-----------------------------------*\
  #BREADCRUMB
\*-----------------------------------*/

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-7);
  color: var(--clr-text-light);
  margin-bottom: 16px;
}

.breadcrumb li { display: flex; align-items: center; gap: 6px; }

.breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--clr-primary);
  transition: var(--transition);
}

.breadcrumb a:is(:hover, :focus-visible) { color: var(--clr-primary-dark); }

.breadcrumb-separator { color: var(--clr-border); }

.breadcrumb [aria-current="page"] { color: var(--clr-text-light); }


/*-----------------------------------*\
  #HERO PAGE DÉDIÉE
\*-----------------------------------*/

.page-hero {
  position: relative;
  background-color: var(--clr-text);
  background-size: cover;
  background-position: center;
  color: var(--clr-white);
  padding: 32px 0 40px;
  isolation: isolate;
}

/* Overlay gradient léger sur l'image de fond */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(15, 32, 51, 0.92) 0%, rgba(2, 132, 168, 0.82) 100%);
  z-index: -1;
}

.page-hero .breadcrumb { color: rgba(255, 255, 255, 0.75); }
.page-hero .breadcrumb a { color: var(--clr-white); text-decoration: underline; }
.page-hero .breadcrumb [aria-current="page"] { color: rgba(255, 255, 255, 0.75); }
.page-hero .breadcrumb-separator { color: rgba(255, 255, 255, 0.4); }

.page-hero .h1 {
  color: var(--clr-white);
  margin-bottom: 12px;
}

.page-hero-text {
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--fs-5);
  margin-bottom: 20px;
}

.page-hero .trust-badge {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--clr-white);
  backdrop-filter: blur(4px);
}

.page-hero .trust-badge ion-icon { color: #6ee7b7; }

.page-hero .btn-secondary {
  background: transparent;
  color: var(--clr-white);
  border-color: var(--clr-white);
}

.page-hero .btn-secondary:is(:hover, :focus-visible) {
  background: var(--clr-white);
  color: var(--clr-primary-dark);
}


/*-----------------------------------*\
  #CONTENU SEO
\*-----------------------------------*/

.content-body p {
  color: var(--clr-text-light);
  margin-bottom: 16px;
}

.content-body strong { color: var(--clr-text); font-weight: var(--fw-500); }

.content-body .h3 { margin: 28px 0 12px; }

.check-list { display: grid; gap: 12px; margin-bottom: 24px; }

.check-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--clr-text-light);
  font-size: var(--fs-6);
}

.check-list ion-icon {
  color: var(--clr-success);
  font-size: 2rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.check-list strong { color: var(--clr-text); font-weight: var(--fw-600); }

/* Étapes numérotées du déroulement */
/* Chapeau des étapes : prévient que le déroulé donné est générique et que
   le détail dépend de la solution retenue. */
.step-intro {
  font-size: var(--fs-6);
  color: var(--clr-text-light);
  margin-bottom: 20px;
}

.steps-list {
  display: grid;
  gap: 16px;
  counter-reset: step;
  margin-bottom: 24px;
}

.steps-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  counter-increment: step;
}

.steps-list li::before {
  content: counter(step);
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-image: var(--gradient);
  color: var(--clr-white);
  display: grid;
  place-items: center;
  font-family: var(--ff-heading);
  font-weight: var(--fw-700);
  font-size: var(--fs-6);
}

.steps-list .step-title {
  font-family: var(--ff-heading);
  font-weight: var(--fw-600);
  font-size: var(--fs-6);
  color: var(--clr-text);
}

.steps-list .step-text {
  color: var(--clr-text-light);
  font-size: var(--fs-6);
}

/* Encadré "Pourquoi choisir le Dr Khamlich ?" */
.highlight-box {
  background: var(--clr-accent);
  border-left: 4px solid var(--clr-primary);
  border-radius: var(--border-radius);
  padding: 24px;
  margin-top: 28px;
}

.highlight-box .h3 { margin: 0 0 16px; }

.highlight-box .check-list { margin-bottom: 0; }


/*-----------------------------------*\
  #TARIFS
\*-----------------------------------*/

/* Cartes empilées sur mobile — jamais de tableau à scroll horizontal */
.price-list {
  display: grid;
  gap: 16px;
  margin-bottom: 24px;
}

.price-card {
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: var(--border-radius);
  padding: 24px;
  box-shadow: var(--shadow-card);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  position: relative;
}

.price-card:is(:hover, :focus-within) {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.price-card .card-icon {
  width: 72px;
  margin-bottom: 16px;
}

.price-card-featured {
  border-color: var(--clr-primary);
  border-width: 2px;
  box-shadow: var(--shadow);
}

.price-badge {
  position: absolute;
  top: -12px;
  left: 24px;
  background-image: var(--gradient);
  color: var(--clr-white);
  font-family: var(--ff-heading);
  font-size: var(--fs-7);
  font-weight: var(--fw-600);
  padding: 4px 14px;
  border-radius: var(--radius-pill);
}

.price-card .price-title {
  font-family: var(--ff-heading);
  font-size: var(--fs-4);
  font-weight: var(--fw-600);
  margin-bottom: 8px;
}

.price-amount {
  font-family: var(--ff-heading);
  font-size: 2.8rem;
  font-weight: var(--fw-800);
  color: var(--clr-primary);
  line-height: 1.2;
}

.price-unit {
  color: var(--clr-text-light);
  font-size: var(--fs-7);
  margin-bottom: 12px;
}

.price-desc {
  color: var(--clr-text-light);
  font-size: var(--fs-6);
  flex-grow: 1;
}

.price-note {
  background: var(--clr-surface);
  border: 1px dashed var(--clr-border);
  border-radius: var(--border-radius);
  padding: 16px;
  color: var(--clr-text-light);
  font-size: var(--fs-6);
  margin-bottom: 24px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.price-note ion-icon {
  color: var(--clr-primary);
  font-size: 2rem;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Grille secondaire compacte : soins sans tarif fixe ni page dédiée */
.service-list-compact {
  grid-template-columns: 1fr;
  gap: 16px;
  /* Évite que la dernière carte touche le groupe de boutons CTA */
  margin-bottom: 40px;
}

/* Cartes de largeur et hauteur égales : le <li> est un conteneur flex en
   ligne par défaut, donc sans flex:1 la carte ne prend que la largeur de
   son contenu (ex. "Chirurgie dentaire" plus courte que les autres). */
.service-list-compact > li { display: flex; }

.service-card-compact { flex: 1; height: 100%; }

.service-card-compact {
  padding: 18px;
}

.service-card-compact .card-icon {
  width: 48px;
  margin-bottom: 10px;
}

.service-card-compact .card-title {
  margin-bottom: 8px;
}

.service-card-compact .card-text {
  font-size: var(--fs-7);
  margin-bottom: 8px;
}

.service-card-compact .card-link {
  min-height: auto;
  font-size: var(--fs-7);
}

@media (min-width: 768px) {
  .service-list-compact { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .service-list-compact { grid-template-columns: repeat(3, 1fr); }
}


/*-----------------------------------*\
  #FAQ ACCORDÉON
\*-----------------------------------*/

.faq-list {
  display: grid;
  gap: 12px;
  max-width: 800px;
  margin-inline: auto;
}

.faq-item {
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: var(--transition);
}

.faq-item:has(.faq-question[aria-expanded="true"]) {
  border-color: var(--clr-primary);
  box-shadow: var(--shadow-card);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  min-height: 56px;
  text-align: left;
  font-family: var(--ff-heading);
  font-weight: var(--fw-600);
  font-size: var(--fs-6);
  color: var(--clr-text);
  transition: var(--transition);
}

.faq-question:is(:hover, :focus-visible) { color: var(--clr-primary); }

.faq-question ion-icon {
  font-size: 2.2rem;
  color: var(--clr-primary);
  flex-shrink: 0;
  transition: transform var(--transition);
}

.faq-question[aria-expanded="true"] ion-icon { transform: rotate(180deg); }

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.faq-answer.open { grid-template-rows: 1fr; }

.faq-answer > div { overflow: hidden; }

.faq-answer p {
  padding: 0 20px 16px;
  color: var(--clr-text-light);
  font-size: var(--fs-6);
}


/*-----------------------------------*\
  #GALERIE AVANT-APRÈS (pages dédiées)
\*-----------------------------------*/

/* 1 colonne stricte sur mobile */
.gallery-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

.gallery-item {
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: var(--transition);
}

.gallery-item:is(:hover, :focus-within) {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.gallery-item figcaption {
  padding: 12px 16px;
  color: var(--clr-text-light);
  font-size: var(--fs-7);
}


/*-----------------------------------*\
  #TABLETTE — min-width: 768px
\*-----------------------------------*/

@media (min-width: 768px) {

  .page-hero { padding: 48px 0 56px; }

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

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

  .faq-question { font-size: var(--fs-5); padding: 18px 24px; }

}


/*-----------------------------------*\
  #DESKTOP — min-width: 1024px
\*-----------------------------------*/

@media (min-width: 1024px) {

  .page-hero { padding: 64px 0 72px; }

  .page-hero .container { max-width: 860px; }

  .page-hero-text { font-size: var(--fs-4); }

  .price-list { grid-template-columns: repeat(3, 1fr); }

  .gallery-grid { grid-template-columns: repeat(3, 1fr); }

  /* Contenu SEO + encadré côte à côte */
  .content-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
    align-items: start;
  }

  .highlight-box { margin-top: 0; position: sticky; top: 100px; }

}


/*-----------------------------------*\
  #HIÉRARCHIE DES TITRES DE SECTION
\*-----------------------------------*/

/* La ligne d'accroche (.section-subtitle) était plus petite que le titre
   placé en dessous, ce qui inversait la hiérarchie visuelle : elle devient
   la ligne dominante, et le titre passe en sous-titre plus discret.
   Ces règles ne s'appliquent qu'à index.html (seule page liant pages.css). */
.section-head .section-subtitle {
  font-size: var(--fs-2);
  font-weight: var(--fw-700);
  color: var(--clr-text);
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.25;
  margin-bottom: 10px;
}

.section-head .section-title {
  font-size: var(--fs-4);
  font-weight: var(--fw-600);
  color: var(--clr-primary);
}

/* Le bandeau CTA sombre garde un contraste lisible */
.cta .section-head .section-subtitle { color: var(--clr-white); }
.cta .section-head .section-title { color: rgba(255, 255, 255, 0.85); }

/* Exception : quand l'accroche n'est qu'une étiquette (« Tarifs affichés »)
   et non un message, c'est le titre qui doit dominer. On rend alors les deux
   échelles à leur rôle naturel ; l'ordre du DOM suit dans le HTML. */
.section-head.is-flipped .section-title {
  font-size: var(--fs-2);
  font-weight: var(--fw-700);
  color: var(--clr-text);
  line-height: 1.25;
  margin-bottom: 6px;
}

.section-head.is-flipped .section-subtitle {
  font-size: var(--fs-7);
  font-weight: var(--fw-600);
  color: var(--clr-primary);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 0;
}


/*-----------------------------------*\
  #HERO CONVERSION (pages Google Ads)
  Bloc additif : n'altère aucune règle utilisée par index.html.
\*-----------------------------------*/

/* Variante claire du hero, pensée pour la conversion : offre visible,
   preuve sociale au-dessus de la ligne de flottaison, CTA doublé.
   Même fond que le hero de la page d'accueil (var(--gradient-hero)),
   pas le fond sombre de .page-hero utilisé sur les autres pages. */
.hero-convert {
  background: var(--gradient-hero);
  padding: 24px 0 32px;
}

.hero-convert .h1 {
  color: var(--clr-text);
  font-size: 3rem;
  line-height: 1.2;
}

.hero-convert .h1 .hero-highlight {
  display: inline-block;
  margin-top: 4px;
  color: var(--clr-primary-dark);
  font-size: 0.62em;
  font-weight: var(--fw-600);
}

.hero-convert .page-hero-text { color: var(--clr-text-light); }

/* Pastille d'offre — l'argument à plus forte valeur perçue */
.hero-offer-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--clr-gold);
  color: #422006;
  font-size: var(--fs-7);
  font-weight: var(--fw-700);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
  line-height: 1.3;
}

.hero-offer-pill ion-icon { font-size: 1.8rem; flex-shrink: 0; }

/* Preuve sociale compacte, juste sous le H1 */
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: var(--fs-7);
  color: var(--clr-text-light);
}

.hero-proof .stars {
  color: var(--clr-gold);
  font-size: var(--fs-5);
  letter-spacing: 1px;
}

.hero-proof-score { color: var(--clr-text); }

/* Étoiles + note restent solidaires sur une même ligne, quelle que soit la largeur */
.hero-proof .stars,
.hero-proof-score { white-space: nowrap; }
.hero-proof-score { font-weight: var(--fw-700); }
.hero-proof-sep { opacity: 0.5; }

/* Emplacement image hero (photo sourire / cabinet) — même traitement que
   .hero-banner sur la page d'accueil : pas de cadre, pas d'ombre. */
.hero-media { margin-bottom: 20px; }

.hero-media img {
  width: 100%;
  display: block;
  object-fit: cover;
  border-radius: var(--border-radius);
}

/* Récapitulatif prix/durée directement dans le hero */
.hero-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.hero-fact {
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  text-align: center;
}

.hero-fact .fact-value {
  font-family: var(--ff-heading);
  font-size: var(--fs-4);
  font-weight: var(--fw-700);
  color: var(--clr-primary-dark);
  line-height: 1.2;
}

.hero-fact .fact-label {
  font-size: 1.25rem;
  color: var(--clr-text-light);
  line-height: 1.3;
}

/* Micro-réassurance sous les boutons — réduit le risque perçu.
   Masquée sur mobile comme les boutons du hero : la barre CTA fixe du bas
   prend le relais. Réapparaît dès la tablette (voir media query 768px). */
.hero-microcopy {
  display: none;
  margin-top: 12px;
  font-size: var(--fs-7);
  color: var(--clr-text-light);
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.hero-microcopy ion-icon { color: var(--clr-primary); font-size: 1.7rem; }


/*-----------------------------------*\
  #BANDEAU DE CONFIANCE
\*-----------------------------------*/

.trust-strip {
  background: var(--clr-text);
  padding: 16px 0;
}

.trust-strip ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.trust-strip li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.3rem;
  line-height: 1.35;
}

.trust-strip ion-icon {
  color: #6ee7b7;
  font-size: 2rem;
  flex-shrink: 0;
}


/*-----------------------------------*\
  #PRÉSENTATION ORIENTÉE BÉNÉFICE
\*-----------------------------------*/

/* Cartes "avant / après" version texte : douleur → résultat */
.outcome-grid {
  display: grid;
  gap: 16px;
  margin-bottom: 28px;
}

.outcome-card {
  border-radius: var(--border-radius);
  padding: 20px;
  border: 1px solid var(--clr-border);
}

.outcome-card.is-before {
  background: var(--clr-surface);
}

.outcome-card.is-after {
  background: var(--clr-primary-light);
  border-color: var(--clr-primary);
}

.outcome-card .outcome-label {
  font-family: var(--ff-heading);
  font-size: var(--fs-7);
  font-weight: var(--fw-700);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  color: var(--clr-text-light);
}

.outcome-card.is-after .outcome-label { color: var(--clr-primary-dark); }

.outcome-card ul { display: grid; gap: 10px; }

.outcome-card li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--fs-6);
  color: var(--clr-text-light);
}

.outcome-card li ion-icon { font-size: 1.9rem; flex-shrink: 0; margin-top: 2px; }

.outcome-card.is-before li ion-icon { color: #94a3b8; }
.outcome-card.is-after li ion-icon { color: var(--clr-success); }

/* Bloc image libre à insérer dans le contenu */
.content-figure {
  margin: 24px 0;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--clr-border);
}

.content-figure img { width: 100%; display: block; }

.content-figure figcaption {
  padding: 10px 14px;
  font-size: var(--fs-7);
  color: var(--clr-text-light);
  background: var(--clr-surface);
}


/*-----------------------------------*\
  #GARANTIES / LEVÉE D'OBJECTIONS
\*-----------------------------------*/

.guarantee-grid {
  display: grid;
  gap: 14px;
}

.guarantee-card {
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-left: 4px solid var(--clr-primary);
  border-radius: var(--border-radius);
  padding: 18px 18px 18px 16px;
  box-shadow: var(--shadow-card);
}

.guarantee-card .guarantee-icon {
  font-size: 2.6rem;
  color: var(--clr-primary);
  margin-bottom: 8px;
}

.guarantee-card .guarantee-title {
  font-family: var(--ff-heading);
  font-size: var(--fs-5);
  font-weight: var(--fw-600);
  margin-bottom: 6px;
}

.guarantee-card p {
  font-size: var(--fs-6);
  color: var(--clr-text-light);
}


/*-----------------------------------*\
  #DÉROULÉ DE LA SÉANCE (timeline)
\*-----------------------------------*/

.timeline-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--clr-primary-light);
  border-radius: var(--border-radius);
  padding: 14px 16px;
  font-size: var(--fs-6);
  color: var(--clr-text);
  margin-top: 20px;
}

.timeline-note ion-icon {
  color: var(--clr-primary-dark);
  font-size: 2.1rem;
  flex-shrink: 0;
  margin-top: 1px;
}


/*-----------------------------------*\
  #BLOC RDV EXTERNE (Reservio nouvel onglet)
\*-----------------------------------*/

.rdv-panel {
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  padding: 24px 20px;
  text-align: center;
}

.rdv-panel .rdv-price {
  font-family: var(--ff-heading);
  font-size: 2.8rem;
  font-weight: var(--fw-800);
  color: var(--clr-primary);
  line-height: 1.2;
}

.rdv-panel .rdv-price-sub {
  font-size: var(--fs-6);
  color: var(--clr-text-light);
  margin-bottom: 18px;
}

.rdv-panel .btn-group { justify-content: center; }

.rdv-steps {
  display: grid;
  gap: 10px;
  margin: 20px auto 0;
  max-width: 420px;
  text-align: left;
}

.rdv-steps li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--fs-6);
  color: var(--clr-text-light);
}

.rdv-steps ion-icon {
  color: var(--clr-success);
  font-size: 2rem;
  flex-shrink: 0;
  margin-top: 2px;
}


/*-----------------------------------*\
  #TABLETTE — min-width: 768px (bloc additif)
\*-----------------------------------*/

@media (min-width: 768px) {

  .hero-convert { padding: 40px 0 48px; }
  .hero-convert .h1 { font-size: 3.8rem; }

  /* Plus de barre CTA fixe à partir d'ici : la réassurance du hero revient */
  .hero-microcopy { display: flex; }

  .hero-facts { grid-template-columns: repeat(4, 1fr); }

  .trust-strip ul { grid-template-columns: repeat(4, 1fr); }

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

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

  .rdv-panel { padding: 32px; }

}


/*-----------------------------------*\
  #DESKTOP — min-width: 1024px (bloc additif)
\*-----------------------------------*/

@media (min-width: 1024px) {

  .hero-convert { padding: 56px 0 64px; }
  .hero-convert .h1 { font-size: 4.4rem; }
  /* .compare-list passe en grille 3 colonnes dès 768px (voir plus bas) */
  .decision-list { grid-template-columns: repeat(3, 1fr); }

  /* Deux colonnes : texte à gauche, visuel à droite */
  .hero-convert .container {
    max-width: 1200px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
    align-items: center;
  }

  .hero-convert .hero-convert-body { grid-column: 1; }

  .hero-media {
    grid-column: 2;
    margin-bottom: 0;
    align-self: stretch;
  }

  .hero-media img { height: 100%; min-height: 420px; }

  .guarantee-grid { grid-template-columns: repeat(3, 1fr); }

}


/*-----------------------------------*\
  #COMPARATIF D'APPAREILS (orthodontie)
  Bloc additif : le visiteur doit pouvoir choisir en 30 secondes
  entre 6 solutions. Cartes défilantes sur mobile (.has-scrollbar),
  grille à partir de 768px.
\*-----------------------------------*/

/* Échelle visuelle « se voit → invisible » : positionne les 3 familles
   d'appareils sur un axe unique avant d'entrer dans le détail. */
.visibility-scale {
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: var(--border-radius);
  padding: 16px 18px 14px;
  margin-bottom: 24px;
}

.visibility-scale-title {
  font-family: var(--ff-heading);
  font-size: var(--fs-7);
  font-weight: var(--fw-600);
  color: var(--clr-text);
  text-align: center;
  margin-bottom: 14px;
}

.visibility-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  position: relative;
  padding-top: 18px;
}

/* Le rail dégradé : sombre (visible) → clair (invisible) */
.visibility-track::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 8%;
  right: 8%;
  height: 6px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--clr-text) 0%, #94a3b8 50%, var(--clr-primary-light) 100%);
}

.visibility-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 1.25rem;
  line-height: 1.3;
  text-align: center;
  color: var(--clr-text-light);
  position: relative;
}

.visibility-step .dot {
  position: absolute;
  top: -18px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3px solid var(--clr-white);
}

.visibility-step.is-1 .dot { background: var(--clr-text); }
.visibility-step.is-2 .dot { background: #94a3b8; }
.visibility-step.is-3 .dot { background: var(--clr-primary); }

.visibility-step.is-3 { color: var(--clr-primary-dark); font-weight: var(--fw-600); }

.visibility-legend {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 1.2rem;
  color: var(--clr-text-light);
}

/* Variante « symptômes » (facettes) : les 3 colonnes ne sont pas une
   progression mais 3 cas traités à égalité. Le rail devient uni, les
   pastilles prennent la couleur d'accent, et la légende est une phrase
   centrée plutôt que deux étiquettes opposées. */
.visibility-scale.is-symptoms .visibility-track::before {
  background: var(--clr-primary-light);
}

.visibility-scale.is-symptoms .visibility-step { color: var(--clr-text); }

.visibility-scale.is-symptoms .visibility-step .dot { background: var(--clr-primary); }

.visibility-scale.is-symptoms .visibility-legend {
  justify-content: center;
  text-align: center;
}

/* Marge supplémentaire : les badges des cartes débordent vers le haut */
.compare-list { padding-top: 14px; }

/* Mobile : la carte ne prend pas toute la largeur, on laisse dépasser un
   bout des cartes voisines de chaque côté. C'est ce débord qui signale au
   visiteur qu'il y a d'autres solutions à faire défiler. */
.compare-list .scrollbar-item { min-width: 78%; }

/* Le snap centre la carte : sans ce scroll-padding, la carte active se
   collerait à gauche et le voisin de gauche disparaîtrait. */
.compare-list { scroll-padding-inline: 50%; }
.compare-list .scrollbar-item { scroll-snap-align: center; }

.compare-hint { margin-bottom: 8px; }


/*-----------------------------------*\
  #AVANT-APRÈS DÉFILANT
  Même principe de lecture que le comparatif : on dézoome les cartes pour
  laisser apparaître les voisines, ce qui rend le défilement évident.
  Utilisé par orthodontie, l'accueil et le blanchiment.

  Classe dédiée (.transfo-list) et non .has-scrollbar : le carrousel
  générique sert aussi à d'autres listes (avis, services), qui gardent
  le comportement pleine largeur. Ajouter la classe au <ul> pour opter.
\*-----------------------------------*/

/* Uniquement sous 768px : au-delà, les cartes reviennent en 2 puis 3
   colonnes (voir les media queries plus bas) et le dézoom n'a plus lieu
   d'être — une carte ne doit jamais occuper l'écran entier sur desktop. */
@media (max-width: 767px) {

  .transfo-list .scrollbar-item { min-width: 78%; }

  /* Centre la carte active au lieu de la coller à gauche (le snap centré est
     déjà l'état par défaut de .scrollbar-item). La 1ʳᵉ carte reste le point
     d'entrée : la plage de défilement l'empêche de se décaler vers la droite. */
  .transfo-list { scroll-padding-inline: 50%; }

}

.compare-card {
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-card);
  padding: 22px 20px 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: var(--transition);
}

.compare-card:is(:hover, :focus-within) {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.compare-card.is-recommended {
  border-color: var(--clr-primary);
  border-width: 2px;
  box-shadow: var(--shadow);
}

.compare-card.is-highlight {
  border-color: var(--clr-gold);
  border-width: 2px;
}

/* Variante dorée du badge, pour distinguer « discrétion » de « recommandé » */
.price-badge.is-alt {
  background-image: none;
  background: var(--clr-gold);
  color: #422006;
}

/* Emplacement image : photo réelle de l'appareil en bouche */
.compare-visual {
  background: var(--clr-surface);
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 120px;
}

.compare-visual img {
  width: 100%;
  height: 100%;
  max-height: 180px;
  object-fit: contain;
  display: block;
}

/* Variante photo : cadrage identique sur les 3 cartes pour comparer d'un coup d'œil */
.compare-visual.is-photo {
  min-height: 0;
  aspect-ratio: 4 / 3;
}

.compare-visual.is-photo img {
  max-height: none;
  object-fit: cover;
}

.compare-card .compare-title {
  font-size: var(--fs-4);
  margin-bottom: 6px;
}

.compare-price {
  font-family: var(--ff-heading);
  font-size: 2.6rem;
  font-weight: var(--fw-800);
  color: var(--clr-primary);
  line-height: 1.15;
}

.compare-price span {
  font-size: var(--fs-7);
  font-weight: var(--fw-500);
  color: var(--clr-text-light);
}

.compare-price-full {
  font-size: var(--fs-7);
  color: var(--clr-text-light);
  margin-bottom: 14px;
}

/* Notation par points : lisible d'un coup d'œil, sans image */
.compare-specs {
  display: grid;
  gap: 6px;
  padding: 12px 0;
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
  margin-bottom: 14px;
}

.compare-specs li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--fs-7);
}

.compare-specs .spec-label { color: var(--clr-text-light); }

.compare-specs .spec-rate {
  color: var(--clr-primary);
  letter-spacing: 2px;
  font-size: var(--fs-6);
  flex-shrink: 0;
}

.compare-for {
  display: grid;
  gap: 6px;
  font-size: var(--fs-6);
  color: var(--clr-text-light);
  /* align-content: start pour que la liste reste collée au trait des specs :
     l'espace restant des cartes courtes tombe en bas, pas au-dessus */
  align-content: start;
}

.compare-for li {
  position: relative;
  padding-left: 16px;
  line-height: 1.5;
}

/* Puce dessinée en CSS : même repère visuel que les cartes tarifs */
.compare-for li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--clr-primary);
}

.compare-for strong { color: var(--clr-text); }


/*-----------------------------------*\
  #AIDE À LA DÉCISION
\*-----------------------------------*/

.decision-box {
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-card);
  padding: 22px 20px;
  margin-top: 8px;
}

.decision-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-heading);
  font-size: var(--fs-4);
  font-weight: var(--fw-600);
  color: var(--clr-text);
  margin-bottom: 16px;
}

.decision-title ion-icon {
  color: var(--clr-primary);
  font-size: 2.4rem;
  flex-shrink: 0;
}

.decision-list {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}

.decision-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--clr-surface);
  border-left: 3px solid var(--clr-primary);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.decision-q {
  font-family: var(--ff-heading);
  font-size: var(--fs-6);
  font-weight: var(--fw-600);
  color: var(--clr-text);
}

.decision-a {
  font-size: var(--fs-6);
  color: var(--clr-primary-dark);
  font-weight: var(--fw-500);
}

.decision-foot {
  font-size: var(--fs-6);
  color: var(--clr-text-light);
  margin-bottom: 18px;
}


/*-----------------------------------*\
  #SÉLECTEUR DE CAS (onglets du comparatif)
  Le visiteur choisit d'abord SA situation ; on ne lui montre ensuite que
  les solutions qui la concernent. Réduit le sacrifice perçu : il n'a pas
  à trier lui-même 10 prestations dont 7 ne le concernent pas.
  Utilisé par la page prothèses.
\*-----------------------------------*/

/* Consigne explicite au-dessus des onglets : le visiteur doit comprendre
   AVANT de scroller que les blocs de tarifs changent selon son choix. */
.case-switch-instruction {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  font-size: var(--fs-6);
  color: var(--clr-text);
  background: var(--clr-primary-light);
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  margin-bottom: 12px;
}

.case-switch-instruction ion-icon {
  flex-shrink: 0;
  font-size: 2rem;
  color: var(--clr-primary-dark);
}

/* Rail des onglets. Il est enveloppé pour pouvoir poser par-dessus les
   repères de défilement (dégradés latéraux + puces de position) sans qu'ils
   défilent avec le contenu. */
.case-switch-rail {
  position: relative;
}

/* Dégradés d'estompage aux deux bords : c'est le signal le plus lisible que
   « ça continue en dehors du cadre ». Ils s'effacent quand on atteint
   l'extrémité correspondante (classes posées par le script), pour ne pas
   suggérer un contenu qui n'existe plus. */
.case-switch-rail::before,
.case-switch-rail::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 12px;
  width: 40px;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.25s ease;
}

/* Le comparatif est une .section-alt : les dégradés se fondent donc dans
   --clr-accent, le fond réel de la section, et non dans du blanc. */
.case-switch-rail::before {
  left: 0;
  background: linear-gradient(to right, var(--clr-accent), transparent);
}

.case-switch-rail::after {
  right: 0;
  background: linear-gradient(to left, var(--clr-accent), transparent);
}

.case-switch-rail.at-start::before,
.case-switch-rail.at-end::after { opacity: 0; }

.case-switch {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 0 12px;
  margin-bottom: 8px;
  /* mandatory (et non proximity) : chaque geste de balayage se cale
     exactement sur un onglet, ce qui rend fiable l'auto-sélection au
     défilement — sans lui le rail peut s'arrêter entre deux onglets. */
  scroll-snap-type: x mandatory;
  /* Le 1er et le dernier onglet doivent pouvoir se centrer comme les autres :
     sans cette marge de manœuvre, ils restent collés au bord et le script ne
     peut jamais les amener au centre. */
  scroll-padding-inline: 50%;
}

.case-switch::-webkit-scrollbar { display: none; }

/* Puces de position sous le rail : elles disent d'un coup d'œil combien il y
   a de cas et où l'on se trouve. Décoratives — l'état sélectionné est déjà
   porté par aria-selected sur les onglets. */
.case-switch-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 14px;
}

.case-switch-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clr-primary);
  opacity: 0.28;
  transition: var(--transition);
}

.case-switch-dots span.is-active {
  opacity: 1;
  width: 20px;
  border-radius: var(--radius-pill);
}

.case-tab {
  flex: 0 0 auto;
  scroll-snap-align: center;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  background: var(--clr-white);
  /* Bordure épaisse + trait pointillé : lit comme un contrôle à choisir,
     pas comme une étiquette décorative. */
  border: 2px dashed var(--clr-primary);
  border-radius: var(--border-radius);
  /* Rembourrage gauche réduit : le picto arrive au ras du bord, ce qui
     raccourcit d'autant chaque onglet et en laisse un 2ᵉ visible à l'écran. */
  padding: 10px 14px 10px 10px;
  /* 48px minimum de zone tactile (directive mobile-first du PRD) */
  min-height: 48px;
  cursor: pointer;
  text-align: left;
  transition: var(--transition);
}

.case-tab-texts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.case-tab .case-tab-label {
  font-family: var(--ff-heading);
  font-size: var(--fs-6);
  font-weight: var(--fw-600);
  color: var(--clr-text);
  white-space: nowrap;
}

.case-tab .case-tab-sub {
  font-size: 1.2rem;
  color: var(--clr-text-light);
  white-space: nowrap;
}

.case-tab[aria-selected="true"] {
  background: var(--clr-primary);
  border-style: solid;
  border-color: var(--clr-primary);
  box-shadow: var(--shadow);
}

.case-tab[aria-selected="true"] .case-tab-label,
.case-tab[aria-selected="true"] .case-tab-sub { color: var(--clr-white); }

/* Les onglets non sélectionnés restent nettement lisibles comme cliquables :
   fond teinté au survol et léger soulèvement. */
.case-tab:not([aria-selected="true"]):is(:hover, :focus-visible) {
  background: var(--clr-primary-light);
  border-style: solid;
  transform: translateY(-2px);
}

/* Les panneaux non sélectionnés sont retirés du flux ET de l'arbre
   d'accessibilité via [hidden] — pas seulement masqués visuellement. */
.case-panel[hidden] { display: none; }

/* Emplacement picto de l'onglet : un schéma vaut mieux qu'une phrase pour
   se reconnaître en moins d'une seconde. Le fond reste blanc à l'état
   sélectionné, sinon un picto en couleur primaire disparaîtrait sur le
   fond primaire de l'onglet actif. */
.case-tab-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--clr-white);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.case-tab-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Les situations réelles sont illustrées par une photo/dessin ; l'onglet
   « Je ne sais pas » porte un point d'interrogation vectoriel. Comme il n'a
   pas d'<img>, il est exclu explicitement du placeholder ci-dessous. */
.case-tab-icon.is-glyph ion-icon {
  font-size: 24px;
  color: var(--clr-text-light);
}

/* Une situation réelle peut elle aussi tourner au glyphe tant qu'aucune
   illustration n'a été produite (cas « espaces entre les dents »). On la
   teinte en primaire : le gris ci-dessus est réservé à la sortie neutre
   « Je ne sais pas », qui ne doit pas se confondre avec un vrai cas. */
.case-tab:not(.is-unsure) .case-tab-icon.is-glyph ion-icon {
  color: var(--clr-primary);
}

/* Sur l'onglet actif, le fond passe en sombre : le glyphe doit suivre. */
.case-tab.is-unsure[aria-selected="true"] .case-tab-icon.is-glyph ion-icon {
  color: var(--clr-text);
}

/* Tant qu'aucune image n'est déposée, l'emplacement se signale comme un
   trou à combler plutôt que comme un carré blanc parasite. */
.case-tab-icon:not(.is-glyph):not(:has(img)) {
  background: var(--clr-primary-light);
  border: 1px dashed var(--clr-primary);
}

/* Onglet « Je ne sais pas » : neutre à dessein, il ne doit pas concurrencer
   visuellement les 3 situations réelles — c'est une sortie de secours, pas
   une 4ᵉ option de traitement. */
.case-tab.is-unsure { border-color: var(--clr-text-light); }

.case-tab.is-unsure[aria-selected="true"] {
  background: var(--clr-text);
  border-color: var(--clr-text);
}

.case-tab.is-unsure:not([aria-selected="true"]):is(:hover, :focus-visible) {
  background: var(--clr-surface);
}


/* Explication en langage courant, posée juste avant les puces techniques :
   le visiteur doit pouvoir se représenter le geste (« on coiffe la dent »,
   « un pont au-dessus du trou ») avant qu'on lui liste des caractéristiques
   qui ne lui parlent pas.
   Pas de filet ici : .compare-specs en pose déjà un juste au-dessus, deux
   traits rapprochés hacheraient la carte. */
.compare-explain {
  font-size: var(--fs-7);
  line-height: 1.55;
  color: var(--clr-text-light);
  margin-bottom: 12px;
}

/* Délai de réalisation par solution. Argument de réassurance majeur en
   acquisition payante : il doit se lire avant les caractéristiques. */
.compare-delay {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  max-width: 100%;
  background: var(--clr-primary-light);
  color: var(--clr-primary-dark);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  font-size: 1.2rem;
  font-weight: var(--fw-500);
  line-height: 1.3;
  margin-bottom: 14px;
}

.compare-delay ion-icon {
  flex-shrink: 0;
  font-size: 1.5rem;
}

/* La ligne de prix détaillée cède sa marge à la pastille de délai */
.compare-price-full:has(+ .compare-delay) { margin-bottom: 8px; }


/*-----------------------------------*\
  #CTA DE CAS
  Le visiteur vient de se reconnaître dans une situation et de voir le
  prix : c'est le point d'engagement le plus haut de la page. Il doit
  trouver le bouton là, sans remonter ni scroller jusqu'au bloc RDV.
\*-----------------------------------*/

.case-cta {
  margin-top: 18px;
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-card);
  padding: 18px 16px;
  text-align: center;
}

.case-cta-text {
  font-size: var(--fs-6);
  color: var(--clr-text-light);
  margin-bottom: 14px;
}

.case-cta-text strong { color: var(--clr-text); }

.case-cta .btn-group { justify-content: center; }

/* Bouton WhatsApp : même poids visuel que le bouton d'appel du hero, dans
   le vert reconnaissable de l'application. */
.btn-wa {
  background: #25d366;
  color: #06331a;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
}

.btn-wa:is(:hover, :focus-visible) {
  background: #1eb855;
  color: #06331a;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.28);
}


/*-----------------------------------*\
  #PANNEAU « JE NE SAIS PAS »
  Sortie rapide : le visiteur qui n'arrive pas à se ranger dans une des
  3 situations doit trouver une réponse ici, pas retourner sur Google.
\*-----------------------------------*/

.unsure-box {
  background: var(--clr-white);
  border: 2px dashed var(--clr-primary);
  border-radius: var(--border-radius);
  padding: 24px 18px;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 14px;
}

/* Emplacement illustration — voir le commentaire correspondant en HTML */
.unsure-visual {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--clr-surface);
}

.unsure-visual:not(:has(img)) {
  background: var(--clr-primary-light);
  border: 1px dashed var(--clr-primary);
}

.unsure-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.unsure-title {
  font-family: var(--ff-heading);
  font-size: var(--fs-3);
  font-weight: var(--fw-600);
  line-height: 1.3;
  color: var(--clr-text);
}

.unsure-text {
  font-size: var(--fs-6);
  color: var(--clr-text-light);
  max-width: 62ch;
}

.unsure-list {
  display: grid;
  gap: 10px;
  text-align: left;
  max-width: 52ch;
}

.unsure-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--fs-6);
  color: var(--clr-text-light);
}

.unsure-list ion-icon {
  flex-shrink: 0;
  font-size: 2rem;
  color: var(--clr-success);
}

.unsure-list strong { color: var(--clr-text); }

.unsure-box .btn-group { width: 100%; max-width: 440px; }


/*-----------------------------------*\
  #TABLETTE — min-width: 768px (comparatif)
\*-----------------------------------*/

@media (min-width: 768px) {

  .visibility-scale { padding: 20px 32px 16px; }

  .visibility-scale-title { font-size: var(--fs-6); }

  .visibility-step { font-size: var(--fs-7); }

  /* Les 3 formules doivent se comparer d'un coup d'œil : à partir de la
     tablette on sort du carrousel pour une grille, sinon la 3ᵉ carte reste
     hors écran. Le défilement horizontal et le snap n'ont plus lieu d'être. */
  .compare-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    overflow-x: visible;
    scroll-snap-type: none;
    scroll-padding-inline: 0;
    /* annule le débord latéral du carrousel mobile (.has-scrollbar) */
    margin-inline: 0;
    padding-inline: 0;
    padding-bottom: 0;
  }

  .compare-list .scrollbar-item { min-width: 0; }

  /* Le hint de défilement ne concerne plus que le mobile */
  .compare-hint { display: none; }

  .decision-box { padding: 32px; }

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

  /* Comparatifs à 4 solutions (page prothèses) : 2 colonnes en tablette,
     sinon les cartes deviennent illisibles. Passage à 4 colonnes en desktop. */
  .compare-list.is-4up { grid-template-columns: repeat(2, 1fr); }

  /* Les onglets tiennent sur une ligne : plus de défilement horizontal,
     donc plus besoin du repère de balayage. */
  .case-switch {
    overflow-x: visible;
    justify-content: center;
    flex-wrap: wrap;
    scroll-snap-type: none;
  }

  /* Tous les repères de défilement (estompage des bords, puces de position)
     n'ont plus d'objet sans rail à balayer. */
  .case-switch-rail::before,
  .case-switch-rail::after { content: none; }

  .case-switch-dots { display: none; }

  .case-tab { align-items: center; text-align: center; }

  .case-tab-texts { align-items: flex-start; }

  .case-tab-icon { width: 44px; height: 44px; }

  .case-cta { padding: 24px 28px; }

  .unsure-box { padding: 36px 32px; }

}


/*-----------------------------------*\
  #DESKTOP — min-width: 1024px (comparatif)
\*-----------------------------------*/

@media (min-width: 1024px) {

  .compare-list.is-4up { grid-template-columns: repeat(4, 1fr); }

}


/*-----------------------------------*\
  #HEADBAR DESKTOP — anti-retour à la ligne
  Les pages dédiées ont jusqu'à 7 entrées de nav : à 1024-1279px le
  conteneur (960px) est partagé avec le logo et le CTA, ce qui faisait
  passer certains libellés sur 2 lignes.
  ⚠️ min-width uniquement : le menu mobile (colonne, 48px de cible
  tactile) n'est pas affecté.
\*-----------------------------------*/

@media (min-width: 1024px) {

  /* Le header ne se met jamais sur 2 lignes */
  .header-bottom .container { flex-wrap: nowrap; }

  /* Le nav absorbe la contrainte, logo et CTA gardent leur intégrité */
  .header-bottom .navbar { flex-shrink: 1; min-width: 0; }
  .header-bottom .logo { flex-shrink: 0; }

  .navbar-list {
    flex-wrap: nowrap;
    gap: 0;
  }

  .navbar-list > li { flex-shrink: 0; }

  /* La règle clé : aucun libellé ne se coupe sur 2 lignes */
  .navbar-link {
    white-space: nowrap;
    padding: 8px 9px;
  }

  /* Le CTA doublonne l'entrée "Prendre RDV" (masquée en desktop) :
     on récupère son padding surdimensionné dans la zone contrainte,
     sans descendre sous les 44px de hauteur de cible. */
  .header-cta {
    flex-shrink: 0;
    padding: 12px 16px;
    white-space: nowrap;
  }

}

/* Attention : le conteneur reste à 960px jusqu'à 1280px. Entre 1024 et
   1279px la largeur disponible ne change donc pas — relâcher la
   compression ici ferait réapparaître le retour à la ligne. On garde le
   palier serré sur toute la plage. */

/* À 1280px style.css repasse le nav en 8px/16px + fs-5 (1.6rem). Sur les
   pages à 6 entrées visibles, le conteneur (1180px) ne l'absorbe pas
   encore : on maintient le palier intermédiaire jusqu'à 1400px, au-delà
   duquel la règle d'origine reprend la main sans surcharge de notre part. */
@media (min-width: 1280px) and (max-width: 1399px) {

  .navbar-link { padding: 8px 12px; font-size: var(--fs-6); }

}

@media (min-width: 1400px) {

  .header-cta { padding: 12px 24px; }

}