/* Carnet de terrain : un bandeau d'onglets façon intercalaires vert mousse,
   des pages de papier, et des fiches façon étiquettes d'herbier. */
:root {
  --papier: #EDEFE6;
  --feuille: #F8F9F3;
  --encre: #1D2620;
  --encre-douce: #566158;
  --trait: #C9CFC0;
  --mousse: #4A6A4C;
  --mousse-fonce: #33503A;
  --sur-mousse: #F8F9F3;
  --bandeau: #4A6A4C;
  --sur-bandeau: #F1F4EC;
  --sur-photo: #FFFFFF;
  --voile: rgba(14, 22, 16, 0.62);

  --u-nature: #3B6A4E;
  --u-cuisine: #AC4E2C;
  --u-diy: #8E641B;
  --u-etranger: #2B6587;
  --u-photos: #6B4C79;

  --f-titre: "Young Serif", Georgia, "Times New Roman", serif;
  --f-texte: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-main: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --f-fiche: "Courier Prime", "Courier New", ui-monospace, monospace;

  --rayon: 14px;
  --ombre: 0 1px 2px rgba(29, 38, 32, 0.06), 0 10px 28px -14px rgba(29, 38, 32, 0.28);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papier: #121813;
    --feuille: #1A221C;
    --encre: #E3E8DD;
    --encre-douce: #A3AE9F;
    --trait: #2F3B32;
    --mousse: #9CC096;
    --mousse-fonce: #C2DBBB;
    --sur-mousse: #102014;
    --bandeau: #22332A;
    --sur-bandeau: #E3EBDD;
    --voile: rgba(6, 10, 7, 0.66);
    --u-nature: #8EC4A2;
    --u-cuisine: #EB9A77;
    --u-diy: #DDB263;
    --u-etranger: #85BBDA;
    --u-photos: #C6A5D4;
    --ombre: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px -14px rgba(0, 0, 0, 0.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papier: #121813;
  --feuille: #1A221C;
  --encre: #E3E8DD;
  --encre-douce: #A3AE9F;
  --trait: #2F3B32;
  --mousse: #9CC096;
  --mousse-fonce: #C2DBBB;
  --sur-mousse: #102014;
  --bandeau: #22332A;
  --sur-bandeau: #E3EBDD;
  --voile: rgba(6, 10, 7, 0.66);
  --u-nature: #8EC4A2;
  --u-cuisine: #EB9A77;
  --u-diy: #DDB263;
  --u-etranger: #85BBDA;
  --u-photos: #C6A5D4;
  --ombre: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px -14px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 400 1.0625rem/1.65 var(--f-texte);
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 10;
  background: var(--papier);
}
img { max-width: 100%; display: block; }
a { color: var(--mousse-fonce); text-underline-offset: 3px; }
h1, h2, h3 {
  font-family: var(--f-titre);
  font-weight: 400;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--mousse); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

.cadre {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) {
  .cadre {
    padding-left: max(32px, env(safe-area-inset-left, 0px));
    padding-right: max(32px, env(safe-area-inset-right, 0px));
  }
}

.evitement {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 50;
  background: var(--feuille);
  padding: 8px 14px;
  border-radius: 8px;
}
.evitement:focus { top: calc(8px + env(safe-area-inset-top, 0px)); }

/* ---------- En-tête ---------- */
.entete-cadre {
  display: flex;
  align-items: center;
  gap: 12px 24px;
  padding-block: 18px 14px;
  flex-wrap: wrap;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--encre);
}
.logo-marque { width: 38px; height: 38px; flex: none; }
.logo-marque circle:first-child { fill: var(--mousse); }
.logo-marque path, .logo-marque .soleil {
  fill: none;
  stroke: var(--sur-mousse);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.logo-nom {
  font-family: var(--f-titre);
  font-size: 1.75rem;
  line-height: 1;
  letter-spacing: -0.01em;
}
.logo-nom span { color: var(--mousse); }
.devise {
  font-family: var(--f-main);
  font-size: 1.45rem;
  line-height: 1.1;
  color: var(--encre-douce);
}
.entete .devise { flex: 1; min-width: 0; }
.btn-recherche {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--trait);
  background: var(--feuille);
  border-radius: 999px;
  padding: 8px 16px 8px 12px;
  cursor: pointer;
  font-size: 0.9375rem;
  color: var(--encre-douce);
  margin-left: auto;
}
.btn-recherche:hover { border-color: var(--mousse); color: var(--encre); }
.btn-recherche svg, .icone {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
@media (max-width: 640px) {
  .entete .devise { order: 3; flex-basis: 100%; font-size: 1.3rem; }
  .btn-recherche span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .btn-recherche { padding: 9px; }
}

/* ---------- Onglets ---------- */
.onglets {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 9;
  background: var(--bandeau);
}
.onglets ul {
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.onglets ul::-webkit-scrollbar { display: none; }
.onglets a {
  display: block;
  white-space: nowrap;
  padding: 9px 18px 11px;
  border-radius: 10px 10px 0 0;
  color: var(--sur-bandeau);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  opacity: 0.88;
  transition: background-color 0.15s, opacity 0.15s;
}
.onglets a:hover { background: rgba(255, 255, 255, 0.1); opacity: 1; }
.onglets a[aria-current="page"] {
  background: var(--papier);
  color: var(--encre);
  opacity: 1;
  font-weight: 600;
}
.onglets a:focus-visible { outline-offset: -4px; }
@media (max-width: 720px) {
  .onglets ul { mask-image: linear-gradient(to right, #000 82%, transparent); padding-right: 32px; }
  .onglets a { padding-inline: 14px; }
}

/* ---------- Mise en page générale ---------- */
main { padding-block: 28px 72px; outline: none; }
.vue { display: grid; gap: 56px; }
.vue-entete { display: grid; gap: 10px; max-width: 46rem; }
.vue-entete h1 { font-size: clamp(2rem, 4.5vw, 2.9rem); }
.vue-entete :where(p) { color: var(--encre-douce); font-size: 1.125rem; }
.surtitre {
  font-family: var(--f-main);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--mousse);
}
.titre-section {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.titre-section h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.lien-fleche {
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
}
.lien-fleche:hover { text-decoration: underline; }

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--mousse);
  color: var(--sur-mousse);
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, transform 0.15s;
}
.bouton:hover { background: var(--mousse-fonce); }
.bouton.secondaire {
  background: transparent;
  color: var(--encre);
  border: 1px solid var(--trait);
}
.bouton.secondaire:hover { border-color: var(--mousse); background: var(--feuille); }

/* Tampon d'univers (petite étiquette encrée) */
.tampon {
  font-family: var(--f-fiche);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink, var(--mousse));
}
.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-family: var(--f-fiche);
  font-size: 0.8125rem;
  color: var(--encre-douce);
}

