/* ═══════════════════════════════════════════════════════════════
   lifting.css — complément à style.css, copiée octet pour octet
   depuis germain-esthetique.com.

   Ne contient QUE ce que la feuille de référence ne couvre pas :
   les règles que le site de référence porte en CSS de page, et les
   composants propres aux gabarits du site lifting (pages de contenu
   long, fiches technique, pages vidéo).

   Aucune valeur n'est inventée : couleurs, rayons, durées et
   graisses sont pris dans les variables et les motifs de style.css.
   ═══════════════════════════════════════════════════════════════ */

/* ── Bandeau ───────────────────────────────────────────────────
   Le #hero de la référence fait 100vh : juste pour une page
   d'accueil, beaucoup trop haut pour une page de contenu, où il
   repousserait le texte sous la ligne de flottaison. Les pages
   intérieures reçoivent donc un bandeau court.
   La règle reprend le calcul de letter-spacing du titre de
   référence : « -0.01em » se recalcule sur la taille de police de
   l'élément qui le porte, l'écrire en em élargirait l'italique. */
/* ⚠️ Spécificité : #hero vaut (1,0,0), .hero-page (0,1,0) — la classe seule
   perdait contre « height: 100vh » et le bandeau gardait un écran entier.
   On qualifie donc par l'identifiant. */
#hero.hero-page              { height: auto; min-height: 0; padding-bottom: clamp(3rem, 6vh, 5rem); }
#hero.hero-page .hero-content{ padding-top: clamp(9rem, 16vh, 11rem); }
#hero.hero-page .hero-title-text {
  max-width: 22ch;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  letter-spacing: calc(-0.01 * clamp(2.2rem, 4.6vw, 3.6rem));
  margin: 0 0 1.2rem;
}
#hero.hero-page .hero-sub    { max-width: 60ch; }

/* ── Sous-entrées du menu mobile ───────────────────────────────
   Le menu de référence porte ces retraits en style en ligne ;
   on les sort dans la feuille pour ne pas les répéter 17 fois. */
.mobile-menu .mobile-sub {
  font-size: 0.75rem;
  padding-left: 1.5rem;
  color: rgba(255, 255, 255, 0.6);
}
.mobile-menu #mobileClose {
  position: absolute; top: 2rem; right: 2rem;
  background: none; border: none;
  color: var(--cream); font-size: 2rem; cursor: pointer;
}

/* ── Renvoi vers les avis Google ───────────────────────────────
   Le site existant affiche ici un widget tiers (Trustindex) qui ne
   survit pas au passage en statique : on renvoie à la source. */
.avis-placeholder {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem;
  max-width: 60ch;
}
.avis-placeholder p { color: var(--text-muted); line-height: 1.8; margin: 0; }

/* ── Grille des cartes : la case orpheline ─────────────────────
   La grille de référence est fixée à 2 colonnes. Avec un nombre
   impair de cartes, la dernière laisserait une case vide qui
   révèle le fond de la grille : on la fait courir sur la largeur.
   La règle ne s'active que si le compte est impair. */
.services-grid .service-card:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ── Photo en tête de carte ────────────────────────────────────
   Le débord négatif annule exactement le padding: 3rem de la carte.
   aspect-ratio calé sur les visuels réels (800×356). */
.services-grid .service-photo {
  margin: -3rem -3rem 2rem;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: var(--bg-3);
}
.services-grid .service-photo img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.services-grid .service-card:hover .service-photo img { transform: scale(1.04); }

/* ── Chapeau de section ───────────────────────────────────────
   Aligné à gauche : l'en-tête de référence n'est pas centré. */
.section-intro {
  max-width: 44ch;
  margin: 1.1rem 0 0;
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.7;
}

/* ── Formulaire de contact ─────────────────────────────────────
   ⚠️ RIEN ICI. La feuille de référence style déjà .form-group input
   et impose font-size:16px sous 900 px — seuil en dessous duquel
   Safari iOS zoome automatiquement à la mise au point d'un champ.
   Les règles .contact-form input que j'avais posées ici (0.9rem)
   avaient la même spécificité (0,1,1) mais étaient chargées APRÈS :
   elles gagnaient, et réintroduisaient le zoom. Utiliser le motif
   .form-row / .form-group de la référence, sans rien redéfinir. */

@media (prefers-reduced-motion: reduce) {
  .services-grid .service-photo img { transition: none; }
  .services-grid .service-card:hover .service-photo img { transform: none; }
}

@media (max-width: 900px) {
  #hero.hero-page .hero-content { padding-top: clamp(7rem, 14vh, 9rem); }
}

/* ── Sommaire de page ─────────────────────────────────────────
   .toc-box n'est PAS dans style.css : la référence la porte en CSS
   de page. Règles reprises telles quelles.
   ⚠️ `.toc-box ol li a` est indispensable : style.css documente que
   sa règle générique `main a` (spécificité 0,0,2) est faite pour
   PERDRE contre ce sélecteur. Sans lui, les entrées du sommaire
   prennent l'apparence de liens de contenu, soulignés et dorés. */
