@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/fraunces-latin.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: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/karla-latin.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: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/karla-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/karla-italic-latin.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: 'Karla';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/karla-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ==========================================================================
   LpB Carton — Design system « L'Atelier »
   Palette héritée du site d'origine : terracotta, kraft, crème, brun.
   ========================================================================== */

:root {
  --creme: #FBF7F2;
  --beige: #F5EFE6;
  --sable: #EFE4D4;
  --blanc: #FFFFFF;
  --kraft: #D4A96A;
  --kraft-doux: #E9D5B3;
  --terra: #B57A6A;
  --terra-fonce: #96594A;
  --terra-pale: #F3E4DE;
  --brun: #4A2C0A;
  --encre: #3D2B1F;
  --taupe: #7C6A58;
  --ligne: #EAE0D0;
  --ombre: 74, 44, 10;

  --f-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --f-texte: 'Karla', 'Lato', 'Segoe UI', sans-serif;

  --contenu: 1140px;
  --lecture: 720px;
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;
  --transition: .25s cubic-bezier(.4, 0, .2, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--encre);
  font-family: var(--f-texte);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video, iframe { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--brun);
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }

p { margin: 0 0 1.2em; }

a { color: var(--terra-fonce); text-decoration-color: color-mix(in srgb, var(--terra) 45%, transparent); text-underline-offset: 3px; transition: color var(--transition); }
a:hover { color: var(--terra); }

::selection { background: var(--kraft-doux); color: var(--brun); }

:focus-visible { outline: 3px solid var(--terra); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brun); color: var(--creme); padding: .7rem 1.2rem; border-radius: 0 0 var(--r-s) 0;
}
.skip-link:focus { left: 0; }

.contenu { max-width: var(--contenu); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }

/* Grain papier très léger sur le fond */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .29 0 0 0 0 .17 0 0 0 0 .04 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Motif signature : la cannelure (ondulation du carton)
   -------------------------------------------------------------------------- */
.cannelure {
  display: block; width: 100%; height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='14' viewBox='0 0 56 14'%3E%3Cpath d='M0 7c7-8 14-8 21 0s14 8 21 0 10-5 14-2' fill='none' stroke='%23D4A96A' stroke-width='2' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 56px 14px;
}

.titre-section {
  display: flex; flex-direction: column; align-items: flex-start; gap: .4rem;
  margin-bottom: 2rem;
}
.titre-section .surtitre {
  font-family: var(--f-texte); font-size: .8rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--terra-fonce);
}
.titre-section h2 { margin: 0; }
.titre-section .filet {
  width: 84px; height: 10px; margin-top: .35rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='10' viewBox='0 0 42 10'%3E%3Cpath d='M0 5c5.25-6 10.5-6 15.75 0S26.25 11 31.5 5 39 1 42 3' fill='none' stroke='%23B57A6A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-size: 42px 10px;
}
.titre-section.centre { align-items: center; text-align: center; }

/* Étiquette kraft (catégories, badges) */
.etiquette {
  display: inline-block;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brun); background: var(--kraft-doux);
  padding: .28em .8em; border-radius: 4px;
  position: relative;
  text-decoration: none;
}
a.etiquette:hover { background: var(--kraft); color: var(--brun); }

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--f-texte); font-weight: 700; font-size: .95rem;
  padding: .78em 1.5em; border-radius: var(--r-s);
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
}
.btn svg { flex: none; }
.btn-plein {
  background: var(--terra-fonce); color: var(--blanc);
}
.btn-plein:hover {
  background: #7E4538; color: var(--blanc);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(var(--ombre), .45);
}
.btn-ligne {
  background: transparent; color: var(--brun); border-color: color-mix(in srgb, var(--brun) 32%, transparent);
}
.btn-ligne:hover { border-color: var(--brun); color: var(--brun); transform: translateY(-2px); }
.btn-kraft { background: var(--brun); color: var(--creme); }
.btn-kraft:hover { background: #3A2208; color: var(--blanc); transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */
.entete {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--creme) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ligne);
}
.entete-inner {
  display: flex; align-items: center; gap: 1.5rem;
  padding-block: .85rem;
}
.logo {
  display: flex; align-items: center; gap: .65rem;
  text-decoration: none; color: var(--brun);
  margin-right: auto;
}
.logo-mark {
  width: 44px; height: 45px; flex: none;
  display: grid; place-items: center;
  transition: transform var(--transition);
}
.logo-mark img { display: block; width: 100%; height: auto; }
.logo:hover .logo-mark { transform: rotate(-8deg) scale(1.05); }
.logo-texte { display: flex; flex-direction: column; line-height: 1.05; }
.logo-nom { font-family: var(--f-display); font-weight: 700; font-size: 1.35rem; color: var(--brun); }
.logo-slogan { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); font-weight: 700; }

