/* ==========================================================
   SCRIBE+ — Design System
   Style minimaliste moderne (Linear / Vercel / Stripe)
   ========================================================== */

/* --- 1. Design Tokens ----------------------------------- */
:root {
  /* === Charte « Encre & Papeterie » === */
  --ink: #16130F; --ink-soft: #38322B; --sheet: #FCF8F0; --bg-2: #ECE7DC;
  --accent-2: #1F5040; --accent-lite: #F0A07A;

  --color-primary: #16130F;        /* encre : header, surfaces sombres, boutons par défaut */
  --color-primary-hover: #2A241D;
  --color-accent: #C8442B;         /* cinabre : CTA clés, liens/états actifs (blanc dessus AA 4.86:1) */
  --color-accent-hover: #A6371F;
  --color-bg: #F4F1EA;             /* fond clair frais */
  --color-surface: #FFFFFF;        /* surfaces UI blanches */
  --color-text: #16130F;
  --color-text-muted: #574E3E;
  --color-text-light: #79705F;
  --color-border: rgba(22,19,15,0.12);
  --color-border-dark: rgba(22,19,15,0.22);

  --font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: 'Bricolage Grotesque', 'Hanken Grotesk', sans-serif;
  --font-letter: 'Newsreader', Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  --shadow-xs: 0 1px 2px rgba(22,19,15,0.05);
  --shadow-sm: 0 1px 3px rgba(22,19,15,0.08), 0 1px 2px rgba(22,19,15,0.05);
  --shadow-md: 0 6px 14px -6px rgba(22,19,15,0.18);
  --shadow-lg: 0 14px 30px -10px rgba(22,19,15,0.22);
  --shadow-xl: 0 24px 50px -16px rgba(22,19,15,0.28);

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- 2. Reset & Base ------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent }
html { font-family: var(--font-family); line-height: 1.6; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden }
body { margin: 0; background-color: var(--color-bg); color: var(--color-text); font-size: 15px; padding-top: 60px; list-style-type: none; overflow-x: hidden }
[hidden], .hidden { display: none !important }
img { border-style: none; max-width: 100%; height: auto }
a { color: var(--color-primary); background-color: transparent; text-decoration: none; transition: color var(--transition-fast) }
a:hover { color: var(--color-primary-hover) }
button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0 }
button, select { text-transform: none }
[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner { border-style: none; padding: 0 }
fieldset { padding: .35em .75em .625em }
legend { padding: 0; box-sizing: border-box; color: inherit; display: table; max-width: 100%; white-space: normal }
textarea { overflow: auto }
[type=checkbox], [type=radio] { padding: 0; box-sizing: border-box }
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto }
[type=search] { outline-offset: -2px }
::-webkit-file-upload-button { font: inherit }
progress, sub, sup { vertical-align: baseline }
sub, sup { font-size: 75%; line-height: 0; position: relative }
sub { bottom: -.25em }
sup { top: -.5em }
small { font-size: 80% }
b, strong { font-weight: 600 }
code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.9em }
abbr[title] { border-bottom: none; text-decoration: underline dotted }
hr { box-sizing: content-box; height: 0; border: none; border-top: 1px solid var(--color-border); margin-bottom: 20px }
details, main { display: block }
summary { display: list-item }
button, hr, input { overflow: visible }

/* --- 3. Accessibility ----------------------------------- */

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px }
/* surlignage <mark> sur le ton cinabre (sinon jaune fluo navigateur) */
mark { background: rgba(200,68,43,.14); color: var(--color-text); padding: .04em .22em; border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0 }

/* --- 4. Typography -------------------------------------- */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--color-text) }
h1 { font-size: 2.5rem; font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 var(--space-5) 0; color: var(--color-text) }
h2 { font-size: 1.65rem; font-weight: 700; line-height: 1.18; letter-spacing: -0.02em; margin-bottom: var(--space-5); color: var(--color-text) }
h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em }
h4 { font-size: 1.05rem; font-weight: 600; line-height: 1.4 }
p { margin-bottom: var(--space-4); line-height: 1.7 }

/* --- 5. Layout ------------------------------------------ */
.content { margin: var(--space-10) auto var(--space-12); padding: 0 var(--space-6); max-width: 1280px; line-height: 1.7; font-size: 15px }

/* --- 6. Pure CSS Grid ----------------------------------- */
.pure-g { display: flex; flex-flow: row wrap; align-content: flex-start }
.pure-u, .btn, .menu a { display: inline-block }
.pure-u { vertical-align: top }
.pure-u-1, .pure-u-1-1, .pure-u-1-2, .pure-u-1-3, .pure-u-1-4, .pure-u-1-5, .pure-u-1-6,
.pure-u-2-3, .pure-u-2-5, .pure-u-3-4, .pure-u-3-5, .pure-u-4-5, .pure-u-5-6 {
  display: inline-block; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto
}
.pure-u-1-6 { width: 16.6667% }
.pure-u-1-5 { width: 20% }
.pure-u-1-4 { width: 25% }
.pure-u-1-3 { width: 33.3333% }
.pure-u-2-5 { width: 40% }
.pure-u-1-2 { width: 50% }
.pure-u-3-5 { width: 60% }
.pure-u-2-3 { width: 66.6667% }
.pure-u-3-4 { width: 75% }
.pure-u-4-5 { width: 80% }
.pure-u-5-6 { width: 83.3333% }
.pure-u-1, .pure-u-1-1 { width: 100% }

/* Pure responsive: sm (35.5em) */
@media screen and (min-width: 35.5em) {
  .pure-u-sm-1, .pure-u-sm-1-1, .pure-u-sm-1-2, .pure-u-sm-1-3, .pure-u-sm-1-4, .pure-u-sm-1-5,
  .pure-u-sm-2-3, .pure-u-sm-2-5, .pure-u-sm-3-4, .pure-u-sm-3-5 {
    display: inline-block; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto
  }
  .pure-u-sm-1-5 { width: 20% } .pure-u-sm-1-4 { width: 25% } .pure-u-sm-1-3 { width: 33.3333% }
  .pure-u-sm-2-5 { width: 40% } .pure-u-sm-1-2 { width: 50% } .pure-u-sm-3-5 { width: 60% }
  .pure-u-sm-2-3 { width: 66.6667% } .pure-u-sm-3-4 { width: 75% } .pure-u-sm-1, .pure-u-sm-1-1 { width: 100% }
}
/* Pure responsive: md (48em) */
@media screen and (min-width: 48em) {
  .pure-u-md-1, .pure-u-md-1-1, .pure-u-md-1-2, .pure-u-md-1-3, .pure-u-md-1-4, .pure-u-md-1-5,
  .pure-u-md-1-6, .pure-u-md-2-3, .pure-u-md-2-5, .pure-u-md-3-4, .pure-u-md-3-5, .pure-u-md-4-5 {
    display: inline-block; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto
  }
  .pure-u-md-1-6 { width: 16.6667% } .pure-u-md-1-5 { width: 20% } .pure-u-md-1-4 { width: 25% }
  .pure-u-md-1-3 { width: 33.3333% } .pure-u-md-2-5 { width: 40% } .pure-u-md-1-2 { width: 50% }
  .pure-u-md-3-5 { width: 60% } .pure-u-md-2-3 { width: 66.6667% } .pure-u-md-3-4 { width: 75% }
  .pure-u-md-4-5 { width: 80% } .pure-u-md-1, .pure-u-md-1-1 { width: 100% }
}
/* Pure responsive: lg (64em) */
@media screen and (min-width: 64em) {
  .pure-u-lg-1, .pure-u-lg-1-1, .pure-u-lg-1-2, .pure-u-lg-1-3, .pure-u-lg-1-4, .pure-u-lg-1-5,
  .pure-u-lg-1-6, .pure-u-lg-1-12, .pure-u-lg-2-3, .pure-u-lg-2-5, .pure-u-lg-3-4, .pure-u-lg-3-5, .pure-u-lg-4-5 {
    display: inline-block; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto
  }
  .pure-u-lg-1-6 { width: 16.6667% } .pure-u-lg-1-5 { width: 20% } .pure-u-lg-1-4 { width: 25% }
  .pure-u-lg-1-3 { width: 33.3333% } .pure-u-lg-2-5 { width: 40% } .pure-u-lg-1-2 { width: 50% }
  .pure-u-lg-3-5 { width: 60% } .pure-u-lg-2-3 { width: 66.6667% } .pure-u-lg-3-4 { width: 75% }
  .pure-u-lg-4-5 { width: 80% } .pure-u-lg-5-6 { width: 83.3333% } .pure-u-lg-1, .pure-u-lg-1-1 { width: 100% }
}
/* Pure responsive: xl (80em) */
@media screen and (min-width: 80em) {
  .pure-u-xl-1, .pure-u-xl-1-1, .pure-u-xl-1-2, .pure-u-xl-1-3, .pure-u-xl-1-4, .pure-u-xl-1-5,
  .pure-u-xl-1-6, .pure-u-xl-2-3, .pure-u-xl-2-5, .pure-u-xl-3-4, .pure-u-xl-3-5, .pure-u-xl-4-5, .pure-u-xl-5-6 {
    display: inline-block; letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto
  }
  .pure-u-xl-1-6 { width: 16.6667% } .pure-u-xl-1-5 { width: 20% } .pure-u-xl-1-4 { width: 25% }
  .pure-u-xl-1-3 { width: 33.3333% } .pure-u-xl-2-5 { width: 40% } .pure-u-xl-1-2 { width: 50% }
  .pure-u-xl-3-5 { width: 60% } .pure-u-xl-2-3 { width: 66.6667% } .pure-u-xl-3-4 { width: 75% }
  .pure-u-xl-4-5 { width: 80% } .pure-u-xl-1, .pure-u-xl-1-1 { width: 100% }
}

