/* =========================================================================
   Docteur Daniel Jean — Ophtalmologue à Arlon (BE)
   Direction artistique : ÉCHELLE D'ACUITÉ — praticien chaleureux, lisibilité AAA
   -------------------------------------------------------------------------
   Le site d'un ophtalmologue doit d'abord être LISIBLE, y compris par des
   patients qui voient mal : c'est le style « Accessible & Ethical » retourné
   par ui-ux-pro-max, pris au sérieux plutôt qu'en habillage.
   → corps à 1.15rem, contrastes AAA, focus très visibles, cibles généreuses.
   - Archétype  : portrait de praticien chaleureux (one-page à ancres)
   - Palette    : encre + cerise (le cerisier en fleurs du vrai portrait)
   - Fonts      : Petrona (display) / Quicksand (texte, rond et amical)
   - SIGNATURE  : ÉCHELLE DE SNELLEN — barres décroissantes (optotypes) en
                  filet des intitulés, et « tableau d'acuité » dans le hero.
   Anti-footprint : AUCUNE classe CSS custom. On ne cible que des classes
   Bootstrap natives, des ids sémantiques et des pseudo-éléments.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Petrona:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600&family=Quicksand:wght@400;500;600;700&display=swap');

:root {
  /* --- Palette --------------------------------------------------------- */
  --bs-primary: #15181b;        /* encre — contraste AAA sur le lin */
  --bs-primary-rgb: 21, 24, 27;
  --bs-secondary: #c2264e;      /* cerise — le cerisier du portrait */
  --bs-secondary-rgb: 194, 38, 78;

  --bs-body-bg: #f7f5f1;        /* lin */
  --bs-body-color: #22262a;     /* AAA sur lin (ratio ~14:1) */
  --bs-emphasis-color: #15181b;
  --bs-border-color: #ddd7cd;

  --bs-body-font-family: 'Quicksand', system-ui, sans-serif;
  /* Lisibilité : on part de 1.15rem, pas de 1rem. */
  --bs-body-font-size: 1.15rem;
  --bs-body-line-height: 1.7;

  --bs-link-color: #a81f43;     /* cerise assombri → AAA sur lin */
  --bs-link-color-rgb: 168, 31, 67;
  --bs-link-hover-color: #15181b;

  /* Teintes de travail */
  --lin: #f7f5f1;
  --lin-2: #fffdfa;
  --encre: #15181b;
  --encre-2: #22262a;
  --encre-soft: #5c646b;
  --cerise: #c2264e;
  --cerise-dark: #a81f43;
  --cerise-soft: #fbeef2;

  --lift-1: 0 1px 2px rgba(21, 24, 27, .06), 0 10px 24px -14px rgba(21, 24, 27, .28);
  --lift-2: 0 2px 5px rgba(21, 24, 27, .09), 0 22px 44px -22px rgba(21, 24, 27, .38);

  /* ---------------------------------------------------------------------- */
  /*  SIGNATURE : l'ÉCHELLE DE SNELLEN                                       */
  /*  4 barres de hauteur décroissante = le tableau d'acuité du cabinet.     */
  /* ---------------------------------------------------------------------- */
  --snellen:
    linear-gradient(var(--cerise), var(--cerise)),
    linear-gradient(var(--cerise), var(--cerise)),
    linear-gradient(var(--cerise), var(--cerise)),
    linear-gradient(var(--cerise), var(--cerise));
  --snellen-size: 3px 18px, 3px 13px, 3px 9px, 3px 5px;
  --snellen-pos: 0 50%, 8px 50%, 15px 50%, 21px 50%;
}

/* ============================ BASE ======================================= */

body {
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  color: var(--bs-body-color);
  background-color: var(--lin);
  /* Atmosphère douce : halos cerise/vert, jamais un aplat */
  background-image:
    radial-gradient(900px 520px at 88% -6%, rgba(194, 38, 78, .07), transparent 62%),
    radial-gradient(760px 460px at 2% 8%, rgba(95, 122, 62, .06), transparent 60%);
  background-attachment: fixed;
}

h1, h2, h3, h4, h5, .navbar-brand, .display-1, .display-4, .display-5, .display-6 {
  font-family: 'Petrona', Georgia, serif;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--encre);
}