/* ---------- Accueil : grande photo ---------- */
.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(440px, 46vw, 540px);
  border-radius: var(--rayon);
  overflow: hidden;
  color: var(--sur-photo);
  isolation: isolate;
}
.hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(10, 18, 12, 0.78) 0%, rgba(10, 18, 12, 0.35) 45%, rgba(10, 18, 12, 0) 75%);
}
.hero-texte {
  display: grid;
  gap: 14px;
  justify-items: start;
  padding: clamp(22px, 4vw, 48px);
  max-width: 40rem;
}
.hero h1 { font-size: clamp(2rem, 5.2vw, 3.5rem); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }
.hero-texte p { font-size: 1.125rem; max-width: 34rem; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); }
.hero .bouton { margin-top: 6px; }
.hero-note {
  position: absolute;
  top: clamp(18px, 4vw, 40px);
  right: clamp(18px, 5vw, 56px);
  font-family: var(--f-main);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1;
  transform: rotate(-5deg);
  text-align: right;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.hero-note::after {
  content: "";
  display: block;
  width: 70%;
  height: 10px;
  margin: 6px 0 0 auto;
  border-bottom: 2px solid currentColor;
  border-radius: 0 0 50% 50%;
  opacity: 0.8;
}

/* ---------- Univers ---------- */
.univers-grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 960px) { .univers-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
.carte-univers {
  display: grid;
  grid-template-rows: auto 1fr;
  text-decoration: none;
  color: var(--encre);
  background: var(--feuille);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.carte-univers:hover { transform: translateY(-3px); box-shadow: var(--ombre); }
.carte-univers img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.carte-univers-corps {
  position: relative;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 26px 18px 18px;
}
.pastille {
  position: absolute;
  top: -22px;
  left: 16px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--feuille);
  color: var(--ink, var(--mousse));
  border: 1px solid var(--trait);
}
.pastille .icone { width: 22px; height: 22px; }
.carte-univers h3 { font-size: 1.3rem; }
.carte-univers p { font-size: 0.9375rem; color: var(--encre-douce); line-height: 1.5; }
.carte-univers .tampon { margin-top: 4px; }
@media (max-width: 520px) {
  .carte-univers-corps { padding: 24px 12px 14px; }
  .carte-univers h3 { font-size: 1.1rem; }
  .carte-univers p { font-size: 0.875rem; }
  .pastille { width: 38px; height: 38px; top: -19px; left: 10px; }
}

/* ---------- Accueil : bas de page ---------- */
.accueil-bas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 40px;
  align-items: start;
}
@media (max-width: 960px) { .accueil-bas { grid-template-columns: minmax(0, 1fr); } }