.nav-principale { display: flex; align-items: center; gap: .25rem; }
.nav-principale a {
  font-weight: 700; font-size: .95rem; color: var(--encre); text-decoration: none;
  padding: .5em .8em; border-radius: 8px;
  transition: background var(--transition), color var(--transition);
}
.nav-principale a:hover { background: var(--beige); color: var(--brun); }
.nav-principale a[aria-current="page"] { color: var(--terra-fonce); }
.nav-principale .btn { margin-left: .5rem; padding: .55em 1.1em; font-size: .88rem; }
.nav-principale a.btn-plein { color: var(--blanc); }
.nav-principale a.btn-plein:hover { color: var(--blanc); background: #7E4538; }

.burger {
  display: none; background: none; border: none; cursor: pointer; padding: .7rem;
  color: var(--brun);
}
.burger .ic-fermer { display: none; }
.burger[aria-expanded="true"] .ic-ouvrir { display: none; }
.burger[aria-expanded="true"] .ic-fermer { display: block; }

@media (max-width: 920px) {
  .burger { display: block; }
  .nav-principale {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: .2rem;
    background: var(--creme); border-bottom: 1px solid var(--ligne);
    padding: 1rem clamp(1.1rem, 4vw, 2rem) 1.4rem;
    box-shadow: 0 24px 40px -24px rgba(var(--ombre), .25);
  }
  .nav-principale.ouverte { display: flex; }
  .nav-principale a { padding: .8em .9em; }
  .nav-principale .btn { margin: .5rem 0 0; justify-content: center; }
}

/* --------------------------------------------------------------------------
   Héros (accueil)
   -------------------------------------------------------------------------- */
.heros { position: relative; overflow: hidden; padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 6vw, 5rem); }
.heros-grille {
  display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.heros .surtitre {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--terra-fonce); margin-bottom: 1.2rem;
}
.heros .surtitre::before { content: ""; width: 34px; height: 2px; background: var(--terra); border-radius: 2px; }
.heros h1 { margin-bottom: .5em; }
.heros h1 em { font-style: italic; color: var(--terra); }
.heros .accroche { font-size: 1.15rem; color: var(--taupe); max-width: 34em; margin-bottom: 1.8em; }
.heros-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2.2rem; }
.heros-chiffres { display: flex; gap: clamp(1.4rem, 4vw, 2.6rem); flex-wrap: wrap; }
.heros-chiffres div { display: flex; flex-direction: column; }
.heros-chiffres strong { font-family: var(--f-display); font-size: 1.6rem; color: var(--brun); line-height: 1.2; }
.heros-chiffres span { font-size: .85rem; color: var(--taupe); }

/* Collage photos façon table d'atelier */
.collage { position: relative; min-height: 420px; }
.collage figure {
  position: absolute; margin: 0;
  background: var(--blanc); padding: 10px 10px 14px;
  border-radius: 6px;
  box-shadow: 0 18px 40px -18px rgba(var(--ombre), .35);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.collage figure:hover { transform: scale(1.03) rotate(0deg) !important; z-index: 5; }
.collage img { display: block; border-radius: 3px; object-fit: cover; }
.collage .c1 { top: 0; left: 4%; width: 58%; transform: rotate(-3deg); z-index: 2; }
.collage .c2 { top: 26%; right: 0; width: 48%; transform: rotate(2.5deg); z-index: 3; }
.collage .c3 { bottom: 0; left: 12%; width: 46%; transform: rotate(-1.5deg); z-index: 1; }
.collage figure::after {
  content: ""; position: absolute; top: -12px; left: 50%; transform: translateX(-50%) rotate(-2deg);
  width: 74px; height: 24px;
  background: color-mix(in srgb, var(--kraft) 82%, transparent);
  opacity: .85; border-radius: 2px;
}

@media (max-width: 860px) {
  .heros-grille { grid-template-columns: 1fr; }
  .collage { min-height: 340px; max-width: 480px; margin-inline: auto; width: 100%; }
}

/* --------------------------------------------------------------------------
   Sections & cartes
   -------------------------------------------------------------------------- */
.section { padding-block: clamp(2.8rem, 6vw, 4.6rem); }
.section-beige { background: var(--beige); }
.section-brune { background: var(--brun); color: var(--creme); }
.section-brune h2, .section-brune h3 { color: var(--creme); }

.grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.6rem; }