/* --- 7. Pure CSS Buttons -------------------------------- */
.pure-button { display: inline-block; line-height: normal; white-space: nowrap; vertical-align: middle; text-align: center; cursor: pointer; user-select: none; box-sizing: border-box; font-family: inherit; font-size: 100%; padding: .5em 1em; border: transparent; text-decoration: none; border-radius: var(--radius-sm); color: #fff; background-color: var(--color-primary); transition: background-color var(--transition-fast), opacity var(--transition-fast) }
.pure-button:visited { color: #fff; background-color: var(--color-primary) }
.pure-button-hover, .pure-button:focus, .pure-button:hover { background-color: var(--color-primary-hover) }
.pure-button:focus { outline: 0 }
.pure-button-active, .pure-button:active { box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset, 0 0 6px rgba(0,0,0,.2) inset }
.pure-button-disabled, .pure-button-disabled:active, .pure-button-disabled:focus, .pure-button-disabled:hover, .pure-button[disabled] { border: none; background-image: none; opacity: .4; cursor: not-allowed; box-shadow: none; pointer-events: none }
.pure-button-primary, .pure-button-selected, a.pure-button-primary, a.pure-button-selected { background-color: var(--color-primary); color: #fff }
.pure-button-hidden { display: none }
.pure-button::-moz-focus-inner { padding: 0; border: 0 }
.pure-button-group { letter-spacing: -.31em; text-rendering: optimizespeed }
.opera-only :-o-prefocus, .pure-button-group { word-spacing: -0.43em }
.pure-button-group .pure-button { letter-spacing: normal; word-spacing: normal; vertical-align: top; text-rendering: auto; margin: 0; border-radius: 0; border-right: 1px solid }
.pure-button-group .pure-button:first-child { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm) }
.pure-button-group .pure-button:last-child { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); border-right: none }

/* --- 8. Pure CSS Forms ---------------------------------- */
.pure-form input[type=color], .pure-form input[type=date], .pure-form input[type=datetime-local],
.pure-form input[type=datetime], .pure-form input[type=email], .pure-form input[type=month],
.pure-form input[type=number], .pure-form input[type=password], .pure-form input[type=search],
.pure-form input[type=tel], .pure-form input[type=text], .pure-form input[type=time],
.pure-form input[type=url], .pure-form input[type=week], .pure-form select, .pure-form textarea {
  padding: .5em .6em; display: inline-block; border: 1px solid var(--color-border-dark); box-shadow: none; border-radius: var(--radius-sm); vertical-align: middle; box-sizing: border-box; transition: border-color var(--transition-fast)
}
.pure-form input:not([type]) { padding: .5em .6em; display: inline-block; border: 1px solid var(--color-border-dark); box-shadow: none; border-radius: var(--radius-sm); box-sizing: border-box }
.pure-form input[type=color] { padding: .2em .5em }
.pure-form input:not([type]):focus, .pure-form input[type=color]:focus, .pure-form input[type=date]:focus,
.pure-form input[type=datetime-local]:focus, .pure-form input[type=datetime]:focus,
.pure-form input[type=email]:focus, .pure-form input[type=month]:focus, .pure-form input[type=number]:focus,
.pure-form input[type=password]:focus, .pure-form input[type=search]:focus, .pure-form input[type=tel]:focus,
.pure-form input[type=text]:focus, .pure-form input[type=time]:focus, .pure-form input[type=url]:focus,
.pure-form input[type=week]:focus, .pure-form select:focus, .pure-form textarea:focus { outline: 0; border-color: var(--color-primary) }
.pure-form input[type=checkbox]:focus, .pure-form input[type=file]:focus, .pure-form input[type=radio]:focus { outline: var(--color-primary) auto 1px }
.pure-form .pure-checkbox, .pure-form .pure-radio { margin: .5em 0; display: block }
.pure-form input:not([type])[disabled], .pure-form input[type=color][disabled], .pure-form input[type=date][disabled],
.pure-form input[type=datetime-local][disabled], .pure-form input[type=datetime][disabled],
.pure-form input[type=email][disabled], .pure-form input[type=month][disabled], .pure-form input[type=number][disabled],
.pure-form input[type=password][disabled], .pure-form input[type=search][disabled], .pure-form input[type=tel][disabled],
.pure-form input[type=text][disabled], .pure-form input[type=time][disabled], .pure-form input[type=url][disabled],
.pure-form input[type=week][disabled], .pure-form select[disabled], .pure-form textarea[disabled] { cursor: not-allowed; background-color: var(--bg-2); color: var(--color-text-light) }
.pure-form input[readonly], .pure-form select[readonly], .pure-form textarea[readonly] { background-color: var(--bg-2); color: var(--color-text-muted); border-color: var(--color-border) }
.pure-form input:focus:invalid, .pure-form select:focus:invalid, .pure-form textarea:focus:invalid { color: var(--color-accent-hover); border-color: var(--color-accent) }
.pure-form input[type=checkbox]:focus:invalid:focus, .pure-form input[type=file]:focus:invalid:focus, .pure-form input[type=radio]:focus:invalid:focus { outline-color: var(--color-accent) }
.pure-form select { height: 2.25em; border: 1px solid var(--color-border-dark); background-color: #fff }
.pure-form select[multiple] { height: auto }
.pure-form label { margin: .5em 0 .2em }
.pure-form fieldset { margin: 0; padding: .35em 0 .75em; border: 0 }
.pure-form legend { display: block; width: 100%; padding: .3em 0; margin-bottom: .3em; color: var(--color-text); border-bottom: 1px solid var(--color-border) }
.pure-form .pure-input-1-4 { width: 25% }
.pure-form .pure-input-1-2 { width: 50% }
.pure-form .pure-input-3-4 { width: 75% }
.pure-form .pure-input-1 { width: 100% }
.pure-form .pure-input-rounded, .pure-form input.pure-input-rounded { border-radius: var(--radius-full); padding: .5em 1em }
.pure-form-aligned input, .pure-form-aligned select, .pure-form-aligned textarea, .pure-form-message-inline { vertical-align: middle; display: inline-block }
.pure-form-aligned textarea { vertical-align: top }
.pure-form-aligned .pure-control-group { margin-bottom: .5em }
.pure-form-aligned .pure-control-group label { text-align: right; display: inline-block; vertical-align: middle; width: 10em; margin: 0 1em 0 0 }
.pure-form-aligned .pure-controls { margin: 1.5em 0 0 11em }
.pure-form .pure-group fieldset { margin-bottom: 10px }
.pure-form .pure-group input, .pure-form .pure-group textarea { display: block; padding: 10px; margin: 0 0 -1px; border-radius: 0; position: relative; top: -1px }
.pure-form .pure-group input:focus, .pure-form .pure-group textarea:focus { z-index: 3 }
.pure-form .pure-group input:first-child, .pure-form .pure-group textarea:first-child { top: 1px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; margin: 0 }
.pure-form .pure-group input:first-child:last-child, .pure-form .pure-group textarea:first-child:last-child { top: 1px; border-radius: var(--radius-sm); margin: 0 }
.pure-form .pure-group input:last-child, .pure-form .pure-group textarea:last-child { top: -2px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); margin: 0 }
.pure-form .pure-group button { margin: .35em 0 }

/* --- 9. Header & Navigation ----------------------------- */
.header {
  position: fixed; top: 0; width: 100%; z-index: 1000;
  background: rgba(22, 19, 15, 0.97);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 1px 3px rgba(0,0,0,0.18)
}
.menu-container { max-width: 1400px; margin: 0 auto; padding: 0 var(--space-5) }
.navbar { display: flex; justify-content: space-between; align-items: center; height: 60px }
.logo { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: #fff; text-decoration: none; letter-spacing: -0.04em; display: inline-flex; align-items: center }
.logo::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent); margin-right: 8px; flex: none }
.logo:hover { color: rgba(255,255,255,0.9) }

/* ===== MÉGA-MENU v2 (Encre & Papeterie) ===== */
.header-inner { max-width: 1280px; height: 60px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 22px }
.nav { display: flex }
@media (min-width: 1201px) { .nav { flex: 1 1 auto; justify-content: center } }
.nav-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0 }
.nav-item { position: static }
.nav-link { display: inline-flex; align-items: center; gap: 6px; color: rgba(255,255,255,0.95); font-family: var(--font-family); font-weight: 500; font-size: 14.5px; line-height: 1; padding: 10px 12px; border-radius: var(--radius-sm); background: none; border: none; cursor: pointer; text-decoration: none; white-space: nowrap; transition: color var(--transition-fast), background var(--transition-fast) }
.nav-link:visited { color: rgba(255,255,255,0.95) }
.nav-link:hover, .nav-item.has-mega:hover > .nav-link, .nav-item.has-mega:focus-within > .nav-link { color: #fff; background: rgba(255,255,255,0.08) }
.chev { width: 11px; height: 11px; opacity: .7; transition: transform var(--transition-normal) }
.has-mega:hover .chev, .has-mega:focus-within .chev, .nav-item.open .chev { transform: rotate(180deg) }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 4px }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; color: rgba(255,255,255,0.95); border-radius: var(--radius-sm); transition: background var(--transition-fast), color var(--transition-fast) }
.icon-btn:hover { background: rgba(255,255,255,0.08); color: #fff }
.icon-btn svg { width: 20px; height: 20px }

.mega { position: absolute; left: 0; right: 0; top: 60px; background: var(--color-surface); border-top: 1px solid var(--color-border); box-shadow: var(--shadow-xl); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity var(--transition-normal), transform var(--transition-normal), visibility var(--transition-normal); z-index: 40 }
.has-mega:hover > .mega, .has-mega:focus-within > .mega { opacity: 1; visibility: visible; transform: translateY(0) }
.mega-inner { max-width: 1280px; margin: 0 auto; padding: 30px 20px 34px; display: flex; flex-wrap: wrap; gap: 22px 32px }
.mega-col { flex: 1 1 165px; min-width: 150px }
.mega-title { display: block; font-family: var(--font-family); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--color-border) }
a.mega-title { text-decoration: none; cursor: pointer; transition: color var(--transition-fast) }
a.mega-title::after { content: "\203A"; margin-left: 6px; display: inline-block; opacity: 0; transform: translateX(-4px); transition: opacity var(--transition-fast), transform var(--transition-fast) }
a.mega-title:hover { color: var(--color-accent-hover) }
a.mega-title:hover::after { opacity: 1; transform: translateX(0) }
a.mega-title:focus-visible { outline: 2px solid var(--color-accent-hover); outline-offset: 3px; border-radius: var(--radius-sm) }
.mega-col ul { list-style: none; margin: 0; padding: 0 }
.mega-col li { margin: 0 }
.mega-col li a { display: block; padding: 6px 0; color: var(--color-text-muted); font-size: 14px; font-weight: 500; text-decoration: none; transition: color var(--transition-fast), padding var(--transition-fast) }
.mega-col li a:hover { color: var(--color-accent); padding-left: 5px }
.mega-feature { flex: 1 1 220px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; display: flex; flex-direction: column }
.mega-feature .mega-title { color: var(--accent-2) }
.mega-card { display: flex; flex-direction: column; gap: 6px; flex: 1; text-decoration: none }
.mega-card strong { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--color-text); letter-spacing: -.01em }
.mega-card p { font-size: .84rem; color: var(--color-text-muted); line-height: 1.5; margin: 0 }
.mega-card .mega-cta { margin-top: auto; padding-top: 10px; color: var(--color-accent); font-weight: 700; font-size: .84rem }

.nav-footer { display: none }

