/*
 * Site public AZEITO — identité de l'étiquette (maquette n° 1) :
 * fond crème, Garamond, palette « champ d'olivier Sud Liban ».
 * Polices auto-hébergées (licence OFL), aucune ressource externe.
 * Propriétés logiques (inline/block) : la mise en page s'inverse en arabe.
 */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/polices/cormorant-garamond-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap;
  src: url(/assets/polices/cormorant-garamond-latin-500-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/polices/eb-garamond-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/polices/eb-garamond-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Amiri"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/polices/amiri-arabic-400-normal.woff2) format("woff2");
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }

:root {
  /* Palette relevée sur la planche « Champ olivier Sud Liban » */
  --creme: #f4ecde;
  --etiquette: #f0e9d7;
  --beige: #e1d0b3;
  --sable: #c2a778;
  --terre: #8b6a4a;
  --or: #ddb966;
  --sauge: #a1b686;
  --sauge-clair: #c7d3b0;
  --olive: #606b37;
  --encre: #2a2620;
  --doux: #6b604f;
  --ok: #4f6b2a;
  --alerte: #9a3b1c;
  --titre: "Cormorant Garamond", "EB Garamond", Garamond, Georgia, serif;
  --corps: "EB Garamond", Garamond, Georgia, serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--creme); color: var(--encre);
  font: 1.125rem/1.55 var(--corps);
}
html[dir="rtl"] body { font-family: "Amiri", var(--corps); line-height: 1.9; }
html[dir="rtl"] { --titre: "Amiri", "Cormorant Garamond", serif; }
.page { max-width: 42rem; margin: 0 auto; padding: 0 1rem 3rem; }
a { color: var(--olive); }

header.haut { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .9rem; }
.marque { text-decoration: none; color: var(--encre); font: 500 1.35rem/1 var(--titre); letter-spacing: .12em; }
.langue {
  font-size: .95rem; text-decoration: none; color: var(--encre);
  padding: .25rem .9rem; border: 1px solid var(--sable); border-radius: 999px; background: var(--etiquette);
}

/* En-tête inspiré de l'étiquette : nom, sous-titre italique, mentions, paysage. */
.etiquette-hero {
  position: relative; overflow: hidden; text-align: center;
  background: var(--etiquette); border: 1px solid var(--beige); border-radius: 6px;
  padding: 2rem 1.25rem 0; margin-block-end: 1.5rem;
}
.etiquette-hero .nom { font: 500 clamp(2.6rem, 11vw, 3.6rem)/1 var(--titre); letter-spacing: .08em; margin: 0; }
.etiquette-hero .sous-titre { font: italic 500 1.35rem/1.2 var(--titre); margin: .35rem 0 1.1rem; }
html[dir="rtl"] .etiquette-hero .sous-titre { font-style: normal; }
.etiquette-hero .mention { font-variant: small-caps; font-weight: 600; letter-spacing: .04em; margin: 0; font-size: 1.15rem; }
.etiquette-hero .detail { margin: .1rem 0 0; }
.etiquette-hero .lot { font: 500 1.9rem/1.1 var(--titre); margin: 1rem 0 0; color: var(--olive); font-variant-numeric: lining-nums; }
.etiquette-hero .illustration { position: relative; margin-block-start: 1.25rem; padding-block-start: 2.5rem; }
.etiquette-hero .paysage { display: block; inline-size: 100%; block-size: auto; margin-block-end: -2px; }
.etiquette-hero .branche {
  position: absolute; inset-block-start: 0; inset-inline-end: 6%;
  inline-size: 34%; max-inline-size: 10rem; block-size: auto;
}
html[dir="rtl"] .etiquette-hero .branche { transform: scaleX(-1); }

section {
  background: var(--etiquette); border: 1px solid var(--beige); border-radius: 6px;
  padding: 1.25rem 1.25rem 1rem; margin-block-end: 1rem;
}
h1, h2, h3 { font-family: var(--titre); font-weight: 500; }
h2 { font-size: 1.6rem; line-height: 1.2; margin: 0 0 .6rem; color: var(--olive); }
h2::after { content: ""; display: block; inline-size: 2.5rem; block-size: 2px; background: var(--or); margin-block-start: .35rem; }
h3 { font-size: 1.2rem; margin: 0 0 .15rem; font-family: var(--corps); font-weight: 600; }
html[dir="rtl"] h3 { font-weight: 400; font-size: 1.25rem; }
.intro { color: var(--doux); margin-block-start: 0; }

.puces { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.puces li { background: var(--creme); border: 1px solid var(--beige); border-radius: 999px; padding: .1rem .85rem; }
.personnes { display: grid; gap: .9rem; padding: 0; margin: 0; list-style: none; }
.personne { display: flex; gap: .9rem; align-items: center; }
.personne > div { flex: 1; min-inline-size: 0; }
.personne img, .personne .initiale { inline-size: 64px; block-size: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.personne .initiale {
  display: grid; place-items: center; background: var(--sauge-clair); color: var(--olive);
  font: 500 1.6rem/1 var(--titre);
}
.personne p { margin: 0; color: var(--doux); font-size: 1rem; }
.part { font-weight: 600; color: var(--olive); white-space: nowrap; }
.barre { display: block; inline-size: 100%; block-size: 6px; margin-block-start: .35rem; fill: var(--beige); }
.barre .rempli { fill: var(--sauge); }
[dir="rtl"] .barre { transform: scaleX(-1); }

.mesures { inline-size: 100%; border-collapse: collapse; }
.mesures th, .mesures td { text-align: start; padding: .55rem 0; border-block-end: 1px solid var(--beige); vertical-align: top; }
.mesures th { font-weight: 600; }
.mesures td.valeur { text-align: end; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; padding-inline-start: 1rem; }
.mesures small { display: block; color: var(--doux); font-weight: 400; font-size: .95rem; line-height: 1.4; }
.statut { font-weight: 600; margin-block: .25rem .75rem; }
.statut.ok { color: var(--ok); }
.statut.ko { color: var(--alerte); }
.chiffre { font: 500 3.4rem/1 var(--titre); color: var(--terre); margin: .2rem 0 .4rem; font-variant-numeric: lining-nums; }
.bouton {
  display: inline-block; background: var(--olive); color: var(--etiquette); text-decoration: none;
  font-variant: small-caps; font-weight: 600; letter-spacing: .06em; font-size: 1.2rem;
  padding: .55rem 1.8rem; border-radius: 999px; margin-block: .25rem .5rem;
}
.lots { display: grid; gap: .75rem; padding: 0; margin: 0; list-style: none; }
.lots a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-decoration: none; color: inherit;
  background: var(--creme); border: 1px solid var(--beige); border-radius: 6px; padding: .8rem 1.1rem;
}
.lots strong { font: 500 1.7rem/1 var(--titre); color: var(--olive); }
.faits { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; margin: 0; }
.faits dt { color: var(--doux); font-size: .95rem; }
.faits dd { margin: 0; font-weight: 600; }
footer { color: var(--doux); font-size: .95rem; text-align: center; padding-block: 2rem 0; }