.carte {
  background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-m);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}
.carte:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 48px -20px rgba(var(--ombre), .22);
}
.carte-image { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--beige); }
.carte-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.carte:hover .carte-image img { transform: scale(1.045); }
.carte-image .etiquette { position: absolute; top: .9rem; left: .9rem; box-shadow: 0 4px 10px -4px rgba(var(--ombre), .4); }
.carte-corps { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.carte-corps time { font-size: .82rem; color: var(--taupe); letter-spacing: .04em; }
.carte-corps h3 { margin: 0; font-size: 1.22rem; }
.carte-corps h3 a { color: inherit; text-decoration: none; }
.carte-corps h3 a::after { content: ""; position: absolute; inset: 0; }
.carte { position: relative; }
.carte-corps h3 a:hover { color: var(--terra-fonce); }
.carte-corps .extrait { color: var(--taupe); font-size: .95rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.carte-corps .lire {
  margin-top: auto; padding-top: .6rem;
  font-weight: 700; font-size: .88rem; color: var(--terra-fonce);
  display: inline-flex; align-items: center; gap: .4em;
}

/* Atouts du carton (écologie, résistance, légèreté) */
.atouts-intro {
  text-align: center; max-width: 44em; margin: -.6rem auto 2.4rem;
  font-size: 1.08rem; color: var(--taupe);
}
.atouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; }
.atout {
  background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-m);
  padding: 1.9rem 1.7rem; text-align: center;
  transition: transform var(--transition), box-shadow var(--transition);
}
.atout:hover { transform: translateY(-5px); box-shadow: 0 24px 44px -22px rgba(var(--ombre), .22); }
.atout-icone {
  width: 58px; height: 58px; display: inline-grid; place-items: center;
  background: var(--kraft-doux); color: var(--brun); border-radius: 50%;
  margin-bottom: 1rem;
  transition: transform var(--transition), background var(--transition);
}
.atout:hover .atout-icone { transform: rotate(-8deg) scale(1.08); background: var(--terra-pale); color: var(--terra-fonce); }
.atout h3 { margin-bottom: .4em; }
.atout p { margin: 0; font-size: .95rem; color: var(--taupe); }

/* Tuiles d'entrée (accueil « par où commencer ») */
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; }
.tuile {
  position: relative; display: flex; flex-direction: column; gap: .6rem;
  background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-m);
  padding: 1.8rem 1.6rem 1.6rem;
  text-decoration: none; color: var(--encre);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.tuile:hover { transform: translateY(-5px); box-shadow: 0 24px 44px -22px rgba(var(--ombre), .25); border-color: var(--kraft); color: var(--encre); }
.tuile-icone {
  width: 52px; height: 52px; display: grid; place-items: center;
  background: var(--terra-pale); color: var(--terra-fonce); border-radius: 14px;
  margin-bottom: .4rem;
  transition: transform var(--transition), background var(--transition);
}
.tuile:hover .tuile-icone { transform: rotate(-6deg) scale(1.06); background: var(--kraft-doux); color: var(--brun); }
.tuile h3 { margin: 0; font-size: 1.25rem; }
.tuile p { margin: 0; color: var(--taupe); font-size: .95rem; }
.tuile .lire { font-weight: 700; font-size: .88rem; color: var(--terra-fonce); margin-top: .3rem; }