h1 { line-height: 1.05; }
h2 { line-height: 1.15; }

p { margin-bottom: 1.1rem; }

a { text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--cerise-dark); }

::selection { background: var(--cerise); color: #fff; }

/* Focus TRÈS visible : c'est un site d'ophtalmologie. */
:focus-visible {
  outline: 4px solid var(--cerise);
  outline-offset: 3px;
  border-radius: 2px;
}

section { position: relative; }

hr { border-color: var(--bs-border-color); opacity: 1; }

/* ============ SIGNATURE : LE FILET D'ACUITÉ (échelle de Snellen) ========= */

#kicker {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--cerise-dark);
  margin-bottom: .9rem;
}

/* Les 4 barres décroissantes — l'optotype réduit à sa plus simple expression. */
#kicker::before {
  content: '';
  width: 24px;
  height: 18px;
  flex: 0 0 24px;
  background-image: var(--snellen);
  background-size: var(--snellen-size);
  background-position: var(--snellen-pos);
  background-repeat: no-repeat;
}

/* Le même filet, en grand, sous les intitulés de section. */
#sec-title::after {
  content: '';
  display: block;
  width: 40px;
  height: 26px;
  margin-top: .9rem;
  background-image: var(--snellen);
  background-size: 4px 26px, 4px 19px, 4px 13px, 4px 7px;
  background-position: 0 100%, 11px 100%, 21px 100%, 30px 100%;
  background-repeat: no-repeat;
}

/* ============================ BOUTONS ==================================== */

.btn {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .02em;
  border-radius: 999px;          /* pilule : rond et amical, comme la typo */
  border-width: 2px;
  padding: .8rem 1.7rem;         /* cibles généreuses */
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease, background-color .2s ease;
  cursor: pointer;
}

.btn-lg { padding: .95rem 2.1rem; font-size: 1.08rem; }
.btn-sm { padding: .5rem 1.1rem; font-size: .9rem; }

.btn-primary {
  --bs-btn-bg: var(--cerise);
  --bs-btn-border-color: var(--cerise);
  --bs-btn-hover-bg: var(--cerise-dark);
  --bs-btn-hover-border-color: var(--cerise-dark);
  --bs-btn-active-bg: #8d1937;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  box-shadow: var(--lift-1);
}

.btn-outline-primary {
  --bs-btn-color: var(--encre);
  --bs-btn-border-color: var(--encre);
  --bs-btn-hover-bg: var(--encre);
  --bs-btn-hover-border-color: var(--encre);
  --bs-btn-hover-color: var(--lin-2);
}

.btn-outline-light {
  --bs-btn-border-color: rgba(255, 255, 255, .8);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-color: var(--encre);
}

.btn-secondary {
  --bs-btn-bg: var(--encre);
  --bs-btn-border-color: var(--encre);
  --bs-btn-hover-bg: #000;
  --bs-btn-hover-border-color: #000;
  --bs-btn-color: var(--lin-2);
  --bs-btn-hover-color: #fff;
}

.btn:hover { transform: translateY(-2px); box-shadow: var(--lift-2); }
.btn:active { transform: translateY(0); }

/* ============================ NAVBAR ===================================== */

#topnav {
  background: rgba(255, 253, 250, .93);
  backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid var(--bs-border-color);
}

.navbar-brand { display: flex; align-items: center; gap: .8rem; }

/* La pastille du portrait, en médaillon rond */
#brand-photo {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 22%;
  border: 2px solid var(--lin-2);
  box-shadow: 0 0 0 2px var(--cerise), var(--lift-1);
}

#brand-name {
  font-family: 'Petrona', serif;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.05;
  color: var(--encre);
}

#brand-sub {
  display: block;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cerise-dark);
}

#topnav .nav-link {
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--encre-2);
  position: relative;
  padding: .55rem .9rem;
}

#topnav .nav-link::after {
  content: '';
  position: absolute;
  left: .9rem;
  right: .9rem;
  bottom: .2rem;
  height: 3px;
  border-radius: 2px;
  background: var(--cerise);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}

#topnav .nav-link:hover::after { transform: scaleX(1); }
#topnav .nav-link:hover { color: var(--cerise-dark); }

/* ============================== HERO ===================================== */

#accueil { padding: 4.5rem 0 4rem; }