/* Méga-menu mobile (<=1200px) : panneau plein écran, animé, qui remplit l'espace */
@media (max-width: 1200px) {
  /* sans ce reset, le backdrop-filter du header en ferait le bloc conteneur du .nav fixed (panneau tronqué) */
  .header { -webkit-backdrop-filter: none; backdrop-filter: none }
  .nav { position: fixed; top: 60px; left: 0; right: 0; bottom: 0; z-index: 999; display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform .36s cubic-bezier(.22,.61,.36,1);
    overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 0 calc(env(safe-area-inset-bottom, 0px) + 20px);
    background:
      radial-gradient(125% 32% at 100% 0, rgba(200,68,43,0.18), transparent 58%),
      radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px) 0 0 / 26px 26px,
      var(--color-primary) }
  .nav.open { transform: translateX(0) }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; padding: 4px 18px }
  .nav-item { border-bottom: 1px solid rgba(255,255,255,0.09) }
  .nav-link { width: 100%; justify-content: space-between; padding: 18px 6px; font-size: 17px; font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; color: #fff; border-radius: 0 }
  .nav-link:hover, .nav-link:focus-visible { background: none; color: #fff }
  .chev { width: 16px; height: 16px; opacity: .8 }

  /* accordéon animé (grid-template-rows 0fr -> 1fr) */
  .mega { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; background: transparent; z-index: auto;
    display: grid; grid-template-rows: 0fr; transition: grid-template-rows .34s cubic-bezier(.22,.61,.36,1) }
  .nav-item.open > .mega { grid-template-rows: 1fr }
  .mega > .mega-inner { overflow: hidden; min-height: 0; display: block; padding: 0 6px }
  .mega-col { margin-bottom: 14px }
  .mega-title { color: var(--accent-lite); border-color: rgba(255,255,255,0.12) }
  /* Titres-liens en mobile : cible tactile >=44px, hover lisible sur fond sombre, pas de flèche */
  a.mega-title { min-height: 44px; box-sizing: border-box; padding-top: 10px }
  a.mega-title:hover { color: #fff }
  a.mega-title::after { display: none }
  .mega-col li a { display: block; color: rgba(255,255,255,0.72); padding: 9px 0; font-size: 15px }
  .mega-col li a:hover { color: #fff; padding-left: 0 }
  .mega-feature { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12) }
  .mega-feature .mega-title { color: var(--accent-lite) }
  .mega-card strong { color: #fff }
  .mega-card p { color: rgba(255,255,255,0.7) }

  /* pied de menu : remplit le bas de l'écran */
  .nav-footer { display: block; margin-top: auto; padding: 24px 24px calc(env(safe-area-inset-bottom, 0px) + 10px) }
  .nav-footer-tag { color: rgba(255,255,255,0.55); font-size: .82rem; letter-spacing: .04em; margin: 0 0 14px }
  .nav-social { display: flex; gap: 12px }
  .nav-social a { width: 44px; height: 44px; display: grid; place-items: center; border: 1.5px solid rgba(255,255,255,0.16); border-radius: 50%; color: #fff; transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast) }
  .nav-social a:hover { border-color: var(--color-accent); background: rgba(200,68,43,0.16); transform: translateY(-2px) }
  .nav-social svg { width: 18px; height: 18px; stroke: currentColor; fill: none }

  /* entrée en cascade des items à l'ouverture */
  .nav-list > li, .nav-footer { opacity: 0; transform: translateY(14px) }
  .nav.open .nav-list > li, .nav.open .nav-footer { animation: navIn .5s cubic-bezier(.22,.61,.36,1) forwards }
  .nav.open .nav-list > li:nth-child(1) { animation-delay: .06s }
  .nav.open .nav-list > li:nth-child(2) { animation-delay: .11s }
  .nav.open .nav-list > li:nth-child(3) { animation-delay: .16s }
  .nav.open .nav-list > li:nth-child(4) { animation-delay: .21s }
  .nav.open .nav-list > li:nth-child(5) { animation-delay: .26s }
  .nav.open .nav-list > li:nth-child(6) { animation-delay: .31s }
  .nav.open .nav-list > li:nth-child(7) { animation-delay: .36s }
  .nav.open .nav-list > li:nth-child(n+8) { animation-delay: .4s }
  .nav.open .nav-footer { animation-delay: .46s }
}
@keyframes navIn { to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) {
  .nav { transition: none }
  .nav-list > li, .nav-footer { opacity: 1 !important; transform: none !important; animation: none !important }
  .mega { transition: none }
}
.logo-link { display: flex; align-items: center; margin-right: 15px }
.menu-logo { width: 30px; height: 30px; display: block }
.menu { display: flex; list-style: none }
.menu li { margin-left: var(--space-2) }
.menu a { color: rgba(255,255,255,0.85); font-weight: 450; padding: 6px 12px; text-decoration: none; position: relative; border-radius: var(--radius-sm); transition: color var(--transition-fast), background-color var(--transition-fast) }
.menu a:hover { color: #fff; background: rgba(255,255,255,0.1) }
.menu a:after { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 50%; transform: translateX(-50%); background-color: #fff; transition: width var(--transition-normal); border-radius: 1px }
.menu a:hover:after { width: 60% }
.menu-item.has-megamenu:hover .megamenu { opacity: 1; visibility: visible; transform: translateY(0) }
.arrow { display: inline-block; margin-left: 4px; font-size: 10px; transition: transform var(--transition-fast) }
.menu-item.active .arrow { transform: rotate(180deg) }
.lesub:after { content: '▾'; margin-left: 5px; font-size: 0.85em }
.site-title { position: absolute; font-size: 17px; font-weight: 500; text-align: center; left: 50%; transform: translateX(-50%); display: none; color: #fff }

/* --- 10. Megamenu --------------------------------------- */
.megamenu {
  position: fixed; top: 61px; left: 0; width: 100%;
  background: var(--color-surface);
  box-shadow: var(--shadow-xl);
  border-top: 1px solid var(--color-border);
  padding: var(--space-8) 0;
  opacity: 0; visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--transition-normal), visibility var(--transition-normal), transform var(--transition-normal);
  z-index: 100; overflow-y: auto; max-height: 75vh
}
.megamenu-content { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-5); display: flex; flex-direction: column; gap: var(--space-8) }
.megamenu-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6) }
.megamenu-title { display: block; color: var(--color-accent); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border) }
.megamenu-column h3 { color: var(--color-accent); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border) }
.submenu { list-style: none }
.submenu li { margin-bottom: var(--space-1) }
.submenu a { color: var(--color-text-muted); font-size: 14px; font-weight: 400; transition: color var(--transition-fast); display: block; padding: 4px 0; text-decoration: none; border-radius: var(--radius-sm) }
.submenu a:hover { color: var(--color-primary) }

/* Megamenu desktop width */
@media (min-width: 1201px) { .megamenu { max-width: 720px; margin-left: 20%; border-radius: 0 0 var(--radius-lg) var(--radius-lg) } }
@media (min-width: 1301px) { .megamenu { margin-left: 25% } }
@media (min-width: 1401px) { .megamenu { margin-left: 30% } }

/* --- 11. Hamburger -------------------------------------- */
.hamburger { display: none; width: 44px; height: 44px; position: relative; cursor: pointer; background: none; border: none; padding: 0; -webkit-tap-highlight-color: transparent }
.hamburger span { display: block; position: absolute; height: 3px; width: 24px; left: 10px; background: #fff; opacity: 1; border-radius: 2px; transition: .3s cubic-bezier(0.4, 0, 0.2, 1) }
.hamburger span:first-child { top: 12px }
.hamburger span:nth-child(2) { top: 20px }
.hamburger span:nth-child(3) { top: 28px }
.hamburger.active span:first-child { top: 20px; transform: rotate(45deg) }
.hamburger.active span:nth-child(2) { opacity: 0; transform: translateX(8px) }
.hamburger.active span:nth-child(3) { top: 20px; transform: rotate(-45deg) }
button.hamburger { background: none; border: none; padding: 0; cursor: pointer }
@media (max-width: 1200px) { #hamburger { display: block !important } }

/* Mobile menu backdrop & body lock */
.menu-backdrop { display: none; position: fixed; top: 60px; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.35); z-index: 9999 }
.menu-backdrop.active { display: block }
body.menu-open { overflow: hidden }

/* --- 12. Breadcrumbs ------------------------------------ */
.breadcrumb { display: inline-flex; list-style: none; margin-bottom: var(--space-3); font-size: 12px; flex-wrap: wrap }
.breadcrumb-item + .breadcrumb-item { padding-left: var(--space-2) }
.breadcrumb-item + .breadcrumb-item::before { float: left; padding-right: var(--space-2); color: var(--color-text-light); content: "›"; font-size: 14px }
.breadcrumb.breadcrumb-dots .breadcrumb-item + .breadcrumb-item::before { content: "›"; font-size: 14px; line-height: 1; height: 100%; display: flex; align-items: center }
.breadcrumb-item a { color: var(--color-text-muted); text-decoration: none; transition: color var(--transition-fast) }
.breadcrumb-item a:hover { color: var(--color-primary) }

/* --- 13. Hero ------------------------------------------- */
.hero {
  margin: var(--space-5) 0;
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6) var(--space-6);
  border: 1px solid var(--color-border);
  transition: box-shadow var(--transition-normal)
}

/* ============== HERO ACCUEIL ============== */
.home-hero { position: relative; overflow: hidden; text-align: center; background: var(--color-surface); border: 1px solid var(--color-border); border-top: 4px solid var(--color-accent); border-radius: var(--radius-xl); padding: clamp(34px, 5vw, 68px) clamp(20px, 4vw, 56px); margin: var(--space-5) 0 }
.home-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .6; background-image: radial-gradient(circle, var(--color-border) 1.2px, transparent 1.2px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(ellipse 78% 70% at 50% 28%, #000, transparent 75%); mask-image: radial-gradient(ellipse 78% 70% at 50% 28%, #000, transparent 75%) }
.home-hero-inner { position: relative; z-index: 1; max-width: 840px; margin: 0 auto }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--space-4) }
.hero-eyebrow::before { content: "\2736" }
.home-hero h1 { font-size: clamp(2rem, 5.4vw, 3.4rem); line-height: 1.04; letter-spacing: -.035em; margin: 0 0 var(--space-4) }
.home-hero h1 .hl { color: var(--color-accent) }
.hero-sub { font-size: clamp(1rem, 1.7vw, 1.18rem); color: var(--color-text-muted); max-width: 660px; margin: 0 auto var(--space-6); line-height: 1.6 }
.hero-search { max-width: 540px; margin: 0 auto var(--space-6) }
.hero-search .searchbox { max-width: 100%; width: 100% }
.hero-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); list-style: none; padding: 0; margin: 0 }
.hero-stats a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 18px; min-width: 116px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); text-decoration: none; transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast) }
.hero-stats a:hover { transform: translateY(-3px); border-color: var(--color-accent); box-shadow: var(--shadow-sm) }
.hero-stats b { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--color-text); letter-spacing: -.02em; line-height: 1 }
.hero-stats span { font-size: .78rem; color: var(--color-text-muted) }
@media (max-width: 600px) { .hero-stats a { min-width: 0; flex: 1 1 42%; padding: 10px 8px } .hero-stats b { font-size: 1.25rem } .hero-stats .stat-full { display: none } }