.marge {
  display: grid;
  background: var(--feuille);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}
.marge > section { padding: 22px; display: grid; gap: 10px; }
.marge > section + section { border-top: 1px dashed var(--trait); }
.marge h2 { font-family: var(--f-main); font-size: 1.85rem; line-height: 1; color: var(--mousse); }
.marge :where(p) { font-size: 0.9375rem; color: var(--encre-douce); }
.marge .bouton { justify-self: start; }
.signature { font-family: var(--f-main); font-size: 1.5rem; color: var(--encre); line-height: 1; }
.compteur-ligne { display: flex; align-items: center; gap: 14px; }
.compteur-ligne .icone { width: 26px; height: 26px; color: var(--mousse); }
.compteur-chiffre {
  font-family: var(--f-titre);
  font-size: 2.2rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--encre);
}
.compteur-note { font-size: 0.8125rem !important; font-style: italic; }
.mini-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mini-posts li { display: grid; gap: 2px; }
.mini-posts p { color: var(--encre); }

/* ---------- Cartes d'articles ---------- */
.grille-articles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px 24px;
}
.grille-articles.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) { .grille-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .grille-articles, .grille-articles.deux { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
.carte-article {
  display: grid;
  align-content: start;
  gap: 10px;
  text-decoration: none;
  color: var(--encre);
}
.carte-article .vignette {
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--trait);
}
.carte-article img {
  aspect-ratio: 3 / 2;
  width: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.carte-article:hover img { transform: scale(1.035); }
.carte-article h3 { font-size: 1.3rem; }
.carte-article:hover h3 { color: var(--mousse-fonce); }
.carte-article .resume {
  font-size: 0.9688rem;
  color: var(--encre-douce);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lire { font-size: 0.875rem; font-weight: 600; color: var(--mousse-fonce); }

/* ---------- Filtres et recherche ---------- */
.outils {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: center;
  justify-content: space-between;
}
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce {
  border: 1px solid var(--trait);
  background: var(--feuille);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--encre);
  text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s;
}
.puce:hover { border-color: var(--ink, var(--mousse)); }
.puce[aria-pressed="true"] {
  background: var(--ink, var(--mousse));
  border-color: var(--ink, var(--mousse));
  color: var(--feuille);
}
.champ-recherche {
  position: relative;
  flex: 1 1 240px;
  max-width: 340px;
}
.champ-recherche .icone {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--encre-douce);
}
.champ-recherche input {
  width: 100%;
  border: 1px solid var(--trait);
  background: var(--feuille);
  border-radius: 999px;
  padding: 9px 14px 9px 40px;
  font-size: 0.9375rem;
}
.champ-recherche input:focus { border-color: var(--mousse); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--mousse) 25%, transparent); }
.compte { font-family: var(--f-fiche); font-size: 0.8125rem; color: var(--encre-douce); }
.vide {
  border: 1px dashed var(--trait);
  border-radius: var(--rayon);
  padding: 36px 24px;
  text-align: center;
  color: var(--encre-douce);
  display: grid;
  gap: 8px;
  justify-items: center;
}
.vide strong { font-family: var(--f-titre); font-weight: 400; font-size: 1.3rem; color: var(--encre); }

