/* Vitrine Aloe Ferox — registre éditorial (site de présentation).
   Palette : charte de l'application (assets/theme.js).
   Titres en Lora (serif), texte en Inter : appariement « wellness » — le serif
   pose le ton d'une brochure de soin, pas d'une boutique. */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; }

.wrap { max-width: 74rem; margin: 0 auto; padding: 0 1.5rem; }
.display { font-family: Lora, Georgia, serif; font-weight: 500; letter-spacing: -.01em; }

/* Intertitre discret au-dessus des grands titres. */
.surtitre { font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #52B788; }
.section-titre { font-family: Lora, Georgia, serif; font-weight: 500; font-size: 1.9rem;
                 line-height: 1.2; color: #1B4332; letter-spacing: -.01em; }
@media (min-width: 768px) { .section-titre { font-size: 2.4rem; } }
.sous-titre { font-family: Lora, Georgia, serif; font-size: 1.05rem; font-weight: 600; color: #1B4332; }
.plomb { font-size: 1.05rem; line-height: 1.75; color: #334155; }

/* ---------- Barre de navigation ---------- */
.nav { position: sticky; top: 0; z-index: 40; background: #1B4332; color: #fff; }
.nav-in { display: flex; align-items: center; gap: 1.5rem; height: 4.5rem; }
.nav a.lien { font-size: .9rem; font-weight: 500; color: #D8EFE2; }
.nav a.lien:hover, .nav a.lien[aria-current="page"] { color: #fff; text-decoration: underline; text-underline-offset: 6px; }
.nav img { height: 2.4rem; width: 2.4rem; border-radius: 999px; background: #fff; object-fit: contain; padding: .25rem; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem;
       padding: 0 1.4rem; border-radius: 999px; font-size: .9rem; font-weight: 600; white-space: nowrap;
       border: 1px solid transparent; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.btn-primary { background: #1B4332; color: #fff; }
.btn-primary:hover { background: #2D6A4F; }
.btn-accent { background: #95D5B2; color: #08281B; }
.btn-accent:hover { background: #B7E4C7; }
.btn-ghost { background: transparent; color: #1B4332; border-color: #C9DBD1; }
.btn-ghost:hover { background: #EDF7F1; }
.btn-clair { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn-clair:hover { background: rgba(255,255,255,.14); }
.btn:focus-visible, a:focus-visible { outline: 2px solid #52B788; outline-offset: 3px; }

/* ---------- Fiches produit (présentation, pas mise en vente) ----------
   Pas de code article ni de prix sur la vignette : un visuel, un nom, une
   phrase. Le détail se lit sur la fiche. */
.grille { display: grid; gap: 2.5rem 1.75rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.fiche { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.fiche .visuel { border-radius: 4px; transition: transform .35s ease, box-shadow .35s ease; }
.fiche:hover .visuel { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(16,24,40,.10); }
.fiche .titre { margin-top: 1rem; font-family: Lora, Georgia, serif; font-size: 1.12rem; font-weight: 500; color: #143327; }
.fiche .desc { margin-top: .35rem; font-size: .86rem; line-height: 1.6; color: #64748B;
               display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fiche .lire { margin-top: .6rem; font-size: .78rem; font-weight: 600; letter-spacing: .06em;
               text-transform: uppercase; color: #2D6A4F; }
.fiche:hover .lire { text-decoration: underline; text-underline-offset: 4px; }
.fiche:focus-visible { outline: 2px solid #52B788; outline-offset: 6px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .fiche:hover .visuel { transform: none; } }

/* Visuel : la photo recouvre le monogramme ; sans photo, le monogramme reste. */
.visuel { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; overflow: hidden;
          background: linear-gradient(160deg, #EDF7F1 0%, #D8EFE2 100%); color: #2D6A4F; }
.visuel .mono { font-family: Lora, Georgia, serif; font-size: 2.4rem; font-weight: 500; letter-spacing: .06em; opacity: .55; }
.visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.visuel-grand { aspect-ratio: 4 / 5; border-radius: 6px; }
.visuel-grand .mono { font-size: 4.5rem; }

/* ---------- Étiquettes et prix ---------- */
.etiq { display: inline-flex; align-items: center; padding: .2rem .7rem; border-radius: 999px;
        font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.etiq-produit { background: #EDF7F1; color: #1B4332; }
.etiq-article { background: #FEF0C7; color: #93370D; }
.prix { font-family: "Roboto Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums;
        font-weight: 600; color: #1B4332; }

/* ---------- Recherche du catalogue ---------- */
.champ { height: 2.9rem; padding: 0 1rem; border: 1px solid #DDE3E0; border-radius: 999px;
         background: #fff; font-size: .9rem; color: #0F172A; }
.champ:focus { outline: none; border-color: #52B788; box-shadow: 0 0 0 3px rgba(82,183,136,.18); }
/* Filtre de nature : des liens, pas une liste déroulante de boutique. */
.onglet { padding: .45rem 1rem; border-radius: 999px; font-size: .85rem; font-weight: 600;
          color: #334155; cursor: pointer; border: 1px solid transparent; background: none; }
.onglet:hover { background: #EDF7F1; }
.onglet[aria-pressed="true"] { background: #1B4332; color: #fff; }

/* ---------- Bandeau d'accueil ----------
   Le canevas est décoratif : aucun clic, et figé si l'utilisateur demande
   moins de mouvement (voir reseau.js). */
.hero { position: relative; overflow: hidden; }
.hero > .wrap { position: relative; z-index: 1; }
#reseau { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- Filets et respiration ---------- */
.filet { height: 1px; background: linear-gradient(90deg, #C9DBD1, transparent); }

/* Bouton WhatsApp : vert de la marque WhatsApp, reconnaissable d'un coup d'œil,
   sans concurrencer le vert de la clinique (réservé à l'action principale). */
.btn-wa{background:#25D366;color:#08281B;border-color:#25D366}
.btn-wa:hover{background:#1FBA57}
.btn-wa svg{flex:none}