/* ============== HERO CATÉGORIE ============== */
.cat-hero { position: relative; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-top: 4px solid var(--color-accent); border-radius: var(--radius-lg); padding: clamp(22px, 3.5vw, 44px); margin: var(--space-5) 0 }
/* motif décoratif papeterie (plume) en filigrane, coin bas-droit */
.cat-hero::after { content: ""; position: absolute; right: -14px; bottom: -26px; width: 188px; height: 188px; z-index: 0; opacity: .06; pointer-events: none; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316130F' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4C12 6 7 12 4 20'/%3E%3Cpath d='M20 4c-2 7-6 10-12 11'/%3E%3Cpath d='M4 20h6'/%3E%3C/svg%3E") }
.cat-hero > * { position: relative; z-index: 1 }
.cat-hero .breadcrumb { margin-bottom: var(--space-4) }
.cat-hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5) }
@media (min-width: 900px) { .cat-hero-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start } }
.cat-hero h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 var(--space-3) }
.cat-hero-sub { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 2vw, 1.35rem); color: var(--color-accent); letter-spacing: -.01em; margin: 0 0 var(--space-4); line-height: 1.2 }
.cat-hero-intro { color: var(--color-text-muted); line-height: 1.7; max-width: 62ch; margin: 0 }
.cat-hero-side { display: flex; flex-direction: column; gap: var(--space-3) }
.cat-hero-side .searchbox { max-width: 100%; width: 100% }

/* Chips de catégories (hero landing) */
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-5) }
.hero-chips a { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 8px 16px; border: 1.5px solid var(--color-border); border-radius: var(--radius-full); font-size: .9rem; font-weight: 600; color: var(--color-text); background: var(--color-bg); text-decoration: none; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast) }
.hero-chips a:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-surface); transform: translateY(-2px) }

/* Chips de synonymes (liste cliquable) */
.syno-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--space-4) 0 var(--space-2) }
.syno-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border: 1.5px solid var(--color-border); border-radius: var(--radius-full); font-size: .95rem; font-weight: 500; color: var(--color-text); background: var(--color-surface); text-decoration: none; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast) }
.syno-chip:hover { color: var(--color-accent); border-color: var(--color-accent); background: var(--color-bg); transform: translateY(-2px) }

/* Bouton « retour en haut » (apparaît au défilement) */
.back-to-top { position: fixed; right: clamp(14px, 3vw, 28px); bottom: clamp(14px, 3vw, 28px); z-index: 60; width: 46px; height: 46px; display: grid; place-items: center; padding: 0; border: none; border-radius: 50%; background: var(--color-accent); color: #fff; box-shadow: var(--shadow-md); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity var(--transition-normal), transform var(--transition-normal), visibility var(--transition-normal), background var(--transition-fast) }
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0) }
.back-to-top:hover { background: var(--color-accent-hover); transform: translateY(-3px) }
.back-to-top:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px }
.back-to-top svg { width: 22px; height: 22px }

/* Page 404 (carte premium .search-hero error-hero) */
.error-illustration { max-width: 440px; margin: 0 auto var(--space-5); display: block }
.error-illustration svg { width: 100%; height: auto; display: block }
.error-actions { margin: var(--space-2) 0 var(--space-5) }
.error-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 580px; margin: 0 auto }
@media (prefers-reduced-motion: reduce) { .back-to-top { transition: opacity .2s, visibility .2s } .back-to-top:hover { transform: none } }

/* Entrée douce des heros (désactivée si prefers-reduced-motion) */
@keyframes heroIn { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: no-preference) { .home-hero, .cat-hero, .search-hero, .author-hero { animation: heroIn .6s cubic-bezier(.22,.61,.36,1) both } }

/* ============== HERO AUTEUR (page d'un auteur, avec portrait) ============== */
.author-hero { position: relative; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-top: 4px solid var(--color-accent); border-radius: var(--radius-xl); padding: clamp(24px, 3.5vw, 46px); margin: var(--space-5) 0 }
.author-hero::after { content: ""; position: absolute; right: -18px; bottom: -34px; width: 200px; height: 200px; z-index: 0; opacity: .05; pointer-events: none; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316130F' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4C12 6 7 12 4 20'/%3E%3Cpath d='M20 4c-2 7-6 10-12 11'/%3E%3Cpath d='M4 20h6'/%3E%3C/svg%3E") }
.author-hero > * { position: relative; z-index: 1 }
.author-hero .breadcrumb { margin-bottom: var(--space-4) }
.author-hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: center; text-align: center }
@media (min-width: 720px) { .author-hero-grid { grid-template-columns: auto minmax(0, 1fr); gap: clamp(28px, 4vw, 54px); text-align: left } }
.author-hero-portrait { position: relative; margin: 0 auto }
.author-hero-portrait::before { content: "\201C"; position: absolute; top: -36px; left: -14px; font-family: var(--font-display); font-weight: 800; font-size: 6rem; line-height: 1; color: var(--color-accent); opacity: .16; pointer-events: none; z-index: 0 }
.author-hero-img { width: clamp(150px, 30vw, 226px); height: clamp(150px, 30vw, 226px); border-radius: 50%; object-fit: cover; display: block; position: relative; z-index: 1; border: 4px solid var(--color-surface); box-shadow: 0 0 0 3px var(--color-accent), var(--shadow-lg) }
.author-hero-body { min-width: 0 }
.author-hero-eyebrow { font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 var(--space-2) }
.author-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.04; letter-spacing: -.03em; margin: 0 0 var(--space-3) }
.author-hero-bio { color: var(--color-text-muted); line-height: 1.7; max-width: 62ch; margin: 0 0 var(--space-5) }
.author-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) }
@media (max-width: 719px) { .author-hero-actions { justify-content: center } }
.author-hero-search { flex: 1 1 220px; min-width: 200px; max-width: 340px }

/* ============== HERO RECHERCHE (pages de recherche) ============== */
.search-hero { position: relative; overflow: hidden; text-align: center; background: var(--color-surface); border: 1px solid var(--color-border); border-top: 4px solid var(--color-accent); border-radius: var(--radius-xl); padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 48px); margin: var(--space-5) 0 }
.search-hero::after { content: ""; position: absolute; right: -18px; bottom: -34px; width: 210px; height: 210px; z-index: 0; opacity: .05; pointer-events: none; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316130F' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4C12 6 7 12 4 20'/%3E%3Cpath d='M20 4c-2 7-6 10-12 11'/%3E%3Cpath d='M4 20h6'/%3E%3C/svg%3E") }
.search-hero > * { position: relative; z-index: 1 }
.search-hero .breadcrumb { display: inline-flex; justify-content: center; margin-bottom: var(--space-4) }
.search-hero-eyebrow { display: block; font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 var(--space-3) }
.search-hero h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.06; letter-spacing: -.03em; margin: 0 0 var(--space-3) }
.search-hero-sub { color: var(--color-text-muted); line-height: 1.65; max-width: 56ch; margin: 0 auto var(--space-6) }
.search-hero-field { max-width: 640px; margin: 0 auto }
.search-hero-field .searchbox, .search-hero-field .searchbox__input, .search-hero-field input[type="search"], .search-hero-field input[type="text"] { width: 100%; max-width: 100% }
/* Hub /recherche/ : l'interface .search-container se fond dans le hero (pas de carte dans la carte) */
.search-hero .search-container { background: transparent; box-shadow: none; padding: 0; max-width: 560px; margin: var(--space-5) auto 0; width: 100% }
.search-hero .search-box { margin-bottom: 0 }

/* ============== HERO CITATION (page d'une citation) ============== */
.quote-hero { position: relative; overflow: hidden; text-align: center; background: var(--color-surface); border: 1px solid var(--color-border); border-top: 4px solid var(--color-accent); border-radius: var(--radius-xl); padding: clamp(28px, 4vw, 60px) clamp(20px, 4vw, 56px); margin: var(--space-5) 0 }
.quote-hero .breadcrumb { display: inline-flex; justify-content: center; margin-bottom: var(--space-5) }
.quote-figure { max-width: 800px; margin: 0 auto; position: relative; z-index: 1 }
.quote-mark { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(3.5rem, 8vw, 6rem); line-height: .5; color: var(--color-accent); margin-bottom: var(--space-3) }
.quote-text { font-family: var(--font-letter); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 3.8vw, 2.7rem); line-height: 1.32; letter-spacing: -.01em; color: var(--color-text); margin: 0 0 var(--space-6) }
.quote-text q { quotes: none }
.quote-text q::before, .quote-text q::after { content: "" }
.quote-author { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 }
.quote-author img, .quote-author-img { width: 92px; height: 92px; border-radius: 50%; border: 3px solid var(--color-accent); object-fit: cover; margin: 0; box-shadow: var(--shadow-sm) }
.quote-author cite { font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--color-text); letter-spacing: -.01em }
.quote-author cite a { color: inherit; text-decoration: none; transition: color var(--transition-fast) }
.quote-author cite a:hover { color: var(--color-accent) }
@keyframes quoteIn { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: no-preference) {
  .quote-mark { animation: quoteIn .6s cubic-bezier(.22,.61,.36,1) both }
  .quote-text { animation: quoteIn .7s cubic-bezier(.22,.61,.36,1) .08s both }
  .quote-author { animation: quoteIn .7s cubic-bezier(.22,.61,.36,1) .18s both }
}

/* --- 14. Cards ------------------------------------------ */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-4) }
.card {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin: 0;
  background: var(--color-surface);
  transition: box-shadow var(--transition-normal), border-color var(--transition-normal), transform var(--transition-normal);
  box-shadow: var(--shadow-xs)
}
.card:hover { box-shadow: var(--shadow-md); border-color: var(--color-border-dark); transform: translateY(-2px) }
/* En grille : cartes d'égale hauteur (la cellule de grille étire la carte) */
.card-grid .card { display: flex; flex-direction: column; height: 100% }
/* Corps de carte EN GRILLE : occupe toute la hauteur disponible (scopé pour ne
   pas toucher les .card-body hors grille : blog, back-office) */
.card-grid .card-body { display: flex; flex-direction: column; flex: 1 1 auto }
.cardtitle { font-weight: 600; margin-bottom: var(--space-3); color: var(--color-primary); font-size: 1rem; line-height: 1.4 }
/* Titres de cartes cliquables (lien sur le titre = ancre SEO descriptive) */
.cardtitle a, .card h3 a { color: inherit; text-decoration: none; transition: color var(--transition-fast) }
.cardtitle a:hover, .card h3 a:hover { color: var(--color-accent) }
.card-text { font-weight: 400; color: var(--color-text-muted); font-size: 14px; line-height: 1.6 }
/* Pied de carte (CTA) collé en bas → boutons alignés sur des cartes d'égale hauteur */
.card-grid .card-cta { margin-top: auto; padding-top: var(--space-4) }
/* Description tronquée à 3 lignes UNIQUEMENT en grille → cartes uniformes (la
   troncature serveur limite déjà le texte ; scopé pour ne pas tronquer les
   autres usages de .card-text, ex. voir-lettre.aspx). */
.card-grid .card-text { margin: 0; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
/* Titre cliquable des cartes « derniers articles du blog » (le lien remplace « Lire la suite ») */
.blog-card-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; margin: var(--space-3) 0 0 }
.blog-card-title a { color: var(--color-text); text-decoration: none; transition: color var(--transition-fast) }
.blog-card-title a:hover { color: var(--color-accent) }