/* ---------- Article ---------- */
.article { display: grid; gap: 32px; }
.retour { font-weight: 600; font-size: 0.9375rem; text-decoration: none; justify-self: start; }
.retour:hover { text-decoration: underline; }
.article-entete { display: grid; gap: 14px; max-width: 48rem; }
.article-entete h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
.chapo { font-size: 1.2rem; color: var(--encre-douce); line-height: 1.55; }
.article-image {
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  border-radius: var(--rayon);
}
.article-corps {
  display: grid;
  grid-template-columns: minmax(0, 42rem) 270px;
  gap: 56px;
  align-items: start;
}
@media (max-width: 900px) {
  .article-corps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .article-corps .fiche { order: -1; max-width: 340px; }
}
.prose { display: grid; gap: 18px; font-size: 1.0938rem; line-height: 1.75; }
.prose h2 { font-size: 1.5rem; margin-top: 14px; }
.prose ul, .prose ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.prose li::marker { color: var(--mousse); }
.prose ol li::marker { font-family: var(--f-fiche); font-weight: 700; }
.prose strong { font-weight: 700; }
.prose h3 { font-size: 1.25rem; margin-top: 8px; }
.prose img { border-radius: 10px; height: auto; }
.prose blockquote {
  margin: 0;
  padding-left: 18px;
  border-left: 3px solid var(--mousse);
  font-style: italic;
  color: var(--encre-douce);
}

/* Fiche façon étiquette d'herbier */
.fiche {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + 76px);
  background: var(--feuille);
  border: 1px solid var(--encre);
  outline: 1px solid var(--encre);
  outline-offset: -6px;
  padding: 20px 20px 16px;
  font-family: var(--f-fiche);
  font-size: 0.875rem;
  display: grid;
  gap: 12px;
  transform: rotate(-0.8deg);
  box-shadow: var(--ombre);
}
.fiche-entete {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--trait);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.75rem;
  color: var(--ink, var(--mousse));
}
.fiche dl { margin: 0; display: grid; gap: 6px; }
.fiche dl div { display: flex; align-items: baseline; gap: 6px; }
.fiche dt { flex: 1; display: flex; gap: 6px; color: var(--encre-douce); min-width: 0; }
.fiche dt::after {
  content: "";
  flex: 1;
  min-width: 12px;
  border-bottom: 1.5px dotted var(--trait);
  transform: translateY(-4px);
}
.fiche dd { margin: 0; font-weight: 700; text-align: right; }
.fiche-pied { font-size: 0.75rem; color: var(--encre-douce); }
@media (prefers-reduced-motion: reduce) { .fiche { transform: none; } }

.galerie-article {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}
.galerie-article button, .mur button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--trait);
  border-radius: 10px;
  overflow: hidden;
  cursor: zoom-in;
}
.galerie-article img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; transition: transform 0.3s; }
.galerie-article button:hover img, .mur button:hover img { transform: scale(1.03); }
.article-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--trait);
}

/* ---------- Photos ---------- */
.mur { columns: 3 260px; column-gap: 18px; }
.mur figure { break-inside: avoid; margin: 0 0 22px; display: grid; gap: 8px; }
.mur img { width: 100%; height: auto; transition: transform 0.3s; }
.mur figcaption { display: grid; gap: 2px; padding-inline: 2px; }
.legende { font-family: var(--f-titre); font-size: 1.0625rem; line-height: 1.3; }

