/* ==========================================================
   L'Atelier de la Pivoine — feuille de style du site public
   Palette tirée du logo : crème, rose, rose ancien, vert sauge, or
   ========================================================== */

:root {
  --creme: #faf1e8;
  --papier: #fffaf5;
  --rose-pale: #f7e3de;
  --rose-tendre: #efc3bd;
  --rose-logo: #b87068;      /* couleur du lettrage du logo (grands titres) */
  --rose-ancien: #9a544d;    /* liens et boutons (contraste suffisant) */
  --rose-profond: #7f423c;
  --sauge: #8a9a7b;
  --sauge-fonce: #5b6a50;
  --or: #c9a77c;
  --encre: #4a3130;

  --font-titre: "Allura", "Snell Roundhand", "Apple Chancery", "Brush Script MT", cursive;
  --font-texte: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --largeur: 68rem;
  --espace: clamp(1.25rem, 4vw, 2.5rem);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--font-texte);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1; }

h1, h2 {
  font-family: var(--font-titre);
  font-weight: 400;
  line-height: 1.05;
  color: var(--rose-logo);
  margin: 0 0 .4em;
}
h1 { font-size: clamp(3rem, 9vw, 5.4rem); }
h2 { font-size: clamp(2.2rem, 6vw, 3.1rem); }
h3 {
  font-family: var(--font-texte);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--rose-profond);
  margin: 0 0 .5em;
}

p { margin: 0 0 1em; max-width: 62ch; }

a { color: var(--rose-ancien); text-underline-offset: .2em; }
a:hover { color: var(--rose-profond); }

img { max-width: 100%; display: block; }

:focus-visible { outline: 3px solid var(--rose-ancien); outline-offset: 3px; }

[hidden] { display: none !important; }

.conteneur { width: min(100% - 2 * var(--espace), var(--largeur)); margin-inline: auto; }

.lien-evitement {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--rose-ancien); color: #fff; padding: .6rem 1rem;
}
.lien-evitement:focus { left: 0; color: #fff; }

/* ---------- Ruban à mesurer + en-tête ---------- */
.ruban {
  height: 22px;
  background-color: var(--rose-tendre);
  background-image:
    linear-gradient(90deg, var(--rose-profond) 1.5px, transparent 1.5px),
    linear-gradient(90deg, var(--rose-ancien) 1px, transparent 1px);
  background-size: 40px 70%, 8px 40%;
  background-repeat: repeat-x;
  background-position: 0 0, 0 0;
  border-bottom: 1px solid var(--or);
}

.site-header { background: var(--papier); border-bottom: 1px solid var(--or); }

.entete {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem 1rem; padding-block: .8rem;
}

.logo {
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--font-titre);
  font-size: 2.2rem; line-height: 1;
  color: var(--rose-logo); text-decoration: none;
}
.logo:hover { color: var(--rose-ancien); }
.logo-fleur {
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid var(--or); object-fit: cover;
}

.menu-bouton {
  font: inherit; font-weight: 600; cursor: pointer;
  background: transparent; color: var(--rose-profond);
  border: 1.5px dashed var(--rose-ancien); padding: .45rem 1rem;
}
.menu-bouton[aria-expanded="true"] { background: var(--rose-pale); }

.nav { display: none; flex-basis: 100%; }
.nav.est-ouvert { display: block; }
.nav ul { list-style: none; margin: 0; padding: .5rem 0 0; display: flex; flex-direction: column; }
.nav a {
  display: block; padding: .6rem 0; color: var(--encre); text-decoration: none;
  font-weight: 500; border-bottom: 1px dashed var(--rose-tendre);
}
.nav a:hover { color: var(--rose-ancien); }
.nav a[aria-current="page"] { color: var(--rose-ancien); font-weight: 600; }

@media (min-width: 46rem) {
  .menu-bouton { display: none; }
  .nav { display: block; flex-basis: auto; }
  .nav ul { flex-direction: row; gap: 1.75rem; padding: 0; }
  .nav a { border-bottom: 2px dashed transparent; padding: .3rem 0; }
  .nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--rose-ancien); }
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(2.5rem, 7vw, 4.5rem); }
.section + .section { border-top: 2px dashed var(--rose-tendre); }
.section-fond { background: var(--rose-pale); }