/* --- 15. Citations -------------------------------------- */
.citations-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); margin-bottom: var(--space-6); gap: var(--space-4); width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto }
.citation-card {
  position: relative;
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-8) var(--space-6) var(--space-6);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  text-align: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s, border-color .35s
}
/* grand guillemet décoratif cinabre */
.citation-card::before { content: "\201C"; position: absolute; top: -8px; left: 20px; font-family: var(--font-display); font-weight: 800; font-size: 5.5rem; line-height: 1; color: var(--color-accent); pointer-events: none }
/* halo cinabre en haut */
.citation-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 65% at 50% -12%, rgba(200,68,43,0.20), transparent 62%) }
.citation-card > * { position: relative; z-index: 1 }
.citation-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(200,68,43,0.45) }
.citation-card h3 { font-family: var(--font-letter); font-style: italic; font-weight: 400; font-size: 1.15rem; line-height: 1.55; color: #fff }
.citation-card q { font-size: 1em; font-weight: 400 }
.citation-card img { width: 84px; height: 84px; border-radius: 50%; margin-top: var(--space-2); border: 3px solid var(--color-accent); transition: transform .35s cubic-bezier(.22,.61,.36,1) }
.citation-card:hover img { transform: scale(1.07) }
.citation-card h4 a, .citation-card h4 a:hover { color: var(--accent-lite) !important }
.citation-card a { text-decoration: none }

/* --- Slider d'auteurs (page /citations/auteurs/) --- */
.slider-nav { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: var(--space-2) }
.slider-btn { width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--color-border-dark); background: var(--color-surface); color: var(--color-text); font-family: var(--font-display); font-size: 22px; line-height: 1; display: grid; place-items: center; cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast) }
.slider-btn:hover { border-color: var(--color-accent); color: var(--color-accent); transform: translateY(-1px) }
.author-slider { position: relative }
.author-slider::before, .author-slider::after { content: ""; position: absolute; top: 0; bottom: 14px; width: 36px; pointer-events: none; z-index: 2 }
.author-slider::before { left: 0; background: linear-gradient(90deg, var(--color-surface), transparent) }
.author-slider::after { right: 0; background: linear-gradient(-90deg, var(--color-surface), transparent) }
.author-track { display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: var(--space-1) 2px var(--space-4); -webkit-overflow-scrolling: touch; scrollbar-width: none }
.author-track::-webkit-scrollbar { display: none }
.author-track:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px }
.author-slide { flex: 0 0 auto; width: 222px; scroll-snap-align: start }
.author-slide > a { display: block; text-decoration: none; color: inherit }
.author-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition-normal), box-shadow var(--transition-normal) }
.author-slide > a:hover .author-card, .author-slide > a:focus-visible .author-card { transform: translateY(-5px); box-shadow: var(--shadow-md) }
.author-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; margin: 0; border-radius: 0; background: var(--bg-2) }
.author-card .name { padding: 12px 14px; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--color-text); border-top: 3px solid var(--color-accent); letter-spacing: -.01em; line-height: 1.2 }
@media (max-width: 600px) { .author-slide { width: 162px } .slider-btn { width: 38px; height: 38px; font-size: 20px } .author-card .name { font-size: .92rem; padding: 10px 12px } }

/* --- Nouveaux auteurs ajoutes : cards portrait (.anew) --- */
.anew { display: block; text-decoration: none; color: inherit; height: 100%; padding: var(--space-2) }
.anew-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); height: 100%; display: flex; flex-direction: column; transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal) }
.anew:hover .anew-card, .anew:focus-visible .anew-card { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(200,68,43,0.42) }
.anew-photo { position: relative; aspect-ratio: 1 / 1; background: var(--bg-2); overflow: hidden }
.anew-photo img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; border-radius: 0; transition: transform var(--transition-slow) }
.anew:hover .anew-photo img { transform: scale(1.045) }
.anew-photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(to top, rgba(22,19,15,.28), transparent); opacity: 0; transition: opacity var(--transition-normal); pointer-events: none }
.anew:hover .anew-photo::after { opacity: 1 }
.anew-body { position: relative; padding: 12px 14px 14px; border-top: 3px solid var(--color-accent); flex: 1 1 auto }
.anew-body::before { content: "\201D"; position: absolute; right: 10px; top: -6px; font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: rgba(200,68,43,.14); pointer-events: none; transition: color var(--transition-normal), transform var(--transition-normal) }
.anew:hover .anew-body::before { color: rgba(200,68,43,.30); transform: translateY(-2px) }
.anew-name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; line-height: 1.18; color: var(--color-text); margin: 0; padding-right: 26px }
.anew-cta { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-weight: 700; font-size: .82rem; color: var(--color-accent); opacity: 0; transform: translateY(5px); transition: opacity var(--transition-normal), transform var(--transition-normal) }
.anew-cta svg { width: 13px; height: 13px; transition: transform var(--transition-normal) }
.anew:hover .anew-cta, .anew:focus-visible .anew-cta { opacity: 1; transform: none }
.anew:hover .anew-cta svg { transform: translateX(3px) }
@media (hover: none) { .anew-cta { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .anew-card, .anew-photo img, .anew-cta, .anew-body::before { transition: none } .anew:hover .anew-card, .anew:hover .anew-photo img { transform: none } }

/* --- Recherche a perimetre (.scoped-search) + mini-recherche mega (.mega-search) --- */
.scoped-search { max-width: 680px; margin: 0 auto }
.ss-bar { display: flex; align-items: center; gap: 8px; background: var(--color-surface); border: 1.5px solid var(--color-border-dark); border-radius: var(--radius-full); padding: 6px 6px 6px 16px; box-shadow: var(--shadow-sm); transition: border-color var(--transition-fast), box-shadow var(--transition-fast) }
.ss-bar:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 4px rgba(200,68,43,.14) }
.ss-icon { flex: none; color: var(--color-text-muted); display: flex }
.ss-input { flex: 1 1 auto; min-width: 0; border: none; outline: none; background: none; font-family: var(--font-family); font-size: 1.02rem; color: var(--color-text); padding: 10px 4px }
.ss-input::placeholder { color: var(--color-text-light) }
.ss-submit { flex: none; display: inline-flex; align-items: center; gap: 6px; background: var(--color-accent); color: #fff; border: none; border-radius: var(--radius-full); padding: 11px 20px; font-family: var(--font-family); font-weight: 700; font-size: .95rem; cursor: pointer; transition: background var(--transition-fast) }
.ss-submit:hover { background: var(--color-accent-hover) }
.ss-scopes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; border: none; margin: 14px 0 0; padding: 0; min-width: 0 }
.ss-chip { position: relative; display: inline-flex }
.ss-chip input { position: absolute; opacity: 0; width: 0; height: 0 }
.ss-chip span { display: inline-block; padding: 7px 14px; border: 1.5px solid var(--color-border-dark); border-radius: var(--radius-full); font-size: .86rem; font-weight: 600; color: var(--color-text-muted); background: var(--color-surface); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); user-select: none }
.ss-chip span:hover { border-color: var(--color-accent); color: var(--color-accent) }
.ss-chip input:checked + span { background: var(--color-accent); border-color: var(--color-accent); color: #fff }
.ss-chip input:focus-visible + span { outline: 2px solid var(--color-accent-hover); outline-offset: 2px }
.scoped-search--hero .ss-input { font-size: 1.12rem; padding: 13px 4px }
.scoped-search--hero .ss-submit { padding: 13px 24px; font-size: 1rem }
@media (max-width: 560px) { .ss-submit { padding: 11px 15px } .scoped-search--hero .ss-submit { padding: 12px 16px } .ss-chip span { font-size: .82rem; padding: 6px 12px } }

.mega-search { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 5px 5px 5px 14px; margin-bottom: 4px }
.mega-search input { flex: 1 1 auto; min-width: 0; border: none; outline: none; background: none; font-size: .92rem; color: var(--color-text); padding: 8px 2px; font-family: var(--font-family) }
.mega-search input::placeholder { color: var(--color-text-light) }
.mega-search button { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border: none; border-radius: 50%; background: var(--color-accent); color: #fff; cursor: pointer; transition: background var(--transition-fast) }
.mega-search button:hover { background: var(--color-accent-hover) }
.mega-search svg { width: 16px; height: 16px }
@media (max-width: 1200px) { .mega-search { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.16) } .mega-search input { color: #fff } .mega-search input::placeholder { color: rgba(255,255,255,0.6) } }

/* --- Page "Citations par sujets" : grille de themes (.theme-grid) + alphabet (.alpha-nav) --- */
.theme-eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent); margin: 6px 0 16px }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: var(--space-3); list-style: none; padding: 0; margin: 0 }
.theme-grid li { margin: 0 }
.theme-card { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; min-height: 96px; height: 100%; box-sizing: border-box; padding: 14px 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); text-decoration: none; position: relative; overflow: hidden; transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal) }
.theme-card::before { content: "\201C"; position: absolute; top: -16px; right: 6px; font-family: var(--font-display); font-weight: 800; font-size: 3.4rem; line-height: 1; color: rgba(200,68,43,.09); pointer-events: none; transition: color var(--transition-normal) }
.theme-card:hover, .theme-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(200,68,43,.42) }
.theme-card:hover::before, .theme-card:focus-visible::before { color: rgba(200,68,43,.20) }
.theme-card-name { position: relative; font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; letter-spacing: -.01em; line-height: 1.2; color: var(--color-text); transition: color var(--transition-fast) }
.theme-card:hover .theme-card-name, .theme-card:focus-visible .theme-card-name { color: var(--color-accent) }
.theme-card-cta { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 600; color: var(--color-text-muted); transition: color var(--transition-fast) }
.theme-card-cta svg { width: 12px; height: 12px; transition: transform var(--transition-fast) }
.theme-card:hover .theme-card-cta, .theme-card:focus-visible .theme-card-cta { color: var(--color-accent) }
.theme-card:hover .theme-card-cta svg, .theme-card:focus-visible .theme-card-cta svg { transform: translateX(3px) }
.alpha-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none }
.alpha-nav a { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--color-text); text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast) }
.alpha-nav a:hover, .alpha-nav a:focus-visible { border-color: var(--color-accent); background: var(--color-accent); color: #fff; transform: translateY(-2px) }
@media (prefers-reduced-motion: reduce) { .theme-card, .theme-card-cta svg, .alpha-nav a { transition: none } .theme-card:hover, .alpha-nav a:hover { transform: none } }

/* --- Accueil : blocs catégories dynamiques (.home-block) --- */
.home-block { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-6) var(--space-6) var(--space-5); margin: var(--space-5) 0 }
.home-block-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: 8px }
.block-eyebrow { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 6px }
.block-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; margin: 0; line-height: 1.15 }
.block-title a { color: var(--color-text); text-decoration: none; transition: color var(--transition-fast) }
.block-title a:hover { color: var(--color-accent) }
.block-cta { flex: none; display: inline-flex; align-items: center; gap: 6px; background: var(--color-primary); color: #fff; font-weight: 700; font-size: .9rem; padding: 10px 18px; border-radius: var(--radius-full); text-decoration: none; white-space: nowrap; transition: background var(--transition-fast) }
.block-cta:hover { background: var(--color-accent); color: #fff }
.block-cta:visited { color: #fff }
.block-intro { color: var(--color-text-muted); margin: 0 0 14px; max-width: 760px }
.block-sublabel { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-light); margin: 18px 0 10px }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 }
.chip-row li { margin: 0 }
.h-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-full); font-size: .9rem; font-weight: 500; color: var(--color-text); text-decoration: none; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast) }
.h-chip:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-surface); transform: translateY(-1px) }
.h-chip.is-cat { background: transparent; color: var(--color-text-muted); font-size: .84rem }
.mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; list-style: none; padding: 0; margin: 0 }
.mini-grid li { margin: 0 }
.mini-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-decoration: none; font-size: .9rem; font-weight: 500; color: var(--color-text); line-height: 1.35; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast) }
.mini-card:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-surface); transform: translateX(2px) }
.mini-card svg { width: 13px; height: 13px; flex: none; opacity: .5; transition: opacity var(--transition-fast), transform var(--transition-fast) }
.mini-card:hover svg { opacity: 1; transform: translateX(2px) }
.author-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--space-3); list-style: none; padding: 0; margin: 0 }
.author-row li { margin: 0 }
.author-mini { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; text-decoration: none; padding: 12px 8px; border: 1px solid transparent; border-radius: var(--radius-lg); transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast) }
.author-mini:hover { border-color: var(--color-border); background: var(--color-bg); transform: translateY(-3px) }
.author-mini img { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-border); background: var(--bg-2); transition: border-color var(--transition-fast) }
.author-mini:hover img { border-color: var(--color-accent) }
.author-mini span { font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--color-text); line-height: 1.2 }
.quote-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: var(--space-3); list-style: none; padding: 0; margin: 0 }
.quote-row li { margin: 0 }
.h-quote { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 18px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-decoration: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast) }
.h-quote::before { content: "\201C"; font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; line-height: .4; color: var(--color-accent); height: 16px }
.h-quote:hover { border-color: rgba(200,68,43,.4); box-shadow: var(--shadow-md); transform: translateY(-3px) }
.h-quote q { font-family: var(--font-letter); font-style: italic; font-size: 1rem; line-height: 1.5; color: var(--color-text); quotes: none }
.h-quote q::before, .h-quote q::after { content: "" }
.h-quote .qa { margin-top: auto; font-weight: 700; font-size: .85rem; color: var(--color-accent) }
@media (prefers-reduced-motion: reduce) { .h-chip, .mini-card, .mini-card svg, .author-mini, .h-quote { transition: none } .h-chip:hover, .mini-card:hover, .author-mini:hover, .h-quote:hover { transform: none } }