/* Bande galerie (défilement horizontal) */
.bande-galerie {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(210px, 26vw, 300px);
  gap: 1.2rem; overflow-x: auto; padding-bottom: 1rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--kraft) transparent;
}
.bande-galerie > a { scroll-snap-align: start; }
.vignette {
  position: relative; display: block; border-radius: var(--r-m); overflow: hidden;
  aspect-ratio: 3 / 4; text-decoration: none;
  box-shadow: 0 14px 30px -18px rgba(var(--ombre), .35);
}
.vignette img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.vignette:hover img { transform: scale(1.06); }
.vignette::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(42, 24, 6, .78));
}
.vignette span {
  position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1rem; z-index: 2;
  font-family: var(--f-display); font-size: 1.25rem; font-weight: 600; color: var(--creme);
}

/* --------------------------------------------------------------------------
   Vidéos YouTube (façades cliquables) & abonnements réseaux
   -------------------------------------------------------------------------- */
.grille-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.6rem; }
.carte-video h3 { font-size: 1.08rem; margin: .9rem 0 .15rem; color: var(--creme); }
.carte-video time { font-size: .82rem; color: color-mix(in srgb, var(--creme) 55%, transparent); }
.video-lite {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  padding: 0; border: none; border-radius: var(--r-m); overflow: hidden;
  cursor: pointer; background: #000;
  box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .55);
}
.video-lite img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease, opacity .3s; }
.video-lite:hover img { transform: scale(1.05); opacity: .85; }
.bouton-lecture {
  position: absolute; inset: 0; margin: auto; width: 64px; height: 64px;
  display: grid; place-items: center; padding-left: 4px;
  background: rgba(30, 18, 6, .72); color: var(--creme);
  border-radius: 50%; backdrop-filter: blur(3px);
  transition: background var(--transition), transform var(--transition);
}
.video-lite:hover .bouton-lecture { background: var(--terra); transform: scale(1.1); }
.video-lite iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.prose .video-lite { margin: 1.6em auto; max-width: 640px; display: block; box-shadow: 0 16px 32px -16px rgba(var(--ombre), .35); }

