/* ══ Ajustements propres aux pages autonomes (fiches en .html) ══
   Le reste du style provient de styles.css, identique au site. */

html, body { cursor: auto; }

/* La fiche est la page : elle est visible d'emblée */
#detail,
  #levres,
  #eyeliner,
  #sourcils {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
}

/* Le bouton « Retour à l'accueil » est un lien : on garde son allure */
a.home-btn { display: inline-flex; text-decoration: none; }

/* Lien retour en haut de la colonne de texte */
#detail a.back-btn { text-decoration: none; cursor: pointer; }

/* Petit lien de navigation vers les autres soins, en bas de fiche */
.fiche-links {
  margin-top: 2.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(196, 144, 126, .3);
}
.fiche-links-title {
  font-size: .62rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--deep); margin-bottom: .9rem;
}
.fiche-links a {
  display: inline-block;
  margin: 0 .9rem .5rem 0;
  font-size: .78rem;
  color: var(--taupe);
  text-decoration: none;
  border-bottom: 1px solid rgba(196, 144, 126, .45);
  transition: color .3s, border-color .3s;
}
.fiche-links a:hover { color: var(--deep); border-color: var(--deep); }

.fiche-contact {
  margin-top: 2rem;
  font-size: .78rem; line-height: 1.9; color: var(--taupe);
}
.fiche-contact strong { color: var(--dark); font-weight: 500; }
.fiche-contact a { color: inherit; }

@media (max-width: 720px) {
  .fiche-links { margin-top: 2rem; }
}


/* ══════════════════════════════════════════════════════════
   RESPONSIVE — CORRECTIF MOBILE / TABLETTE
   Ajouté le 28/07/2026, étendu à la fiche Sourcils.
   Objectif : sur petit écran, la fiche redevient une page qui
   défile normalement, au lieu d'un écran figé au format du
   viewport dans lequel le contenu se retrouve coupé.
   Ce bloc ne s'applique QU'AUX FICHES (fiche.css n'est pas
   chargé par l'index) et uniquement en dessous de 900px.
   ══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {

  /* 1 — Le document reprend la main sur le défilement.
        styles.css impose html,body{height:100%;overflow:hidden}
        pour l'accueil : sur une fiche, c'est ce qui empêche
        d'atteindre le bas du texte. */
  html, body {
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-text-size-adjust: 100%;
  }

  /* 2 — La fiche sort du mode « écran fixe » et s'empile
        naturellement : visuel, puis texte. */
  body.subpage #levres,
  body.subpage #eyeliner,
  body.subpage #sourcils,
  #levres.page,
  #eyeliner.page,
  #sourcils.page {
    position: static !important;
    inset: auto !important;
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
    opacity: 1 !important;
    max-width: 100%;
  }

  #levres .l-visual,
  #eyeliner .l-visual,
  #sourcils .l-visual,
  #levres .l-content,
  #eyeliner .l-content,
  #sourcils .l-content {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    width: 100%;
  }

  /* 3 — Le titre ne « colle » plus par-dessus les photos :
        il forme un bandeau propre au-dessus du visuel.
        Le décalage du haut laisse la place au bouton Retour. */
  #levres .l-visual-title,
  #eyeliner .l-visual-title,
  #sourcils .l-visual-title {
    position: static !important;
    padding: 5.2rem 1.4rem 2.2rem !important;
  }
  #levres .l-visual-name,
  #eyeliner .l-visual-name,
  #sourcils .l-visual-name { font-size: 1.6rem !important; }

  /* 4 — Photos : toujours entières, jamais déformées,
        jamais plus hautes qu'un écran. */
  #levres .l-shot,
  #eyeliner .l-shot,
  #sourcils .l-shot { width: 100%; }
  #levres .l-shot img,
  #eyeliner .l-shot img,
  #sourcils .l-shot img {
    width: 100% !important;
    height: auto !important;
    max-height: 82vh;
    object-fit: contain;
    object-position: center;
  }

  /* 4 bis — La paire côte à côte se remet l'une sous l'autre. */
  #sourcils .l-pair { grid-template-columns: 1fr !important; }
  #sourcils .l-pair .l-shot img { aspect-ratio: auto !important; }

  /* 5 — Légendes lisibles (elles étaient à ~9px). */
  #levres .l-shot-cap,
  #eyeliner .l-shot-cap,
  #sourcils .l-shot-cap {
    font-size: .68rem !important;
    letter-spacing: .14em !important;
    padding: 2.2rem 1.1rem .8rem !important;
  }

  /* 6 — Texte : tailles remontées pour la lecture au doigt. */
  #levres .l-intro,
  #eyeliner .l-intro,
  #sourcils .l-intro { padding: 2.6rem 1.4rem 0 !important; }
  #levres section,
  #eyeliner section,
  #sourcils section { padding: 2.4rem 1.4rem !important; }
  #levres .eyebrow,
  #eyeliner .eyebrow,
  #sourcils .eyebrow { font-size: .7rem !important; letter-spacing: .26em !important; }
  #levres .lede,
  #eyeliner .lede,
  #sourcils .lede { font-size: 1rem !important; line-height: 1.85 !important; max-width: none !important; }
  #levres .prose p,
  #eyeliner .prose p,
  #sourcils .prose p { font-size: .98rem !important; line-height: 1.85 !important; }
  #levres .sec-sub,
  #eyeliner .sec-sub,
  #sourcils .sec-sub { font-size: .85rem !important; margin-bottom: 1.8rem !important; }

  /* Étapes du déroulé */
  #sourcils .step-t { font-size: .82rem !important; }
  #sourcils .step-d { font-size: .95rem !important; line-height: 1.85 !important; }

  /* Tarifs : le prix passe à la ligne au lieu d'écraser le libellé. */
  #levres .price-row,
  #eyeliner .price-row,
  #sourcils .price-row {
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    font-size: .95rem !important;
  }
  #levres .price-val,
  #eyeliner .price-val,
  #sourcils .price-val { font-size: 1.2rem !important; }
  #levres .price-note,
  #eyeliner .price-note,
  #sourcils .price-note { font-size: .78rem !important; }

  #levres .fiche-links,
  #eyeliner .fiche-links,
  #sourcils .fiche-links { padding: 0 1.4rem; }
  #levres .fiche-links a,
  #eyeliner .fiche-links a,
  #sourcils .fiche-links a { font-size: .85rem !important; line-height: 2.2; }

  /* 7 — Bas de page dégagé de la barre d'outils du navigateur. */
  #levres footer,
  #eyeliner footer,
  #sourcils footer {
    padding: 2rem 1.4rem calc(2.5rem + env(safe-area-inset-bottom, 0px)) !important;
    font-size: .8rem !important;
  }
}

/* Très petits écrans : on resserre encore un peu les marges. */
@media (max-width: 400px) {
  #levres .l-visual-title,
  #eyeliner .l-visual-title,
  #sourcils .l-visual-title { padding: 4.8rem 1.1rem 1.8rem !important; }
  #levres .l-intro,
  #eyeliner .l-intro,
  #sourcils .l-intro { padding: 2.2rem 1.1rem 0 !important; }
  #levres section,
  #eyeliner section,
  #sourcils section { padding: 2rem 1.1rem !important; }
  #levres .l-visual-name,
  #eyeliner .l-visual-name,
  #sourcils .l-visual-name { font-size: 1.4rem !important; }
}