.toc-box {
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  padding: 2rem 2.25rem;
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}
.toc-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.1rem;
}
.toc-box ol { margin: 0; padding-left: 1.25rem; }
.toc-box ol li { font-size: 0.85rem; color: var(--text-muted); line-height: 1.8; margin-bottom: 0.3rem; }
.toc-box ol li a { color: var(--text-muted); text-decoration: none; transition: color 0.2s; }
.toc-box ol li a:hover,
.toc-box ol li a:focus-visible { color: var(--gold); }

/* ── Grille de section sans visuel ────────────────────────────
   .service-detail-grid est une grille à deux colonnes. Quand la
   section n'a pas d'image, on repasse en une colonne et on borne
   la mesure : une ligne de texte qui court sur 1400 px est
   illisible, quelle que soit la beauté de la typographie. */
.service-detail-grid.single { display: block; }
.service-detail-grid.single > div { max-width: 68ch; }
.service-detail-grid.single h2 { text-wrap: balance; }

/* Listes à l'intérieur des sections de contenu */
.service-detail-section ul,
.service-detail-section ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.service-detail-section li {
  color: var(--text-muted);
  font-size: 0.88rem; line-height: 1.9;
  margin-bottom: 0.4rem;
}
.service-detail-section h3 {
  margin: 1.5rem 0 0.75rem;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
}

/* ── Témoignages Google ───────────────────────────────────────
   Le site existant les affiche via un widget tiers ; en statique
   on les repose un par un. Trois colonnes au large, une sur mobile. */
.avis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
}
.avis-card {
  display: flex; flex-direction: column; gap: 1.1rem;
  margin: 0; padding: 2rem;
  background: var(--bg);
}
.avis-card blockquote {
  margin: 0;
  font-size: 0.86rem; line-height: 1.85;
  color: var(--text-muted);
  /* Un avis peut faire vingt lignes : on borne la hauteur et on
     laisse défiler dans la carte plutôt que casser la grille. */
  max-height: 16rem; overflow-y: auto;
}
.avis-card figcaption { display: flex; flex-direction: column; gap: 0.2rem; }
.avis-card .author-name { font-weight: 600; color: var(--text); font-size: 0.82rem; }
.avis-card .author-proc {
  font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold);
}

/* ── Paragraphes des sections de contenu ──────────────────────
   La référence pose ces valeurs en style en ligne sur chaque <p>.
   On les sort dans la feuille : mêmes valeurs, appliquées une fois
   au lieu d'être répétées des centaines de fois dans le HTML. */
.service-detail-grid p {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.9;
  margin: 0 0 1rem;
}
.service-detail-grid p:last-child { margin-bottom: 0; }

/* ── Titres de section ────────────────────────────────────────
   Le h2 global monte à clamp(2rem, 4vw, 3.5rem). La référence
   l'assume parce que ses titres font trois ou quatre mots. Ici,
   les intitulés viennent du site existant et font jusqu'à douze
   mots : à cette taille ils occupent quatre lignes et écrasent le
   texte qu'ils annoncent. On les ramène d'un cran, sans toucher
   au h2 de la référence ailleurs. */
.service-detail-section h2 {
  font-size: clamp(1.7rem, 3.1vw, 2.5rem);
  text-wrap: balance;
}

/* ── Zone sûre de la barre de navigation ──────────────────────
   🔴 La feuille de référence cible « .navbar » pour ses env(safe-area-inset-*),
   mais l'élément est « #navbar » : la règle ne matche rien, ni ici ni sur le
   site de référence. En paysage sur iPhone, le menu colle donc à l'encoche.
   Corrigé ici sans toucher à la feuille copiée. */
@media (max-width: 900px) {
  #navbar {
    padding-left: max(1.25rem, env(safe-area-inset-left));
    padding-right: max(1.25rem, env(safe-area-inset-right));
  }
}

/* ── Questions de FAQ ─────────────────────────────────────────
   🔴 La feuille de référence style « .faq-question h4 ». Le générateur émet
   un <h3> — indispensable pour que l'ordre des titres reste h2 → h3 sous le
   h2 de la section. Résultat mesuré avant correction : Cormorant 32 px au
   lieu de Montserrat 14 px, soit des questions 2,3× trop grosses et en serif.
   Mêmes déclarations, appliquées au bon élément. */
.faq-question h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--cream);
  line-height: 1.5;
}

/* ── La question est un bouton ────────────────────────────────
   main.js n'écoute que « click » : un <div> n'est pas atteignable au clavier
   et ne déclenche rien sur Entrée. On émet donc un <button>, remis à plat
   pour qu'il reste visuellement identique à la référence. */
button.faq-question {
  width: 100%;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  color: inherit;
}