.suivre { display: flex; gap: .8rem; flex-wrap: wrap; }
.btn-youtube { background: #C4302B; color: #fff; }
.btn-youtube:hover { background: #A32824; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .4); }
.btn-ligne-clair { background: transparent; color: var(--creme); border-color: color-mix(in srgb, var(--creme) 40%, transparent); }
.btn-ligne-clair:hover { border-color: var(--creme); color: var(--blanc); transform: translateY(-2px); }

.suivre-article {
  max-width: var(--lecture); margin: 1.4rem auto 0;
  background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-m);
  padding: 1.4rem 1.7rem;
}
.suivre-article p { margin: 0 0 .9rem; font-size: .96rem; color: var(--taupe); }

/* --------------------------------------------------------------------------
   Bandeau newsletter / livre gratuit
   -------------------------------------------------------------------------- */
.bandeau-livre {
  position: relative;
  background: var(--brun);
  border-radius: var(--r-l);
  padding: clamp(2.2rem, 5vw, 3.6rem);
  color: var(--creme);
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 2.5rem; align-items: center;
  overflow: hidden;
}
.bandeau-livre::before {
  content: ""; position: absolute; inset: 0; opacity: .12; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cpath d='M0 14c7-8 14-8 21 0s14 8 21 0 10-5 14-2' fill='none' stroke='%23FBF7F2' stroke-width='2'/%3E%3C/svg%3E");
  background-size: 56px 28px;
}
.bandeau-livre h2 { color: var(--creme); margin-bottom: .4em; }
.bandeau-livre p { color: color-mix(in srgb, var(--creme) 78%, transparent); position: relative; }
.bandeau-livre > * { position: relative; }
.formulaire-news { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }
.formulaire-news input {
  flex: 1 1 200px;
  font: inherit; padding: .8em 1.1em;
  border: 2px solid transparent; border-radius: var(--r-s);
  background: var(--creme); color: var(--encre);
}
.formulaire-news input:focus { outline: none; border-color: var(--kraft); }
.formulaire-news .btn { flex: none; }
.note-news { font-size: .82rem; opacity: .75; margin: .6rem 0 0; }
.livre-visuel { text-align: center; }
.livre-visuel img {
  max-width: 240px; border-radius: 8px;
  box-shadow: 0 26px 50px -20px rgba(0, 0, 0, .5);
  transform: rotate(2.5deg);
  transition: transform .35s ease;
}
.bandeau-livre:hover .livre-visuel img { transform: rotate(0deg) scale(1.02); }
@media (max-width: 760px) {
  .bandeau-livre { grid-template-columns: 1fr; }
  .livre-visuel { order: -1; }
  .livre-visuel img { max-width: 170px; }
}

/* --------------------------------------------------------------------------
   Portrait / à propos
   -------------------------------------------------------------------------- */
.portrait-grille {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.portrait-cadre { position: relative; max-width: 400px; }
.portrait-cadre img {
  display: block; width: 100%; border-radius: var(--r-m);
  box-shadow: 0 24px 48px -20px rgba(var(--ombre), .3);
}
.portrait-cadre::before {
  content: ""; position: absolute; inset: -14px -14px auto auto;
  width: 70%; height: 70%;
  border: 2px solid var(--kraft); border-radius: var(--r-m);
  z-index: -1;
}
.citation {
  font-family: var(--f-display); font-style: italic; font-size: 1.25rem;
  color: var(--terra-fonce);
  border-left: 3px solid var(--kraft); padding-left: 1.1rem; margin: 1.4rem 0;
}
@media (max-width: 760px) { .portrait-grille { grid-template-columns: 1fr; } .portrait-cadre { margin-inline: auto; } }

/* --------------------------------------------------------------------------
   Listes d'articles (blog, catégories) & pagination
   -------------------------------------------------------------------------- */
.entete-page { padding-block: clamp(2.4rem, 5vw, 3.8rem) clamp(1.6rem, 3vw, 2.4rem); }
.entete-page .fil { margin-bottom: 1rem; }
.entete-page h1 { margin-bottom: .3em; }
.entete-page .description { font-size: 1.12rem; color: var(--taupe); max-width: 46em; }

.fil {
  font-size: .84rem; color: var(--taupe);
  display: flex; flex-wrap: wrap; gap: .35em; align-items: center;
}
.fil a { color: var(--taupe); text-decoration: none; }
.fil a:hover { color: var(--terra-fonce); }
.fil .sep { opacity: .5; }

.filtres { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2rem; }
.filtres a {
  font-size: .85rem; font-weight: 700; text-decoration: none;
  padding: .45em 1.05em; border-radius: 100px;
  min-height: 44px; display: inline-flex; align-items: center;
  border: 1.5px solid var(--ligne); color: var(--encre); background: var(--blanc);
  transition: all var(--transition);
}
.filtres a:hover { border-color: var(--kraft); background: var(--kraft-doux); }
.filtres a.actif { background: var(--brun); border-color: var(--brun); color: var(--creme); }

.pagination { display: flex; justify-content: center; align-items: center; gap: .5rem; margin-top: 3rem; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding-inline: .6em;
  border-radius: 10px; text-decoration: none; font-weight: 700; font-size: .95rem;
  border: 1.5px solid var(--ligne); color: var(--encre); background: var(--blanc);
  transition: all var(--transition);
}
.pagination a:hover { border-color: var(--kraft); background: var(--kraft-doux); }
.pagination .actuel { background: var(--brun); border-color: var(--brun); color: var(--creme); }
.pagination .points { border: none; background: none; }

/* --------------------------------------------------------------------------
   Article (page de lecture)
   -------------------------------------------------------------------------- */
.article-entete { padding-block: clamp(2.4rem, 5vw, 3.6rem) 1.5rem; max-width: var(--lecture); margin-inline: auto; }
.article-entete .meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem;
  margin-top: 1.1rem; font-size: .88rem; color: var(--taupe);
}
.article-image-une { max-width: 920px; margin: 1rem auto 0; }
.article-image-une img { width: 100%; border-radius: var(--r-m); box-shadow: 0 20px 44px -20px rgba(var(--ombre), .3); }

.prose { max-width: var(--lecture); margin-inline: auto; padding-block: 1.5rem 2rem; font-size: 1.09rem; }
.prose h2, .prose h3 { margin-top: 1.8em; }
.prose h2 { font-size: 1.65rem; }
.prose h3 { font-size: 1.3rem; }
.prose img { border-radius: var(--r-s); margin-block: .5em; box-shadow: 0 12px 28px -14px rgba(var(--ombre), .25); }
.prose figure { margin: 1.6em 0; text-align: center; }
.prose figcaption { font-size: .85rem; color: var(--taupe); margin-top: .5em; }
.prose blockquote {
  margin: 1.6em 0; padding: .2em 0 .2em 1.2em;
  border-left: 3px solid var(--kraft);
  font-family: var(--f-display); font-style: italic; font-size: 1.15em; color: var(--terra-fonce);
}
.prose ul, .prose ol { padding-left: 1.4em; margin-bottom: 1.2em; }
.prose li { margin-bottom: .35em; }
.prose iframe { border: none; border-radius: var(--r-s); width: 100%; aspect-ratio: 16 / 9; height: auto; }
.prose .wp-video, .prose video { width: 100%; border-radius: var(--r-s); }
.prose hr { border: none; height: 10px; margin: 2.2em auto; width: 130px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='10' viewBox='0 0 42 10'%3E%3Cpath d='M0 5c5.25-6 10.5-6 15.75 0S26.25 11 31.5 5 39 1 42 3' fill='none' stroke='%23D4A96A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x; background-size: 42px 10px;
}

/* Galeries héritées de WordPress, converties en grille propre */
.galerie-grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem; margin: 1.6em 0;
}
.prose .galerie-grille { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.galerie-grille figure { margin: 0; text-align: center; }
.galerie-grille a { display: block; border-radius: var(--r-s); overflow: hidden; }
.galerie-grille img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  border-radius: var(--r-s); margin: 0; box-shadow: none;
  transition: transform .4s ease;
}
.galerie-grille a:hover img { transform: scale(1.05); }
.galerie-grille figcaption { font-size: .82rem; color: var(--taupe); margin-top: .4em; }