.section-entete {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .5rem 1.5rem; margin-bottom: 1.5rem;
}
.section-entete h2 { margin: 0; }
.lien-section { font-weight: 600; }

/* ---------- Accueil ---------- */
.hero { padding-block: clamp(1.5rem, 5vw, 3.5rem); }
.hero-grille { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 46rem) { .hero-grille { grid-template-columns: 1fr 1fr; gap: 2rem; } }

.hero-texte p { font-size: 1.2rem; }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }

/* Les pivoines du logo se fondent dans le fond crème */
.hero-fleurs {
  width: 100%; height: auto; justify-self: center;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 58%, transparent 74%);
          mask-image: radial-gradient(ellipse at center, #000 58%, transparent 74%);
}

.bouton {
  display: inline-block; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  padding: .7rem 1.4rem; background: var(--rose-ancien); color: #fff; border: 2px solid var(--rose-ancien);
}
.bouton:hover { background: var(--rose-profond); border-color: var(--rose-profond); color: #fff; }
.bouton-clair { background: transparent; color: var(--rose-profond); border-style: dashed; }
.bouton-clair:hover { background: var(--rose-pale); color: var(--rose-profond); }

.volets { display: grid; margin-top: 1rem; }
.volet { padding-block: 1.25rem; border-top: 2px dashed var(--sauge); }
.volet:first-child { border-top: 0; padding-top: 0; }
.volet p { margin: 0; }
.volet h3 { color: var(--sauge-fonce); }
@media (min-width: 46rem) {
  .volets { grid-template-columns: repeat(3, 1fr); }
  .volet { padding: 0 1.75rem; border-top: 0; border-left: 2px dashed var(--sauge); }
  .volet:first-child { padding-left: 0; border-left: 0; }
  .volet:last-child { padding-right: 0; }
}

/* ---------- Liste d'articles ---------- */
.entree {
  display: grid; gap: .25rem 2rem; padding-block: 1.5rem;
  border-top: 2px dashed var(--rose-tendre);
}
.entrees > .entree:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 46rem) {
  .entree { grid-template-columns: 11rem 1fr; }
  .entree:has(.entree-vignette) { grid-template-columns: 11rem 1fr 9rem; }
}
.entree-meta { margin: 0; font-size: .95rem; }
.entree-meta time { display: block; }
.entree h2, .entree h3 { margin-bottom: .3em; }
.entree h2 { font-family: var(--font-texte); font-weight: 600; font-size: 1.4rem; line-height: 1.3; color: var(--rose-profond); }
.entree h2 a, .entree h3 a { color: inherit; text-decoration: none; }
.entree h2 a:hover, .entree h3 a:hover { color: var(--rose-ancien); text-decoration: underline; }
.entree p:last-child { margin-bottom: 0; }
.entree-vignette { display: block; }
.entree-vignette img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.etiquette {
  display: inline-block; margin-top: .25rem; padding: .1rem .7rem;
  font-size: .85rem; font-weight: 600; color: var(--sauge-fonce);
  background: var(--papier); border: 1px dashed var(--sauge-fonce);
}

/* ---------- Filtres ---------- */
.filtres { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 2rem; }
.filtre {
  font: inherit; font-weight: 600; cursor: pointer; padding: .4rem 1.1rem;
  color: var(--rose-profond); background: transparent; border: 1.5px dashed var(--rose-ancien);
}
.filtre:hover { background: var(--rose-pale); }
.filtre[aria-pressed="true"] { background: var(--rose-ancien); color: #fff; border-style: solid; }

.vide { color: var(--rose-profond); font-style: italic; }

/* ---------- Créations ---------- */
.creations {
  display: grid; gap: 2.25rem 1.75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}
.creation h3 { margin: .9rem 0 .2rem; }
.creation h3 a { color: inherit; text-decoration: none; }
.creation h3 a:hover { color: var(--rose-ancien); text-decoration: underline; }
.creation .etiquette { margin: 0 0 .6rem; }

.media {
  display: grid; place-items: center; text-align: center;
  aspect-ratio: 4 / 5; overflow: hidden;
  color: var(--rose-profond); font-size: .95rem; text-decoration: none;
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(154, 84, 77, .08) 14px 15px),
    var(--rose-pale);
}
.section-fond .media { background-color: var(--rose-tendre); }
.media img { width: 100%; height: 100%; object-fit: cover; }

