/* L'Heureuse Imparfaite : la coiffeuse imparfaite (15 octobre 2026), toujours clair */
:root {
  --creme: #fdf8f3; --blanc: #ffffff; --poudre: #fbe3dd; --poudre-2: #f6cfc5; --sauge: #7d9b80; --sauge-pale: #e4ede3;
  --terre: #c46a4e; --encre: #3a2c2a; --gris: #786963; --filet: #efe2da;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--creme); color: var(--encre); font: 300 1.04rem/1.75 'Be Vietnam Pro', system-ui, sans-serif; }
b, strong { font-weight: 600; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--terre); text-underline-offset: .2em; }
h1, h2, h3, h4 { font-family: Epilogue, system-ui, sans-serif; font-weight: 800; line-height: 1.15; letter-spacing: -.015em; }
.raccourci { position: absolute; left: -999px; }
.raccourci:focus { left: 1rem; top: 1rem; background: var(--poudre); padding: .5rem 1rem; z-index: 9; }

/* le miroir : en-tête */
.miroir { background: var(--blanc); border-bottom: 1px solid var(--filet); }
.miroir__in { max-width: 1120px; margin: 0 auto; padding: 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.6rem; }
.miroir__nom { font: 800 1.5rem/1 Epilogue, sans-serif; color: var(--encre); text-decoration: none; }
.miroir__nom em { font: 700 1.9rem/1 Caveat, cursive; color: var(--terre); font-style: normal; }
.miroir__nav { display: flex; flex-wrap: wrap; gap: .4rem; }
.miroir__nav a { text-decoration: none; color: var(--encre); font-size: .9rem; font-weight: 400; padding: .4rem .85rem; border-radius: 999px; background: var(--creme); border: 1px solid var(--filet); }
.miroir__nav a:hover, .miroir__nav a[aria-current] { background: var(--poudre); border-color: var(--poudre-2); }

main { max-width: 1120px; margin: 0 auto; padding: 0 1rem 3rem; }

/* la promesse */
.promesse { text-align: center; padding: 3rem 0 2rem; }
.promesse h1 { max-width: 820px; margin: 0 auto .9rem; font-size: clamp(1.8rem, 4.4vw, 2.9rem); }
.promesse p { max-width: 680px; margin: 0 auto; color: var(--gris); }
.promesse--rubrique { padding-bottom: 1rem; }