/* Collections de la galerie : grande grille */
.galerie-page {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.2rem;
}
.galerie-page figure { margin: 0; }
.galerie-page a { display: block; border-radius: var(--r-m); overflow: hidden; box-shadow: 0 10px 24px -14px rgba(var(--ombre), .25); }
.galerie-page img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: transform .45s ease; }
.galerie-page a:hover img { transform: scale(1.05); }
.galerie-page figcaption { font-size: .86rem; color: var(--taupe); margin-top: .5em; text-align: center; }

/* Lightbox */
.lightbox { border: none; background: rgba(30, 18, 6, .92); padding: 0; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; }
.lightbox::backdrop { background: rgba(30, 18, 6, .92); }
.lightbox-inner { display: grid; place-items: center; width: 100%; height: 100%; padding: 3.5rem 1rem 2.5rem; position: relative; }
.lightbox img { max-width: min(94vw, 1100px); max-height: 82vh; width: auto; height: auto; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.lightbox .lb-legende { color: var(--creme); margin-top: 1rem; font-size: .95rem; text-align: center; }
.lightbox button {
  position: absolute; background: rgba(251, 247, 242, .12); color: var(--creme);
  border: none; border-radius: 50%; width: 46px; height: 46px; cursor: pointer;
  display: grid; place-items: center; transition: background var(--transition);
}
.lightbox button:hover { background: rgba(251, 247, 242, .28); }
.lightbox .lb-fermer { top: 1rem; right: 1rem; }
.lightbox .lb-prec { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox .lb-suiv { right: 1rem; top: 50%; transform: translateY(-50%); }

/* Navigation article précédent / suivant */
.article-nav {
  max-width: var(--lecture); margin: 2rem auto 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.article-nav a {
  display: flex; flex-direction: column; gap: .3rem;
  background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-m);
  padding: 1.1rem 1.3rem; text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}
.article-nav a:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -18px rgba(var(--ombre), .25); }
.article-nav .sens { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--terra-fonce); }
.article-nav .titre { font-family: var(--f-display); font-weight: 600; color: var(--brun); font-size: 1.02rem; line-height: 1.3; }
.article-nav .suivant { text-align: right; align-items: flex-end; }
@media (max-width: 640px) { .article-nav { grid-template-columns: 1fr; } }