#h1 {
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  letter-spacing: -.03em;
  margin-bottom: .6rem;
}

/* « Jean » en cerise : l'original met déjà ce mot en accent (text-primary). */
#h1 em { font-style: normal; color: var(--cerise); }

#h2-role {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: clamp(1rem, 2vw, 1.3rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--encre-soft);
  margin-bottom: 1.8rem;
}

#hero-lead { font-size: 1.22rem; max-width: 62ch; color: var(--encre-2); }

#hero-lead button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--cerise-dark);
  font-weight: 700;
  border-bottom: 2px solid rgba(194, 38, 78, .35);
  cursor: pointer;
}

#hero-lead button:hover { color: var(--encre); border-bottom-color: var(--encre); }

/* Le portrait : médaillon rond, cerclé cerise */
#portrait {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  border: 6px solid var(--lin-2);
  box-shadow: 0 0 0 3px var(--cerise), var(--lift-2);
}

/* Le TABLEAU D'ACUITÉ décoratif du hero : barres décroissantes en grand. */
#acuite {
  height: 60px;
  margin-top: 2.2rem;
  background-image: var(--snellen);
  background-size: 7px 58px, 6px 40px, 5px 26px, 4px 15px;
  background-position: 0 100%, 18px 100%, 34px 100%, 47px 100%;
  background-repeat: no-repeat;
  opacity: .9;
}

/* ============================ LES 2 CARTES =============================== */

#card-lieu {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--lin-2);
  border: 1px solid var(--bs-border-color);
  border-radius: 20px;
  padding: 1.4rem;
  height: 100%;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease, border-color .25s ease;
  box-shadow: var(--lift-1);
}

#card-lieu:hover {
  transform: translateY(-5px);
  box-shadow: var(--lift-2);
  border-color: var(--cerise);
}

#card-lieu img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 1rem;
}

#card-lieu h3 { font-size: 1.35rem; margin-bottom: .5rem; }
#card-lieu p { font-size: 1.02rem; color: var(--encre-soft); margin: 0; }

#card-lieu i { color: var(--cerise); }

/* ============================== SECTIONS ================================= */

#activite, #contact, #profil, #temoignages { padding: 4.5rem 0; }

#sec-title { font-size: clamp(1.9rem, 4vw, 2.9rem); letter-spacing: -.025em; }

/* Le bloc « activité » : encart lin cerclé, image ronde à droite */
#act-item {
  background: var(--lin-2);
  border: 1px solid var(--bs-border-color);
  border-radius: 22px;
  padding: 1.8rem;
  box-shadow: var(--lift-1);
}

#act-item h3 { font-size: 1.5rem; margin-bottom: .8rem; }
#act-item ul { padding-left: 0; list-style: none; margin-bottom: 0; }

/* Les puces : un petit optotype cerise */
#act-item li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: .45rem;
}

#act-item li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cerise);
  box-shadow: 0 0 0 3px var(--cerise-soft);
}

#act-img {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid var(--lin-2);
  box-shadow: 0 0 0 2px var(--bs-border-color), var(--lift-1);
}

/* ============================== CONTACT ================================== */

#coord {
  background: var(--lin-2);
  border: 1px solid var(--bs-border-color);
  border-radius: 22px;
  padding: 1.6rem 1.8rem;
  height: 100%;
  box-shadow: var(--lift-1);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

#coord:hover { transform: translateY(-4px); box-shadow: var(--lift-2); border-color: var(--cerise); }
#coord h3 { font-size: 1.3rem; margin-bottom: 1rem; }
#coord address { margin-bottom: .8rem; font-style: normal; }
#coord a { color: var(--encre); font-weight: 700; }
#coord a:hover { color: var(--cerise-dark); }
#coord i { color: var(--cerise); }

#coord-tel { font-family: 'Petrona', serif; font-weight: 700; font-size: 1.45rem; }

#mapa {
  border: 6px solid var(--lin-2);
  border-radius: 22px;
  box-shadow: var(--lift-2);
  overflow: hidden;
  display: block;
}

/* ============================== PROFIL =================================== */
/* Chaque entrée : un intitulé au tiret cadratin (comme l'original) + texte. */