.technique { margin-top: .5rem; border-top: 1px dashed var(--rose-ancien); padding-top: .5rem; }
.technique summary { cursor: pointer; font-weight: 600; color: var(--rose-ancien); }
.technique summary:hover { color: var(--rose-profond); }
.technique[open] summary { margin-bottom: .5rem; }
.technique p { font-size: .98rem; margin-bottom: .5rem; }

.galerie {
  display: grid; gap: 1rem; margin-bottom: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.galerie-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ---------- Pages et articles ---------- */
.page-titre { padding-block: clamp(2rem, 6vw, 3.5rem) 1rem; }
.page-titre p { font-size: 1.15rem; }
.page-contenu { padding-block: 1.5rem clamp(3rem, 8vw, 5rem); }

.article { padding-block: clamp(2rem, 6vw, 3.5rem) clamp(3rem, 8vw, 5rem); }
.article-entete { margin-bottom: 1.5rem; max-width: 44rem; }
.article-entete .entree-meta time { display: inline; margin-right: .75rem; }

.article-corps { max-width: 44rem; }
.article-corps p { max-width: none; font-size: 1.1rem; line-height: 1.75; }
.article-corps h2 { margin-top: 1.8rem; }
.article-corps h3 { margin-top: 1.6rem; font-size: 1.3rem; }
.article-corps .chapo { font-size: 1.3rem; line-height: 1.55; color: var(--rose-profond); }
.article-corps figure { margin: 2rem 0; }
.article-corps figure img { width: 100%; height: auto; }
.article-corps figcaption { margin-top: .6rem; font-size: .92rem; font-style: italic; }
.article-corps ul, .article-corps ol { padding-left: 1.3rem; }
.article-corps li { margin-bottom: .4rem; }
.article-corps blockquote {
  margin: 1.5rem 0; padding: .2rem 0 .2rem 1.25rem;
  border-left: 3px dashed var(--rose-ancien); color: var(--rose-profond);
}
.article-corps hr { border: 0; border-top: 2px dashed var(--rose-tendre); margin: 2rem 0; }

.encart-technique {
  margin: 2rem 0; padding: 1.9rem 2rem 1.2rem;
  background: var(--papier); outline: 2px dashed var(--sauge-fonce); outline-offset: -10px;
}
.encart-technique h2 { margin-top: 0; font-size: 2.2rem; color: var(--sauge-fonce); }
.encart-technique p:last-child { margin-bottom: 0; }

.retour { margin-top: 2.5rem; font-weight: 600; }

.bandeau-apercu {
  max-width: none; padding: .7rem 1rem; margin-bottom: 1.5rem;
  background: var(--rose-pale); border: 1.5px dashed var(--rose-ancien);
}

/* ---------- Pied de page ---------- */
.site-footer {
  background: var(--rose-pale); border-top: 1px solid var(--or);
  padding-block: 1.75rem; font-size: .95rem;
}
.site-footer p { margin: 0; max-width: none; }
.pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; }
.pied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
.pied a { color: var(--encre); }
.pied a:hover { color: var(--rose-ancien); }
.lien-cookies {
  display: inline-block; padding: .55rem 1rem; border: 2px solid var(--rose-ancien);
  border-radius: 999px; background: var(--rose-ancien); color: #fff;
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.lien-cookies:hover { border-color: var(--rose-profond); background: var(--rose-profond); color: #fff; }
.lien-comme-texte {
  padding: 0; border: 0; background: transparent; color: var(--rose-ancien);
  font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer;
}
.lien-comme-texte:hover { color: var(--rose-profond); }

.consentement {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: end center;
  padding: 1rem; background: rgba(74, 49, 48, .28);
}
.consentement[hidden] { display: none; }
.consentement-fenetre {
  width: min(100%, 42rem); padding: 1.5rem; background: var(--papier);
  border: 2px solid var(--rose-ancien); box-shadow: 0 8px 30px rgba(74, 49, 48, .22);
  animation: apparition-consentement .28s ease-out both;
}
.consentement-fenetre h2 { margin-top: 0; font-size: 2.5rem; }
.consentement-fenetre p { font-size: .98rem; }
.consentement-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; margin-top: 1.25rem; }
.consentement-actions .bouton { font-size: .95rem; }
.consentement-ouvert { overflow: hidden; }

@keyframes apparition-consentement {
  from { opacity: 0; transform: translateY(1rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 35rem) {
  .consentement-actions { flex-direction: column-reverse; }
  .consentement-actions .bouton { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .consentement-fenetre { animation: none; }
}


/* ==========================================================
   Style inspiré des maquettes : en-tête centré, à la une, cartes
   ========================================================== */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Titres avec filets dorés de chaque côté */
.titre-filets {
  display: flex; align-items: center; gap: 1.25rem;
  margin: 0 0 1.75rem;
  font-family: var(--font-texte); font-weight: 500;
  font-size: 1.15rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--encre); line-height: 1.3;
}
.titre-filets::before, .titre-filets::after { content: ""; flex: 1; border-top: 1px solid var(--or); }
.titre-filets > span { text-align: center; }
.titre-filets.titre-script {
  font-family: var(--font-titre); font-weight: 400; font-size: clamp(2.2rem, 6vw, 3rem);
  letter-spacing: 0; text-transform: none; color: var(--sauge-fonce);
}
.titre-filets.titre-script::before, .titre-filets.titre-script::after { border-top-color: var(--sauge); }

.lien-centre { margin: 1.75rem 0 0; text-align: center; max-width: none; }

/* Boutons en pilule */
.bouton, .filtre, .menu-bouton { border-radius: 999px; }
.pilule {
  display: inline-block; padding: .35rem 1rem; border-radius: 999px;
  background: var(--rose-tendre); color: var(--rose-profond);
  font-size: .9rem; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.pilule:hover { background: var(--rose-ancien); color: #fff; }
.pilule-grande { padding: .65rem 1.6rem; font-size: 1rem; }

.etiquette {
  border: 0; border-radius: 999px; padding: .2rem .8rem;
  background: var(--sauge-fonce); color: #fff; font-size: .82rem; font-weight: 500;
}

/* ----- En-tête centré ----- */
.site-header { position: relative; overflow: hidden; border-bottom: 0; background: transparent; }
.site-header .entete { padding-block: .8rem 1rem; }

.marque { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex: 1 1 auto; }
.marque .filet { display: none; }

.logo { flex-direction: column; align-items: center; gap: 0; font-size: 2.6rem; }
.logo-bourgeon, .logo .brin { display: none; }
.logo-ligne { display: inline-flex; align-items: center; gap: .6rem; }
.logo-texte { line-height: 1.1; }

.deco { display: none; }

@media (min-width: 46rem) {
  .entete { flex-direction: column; justify-content: center; gap: .4rem; padding-block: 1.6rem 1rem; }
  .marque { width: 100%; }
  .marque .filet { display: block; flex: 1; border-top: 1px solid var(--or); }
  .logo { font-size: clamp(3rem, 6vw, 4.4rem); }
  .logo-bourgeon {
    display: block; width: 6rem; height: auto; margin-bottom: -.6rem;
    mix-blend-mode: multiply;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 55%, transparent 75%);
            mask-image: radial-gradient(ellipse at center, #000 55%, transparent 75%);
  }
  .logo .brin {
    display: block; height: 4.2rem; width: auto; mix-blend-mode: multiply;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 45%, transparent 80%);
            mask-image: radial-gradient(ellipse at center, #000 45%, transparent 80%);
  }
  .nav { flex-basis: auto; }
  .nav ul { gap: clamp(1.25rem, 3.5vw, 2.75rem); justify-content: center; }
  .nav a { font-family: var(--font-titre); font-size: 1.75rem; line-height: 1.2; font-weight: 400; padding: .1rem 0; }
  .nav a[aria-current="page"] { font-weight: 400; }

  .deco {
    display: block; position: absolute; top: 1.4rem; width: 12rem; height: auto;
    mix-blend-mode: multiply; pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 50%, transparent 72%);
            mask-image: radial-gradient(ellipse at center, #000 50%, transparent 72%);
  }
  .deco-gauche { left: -2rem; transform: rotate(-6deg); }
  .deco-droite { right: -2rem; transform: scaleX(-1) rotate(-6deg); }
}
@media (min-width: 64rem) { .deco { width: 15rem; } .deco-gauche { left: 1rem; } .deco-droite { right: 1rem; } }

@media (max-width: 45.99rem) {
  .site-header { overflow: visible; }
  .site-header .conteneur { position: relative; }
  .entete { flex-wrap: wrap; }
  .marque { justify-content: flex-start; flex: 0 1 auto; }
  .logo { font-size: 2.3rem; }
  .nav { background: var(--papier); }
}

/* ----- Bandeau photo de l'accueil ----- */
.bandeau { position: relative; }
.bandeau-photos { display: grid; grid-template-columns: repeat(2, 1fr); height: 22rem; gap: 0; }
.bandeau-photos a { display: block; overflow: hidden; min-height: 0; }
.bandeau-photos img { width: 100%; height: 100%; object-fit: cover; }
.bandeau-1 { grid-template-columns: 1fr; }
.bandeau-3 a:first-child { grid-column: span 2; }
@media (min-width: 46rem) {
  .bandeau-photos { grid-template-columns: repeat(4, 1fr); height: 19rem; }
  .bandeau-1 { grid-template-columns: 1fr; }
  .bandeau-2 { grid-template-columns: repeat(2, 1fr); }
  .bandeau-3 { grid-template-columns: repeat(3, 1fr); }
  .bandeau-3 a:first-child { grid-column: auto; }
}
.bandeau-bouton {
  position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  box-shadow: 0 4px 14px rgba(74, 49, 48, .25);
}

/* ----- Pastilles (accueil) ----- */
.pastilles {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem 3rem;
}
.pastilles a { display: flex; align-items: center; gap: .9rem; color: var(--encre); text-decoration: none; font-weight: 500; font-size: 1.1rem; }
.pastilles a:hover { color: var(--rose-ancien); }
.pastille-icone {
  display: grid; place-items: center; width: 4.4rem; height: 4.4rem; border-radius: 50%;
  background: var(--sauge); color: #fff;
}
.pastilles a:hover .pastille-icone { background: var(--sauge-fonce); }

/* ----- Page blog : à la une + cartes ----- */
.une-grille { display: grid; gap: 2.5rem; }
@media (min-width: 64rem) { .une-grille { grid-template-columns: 5fr 6fr; gap: 3rem; align-items: start; } }

.une { display: grid; gap: 1rem 1.5rem; align-items: start; }
@media (min-width: 40rem) { .une { grid-template-columns: 12rem 1fr; } }
.une-image { display: block; border-radius: .9rem; overflow: hidden; background: var(--rose-pale); }
.une-image:empty { display: none; }
.une-image img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.une-texte h3 { font-size: 1.5rem; line-height: 1.25; margin: .5rem 0 .6rem; }
.une-texte h3 a { color: var(--encre); text-decoration: none; }
.une-texte h3 a:hover { color: var(--rose-ancien); }
.une-texte .etiquette { margin: 0; }
.une-texte p { font-size: .98rem; }

.cartes { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
@media (min-width: 46rem) { .cartes-3 { grid-template-columns: repeat(3, 1fr); } }

.carte {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--papier); border-radius: .9rem;
  box-shadow: 0 2px 10px rgba(74, 49, 48, .1);
}
.carte-image {
  display: block; position: relative; overflow: hidden; aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(45deg, transparent 0 14px, rgba(154, 84, 77, .08) 14px 15px), var(--rose-pale);
}
.carte-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carte-corps { display: flex; flex-direction: column; flex: 1; padding: .9rem 1rem 1rem; }
.carte-cat { margin: 0 0 .3rem; font-size: .85rem; font-style: italic; color: var(--sauge-fonce); }
.carte h3 { font-size: 1rem; line-height: 1.35; margin: 0 0 .8rem; }
.carte h3 a { color: var(--encre); text-decoration: none; }
.carte h3 a:hover { color: var(--rose-ancien); text-decoration: underline; }
.carte-pied {
  margin-top: auto; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .5rem; font-size: .8rem;
}

/* ----- Tuiles arrondies comme les cartes ----- */
.media { border-radius: .9rem; }
.galerie-photo img { border-radius: .9rem; }