/* Encadré auteur en fin d'article */
.encart-auteur {
  max-width: var(--lecture); margin: 2.5rem auto 0;
  display: flex; gap: 1.3rem; align-items: center;
  background: var(--beige); border-radius: var(--r-m); padding: 1.5rem 1.7rem;
}
.encart-auteur img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex: none; }
.encart-auteur h3 { margin: 0 0 .2em; font-size: 1.15rem; }
.encart-auteur p { margin: 0; font-size: .93rem; color: var(--taupe); }

/* --------------------------------------------------------------------------
   Formations
   -------------------------------------------------------------------------- */
.avis-pause {
  display: flex; gap: 1rem; align-items: flex-start;
  background: var(--terra-pale); border: 1px solid color-mix(in srgb, var(--terra) 35%, transparent);
  border-radius: var(--r-m); padding: 1.3rem 1.5rem; margin-bottom: 2.2rem;
}
.avis-pause svg { flex: none; color: var(--terra-fonce); margin-top: .15rem; }
.avis-pause p { margin: 0; font-size: .98rem; }

.liste-formations { display: grid; gap: 1.4rem; }
.liste-formations.deux-colonnes { grid-template-columns: 1fr 1fr; }
@media (max-width: 680px) { .liste-formations.deux-colonnes { grid-template-columns: 1fr; } }
.formation-texte { grid-template-columns: 1fr !important; border-left: 4px solid var(--kraft); }
.formation {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 1.6rem; align-items: center;
  background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-m);
  padding: 1.6rem; text-decoration: none; color: var(--encre);
  transition: transform var(--transition), box-shadow var(--transition);
}
.formation:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(var(--ombre), .25); color: var(--encre); }
.formation img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-s); }
.formation h3 { margin: 0 0 .3em; }
.formation .duree { font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--terra-fonce); }
.formation p { margin: .4em 0 0; color: var(--taupe); font-size: .96rem; }
@media (max-width: 680px) { .formation { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Boutique
   -------------------------------------------------------------------------- */
.produit .carte-image { aspect-ratio: 1; background: var(--blanc); }
.produit .carte-image img { object-fit: contain; padding: 1.2rem; }
.produit .prix { font-family: var(--f-display); font-size: 1.3rem; font-weight: 700; color: var(--brun); }
.produit .indispo { font-size: .82rem; font-weight: 700; color: var(--terra-fonce); }
.produit .carte-corps .btn { margin-top: .8rem; align-self: flex-start; position: relative; z-index: 2; }
.badge-amazon { font-size: .78rem; color: var(--taupe); }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact-grille { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(2rem, 5vw, 3.5rem); }
.carte-contact {
  background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-m);
  padding: 1.8rem; display: flex; flex-direction: column; gap: 1.1rem;
}
.ligne-contact { display: flex; gap: .9rem; align-items: flex-start; }
.ligne-contact svg { flex: none; color: var(--terra); margin-top: .2rem; }
.ligne-contact strong { display: block; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--taupe); }
.ligne-contact a { font-size: 1.05rem; }
@media (max-width: 760px) { .contact-grille { grid-template-columns: 1fr; } }

/* Réseaux sociaux */
.reseaux { display: flex; gap: .7rem; flex-wrap: wrap; }
.reseaux a {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--beige); color: var(--brun); border-radius: 12px;
  transition: all var(--transition);
}
.reseaux a:hover { background: var(--terra); color: var(--blanc); transform: translateY(-3px) rotate(-4deg); }
.section-brune .reseaux a, .pied .reseaux a { background: rgba(251, 247, 242, .12); color: var(--creme); }
.section-brune .reseaux a:hover, .pied .reseaux a:hover { background: var(--terra); }

/* --------------------------------------------------------------------------
   Recherche
   -------------------------------------------------------------------------- */