#profil-item {
  border-left: 4px solid var(--cerise);
  padding: .2rem 0 .2rem 1.4rem;
  margin-bottom: 1.9rem;
}

#profil-item h3 {
  font-size: 1.25rem;
  margin-bottom: .35rem;
  color: var(--encre);
}

#profil-item p { font-size: 1.1rem; color: var(--encre-2); margin: 0; max-width: 68ch; }

/* ============================ TÉMOIGNAGES =============================== */

#avis {
  background: var(--lin-2);
  border: 1px solid var(--bs-border-color);
  border-radius: 22px;
  padding: 1.8rem 1.8rem 1.5rem;
  height: 100%;
  box-shadow: var(--lift-1);
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}

#avis:hover { transform: translateY(-4px); box-shadow: var(--lift-2); }

/* Le guillemet ouvrant, en Petrona, posé en filigrane */
#avis::before {
  content: '\201C';
  position: absolute;
  top: -.35em;
  left: .5rem;
  font-family: 'Petrona', serif;
  font-size: 5rem;
  line-height: 1;
  color: var(--cerise);
  opacity: .16;
}

#avis p { font-size: 1.1rem; color: var(--encre-2); position: relative; margin-bottom: 1rem; }

#avis h3 {
  font-family: 'Quicksand', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--cerise-dark);
  margin: 0;
}

/* ===================== ENTÊTE DE PAGE (#page-head) ======================= */

#page-head {
  padding: 3.5rem 0 2rem;
  border-bottom: 1px solid var(--bs-border-color);
}

#page-head h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); letter-spacing: -.025em; }
#page-head .breadcrumb { margin-bottom: 1rem; font-size: .95rem; }
#page-head .breadcrumb a { color: var(--cerise-dark); font-weight: 600; }
#page-head .breadcrumb-item + .breadcrumb-item::before { color: var(--encre-soft); }

#lead { max-width: 66ch; color: var(--encre-2); font-size: 1.15rem; }

.pagination {
  --bs-pagination-color: var(--encre);
  --bs-pagination-active-bg: var(--cerise);
  --bs-pagination-active-border-color: var(--cerise);
}

.page-link { border-radius: 999px !important; margin: 0 .15rem; font-weight: 600; }

/* ======================= BLOG (couche ajoutée) =========================== */

#blog { padding: 4.5rem 0; }

#art-card {
  background: var(--lin-2);
  border: 1px solid var(--bs-border-color);
  border-radius: 22px;
  height: 100%;
  overflow: hidden;
  box-shadow: var(--lift-1);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease, border-color .25s ease;
}

#art-card:hover { transform: translateY(-5px); box-shadow: var(--lift-2); border-color: var(--cerise); }

#art-card .card-img-top {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
}

#art-card .card-title { font-size: 1.2rem; line-height: 1.3; }
#art-card .card-text { font-size: 1.02rem; color: var(--encre-soft); }

.badge { border-radius: 999px; font-family: 'Quicksand', sans-serif; font-weight: 700; letter-spacing: .05em; }

#cat-chip {
  background: var(--cerise-soft) !important;
  color: var(--cerise-dark) !important;
  border: 1px solid rgba(194, 38, 78, .3);
  font-size: .78rem;
}

/* ===================== BOUTIQUE (couche ajoutée) ======================== */

#shop-band {
  background: var(--encre);
  color: var(--lin-2);
  padding: 4.5rem 0;
  overflow: hidden;
}

#shop-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(700px 400px at 85% 10%, rgba(194, 38, 78, .3), transparent 62%);
  pointer-events: none;
}

#shop-band h2, #shop-band h3 { color: var(--lin-2); position: relative; }
#shop-band p { color: rgba(255, 253, 250, .8); position: relative; }
#shop-band #kicker { color: #f2a3b8; position: relative; }
#shop-band #kicker::before { --cerise: #f2a3b8; }

#shop-cat {
  display: flex;
  align-items: center;
  gap: .7rem;
  background: rgba(255, 253, 250, .06);
  border: 1px solid rgba(255, 253, 250, .18);
  border-radius: 999px;
  padding: .75rem 1.1rem;
  color: var(--lin-2);
  font-weight: 600;
  font-size: .98rem;
  position: relative;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