/* face à face */
.face-a-face { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; margin-bottom: 3rem; }
.colonne { border-radius: 28px; padding: 1.5rem 1.4rem 1.2rem; }
.colonne--marche { background: var(--sauge-pale); }
.colonne--rate { background: var(--poudre); }
.colonne h2 { display: flex; align-items: center; gap: .7rem; margin: 0 0 1rem; font-size: 1.45rem; }
.pastille { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none; border-radius: 50%; background: var(--blanc); font: 700 1.6rem/1 Caveat, cursive; }
.colonne--marche .pastille { color: var(--sauge); }
.colonne--rate .pastille { color: var(--terre); }
.essais { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.essai { display: grid; grid-template-columns: 84px 1fr; gap: .9rem; align-items: center; background: var(--blanc); border-radius: 16px; padding: .5rem; text-decoration: none; color: var(--encre); }
.essai__img { width: 84px; height: 84px; border-radius: 12px; overflow: hidden; background: var(--filet); }
.essai__img img { width: 100%; height: 100%; object-fit: cover; }
.essai__t { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.essai:hover .essai__t { text-decoration: underline; text-decoration-color: var(--terre); }

/* les tiroirs */
.tiroirs h2 { font: 700 2.2rem/1 Caveat, cursive; color: var(--terre); margin: 0 0 1rem; }
.tiroirs__grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1.1rem; }
.tiroirs__grille > * { min-width: 0; }
.tiroir { background: var(--blanc); border: 1px solid var(--filet); border-radius: 18px; padding: 1.1rem 1.1rem 1.2rem; }
.tiroir__poignee { display: inline-block; font: 800 1.15rem/1 Epilogue, sans-serif; color: var(--encre); text-decoration: none; padding: .55rem 1.1rem; background: var(--creme); border: 2px solid var(--poudre-2); border-radius: 999px; }
.tiroir p { margin: .7rem 0; font-size: .9rem; color: var(--gris); }
.tiroir__fiche { display: grid; gap: .5rem; text-decoration: none; color: var(--encre); font-weight: 600; line-height: 1.35; margin-top: .8rem; }
.tiroir__img { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; background: var(--filet); }
.tiroir__img img { width: 100%; height: 100%; object-fit: cover; }

/* fiches */
.flacons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1.1rem; }
.flacons > * { min-width: 0; }
.flacon { display: grid; gap: .35rem; text-decoration: none; color: var(--encre); background: var(--blanc); border-radius: 18px; padding: .6rem .6rem 1rem; border: 1px solid var(--filet); }
.flacon__img { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 14px; background: var(--filet); }
.flacon__img img { width: 100%; height: 100%; object-fit: cover; }
.flacon__r { font: 700 1.1rem/1 Caveat, cursive; color: var(--sauge); }
.flacon__t { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.flacon__m { font-size: .82rem; color: var(--gris); }
.suite { margin-top: 2.6rem; }
.suite h2 { font: 700 2rem/1 Caveat, cursive; color: var(--terre); }
.suite--large { margin-top: 1.4rem; }

/* le soin (article, page) */
.soin { max-width: 780px; margin: 0 auto; }
.soin__tete { padding: 2.4rem 0 1rem; text-align: center; }
.soin__r { display: inline-block; padding: .35rem .9rem; background: var(--poudre); color: var(--encre); border-radius: 999px; font-size: .85rem; text-decoration: none; margin-bottom: .9rem; }
.soin__tete h1 { margin: 0 0 .7rem; font-size: clamp(1.6rem, 3.8vw, 2.4rem); overflow-wrap: anywhere; }
.soin__m { margin: 0; color: var(--gris); font-size: .9rem; }
.soin__img { margin: .6rem 0 1.8rem; }
.soin__img img { border-radius: 28px; }
.soin__texte { overflow-wrap: anywhere; }
.soin__texte h2 { font-size: 1.45rem; margin: 2.2rem 0 .7rem; }
.soin__texte h2::before { content: "~ "; font-family: Caveat, cursive; color: var(--terre); }
.soin__texte h3 { font-size: 1.15rem; margin: 1.6rem 0 .5rem; }
.soin__texte table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .93rem; display: block; overflow-x: auto; }
.soin__texte th, .soin__texte td { border: 1px solid var(--filet); padding: .55rem .7rem; text-align: left; vertical-align: top; }
.soin__texte th { background: var(--sauge-pale); }
.soin__texte blockquote { margin: 1.2rem 0; padding: 1rem 1.3rem; background: var(--poudre); border-radius: 18px; }

/* le ruban du pied */
.ruban { margin-top: 3.5rem; background: var(--poudre); padding: 2.2rem 1rem 2rem; }
.ruban__in { max-width: 1120px; margin: 0 auto; display: grid; gap: .9rem; justify-items: center; text-align: center; }
.ruban__note { margin: 0; font: 700 1.8rem/1 Caveat, cursive; color: var(--terre); }
.ruban__rubriques { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.ruban__rubriques a { display: inline-block; background: var(--blanc); color: var(--encre); text-decoration: none; padding: .45rem 1rem; border-radius: 999px; font-weight: 600; font-size: .9rem; }
.ruban__mot { margin: 0; max-width: 680px; color: var(--encre); font-size: .9rem; }
.ruban__pages { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.1rem; font-size: .86rem; }
.ruban__pages a { color: var(--encre); }

@media (max-width: 760px) { .face-a-face { grid-template-columns: 1fr; } }