.champ-recherche { display: flex; gap: .7rem; max-width: 560px; margin-bottom: 2rem; }
.champ-recherche input {
  flex: 1; font: inherit; font-size: 1.05rem;
  padding: .85em 1.2em; border: 2px solid var(--ligne); border-radius: var(--r-s);
  background: var(--blanc); color: var(--encre);
}
.champ-recherche input:focus { outline: none; border-color: var(--kraft); }
.resultats-info { color: var(--taupe); font-size: .95rem; margin-bottom: 1.4rem; }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.pied { background: var(--brun); color: color-mix(in srgb, var(--creme) 82%, transparent); margin-top: clamp(3rem, 7vw, 5rem); }
.pied-vague { height: 14px; background: var(--brun);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='14' viewBox='0 0 56 14'%3E%3Cpath d='M0 14V7c7-8 14-8 21 0s14 8 21 0c5-5.5 10-6.5 14-3V14z'/%3E%3C/svg%3E") repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='14' viewBox='0 0 56 14'%3E%3Cpath d='M0 14V7c7-8 14-8 21 0s14 8 21 0c5-5.5 10-6.5 14-3V14z'/%3E%3C/svg%3E") repeat-x;
  mask-size: 56px 14px; -webkit-mask-size: 56px 14px;
  margin-top: -14px;
}
.pied a { color: color-mix(in srgb, var(--creme) 88%, transparent); text-decoration: none; }
.pied a:hover { color: var(--kraft); }
.pied-grille {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 2.5rem; padding-block: 3.2rem 2.4rem;
}
.pied h3 { color: var(--creme); font-size: 1.05rem; margin-bottom: 1rem; }
.pied .logo-nom { color: var(--creme); }
.pied .logo-slogan { color: color-mix(in srgb, var(--creme) 60%, transparent); }
.pied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; font-size: .95rem; }
.pied ul a { display: inline-block; padding-block: .3rem; }
.pied .apropos { font-size: .95rem; margin-top: 1rem; max-width: 30em; }
.pied-bas {
  border-top: 1px solid rgba(251, 247, 242, .14);
  padding-block: 1.3rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  font-size: .85rem;
}
.pied-bas ul { list-style: none; display: flex; flex-direction: row; gap: 1.3rem; margin: 0; padding: 0; flex-wrap: wrap; }
@media (max-width: 860px) { .pied-grille { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .pied-grille { grid-template-columns: 1fr; gap: 1.8rem; } }

/* --------------------------------------------------------------------------
   Apparitions au défilement
   -------------------------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Page 404
   -------------------------------------------------------------------------- */
.page-404 { text-align: center; padding-block: clamp(4rem, 10vw, 7rem); }
.page-404 .grand { font-family: var(--f-display); font-size: clamp(5rem, 16vw, 9rem); font-weight: 700; color: var(--kraft); line-height: 1; }

/* --------------------------------------------------------------------------
   Bandeau de consentement (mesure d'audience anonyme)
   -------------------------------------------------------------------------- */
.bandeau-rgpd {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 150;
  max-width: 620px; margin-inline: auto;
  background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--r-m);
  box-shadow: 0 24px 48px -20px rgba(var(--ombre), .35);
  padding: 1.1rem 1.3rem;
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
}
.bandeau-rgpd[hidden] { display: none; }
.bandeau-rgpd p { margin: 0; font-size: .88rem; color: var(--taupe); flex: 1 1 300px; }
.bandeau-rgpd p strong { color: var(--brun); }
.bandeau-rgpd-boutons { display: flex; gap: .6rem; flex: none; }
.bandeau-rgpd .btn { font-size: .85rem; padding: .55em 1.1em; }

/* Piège à robots des formulaires (invisible pour les humains) */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* Message de retour des formulaires newsletter */
.formulaire-news .retour { flex-basis: 100%; font-size: .95rem; font-weight: 700; margin: .3rem 0 0; }
.formulaire-news .retour.ok { color: #BFE8BF; }
.section .formulaire-news .retour.ok { color: var(--ok, #4E7A4E); }
.formulaire-news .retour.ko { color: #F2B8AE; }

/* Impression */
@media print {
  .entete, .pied, .pied-vague, .article-nav, .bandeau-livre, .burger { display: none !important; }
  body::before { display: none; }
  body { background: #fff; }
}