#shop-cat:hover {
  background: var(--cerise);
  border-color: var(--cerise);
  color: #fff;
  transform: translateY(-3px);
}

#shop-cat i { color: #f2a3b8; font-size: 1.2rem; }
#shop-cat:hover i { color: #fff; }

#prod-card {
  background: var(--lin-2);
  border: 1px solid var(--bs-border-color);
  border-radius: 22px;
  height: 100%;
  overflow: hidden;
  box-shadow: var(--lift-1);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

#prod-card:hover { transform: translateY(-5px); box-shadow: var(--lift-2); border-color: var(--cerise); }
#prod-card img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; padding: 1rem; }

#price { font-family: 'Petrona', serif; font-weight: 800; font-size: 1.4rem; color: var(--encre); }
#price-old { text-decoration: line-through; color: var(--encre-soft); font-size: .98rem; }

/* ============================ SEO (order-last) =========================== */

#seo {
  background: rgba(255, 253, 250, .6);
  border-top: 1px solid var(--bs-border-color);
  padding: 2.4rem 0;
  font-size: .95rem;
  color: var(--encre-soft);
}

#seo h2 { font-size: 1.05rem; color: var(--encre); margin-bottom: .6rem; }

/* ============================== FOOTER =================================== */

#site-footer {
  background: var(--encre);
  color: rgba(255, 253, 250, .72);
  padding: 3.5rem 0 0;
  border-top: 5px solid var(--cerise);
}

#site-footer h2 {
  color: var(--lin-2);
  font-family: 'Quicksand', sans-serif;
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 1.1rem;
}

#site-footer a { color: rgba(255, 253, 250, .72); }
#site-footer a:hover { color: #f2a3b8; }
#site-footer i { color: var(--cerise); }
#site-footer hr { border-color: rgba(255, 253, 250, .16); }

#footer-copy { font-size: .9rem; color: rgba(255, 253, 250, .5); }

/* ============================== MODALES ================================== */
/* Les 2 modales de contact de l'original (Cabinet privé / Clinique). */

.modal-content { border-radius: 24px; border: 0; box-shadow: var(--lift-2); background: var(--lin-2); }
.modal-header { border-bottom: 1px solid var(--bs-border-color); padding: 1.3rem 1.6rem; }
.modal-title { font-size: 1.4rem; }
.modal-body { padding: 1.6rem; }
.modal-footer { border-top: 1px solid var(--bs-border-color); padding: 1rem 1.6rem; }
.modal-body img { width: 100%; height: auto; border-radius: 16px; }
.modal-body address { font-style: normal; margin-bottom: .8rem; }
.modal-body a { color: var(--encre); font-weight: 700; }

/* ============================ ARTICLE ==================================== */

#article-body { font-size: 1.15rem; max-width: 68ch; }
#article-body h2 { font-size: 1.6rem; margin: 2.2rem 0 .9rem; padding-left: .9rem; border-left: 5px solid var(--cerise); }
#article-body h3 { font-size: 1.3rem; margin: 1.6rem 0 .7rem; }
#article-body img { max-width: 100%; height: auto; border-radius: 18px; box-shadow: var(--lift-1); }
#article-body table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
#article-body th { background: var(--encre); color: var(--lin-2); font-family: 'Quicksand', sans-serif; }
#article-body th, #article-body td { border: 1px solid var(--bs-border-color); padding: .7rem .9rem; }
#article-body tbody tr:nth-child(odd) { background: var(--lin-2); }
#article-body blockquote {
  border-left: 5px solid var(--cerise);
  background: var(--cerise-soft);
  padding: 1.1rem 1.3rem;
  border-radius: 0 16px 16px 0;
  margin: 1.5rem 0;
}

/* ============================ RESPONSIVE ================================= */

@media (max-width: 991.98px) {
  #topnav .nav-link::after { display: none; }
  #acuite { display: none; }
}

@media (max-width: 575.98px) {
  #accueil { padding: 2.5rem 0 3rem; }
  #activite, #contact, #profil, #temoignages { padding: 3rem 0; }
  #portrait { max-width: 210px; }
}

/* ============================ A11Y / MOTION ============================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  #card-lieu:hover, #art-card:hover, #prod-card:hover, .btn:hover, #coord:hover, #avis:hover, #shop-cat:hover {
    transform: none;
  }
}