/* --- 16. Letter Components ------------------------------ */
.letter-container {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  max-width: 765px;
  margin-left: auto; margin-right: auto;
  border: 1px solid var(--color-border);
  position: relative
}
.letter-preview { background-color: var(--sheet); border-radius: var(--radius-md); padding: var(--space-8); margin-bottom: var(--space-4); position: relative; border-top: 3px solid var(--accent-2) }
.letter-format { line-height: 1.8 }
.letter-format p { margin-bottom: var(--space-4) }
.letter-options { display: flex; border-top: 1px solid var(--color-border); justify-content: space-between; padding: var(--space-4) 0; margin-top: var(--space-4) }
.watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); color: rgba(0,0,0,0.04); font-size: 3rem; font-weight: 700; white-space: nowrap; pointer-events: none; letter-spacing: 0.1em }
.lalettre a.pure-button, .lalettre a.pure-button:visited { color: #fff; background-color: var(--color-primary) }
.noselect { user-select: none }
.metadata { display: flex; gap: var(--space-4); margin-bottom: var(--space-4); color: var(--color-text-muted); font-size: .875rem; flex-wrap: wrap }
.metadata-item { display: flex; align-items: center; gap: var(--space-1) }
.action-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-6); gap: var(--space-4); flex-wrap: wrap }
.action-bar2 { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--color-border); padding-top: var(--space-4); margin-bottom: var(--space-6) }