.visionneuse, .lecteur {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--sur-photo);
  max-width: min(1100px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: visible;
}
.visionneuse::backdrop, .lecteur::backdrop { background: rgba(8, 12, 9, 0.88); }
.visionneuse figure { margin: 0; display: grid; gap: 10px; justify-items: center; }
.visionneuse img {
  max-height: calc(100vh - 140px);
  width: auto;
  border-radius: 8px;
}
.visionneuse figcaption { text-align: center; display: grid; gap: 2px; }
.visionneuse figcaption .meta { color: rgba(255, 255, 255, 0.75); justify-content: center; }
.visionneuse-fermer, .visionneuse-nav {
  position: fixed;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: var(--sur-photo);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.visionneuse-fermer:hover, .visionneuse-nav:hover { background: rgba(255, 255, 255, 0.24); }
.visionneuse-fermer {
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
}
.visionneuse-nav { top: 50%; transform: translateY(-50%); }
.visionneuse-nav.precedente { left: calc(12px + env(safe-area-inset-left, 0px)); }
.visionneuse-nav.suivante { right: calc(12px + env(safe-area-inset-right, 0px)); }
.lecteur { width: min(960px, calc(100vw - 32px)); }
.lecteur iframe, .lecteur video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 10px;
  background: #000;
}
.lecteur p { margin-top: 12px; text-align: center; }
.lecteur a { color: var(--sur-photo); }

/* ---------- Vidéos ---------- */
.grille-videos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 22px;
}
@media (max-width: 960px) { .grille-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grille-videos { grid-template-columns: minmax(0, 1fr); } }
.carte-video { display: grid; gap: 10px; align-content: start; }
.ecran {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--rayon);
  overflow: hidden;
  background: var(--trait);
  color: var(--sur-photo);
  cursor: pointer;
}
.ecran:disabled { cursor: default; }
.ecran img { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }
.ecran::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 18, 12, 0.55), rgba(10, 18, 12, 0) 55%);
}
.lecture {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  display: grid;
  place-items: center;
  transition: transform 0.2s;
}
.lecture svg { width: 22px; height: 22px; margin-left: 4px; fill: #1D2620; }
.ecran:not(:disabled):hover .lecture { transform: scale(1.08); }
.ecran:disabled .lecture { opacity: 0.55; }
.duree, .bientot {
  position: absolute;
  z-index: 1;
  bottom: 10px;
  font-family: var(--f-fiche);
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
}
.duree { right: 10px; background: rgba(0, 0, 0, 0.62); }
.bientot { left: 10px; background: var(--feuille); color: var(--encre); }
.carte-video h3 { font-size: 1.2rem; }

/* ---------- Posts ---------- */
.fil { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 46rem; }
.fil > li {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 20px;
  padding-bottom: 30px;
  position: relative;
}
.fil > li::before {
  content: "";
  position: absolute;
  left: 111px;
  top: 12px;
  bottom: 0;
  border-left: 1.5px dashed var(--trait);
}
.fil > li:last-child::before { display: none; }
.fil-date {
  font-family: var(--f-fiche);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--encre-douce);
  text-align: right;
  padding-top: 2px;
}
.fil-date strong { display: block; font-size: 1.5rem; color: var(--encre); font-family: var(--f-titre); font-weight: 400; letter-spacing: 0; }
.post {
  position: relative;
  margin-left: 12px;
  background: var(--feuille);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 18px 20px;
  display: grid;
  gap: 12px;
}
.post::before {
  content: "";
  position: absolute;
  left: -17px;
  top: 10px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ink, var(--mousse));
  box-shadow: 0 0 0 4px var(--papier);
}
.post p { font-size: 1.0938rem; line-height: 1.6; }
.post img { border-radius: 10px; max-height: 320px; width: 100%; object-fit: cover; }
@media (max-width: 560px) {
  .fil > li { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-left: 22px; }
  .fil > li::before { left: 5px; top: 8px; }
  .fil-date { text-align: left; }
  .fil-date strong { display: inline; font-size: 1rem; font-family: var(--f-fiche); font-weight: 700; margin-right: 4px; }
  .post { margin-left: 0; }
  .post::before { left: -22px; top: -22px; }
}