/* ── Coordonnées du cabinet ───────────────────────────────────
   Même cas que les questions de FAQ : la feuille de référence style
   « .contact-info-item h4 », mais un h4 sous un h2 saute le niveau h3.
   On émet un h3 et on lui applique les mêmes déclarations. */
.contact-info-item h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.35rem;
}

/* ═══════════════════════════════════════════════════════════════
   GABARIT D'ARTICLE — porté depuis le CSS de page de la référence
   germain-esthetique.com/blog/cicatrices-abdominoplastie-evolution-soins-marseille/

   ⚠️ Ces règles n'existent PAS dans style.css : sur le site de référence,
   55 pages sur 122 portent leur mise en page en CSS de page, pour 245 Ko.
   Copier style.css seul reproduit le socle, pas les gabarits de contenu.
   Valeurs reprises telles quelles, aucune invention.
   ═══════════════════════════════════════════════════════════════ */
.blog-hero {
  background: var(--bg-2);
  padding: clamp(7rem,14vh,11rem) clamp(1.5rem,5vw,6rem) 0;
}
.blog-hero-inner {
  max-width: 860px;
  margin: 0 auto;
  padding-bottom: 3rem;
}
.blog-breadcrumb {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.blog-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.blog-breadcrumb a:hover { color: var(--gold); }
.blog-category {
  display: inline-block;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.35rem 0.8rem;
  background: rgba(139,98,0,0.1);
  border: 1px solid rgba(139,98,0,0.25);
  color: var(--gold);
  margin-bottom: 1.25rem;
}
.blog-hero-title {
  font-family: 'Cormorant', serif;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 600;
  color: var(--cream);
  line-height: 1.25;
  margin: 0 0 1.5rem;
}
.blog-hero-title em { color: var(--gold); font-style: italic; }
.blog-meta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1rem 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 0;
}
.blog-meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.76rem;
  color: var(--text-muted);
}
.blog-meta-item svg { color: var(--gold); flex-shrink: 0; }
.blog-cover {
  max-width: 860px;
  margin: 0 auto;
  overflow: hidden;
}
.blog-cover img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
  display: block;
}
.blog-body {
  max-width: 860px;
  margin: 0 auto;
  padding: 3.5rem clamp(1.5rem,5vw,6rem) 5rem;
}
.blog-body p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.95;
  margin-bottom: 1.4rem;
}
.blog-body h2 {
  font-family: 'Cormorant', serif;
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--cream);
  margin: 3rem 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border-subtle);
}
.blog-body h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--cream);
  margin: 2rem 0 0.75rem;
  letter-spacing: 0.03em;
}
.blog-body strong { color: var(--cream); font-weight: 600; }
.blog-body ul, .blog-body ol {
  margin: 0.5rem 0 1.5rem 1.5rem;
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.9;
}
.blog-body li { margin-bottom: 0.4rem; }
.blog-callout {
  background: var(--bg-2);
  border-left: 3px solid var(--gold);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
  border-radius: 0 4px 4px 0;
}
.blog-callout p {
  margin: 0;
  font-size: 0.88rem;
  font-style: italic;
  color: var(--text-muted);
}
.blog-callout strong { color: var(--gold); font-style: normal; }
.blog-author-box {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  padding: 1.75rem;
  margin: 3rem 0 0;
}
.blog-author-box img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--gold);
}
.blog-author-info { flex: 1; }
.blog-author-info strong {
  display: block;
  font-size: 0.85rem;
  color: var(--cream);
  margin-bottom: 0.3rem;
}
.blog-author-info span {
  display: block;
  font-size: 0.72rem;
  color: var(--gold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.blog-author-info p {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
}
/* CTA Block */
.blog-cta-block {
  background: var(--bg-2);
  border: 1px solid var(--border);
  padding: clamp(2rem,4vw,3.5rem) clamp(1.5rem,5vw,6rem);
  text-align: center;
  margin: 0;
}
.blog-cta-block .label { margin-bottom: 1rem; display: block; }
.blog-cta-block h2 {
  font-family: 'Cormorant', serif;
  font-size: clamp(1.6rem,3vw,2.2rem);
  color: var(--cream);
  margin: 0.5rem 0 1rem;
}
.blog-cta-block p {
  font-size: 0.88rem;
  color: var(--text-muted);
  max-width: 540px;
  margin: 0 auto 2rem;
  line-height: 1.8;
}
.blog-cta-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
/* Back to blog */
.blog-back {
  padding: 2rem clamp(1.5rem,5vw,6rem);
  max-width: 860px;
  margin: 0 auto;
}
.blog-back a {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: 0.05em;
}
.blog-back a:hover { color: var(--gold); }
@media(max-width:600px) {
  .blog-author-box { flex-direction: column; }
}

/* ── Adresse protégée ─────────────────────────────────────────
   Le lien est assemblé au chargement pour que l'adresse du cabinet
   n'apparaisse jamais en clair dans le HTML servi. Il doit ressembler
   à un lien de contenu, comme celui qu'il remplace. */
.mail-protege { color: var(--or-lien); }