/* --- Sceau de confiance + Dock à encre (page lettre) --- */
.lalettre .hero { position: relative }
.seal-wrap { position: absolute; top: 22px; right: 22px; z-index: 2 }
/* réserve la zone du sceau pour que le H1 / fil d'ariane ne passent pas dessous (desktop) */
@media (min-width: 768px) { .lalettre .hero h1, .lalettre .hero .breadcrumb { padding-right: 140px } }
/* le sceau est masqué en responsive (mobile) */
@media (max-width: 767px) { .seal-wrap { display: none } }
.seal-badge { width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; text-align: center; color: #fff; background: var(--color-accent); border: 2px solid var(--color-accent); box-shadow: 3px 3px 0 rgba(22,19,15,0.18); transform: rotate(-8deg); position: relative }
.seal-badge::before { content: ""; position: absolute; inset: 6px; border: 1.5px solid rgba(255,255,255,0.55); border-radius: 50% }
.seal-badge b { font-family: var(--font-display); font-weight: 800; font-size: .95rem; line-height: 1; display: block; letter-spacing: .02em }
.seal-badge span { font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; margin-top: 5px; display: block; color: #fff }
.seal-badge .star { font-size: .75rem; margin-bottom: 3px; display: block; color: #fff }

.btn.btn-accent { background-color: var(--color-accent); color: #fff }
.btn.btn-accent:visited { color: #fff }
.btn.btn-accent:hover { background-color: var(--color-accent-hover) !important; color: #fff }

.ink-dock { position: sticky; bottom: 18px; z-index: 5; margin-top: var(--space-5); background: rgba(255,255,255,0.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 2px solid var(--color-primary); box-shadow: var(--shadow-md); padding: 12px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border-radius: var(--radius-sm) }
.ink-dock .dock-label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 700; margin-right: auto; display: inline-flex; align-items: center; gap: 8px }
.ink-dock .dock-label .plume { width: 18px; height: 18px; stroke: var(--color-accent); fill: none; flex: none }
.ink-dock > div { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: 0 }

@media (max-width: 767px) {
  .seal-wrap { position: static; text-align: right; margin: 0 0 var(--space-3) }
  .seal-badge { width: 88px; height: 88px; display: inline-grid }
  .ink-dock { position: static; flex-direction: column; align-items: stretch }
  .ink-dock .dock-label { margin: 0 0 4px }
  .ink-dock > div { width: 100% }
  .ink-dock .btn { flex: 1 }
}

/* --- 17. Custom Buttons --------------------------------- */
.btn {
  display: inline-block;
  background-color: var(--color-primary);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  position: relative;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  line-height: 1.5
}
.btn:hover, a.btn:not(.btn-outline):hover { background-color: var(--color-primary-hover); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-sm) }
.btn:active { transform: translateY(0) }
a.btn:not(.btn-outline):visited, a.btn.btn-outline:hover { color: #fff }
.btn-outline { background-color: transparent; border: 1px solid var(--color-border-dark); color: var(--color-text) !important }
.btn-outline:hover { background-color: var(--color-primary); color: #fff !important; border-color: var(--color-primary) }
a.btn.btn-outline:visited { color: var(--color-text) }
.btn-group { display: flex; gap: var(--space-2); flex-wrap: wrap }
.btn28 { background-color: var(--color-accent); border: none; padding: 14px 26px; border-radius: var(--radius-sm); font-weight: 700; transition: background-color var(--transition-fast), transform var(--transition-fast); font-size: 16px; color: #fff }
.btn28:hover { background-color: var(--color-accent-hover); transform: translateY(-1px) }
.btn13 { font-size: 13px !important }
.btng { padding: 6px 12px; cursor: pointer; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); transition: background-color var(--transition-fast), border-color var(--transition-fast) }
.btng:hover { background: var(--color-bg); border-color: var(--color-border-dark) }
.button-large { font-size: 120%; border-radius: var(--radius-sm) }

.scribeplus-cta {
  display: inline-block; color: #fff !important;
  background-color: var(--color-accent);
  padding: 10px 20px; text-align: center; text-decoration: none;
  font-size: 15px; font-weight: 500; margin: var(--space-4) 0;
  border-radius: var(--radius-sm); border: none;
  box-shadow: var(--shadow-xs);
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); position: relative; overflow: hidden
}
.scribeplus-cta:hover { background-color: var(--color-accent-hover) !important; box-shadow: var(--shadow-sm); transform: translateY(-1px) }
.scribeplus-cta:active { transform: translateY(0) }
.scribeplus-cta-accent { display: inline-block; color: #fff !important; background-color: var(--color-accent) !important; padding: 12px 20px; text-align: center; text-decoration: none; font-size: 16px; font-weight: 500; margin: var(--space-4) 0; border-radius: var(--radius-sm); border: none; transition: background-color var(--transition-fast) }
.scribeplus-cta-accent:hover { background-color: var(--color-accent-hover) !important }

/* Duotone encre -> cinabre clair sur les vignettes catégories/thèmes (cohérence palette).
   La couleur d'origine se révèle au survol (desktop). */
.duotone, .labox img { filter: url("#duotone-ink"); transition: filter var(--transition-normal) }
@media (hover: hover) { .duotone:hover, .labox:hover img { filter: none } }
@media (prefers-reduced-motion: reduce) { .duotone, .labox img { transition: none } }
.ctabutton { background-color: var(--color-primary) !important; color: #fff !important; padding: 10px 15px; text-align: center; text-decoration: none; display: inline-block; font-size: 15px; margin: var(--space-4) 0; border-radius: var(--radius-sm); transition: background-color var(--transition-fast), transform var(--transition-fast) }
.ctabutton:hover { background-color: var(--color-primary-hover) !important; transform: translateY(-1px) }
.share-button { display: inline-flex; align-items: center; justify-content: center; gap: .5em }

/* --- 18. Search Box ------------------------------------- */
.searchbox { display: inline-block; width: 100%; height: 50px; font-size: 15px; font-family: inherit; max-width: 300px; white-space: nowrap; box-sizing: border-box; position: relative }
.searchbox .algolia-autocomplete { display: block; height: 50px }
.searchbox__wrapper { width: 100%; height: 50px }
.searchbox__input { display: inline-block; width: 100%; transition: box-shadow var(--transition-fast); border: 0; border-radius: var(--radius-full); box-shadow: 0 0 0 1px var(--color-border-dark); background: var(--color-surface); padding: 0 30px 0 50px; height: 45px; vertical-align: middle; white-space: normal; font-size: 15px; appearance: none }
.searchbox input[type] { padding-left: 50px !important }
.searchbox__input::-webkit-search-cancel-button, .searchbox__input::-webkit-search-decoration, .searchbox__input::-webkit-search-results-button, .searchbox__input::-webkit-search-results-decoration { display: none }
.searchbox__input:hover { box-shadow: 0 0 0 1px var(--color-border-dark) }
.searchbox__input:active, .searchbox__input:focus { outline: 0; box-shadow: 0 0 0 3px rgba(200,68,43,.35); background: var(--color-surface) }
.searchbox__input::placeholder { color: var(--color-text-light) !important }
.searchbox__input::-webkit-input-placeholder { color: var(--color-text-light) !important }
.searchbox__input::-moz-placeholder { color: var(--color-text-light) !important }
.searchbox__input:-ms-input-placeholder { color: var(--color-text-light) !important }
.searchbox__submit { position: absolute; top: 0; right: inherit; left: 0; border: 0; border-radius: var(--radius-full) 0 0 var(--radius-full); background-color: transparent; width: 50px !important; vertical-align: middle; text-align: center; user-select: none; margin: 0; padding: 0; font-size: inherit; cursor: pointer }
.searchbox__submit::before { display: inline-block; margin-right: -4px; height: 45px; vertical-align: middle; content: "" }
.searchbox__submit svg { width: 20px; height: 20px; vertical-align: middle; fill: var(--color-text-muted) }
.searchbox__submit:focus { outline: 0 }
.searchbox__submit:active, .searchbox__submit:hover { cursor: pointer }
.searchbox__reset { position: absolute; top: 4px; right: 8px; border: 0; background: 0 0; margin: 0; padding: 0; font-size: inherit; fill: rgba(0,0,0,0.4); cursor: pointer; user-select: none }
.searchbox__reset:focus { outline: 0 }
.searchbox__reset.hide { display: none }
.searchbox__reset svg { display: block; margin: 14px 8px 13px 5px; width: 13px; height: 13px }
.searchbox__input:valid ~ .searchbox__reset { display: block; animation-name: sbx-reset-in; animation-duration: .15s }
@keyframes sbx-reset-in { 0% { transform: translate3d(-20%,0,0); opacity: 0 } 100% { transform: none; opacity: 1 } }
.contalgo { background-color: var(--color-bg); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md) }

/* --- 19. Lists ------------------------------------------ */
.multi-column-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0; list-style: none; padding: 0; margin-bottom: var(--space-6) }
.multi-column-list li { padding: 5px 0 }
.listview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; list-style-type: none; padding: 0; margin: 0 }
.listview-grid li { padding: 0 }
.listview-grid a { text-decoration: none; color: var(--color-text); font-size: 15px; transition: color var(--transition-fast) }
.listview-grid a:hover { text-decoration: underline; color: var(--color-primary) }
/* Listes de liens « .ici » (lettres par sous-thème) — puces cinabre, papeterie
   Charte « Encre & Papeterie ». Base = 1 colonne ; 2 colonnes au-delà de 8 items
   en large écran (via :has, repli 1 colonne si non supporté). Indent suspendu :
   marqueur cinabre absolu + padding-left → 2e ligne alignée sur le texte. */
.ici { list-style: none; margin: 0; padding: 0 }
.ici > li { position: relative; margin: 0; padding: 0; font-weight: 500; border-bottom: 1px solid var(--color-border); break-inside: avoid; -webkit-column-break-inside: avoid }
.ici > li:last-child { border-bottom: 0 }
.ici li a { position: relative; display: block; min-height: 24px; padding: 11px 6px 11px 28px; color: var(--color-text); font-family: var(--font-family); font-weight: 500; font-size: 15px; line-height: 1.45; text-decoration: none; transition: color var(--transition-fast), transform var(--transition-fast) }
/* Marqueur géométrique cinabre, aligné sur la 1re ligne (indent suspendu) */
.ici li a::before { content: ""; position: absolute; left: 8px; top: 1.4em; width: 7px; height: 7px; border-radius: 1.5px; background: var(--color-accent); transform: translateY(-50%); transition: transform var(--transition-fast), background-color var(--transition-fast) }
@media (hover: hover) {
  .ici li a:hover { color: var(--color-accent-hover); transform: translateX(4px) }
  .ici li a:hover::before { background: var(--color-accent-hover); transform: translateY(-50%) rotate(45deg) }
}
.ici li a:focus-visible { outline: 2px solid var(--color-accent-hover); outline-offset: 2px; border-radius: var(--radius-sm); color: var(--color-accent-hover); z-index: 1 }
.ici li a:focus:not(:focus-visible) { outline: none }
.ici li a:visited { color: var(--color-text-muted) }
.ici li a:visited::before { background: var(--color-text-muted) }
/* Large écran : 2 colonnes seulement si la liste compte au moins 9 items */
@media (min-width: 768px) {
  .ici:has(> li:nth-child(9)) { column-count: 2; column-gap: var(--space-10) }
}
@media (max-width: 560px) {
  .ici li a { padding: 10px 4px 10px 26px; font-size: 14.5px }
}
@media (prefers-reduced-motion: reduce) {
  .ici li a, .ici li a::before { transition: none }
  .ici li a:hover { transform: none }
  .ici li a:hover::before { transform: translateY(-50%) }
}
.pagee a { height: 50px; width: 50px; line-height: 46px; text-align: center; display: inline-block; font-weight: 700; margin-right: 15px }
#ContentPlaceHolder1_DataPager1 span { border: 2px solid var(--color-primary); border-radius: var(--radius-full); background-color: var(--color-surface); height: 50px; width: 50px; line-height: 46px; text-align: center; display: inline-block; font-weight: 700; margin-right: 15px }

/* --- 20. Cookie Popup ----------------------------------- */
#cookie-overlay, #cookie-overlay-2 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 9998; display: none }
#cookie-popup, #cookie-popup-2 { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 90%; box-shadow: var(--shadow-xl); background: var(--color-surface); display: none; border-radius: var(--radius-xl) }
#cookie-popup { max-width: 500px; padding: var(--space-6); z-index: 9999 }
#cookie-popup h2 { font-size: 1.4em; color: var(--color-text); margin-bottom: var(--space-3); text-align: center }
#cookie-popup p, #cookie-popup-2 p { color: var(--color-text-muted); line-height: 1.6; text-align: center; font-size: 0.95em; margin-bottom: var(--space-4) }
.popup-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3) }
.popup-actions a { text-decoration: underline; color: var(--color-text-muted); font-size: .9em; cursor: pointer }
.popup-actions button { background: var(--color-primary); color: #fff; padding: 10px 20px; font-size: .9em; cursor: pointer; border: none; border-radius: var(--radius-sm); font-weight: 500; transition: background-color var(--transition-fast) }
.popup-actions button:hover { background: var(--color-primary-hover) }
.cookie-icon { display: block; margin: 0 auto var(--space-4); width: 64px; height: 64px }
#cookie-popup-2 { max-width: 480px; padding: var(--space-6); border-radius: var(--radius-xl); z-index: 10000 }
#cookie-popup-2 h3 { font-size: 1.3em; margin-bottom: var(--space-3); text-align: center; color: var(--color-text) }
#popup-2-back-btn { display: block; margin: 0 auto; background: var(--color-primary); color: #fff; padding: 10px 20px; border: none; border-radius: var(--radius-sm); cursor: pointer; font-weight: 500; transition: background-color var(--transition-fast) }
#popup-2-back-btn:hover { background: var(--color-primary-hover) }

/* --- 21. Modal ------------------------------------------ */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.5) }
.modal-content { background-color: var(--color-surface); margin: 5% auto; padding: var(--space-6); border: 1px solid var(--color-border); width: 90%; max-width: 750px; position: relative; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl) }
.modal-content p { margin-bottom: 12px !important }
.close { color: var(--color-text-light); float: right; font-size: 28px; font-weight: 700; cursor: pointer; transition: color var(--transition-fast); line-height: 1 }
.close:hover { color: var(--color-text) }
.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); gap: var(--space-2) }
.toolbar-left { display: flex; gap: 4px }

/* --- 22. Footer ----------------------------------------- */
footer.footer-new {
  background-color: var(--bg-2, #ECE7DC);
  border-top: 3px solid var(--color-accent);
  padding: var(--space-12) var(--space-6) var(--space-6);
  color: var(--color-text)
}
.footer-new-container { max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--space-8) }
.footer-col { flex: 1 1 100px; min-width: 200px }
.footer-col p { color: var(--color-text-muted); font-size: 14px; line-height: 1.7 }
.footer-title { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-3); color: var(--color-text) }
.footer-links { padding: 0; margin: 0; list-style: none }
.footer-links li { margin-bottom: var(--space-2) }
.footer-links a { text-decoration: none; color: var(--color-text-muted); font-size: 14px; transition: color var(--transition-fast) }
.footer-links a:hover { color: var(--color-primary) }
.footer-social a { margin-right: var(--space-2); display: inline-block; opacity: 0.7; transition: opacity var(--transition-fast) }
.footer-social a:hover { opacity: 1 }
.footer-bottom { margin-top: var(--space-8); text-align: center; font-size: 13px; border-top: 1px solid var(--color-border); padding-top: var(--space-4) }
.copyright { margin: 0; color: var(--color-text-light) }