/* ---------- À propos ---------- */
.apropos {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 56px;
  align-items: start;
}
@media (max-width: 860px) { .apropos { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.apropos-photo { position: relative; }
.apropos-photo img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; border-radius: var(--rayon); }
.apropos-photo .surtitre {
  position: absolute;
  bottom: -14px;
  right: 18px;
  background: var(--feuille);
  padding: 6px 14px;
  border-radius: 8px;
  transform: rotate(-3deg);
  box-shadow: var(--ombre);
}
.apropos-texte { display: grid; gap: 22px; }
.apropos-texte h1 { font-size: clamp(2rem, 4.5vw, 2.9rem); }

/* ---------- Contact ---------- */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 48px;
  align-items: start;
}
@media (max-width: 860px) { .contact { grid-template-columns: minmax(0, 1fr); } }
.formulaire {
  display: grid;
  gap: 18px;
  background: var(--feuille);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: clamp(20px, 4vw, 32px);
}
.deux-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 560px) { .deux-champs { grid-template-columns: minmax(0, 1fr); } }
.champ { display: grid; gap: 6px; }
.champ label { font-weight: 600; font-size: 0.9375rem; }
.champ input, .champ select, .champ textarea {
  width: 100%;
  border: 1px solid var(--trait);
  background: var(--papier);
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 1rem;
}
.champ textarea { min-height: 160px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--mousse);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mousse) 25%, transparent);
}
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.statut {
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.9375rem;
  background: color-mix(in srgb, var(--mousse) 14%, var(--feuille));
  border: 1px solid color-mix(in srgb, var(--mousse) 40%, transparent);
}
.statut.erreur {
  background: color-mix(in srgb, var(--u-cuisine) 12%, var(--feuille));
  border-color: color-mix(in srgb, var(--u-cuisine) 45%, transparent);
}
.contact-infos { display: grid; gap: 28px; }
.contact-infos section { display: grid; gap: 8px; }
.contact-infos h2 { font-size: 1.3rem; }
.contact-infos p { color: var(--encre-douce); }
.adresse {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.adresse code {
  font-family: var(--f-fiche);
  font-size: 1rem;
  background: var(--feuille);
  border: 1px solid var(--trait);
  border-radius: 8px;
  padding: 6px 10px;
  user-select: all;
  overflow-wrap: anywhere;
}
.btn-petit {
  border: 1px solid var(--trait);
  background: transparent;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-petit:hover { border-color: var(--mousse); }
.reseaux { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.reseaux a {
  display: inline-block;
  border: 1px solid var(--trait);
  border-radius: 999px;
  padding: 6px 14px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9375rem;
}

/* ---------- Pied de page ---------- */
.pied { background: var(--bandeau); color: var(--sur-bandeau); }
.pied a { color: var(--sur-bandeau); text-decoration: none; opacity: 0.88; }
.pied a:hover { opacity: 1; text-decoration: underline; }
.pied-cadre {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding-block: 44px 28px;
}
@media (max-width: 860px) { .pied-cadre { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pied-marque { grid-column: 1 / -1; } }
.pied .logo-nom span { color: inherit; opacity: 0.75; }
.pied .devise { color: var(--sur-bandeau); opacity: 0.85; margin-top: 6px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.9375rem; }
.pied-titre {
  font-family: var(--f-fiche);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 10px;
}
.pied-compteur p:last-child { font-size: 0.9375rem; }
.pied-compteur strong { font-family: var(--f-titre); font-weight: 400; font-size: 1.6rem; display: block; font-variant-numeric: tabular-nums; }
.pied-bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 16px calc(20px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.8125rem;
  opacity: 0.8;
}

/* ---------- Message flash ---------- */
.message-flash {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 30;
  background: var(--encre);
  color: var(--papier);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  box-shadow: var(--ombre);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* ---------- Divers ---------- */
.pile { display: grid; gap: 24px; }
.h-section { font-size: clamp(1.5rem, 3vw, 2rem); }
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.chargement { color: var(--encre-douce); padding-block: 40px; }
.post p + p { margin-top: -4px; }

/* ---------- Mentions légales et administration ---------- */
.mentions { max-width: 46rem; }
.pied-liens { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.admin { display: grid; gap: 36px; padding-block: 28px 72px; max-width: 800px; }
.admin-connexion {
  display: grid;
  gap: 14px;
  justify-items: start;
  background: var(--feuille);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: clamp(20px, 4vw, 28px);
}
.admin-aide { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.admin-aide li { display: grid; gap: 4px; padding-bottom: 22px; border-bottom: 1px dashed var(--trait); }
.admin-aide h2 { font-size: 1.3rem; }
.admin-note { color: var(--encre-douce); }