/* Legacy footer (old black one, keep for compat) */
.footer { padding: 30px; background-color: var(--color-primary); color: #fff; font-size: 13px }

/* --- 23. Page-specific & Misc Components ---------------- */
.header h1 { font-size: 2.25rem; margin: .2em 0; font-weight: 700; line-height: 1.2 }
.laq { font-size: 2rem }
.ah1 { margin-top: 0 !important }
.content-subhead { padding: 0; margin: var(--space-2) 0 var(--space-4); color: var(--color-text-muted) }
.h2cool { font-weight: 700; color: var(--color-primary); text-transform: uppercase; font-size: 1.15rem; letter-spacing: 0.02em; border-bottom: 2px solid var(--color-primary); display: inline-block; padding-bottom: var(--space-1) }
.h2cool a { color: inherit; text-decoration: none }
.h2cool a:hover { opacity: 0.8 }
.lehr { width: 60%; background-color: var(--color-accent); border: none; height: 2px; margin: var(--space-8) auto }
.phaut { font-size: 1.1rem }
.contour { padding: 3px; border: 1px solid var(--color-border); border-radius: var(--radius-sm) }
.image-gauche { float: left; margin-right: var(--space-5); margin-bottom: var(--space-4); width: 160px; height: 160px; aspect-ratio: 1/1; border-radius: var(--radius-md); object-fit: cover }
.pure-img { max-width: 100%; height: auto; display: block }
.pure-img-responsive { max-width: 100%; height: auto; border: none; margin: 5px; border-radius: var(--radius-sm) }
.rech { max-width: 265px; height: 60px; border-radius: var(--radius-md) }
.svgicons { position: absolute; height: 0; width: 0; visibility: hidden }
.labox { padding: 1em }
.lecontent { overflow: visible }
.a25 p a { margin-right: 25px; color: #fff }
.logr { position: relative; top: 5px; display: inline-block; left: 5px; z-index: 99999; margin-right: auto }
.lelog { font-weight: 700; color: #fff; text-decoration: none !important }
.fw301 { font-weight: 600; margin-left: 12px; font-size: 24px; position: relative; top: -13px; color: var(--color-text) }
.fw3011 { font-weight: 300; font-size: 25px; margin-right: 15px; position: relative; top: -12px; margin-left: 3px; color: var(--color-text) }
.lalang { margin-left: 0; margin-bottom: 7px }
.auth3 { font-size: 1em }
.searchiconl { width: 20px; height: 20px; vertical-align: middle; margin-right: 5px; aspect-ratio: 1/1 }
.lesvgl { padding: 0 !important }
.badge { padding: 4px 8px; color: #fff; background-color: var(--color-primary); border-radius: var(--radius-full); font-size: 12px; font-weight: 600 }
.br60 { border-radius: 0 0 0 60px }
.rond { border-radius: 50% !important }
.bold { font-weight: 600 }

/* Pub sections */
.sd-cmp-26rLm { visibility: hidden }

/* Cards inside grid (old pattern: odd/even in .cardg) */
.cardg > .pure-u-1:nth-child(odd) a { padding: 0; margin-top: 0 }
.cardg > .pure-u-1:nth-child(2n) a { font-weight: 600 }

/* --- 24. Utility Classes -------------------------------- */
.text-left { text-align: left }
.text-right { text-align: right }
.text-white { color: #fff !important }
.ccenter { text-align: center }
.just { text-align: justify }
@media (max-width: 600px) { .just { text-align: left; hyphens: auto; -webkit-hyphens: auto } }
.leflex { justify-content: flex-end; display: flex }
.tdnone { text-decoration: none !important }
.noselect { user-select: none }
.mauto { margin: auto }

/* Spacing */
.m5 { margin: 5px }
.mb10 { margin-bottom: var(--space-2) !important }
.mb20 { margin-bottom: var(--space-4) }
.mb30 { margin-bottom: var(--space-6) }
.mb50 { margin-bottom: var(--space-12) }
.mt50 { margin-top: var(--space-12) }
.mr15 { margin-right: 15px }
.mr30 { margin-right: 30px }
.mr31 { margin-right: 30px !important }
.mb-0 { margin-bottom: 0 !important }
.pb-0 { padding-bottom: 0 !important }
.p10 { padding: 10px }

/* Size */
.min80 { min-height: 100px }
.min160 { min-height: 160px !important }
.min280 { min-height: 280px !important }
.min350 { min-height: 350px }
.w100 { width: 92% }
.reduit { padding: 5px 15px 0 !important }

/* Colors & backgrounds */
.bg-dark { background-color: var(--color-primary) !important; color: #fff }
.bwhite { background-color: var(--color-surface) }

/* Font weights & sizes */
.f100 { font-weight: 300 !important }
.f14 { font-size: 14px !important }

/* --- 25. Responsive ------------------------------------- */
@media screen and (max-width: 900px) { .site-title { display: block } }
@media screen and (min-width: 900px) { body { padding-top: 60px } }

@media (min-width: 48em) {
  .vpetit { display: none }
  .content, .header { padding-left: 1em; padding-right: 1em }
}

@media (max-width: 1200px) {
  /*
    On mobile, JS moves .menu out of <header> and appends it to <body>.
    This avoids all stacking-context issues (backdrop-filter, z-index).
    The menu is styled as a fixed overlay directly on the body.
  */
  .menu {
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    max-height: calc(100vh - 60px);
    background: var(--color-surface);
    flex-direction: column;
    padding: 0;
    overflow-y: auto;
    display: none;
    z-index: 10000;
    box-shadow: 0 8px 30px rgba(0,0,0,0.18);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none
  }
  .menu.active { display: flex }
  .menu::-webkit-scrollbar { display: none }

  .menu li { margin: 0; width: 100%; border-bottom: 1px solid var(--color-border) }
  .menu li:last-child { border-bottom: none }
  .menu a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; color: var(--color-text); font-size: 15px; font-weight: 500;
    border-radius: 0
  }
  .menu a:hover, .menu a:active, .menu a:focus { background: var(--color-bg); color: var(--color-text) }
  .menu a:after { display: none }
  .arrow { font-size: 12px; color: var(--color-text-muted); transition: transform .25s ease }
  .menu-item.active .arrow { transform: rotate(180deg); color: var(--color-primary) }

  .menu > li > a.lesvgl {
    justify-content: center; padding: 14px 20px;
    background: var(--color-bg); color: var(--color-primary);
    font-weight: 600; gap: 8px
  }

  .megamenu {
    display: none !important; position: static; height: auto;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none; padding: 0; max-height: none; overflow-y: visible;
    border: none; border-radius: 0;
    background: var(--color-bg); border-top: 1px solid var(--color-border)
  }
  .menu-item.active .megamenu { display: block !important }
  .megamenu::-webkit-scrollbar { display: none }
  .megamenu-content { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; padding: var(--space-3) var(--space-4) }
  .megamenu-row { display: contents }
  .megamenu-column { width: 100%; margin-bottom: var(--space-2); padding: var(--space-2) 0 }
  .megamenu-title, .megamenu-column h3 { font-size: 11px; margin-bottom: var(--space-2); padding-bottom: var(--space-1); color: var(--color-text-light); text-transform: uppercase; letter-spacing: 0.08em; border-bottom: none }
  .submenu a { font-size: 13px; padding: 5px 0; color: var(--color-text-muted) }
  .submenu a:hover { color: var(--color-primary) }
  .submenu li { margin-bottom: 2px }
  .hamburger, .menu-item.active .megamenu { display: block }
}

@media only screen and (max-width: 1300px) { .hiddenxs { display: none } }

@media (max-width: 899px) {
  .hero { margin: var(--space-2) 0 }
  .f100 { font-weight: 400 !important }
  .listview-grid { grid-template-columns: 1fr }
  body { padding-top: 60px }
  .image-gauche { float: left; margin-right: var(--space-2); margin-bottom: var(--space-2); width: 100px; height: 100px; aspect-ratio: 1/1; object-fit: cover }
}

@media (max-width: 767px) {
  .header h1, h1 { font-size: 1.7rem }
  .pubg { display: none }
  .pubp { display: block }
}
@media (min-width: 768px) {
  .pubg { display: block }
  .pubp { display: none }
}

@media only screen and (max-width: 600px) {
  .centerp, .h2cool { text-align: center !important }
  .pure-g { padding: 0 }
  .header h1 { font-size: 1.5em }
  .phaut { font-size: .9rem }
  .content { padding: var(--space-3); margin: var(--space-2) auto var(--space-12) }
  .card { margin: 0 !important }
  .card-grid { grid-template-columns: 1fr; gap: var(--space-3) }
  .h2cool { font-size: 1rem }
  h1 { font-size: 1.5rem }
  h2 { font-size: 1.25rem }
  .breadcrumb { padding: 0; font-size: 11px }
  .laq { font-size: 1.4em !important }
  .hero { padding: var(--space-4); margin: var(--space-2) 0 }
  .megamenu-content { grid-template-columns: 1fr !important; padding: var(--space-2) var(--space-3) }
}

@media only screen and (max-width: 480px) {
  .pure-form button[type=submit] { margin: .7em 0 0 }
  .pure-form input:not([type]), .pure-form input[type=color], .pure-form input[type=date],
  .pure-form input[type=datetime-local], .pure-form input[type=datetime], .pure-form input[type=email],
  .pure-form input[type=month], .pure-form input[type=number], .pure-form input[type=password],
  .pure-form input[type=search], .pure-form input[type=tel], .pure-form input[type=text],
  .pure-form input[type=time], .pure-form input[type=url], .pure-form input[type=week],
  .pure-form label { margin-bottom: .3em }
  .pure-group input:not([type]), .pure-group input[type=color], .pure-group input[type=date],
  .pure-group input[type=datetime-local], .pure-group input[type=datetime], .pure-group input[type=email],
  .pure-group input[type=month], .pure-group input[type=number], .pure-group input[type=password],
  .pure-group input[type=search], .pure-group input[type=tel], .pure-group input[type=text],
  .pure-group input[type=time], .pure-group input[type=url], .pure-group input[type=week] { margin-bottom: 0 }
  .pure-form-aligned .pure-control-group label { margin-bottom: .3em; text-align: left; display: block; width: 100% }
  .pure-form-aligned .pure-controls { margin: 1.5em 0 0 }
  .pure-form-message, .pure-form-message-inline { display: block; font-size: .75em; padding: .2em 0 .8em }
}

@media (max-width: 768px) {
  .content { margin: var(--space-2) auto var(--space-12) }
  .leflex { justify-content: center }
  .btn-group { width: 100%; justify-content: space-between }
  .letter-container { padding: var(--space-3) }
  .hidden-xs { display: none !important }
  .hero { padding: var(--space-4) }
  .metadata { flex-direction: column; gap: var(--space-2) }
  .action-bar, .action-bar2 { flex-direction: column; gap: var(--space-3); align-items: flex-start }
  button, input, optgroup, select, textarea { font-size: 85% }
  .footer-new-container { flex-direction: column; align-items: flex-start }
  .footer-col { width: 100%; margin-bottom: var(--space-4) }
}

/* --- 26. Print ------------------------------------------ */
@media print {
  body * { visibility: hidden }
  #copyNotification, .action-bar, .ink-dock, .seal-wrap, .ads-container-inarticle, .adsbygoogle,
  .autre1, .blog1, .cit1, .drt, .find1, .footer-new, .google-auto-placed,
  .lapub2b, .last1, .modal, .savoir1, .watermark, footer { display: none !important }
  .letter-container, .letter-container * { visibility: visible }
  .letter-preview { margin-top: 10px; padding: 60px }
  .letter-container, body { margin: 0; padding: 0 }
  .letter-container { position: absolute; left: 0; top: 0; width: 100%; max-width: 100%; border: unset; padding: 5px; box-shadow: unset }
  .mb50, .mb20 { margin-bottom: 0 }
  .content { margin: 0 }
}

/* --- 27. Page-specific Overrides ------------------------ */
.lettre h1 { border-bottom: 2px solid var(--color-border); padding-bottom: var(--space-3) }
.pure-table td { background-color: transparent }
.pure-1 { width: 100% }
.auth3 { font-size: 1em }
.h6 { font-size: 0.875rem }

/* --- 28. AdSense : suppression des espaces vides (unités non remplies) --- */
/* Conteneur de réserve d'une pub : aucune hauteur forcée -> s'effondre seul si vide */
.ad-reserve { min-height: 0 }
/* Unité explicitement non remplie par AdSense : on la masque */
.adsbygoogle[data-ad-status="unfilled"] { display: none !important }
/* On masque aussi le conteneur (et ses marges) quand l'unité n'est pas remplie
   (navigateurs supportant :has() — Chrome/Edge/Safari/Firefox récents) */
.ad-reserve:has(ins.adsbygoogle[data-ad-status="unfilled"]),
.ads-container-inarticle:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none !important }
/* Repli forcé par le fallback JS (navigateurs sans :has()) */
.ad-empty { display: none !important }