/* ==========================================================================
   THÉOPHILE TOUALI — FEUILLE DE STYLES PRINCIPALE
   ==========================================================================
   Version remise en forme intégralement.
   Ordre des règles et cascade conservés afin de ne pas modifier le rendu.
   ========================================================================== */

:root {
    --ink: #061326;
    --ink-2: #1a2a3c;
    --blue: #8fc4d5;
    --blue-deep: #5f9daf;
    --sky: #dff3f8;
    --paper: #f6f0e7;
    --white: #fff;
    --gold: #d6a94b;
    --muted: #667584;
    --line: rgba(6,19,38,.12);
    --shadow: 0 28px 80px rgba(3,18,31,.14);
    --radius: 28px;
    --serif: Georgia,"Times New Roman",serif;
    --sans: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    background: #fcfbf8;
    font-family: var(--sans);
    line-height: 1.6;
    text-rendering: optimizeLegibility;
}

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

a {
    color: inherit;
    text-decoration: none;
}

button,input,textarea,select {
    font: inherit;
}

.container {
    width: min(1180px,calc(100% - 36px));
    margin-inline: auto;
}

.skip-link {
    position: fixed;
    left: 16px;
    top: -60px;
    z-index: 9999;
    background: var(--ink);
    color: #fff;
    padding: 10px 14px;
    border-radius: 10px;
}

.skip-link:focus {
    top: 16px;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(252,251,248,.84);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid transparent;
    transition: .3s ease;
}

.site-header.is-scrolled {
    border-color: var(--line);
    box-shadow: 0 12px 38px rgba(3,18,31,.07);
}

.nav-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 86px;
    gap: 24px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: max-content;
}

.brand-mark {
    width: 52px;
    height: 52px;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(8,23,36,.09));
}

.brand-copy {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.brand-copy strong {
    font: 700 20px/1 var(--serif);
    letter-spacing: .02em;
}

.brand-copy small {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--muted);
    margin-top: 6px;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 14px;
    font-weight: 700;
}

.main-nav>a:not(.nav-cta) {
    position: relative;
    padding: 12px 0;
    color: #344455;
}

.main-nav>a:not(.nav-cta)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 4px;
    height: 2px;
    background: var(--ink);
    transition: right .25s ease;
}

.main-nav>a:hover::after,.main-nav>a.is-active::after {
    right: 0;
}

.main-nav>a.is-active {
    color: var(--ink);
}

.nav-cta,.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 999px;
    padding: 13px 19px;
    background: var(--ink);
    color: #fff !important;
    font-weight: 800;
    box-shadow: 0 12px 30px rgba(6,19,38,.12);
    transition: transform .2s ease,box-shadow .2s ease,background .2s ease;
}

.nav-cta:hover,.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(6,19,38,.18);
}

.btn-light {
    background: #fff;
    color: var(--ink) !important;
    border: 1px solid var(--line);
}

.btn-ghost {
    background: transparent;
    color: var(--ink) !important;
    border: 1px solid rgba(6,19,38,.18);
    box-shadow: none;
}

.nav-toggle {
    display: none;
    width: 48px;
    height: 48px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 14px;
    padding: 11px;
}

.nav-toggle span {
    display: block;
    height: 2px;
    background: var(--ink);
    margin: 5px 0;
    border-radius: 2px;
}

.hero {
    position: relative;
    overflow: hidden;
    padding: 62px 0 74px;
    background: radial-gradient(circle at 82% 15%,rgba(143,196,213,.42),transparent 33%),radial-gradient(circle at 20% 70%,rgba(214,169,75,.13),transparent 28%),linear-gradient(180deg,#fbfaf6,#f4f9fa);
}

.hero::after {
    content: "TT";
    position: absolute;
    right: -40px;
    bottom: -130px;
    font: 900 420px/1 var(--serif);
    color: rgba(6,19,38,.028);
    letter-spacing: -.12em;
    pointer-events: none;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 54px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-weight: 900;
    font-size: 11px;
    color: #48677a;
}

.eyebrow::before {
    content: "";
    width: 34px;
    height: 1px;
    background: currentColor;
}

.hero h1,.page-hero h1 {
    font: 500 clamp(50px,7vw,92px)/.96 var(--serif);
    letter-spacing: -.055em;
    margin: 18px 0 22px;
    max-width: 820px;
}

.hero h1 span {
    display: block;
    color: var(--blue-deep);
    font-style: italic;
}

.hero-copy {
    font-size: 18px;
    color: #526171;
    max-width: 640px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.hero-micro {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    margin-top: 42px;
}

.hero-micro div {
    display: flex;
    flex-direction: column;
}

.hero-micro strong {
    font: 700 24px/1 var(--serif);
}

.hero-micro span {
    font-size: 12px;
    color: var(--muted);
    margin-top: 5px;
}

.book-stack {
    position: relative;
    min-height: 590px;
}

.book-stack::before {
    content: "";
    position: absolute;
    width: 410px;
    height: 410px;
    border-radius: 50%;
    background: linear-gradient(135deg,rgba(143,196,213,.7),rgba(255,255,255,.15));
    left: 50%;
    top: 50%;
    transform: translate(-50%,-47%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}

.stack-book {
    position: absolute;
    width: 245px;
    aspect-ratio: 2/3;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 35px 70px rgba(4,18,30,.28);
    border: 1px solid rgba(255,255,255,.5);
    transition: transform .4s ease;
}

.stack-book img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stack-book:nth-child(1) {
    left: 6%;
    top: 20%;
    transform: rotate(-10deg) translateY(12px);
}

.stack-book:nth-child(2) {
    right: 4%;
    top: 17%;
    transform: rotate(9deg) translateY(20px);
}

.stack-book:nth-child(3) {
    left: 31%;
    top: 4%;
    z-index: 3;
    width: 270px;
    transform: rotate(-1deg);
}

.book-stack:hover .stack-book:nth-child(1) {
    transform: rotate(-13deg) translate(-8px,7px);
}

.book-stack:hover .stack-book:nth-child(2) {
    transform: rotate(12deg) translate(8px,12px);
}

.book-stack:hover .stack-book:nth-child(3) {
    transform: rotate(0) translateY(-8px);
}

.section {
    padding: 96px 0;
}

.section-soft {
    background: #f2f7f8;
}

.section-dark {
    background: var(--ink);
    color: #fff;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 28px;
    margin-bottom: 42px;
}

.section-head h2 {
    font: 500 clamp(38px,5vw,60px)/1 var(--serif);
    letter-spacing: -.035em;
    margin: 9px 0 0;
}

.section-head p {
    max-width: 520px;
    color: var(--muted);
    margin: 0;
}

.section-dark .section-head p {
    color: #aebac6;
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 800;
    font-size: 14px;
}

.link-arrow span {
    transition: transform .2s;
}

.link-arrow:hover span {
    transform: translateX(5px);
}

.featured {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 34px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.featured-art {
    position: relative;
    min-height: 620px;
    background: linear-gradient(160deg,var(--accent,#8fc4d5),#173043);
    overflow: hidden;
    display: grid;
    place-items: center;
}

.featured-art::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 24% 18%,rgba(255,255,255,.32),transparent 34%),linear-gradient(180deg,transparent,rgba(4,16,27,.16));
}

.featured-art img {
    position: relative;
    width: min(70%,360px);
    max-height: 510px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 35px 80px rgba(1,11,20,.38);
    transform: rotate(-2deg);
}

.featured-content {
    padding: 68px 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.book-meta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.badge {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 900;
    color: #536270;
    background: rgba(255,255,255,.5);
}

.featured-content h2 {
    font: 500 clamp(42px,5vw,66px)/.98 var(--serif);
    letter-spacing: -.045em;
    margin: 0 0 20px;
}

.featured-content .lead {
    font-size: 17px;
    color: #596979;
}

.quote-mark {
    font: italic 500 25px/1.4 var(--serif);
    color: #26394a;
    border-left: 3px solid var(--accent,#8fc4d5);
    padding-left: 20px;
    margin: 28px 0;
}

.book-actions {
    display: flex;
    gap: 11px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.books-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 26px;
}

.book-card {
    group: book;
    display: flex;
    flex-direction: column;
}

.book-cover-wrap {
    position: relative;
    aspect-ratio: 2/3;
    border-radius: 14px;
    overflow: hidden;
    background: #e6ecee;
    box-shadow: 0 20px 46px rgba(5,18,30,.14);
    transition: transform .3s ease,box-shadow .3s ease;
}

.book-card:hover .book-cover-wrap {
    transform: translateY(-8px);
    box-shadow: 0 34px 60px rgba(5,18,30,.22);
}

.book-cover-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.book-hover {
    position: absolute;
    inset: auto 14px 14px;
    display: flex;
    justify-content: center;
    opacity: 0;
    transform: translateY(8px);
    transition: .25s;
}

.book-card:hover .book-hover {
    opacity: 1;
    transform: translateY(0);
}

.book-hover span {
    background: rgba(255,255,255,.93);
    backdrop-filter: blur(8px);
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.book-card h3 {
    font: 600 24px/1.08 var(--serif);
    margin: 18px 0 5px;
}

.book-card p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.book-card .price {
    font-weight: 900;
    color: var(--ink);
    margin-top: 8px;
}

.manifesto {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 60px;
    align-items: center;
}

.manifesto-mark {
    position: relative;
    min-height: 520px;
    border-radius: 34px;
    background: linear-gradient(150deg,#90c6d6,#d9eef4 50%,#fff);
    overflow: hidden;
    display: grid;
    place-items: center;
}

.manifesto-mark img {
    width: 58%;
    filter: drop-shadow(0 24px 40px rgba(4,20,31,.16));
}

.manifesto-mark::after {
    content: "";
    position: absolute;
    inset: 28px;
    border: 1px solid rgba(6,19,38,.12);
    border-radius: 25px;
}

.manifesto-copy h2 {
    font: 500 clamp(44px,5vw,70px)/.98 var(--serif);
    letter-spacing: -.045em;
    margin: 14px 0 22px;
}

.manifesto-copy p {
    font-size: 17px;
    color: #5d6b78;
}

.principles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 28px;
}

.principle {
    padding: 18px 0;
    border-top: 1px solid var(--line);
}

.principle strong {
    font: 700 21px/1.2 var(--serif);
}

.principle span {
    display: block;
    color: var(--muted);
    font-size: 13px;
    margin-top: 5px;
}

.quote-section {
    text-align: center;
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}

.quote-section::before {
    content: "“";
    position: absolute;
    left: 50%;
    top: -40px;
    transform: translateX(-50%);
    font: 500 240px/1 var(--serif);
    color: rgba(143,196,213,.12);
}

.quote-section blockquote {
    position: relative;
    max-width: 930px;
    margin: 0 auto;
    font: italic 500 clamp(34px,5vw,58px)/1.18 var(--serif);
    letter-spacing: -.03em;
}

.quote-section cite {
    display: block;
    margin-top: 24px;
    font-style: normal;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: #94a4b2;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 22px;
}

.news-card {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 22px;
    padding: 28px;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    transition: .25s;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 50px rgba(6,19,38,.1);
}

.news-card time {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--blue-deep);
    font-weight: 900;
}

.news-card h3 {
    font: 600 27px/1.08 var(--serif);
    margin: 14px 0 12px;
}

.news-card p {
    color: var(--muted);
    font-size: 14px;
}

.news-card .link-arrow {
    margin-top: auto;
}

.cta-panel {
    position: relative;
    border-radius: 36px;
    padding: 64px;
    background: linear-gradient(135deg,#11293b,#061326);
    color: #fff;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 30px;
    align-items: center;
}

.cta-panel::before {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(143,196,213,.16);
    right: -120px;
    top: -130px;
}

.cta-panel h2 {
    position: relative;
    font: 500 clamp(40px,5vw,64px)/1 var(--serif);
    margin: 10px 0 15px;
}

.cta-panel p {
    position: relative;
    color: #b6c3ce;
    max-width: 650px;
}

.cta-actions {
    position: relative;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.cta-panel .btn-light {
    border: 0;
}

.page-hero {
    padding: 76px 0 60px;
    background: linear-gradient(180deg,#eff8fa,#fcfbf8);
    border-bottom: 1px solid var(--line);
}

.page-hero h1 {
    margin-bottom: 18px;
}

.page-hero p {
    max-width: 700px;
    color: var(--muted);
    font-size: 18px;
}

.filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 34px;
}

.filter-chip {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 999px;
    padding: 9px 13px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.filter-chip.is-active {
    background: var(--ink);
    color: #fff;
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 34px;
}

.catalog-card {
    display: grid;
    grid-template-columns: .48fr .52fr;
    gap: 22px;
    border: 1px solid var(--line);
    border-radius: 26px;
    background: #fff;
    padding: 18px;
    box-shadow: 0 16px 40px rgba(6,19,38,.06);
}

.catalog-card .book-cover-wrap {
    border-radius: 10px;
}

.catalog-copy {
    padding: 10px 8px 10px 0;
    display: flex;
    flex-direction: column;
}

.catalog-copy h2 {
    font: 600 26px/1.05 var(--serif);
    margin: 9px 0;
}

.catalog-copy p {
    font-size: 13px;
    color: var(--muted);
}

.catalog-copy .link-arrow {
    margin-top: auto;
}

.catalog-card.is-hidden {
    display: none;
}

.book-detail-hero {
    padding: 62px 0 86px;
    background: linear-gradient(160deg,var(--book-accent,#8fc4d5),#f6f4ed 65%);
}

.book-detail-grid {
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    gap: 70px;
    align-items: center;
}

.book-visual {
    position: relative;
    min-height: 620px;
    display: grid;
    place-items: center;
}

.book-visual::before {
    content: "";
    position: absolute;
    width: 90%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255,255,255,.32);
}

.book-visual img {
    position: relative;
    width: min(72%,385px);
    max-height: 570px;
    object-fit: cover;
    border-radius: 9px;
    box-shadow: 0 38px 80px rgba(4,18,30,.28);
    transform: rotate(-1.5deg);
}

.book-detail-copy h1 {
    font: 500 clamp(52px,7vw,88px)/.94 var(--serif);
    letter-spacing: -.055em;
    margin: 15px 0 20px;
}

.book-detail-copy .intro {
    font-size: 18px;
    color: #425467;
    max-width: 680px;
}

.book-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 30px;
    margin: 26px 0;
}

.fact span {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 900;
    color: #526a7b;
}

.fact strong {
    display: block;
    font: 600 18px/1.3 var(--serif);
    margin-top: 4px;
}

.book-story {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 70px;
    align-items: start;
}

.book-story h2,.prose h2 {
    font: 500 clamp(38px,4.5vw,58px)/1 var(--serif);
    letter-spacing: -.035em;
    margin: 0 0 24px;
}

.prose {
    font-size: 17px;
    color: #4f5e6c;
}

.prose p {
    margin: 0 0 22px;
}

.book-quote-card {
    position: sticky;
    top: 120px;
    border-radius: 28px;
    padding: 38px;
    background: var(--ink);
    color: #fff;
}

.book-quote-card blockquote {
    font: italic 500 31px/1.35 var(--serif);
    margin: 0;
}

.book-quote-card p {
    margin: 20px 0 0;
    color: #99abb9;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .15em;
}

.spread {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
}

.spread figure {
    margin: 0;
}

.spread img {
    width: 100%;
    border-radius: 18px;
    box-shadow: 0 26px 60px rgba(6,19,38,.13);
}

.spread figcaption {
    font-size: 12px;
    color: var(--muted);
    margin-top: 10px;
}

.author-grid {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    gap: 72px;
    align-items: center;
}

.author-card {
    min-height: 590px;
    border-radius: 34px;
    background: linear-gradient(145deg,#97c8d7,#e7f4f7);
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
}

.author-card::before,.author-card::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(6,19,38,.12);
    border-radius: 50%;
}

.author-card::before {
    width: 460px;
    height: 460px;
}

.author-card::after {
    width: 560px;
    height: 560px;
}

.author-card img {
    position: relative;
    width: 54%;
    z-index: 2;
}

.author-copy h2 {
    font: 500 clamp(46px,5.5vw,72px)/.98 var(--serif);
    margin: 12px 0 24px;
    letter-spacing: -.04em;
}

.author-copy p {
    font-size: 17px;
    color: #566572;
}

.signature {
    font: italic 500 28px/1 var(--serif);
    margin-top: 28px;
}

.author-stats {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 14px;
    margin-top: 32px;
}

.author-stat {
    border-top: 1px solid var(--line);
    padding-top: 15px;
}

.author-stat strong {
    display: block;
    font: 700 28px/1 var(--serif);
}

.author-stat span {
    font-size: 12px;
    color: var(--muted);
}

.contact-grid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 60px;
}

.contact-panel {
    border-radius: 30px;
    padding: 40px;
    background: linear-gradient(150deg,#86bbcc,#e3f3f7);
    min-height: 560px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.contact-panel h2 {
    font: 500 50px/1 var(--serif);
    margin: 12px 0;
}

.contact-panel p {
    color: #395366;
}

.contact-mark {
    width: 180px;
    align-self: center;
}

.form-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 30px;
    padding: 40px;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.form-group.full {
    grid-column: 1/-1;
}

.form-group label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 900;
    margin-bottom: 8px;
    color: #536575;
}

.input {
    width: 100%;
    border: 1px solid #ccd7dc;
    border-radius: 14px;
    padding: 13px 14px;
    background: #fff;
    color: var(--ink);
}

textarea.input {
    min-height: 170px;
    resize: vertical;
}

.input:focus {
    outline: 3px solid rgba(143,196,213,.28);
    border-color: #6fa9ba;
}

.alert {
    padding: 14px 16px;
    border-radius: 14px;
    margin-bottom: 20px;
    font-size: 14px;
}

.alert-success {
    background: #edf8f1;
    color: #24613c;
    border: 1px solid #bfe0ca;
}

.alert-error {
    background: #fff1ef;
    color: #882e29;
    border: 1px solid #efc4c0;
}

.honeypot {
    position: absolute;
    left: -10000px;
}

.article {
    max-width: 820px;
    margin: 0 auto;
}

.article h1 {
    font: 500 clamp(46px,6vw,76px)/.98 var(--serif);
    letter-spacing: -.045em;
    margin: 16px 0 20px;
}

.article-meta {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--blue-deep);
    font-weight: 900;
}

.article-body {
    font: 400 18px/1.85 var(--serif);
    color: #263646;
    margin-top: 44px;
}

.article-body p {
    margin: 0 0 24px;
}

.empty {
    padding: 50px;
    border: 1px dashed #bfcbd1;
    border-radius: 22px;
    text-align: center;
    color: var(--muted);
}

.site-footer {
    background: #05101e;
    color: #dce5ec;
    padding: 70px 0 28px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr .7fr .7fr;
    gap: 50px;
}

.footer-brand .brand-copy strong {
    color: #fff;
}

.footer-brand .brand-copy small {
    color: #97a9b7;
}

.footer-note {
    max-width: 470px;
    color: #8fa0ae;
    margin-top: 20px;
}

.footer-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: #7f93a2;
    font-weight: 900;
    margin: 0 0 16px;
}

.footer-grid>div:not(:first-child) {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.footer-grid a:hover {
    color: #fff;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    margin-top: 50px;
    padding-top: 22px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-size: 12px;
    color: #728492;
}

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease,transform .6s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (max-width:1080px) {
    .main-nav {
        gap: 16px;
    }

    .books-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .catalog-grid {
        grid-template-columns: repeat(2,1fr);
    }

    .hero-grid,.featured,.manifesto,.book-detail-grid,.book-story,.author-grid,.contact-grid {
        grid-template-columns: 1fr;
    }

    .book-stack {
        min-height: 520px;
        max-width: 620px;
        width: 100%;
        margin: 0 auto;
    }

    .featured-art {
        min-height: 560px;
    }

    .featured-content {
        padding: 48px;
    }

    .book-visual {
        min-height: 540px;
    }

    .book-quote-card {
        position: relative;
        top: auto;
    }

    .author-card {
        min-height: 500px;
    }

    .cta-panel {
        grid-template-columns: 1fr;
    }

    .cta-actions {
        justify-content: flex-start;
    }
}

@media (max-width:860px) {
    .nav-toggle {
        display: block;
    }

    .main-nav {
        position: absolute;
        left: 18px;
        right: 18px;
        top: 76px;
        background: rgba(255,255,255,.98);
        border: 1px solid var(--line);
        border-radius: 22px;
        box-shadow: var(--shadow);
        padding: 18px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: .2s;
    }

    .main-nav.is-open {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .main-nav>a {
        padding: 12px !important;
    }

    .main-nav>a:not(.nav-cta)::after {
        display: none;
    }

    .nav-cta {
        margin-top: 8px;
    }

    .news-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-grid>div:first-child {
        grid-column: 1/-1;
    }

    .hero {
        padding-top: 42px;
    }

    .hero h1 {
        font-size: clamp(48px,12vw,74px);
    }

    .section {
        padding: 74px 0;
    }

    .section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .catalog-card {
        grid-template-columns: 1fr;
    }

    .catalog-card .book-cover-wrap {
        max-width: 240px;
    }

    .spread {
        grid-template-columns: 1fr;
    }
}

@media (max-width:620px) {
    .container {
        width: min(100% - 24px,1180px);
    }

    .brand-copy strong {
        font-size: 17px;
    }

    .brand-copy small {
        font-size: 8px;
    }

    .brand-mark {
        width: 45px;
        height: 45px;
    }

    .nav-wrap {
        min-height: 72px;
    }

    .hero {
        padding: 32px 0 52px;
    }

    .hero-copy {
        font-size: 16px;
    }

    .hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .book-stack {
        min-height: 430px;
    }

    .book-stack::before {
        width: 300px;
        height: 300px;
    }

    .stack-book {
        width: 170px;
    }

    .stack-book:nth-child(3) {
        width: 195px;
        left: 27%;
    }

    .books-grid,.catalog-grid {
        grid-template-columns: 1fr;
    }

    .featured-art {
        min-height: 470px;
    }

    .featured-art img {
        width: 67%;
        max-height: 400px;
    }

    .featured-content {
        padding: 34px 26px;
    }

    .featured-content h2 {
        font-size: 44px;
    }

    .section {
        padding: 64px 0;
    }

    .manifesto-mark {
        min-height: 420px;
    }

    .principles {
        grid-template-columns: 1fr;
    }

    .quote-section {
        padding: 88px 0;
    }

    .cta-panel {
        padding: 38px 26px;
    }

    .page-hero {
        padding: 52px 0 40px;
    }

    .book-detail-hero {
        padding: 38px 0 60px;
    }

    .book-visual {
        min-height: 440px;
    }

    .book-detail-copy h1 {
        font-size: 50px;
    }

    .book-facts {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .author-stats {
        grid-template-columns: 1fr;
    }

    .contact-panel,.form-card {
        padding: 28px;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-group.full {
        grid-column: auto;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid>div:first-child {
        grid-column: auto;
    }

    .footer-bottom {
        flex-direction: column;
    }

    .catalog-card .book-cover-wrap {
        max-width: none;
    }
}

@media (prefers-reduced-motion:reduce) {
    * {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}

/* =========================================================
   HERO — CARROUSEL DES ŒUVRES
========================================================= */

.book-carousel {
    position: relative;
    min-height: 590px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Zone dans laquelle les couvertures circulent */

.book-carousel-stage {
    position: relative;
    height: 500px;
    perspective: 1400px;
}

/* Cercle décoratif derrière les ouvrages */

.book-carousel-stage::before {
    content: "";
    position: absolute;
    width: 410px;
    height: 410px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: linear-gradient(
            135deg,
            rgba(143, 196, 213, .72),
            rgba(255, 255, 255, .18)
        );
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75),
        0 35px 80px rgba(6, 19, 38, .08);
    pointer-events: none;
}

/* ---------------------------------------------------------
   COUVERTURE GÉNÉRALE
--------------------------------------------------------- */

.carousel-book {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 225px;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: 9px;
    border: 1px solid
        rgba(255, 255, 255, .55);
    box-shadow: 0 25px 55px
        rgba(4, 18, 30, .22);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%)
        scale(.62);
    transition: transform .65s cubic-bezier(.2, .8, .2, 1),
        opacity .5s ease,
        filter .5s ease,
        box-shadow .5s ease;
    will-change: transform,
        opacity;
    background: #e6ecee;
}

/* Image */

.carousel-book img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =========================================================
   LIVRE CENTRAL
========================================================= */

.carousel-book.is-active {
    z-index: 10;
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%)
        translateX(0)
        scale(1.14)
        rotateY(0deg);
    filter: none;
    box-shadow: 0 40px 85px
        rgba(4, 18, 30, .34);
}

/* Le livre central réagit légèrement au survol */

.carousel-book.is-active:hover {
    transform: translate(-50%, -50%)
        translateY(-9px)
        scale(1.17);
    box-shadow: 0 48px 95px
        rgba(4, 18, 30, .38);
}

/* =========================================================
   LIVRE PRÉCÉDENT
========================================================= */

.carousel-book.is-prev {
    z-index: 6;
    opacity: .9;
    pointer-events: auto;
    transform: translate(-50%, -50%)
        translateX(-175px)
        scale(.87)
        rotateY(13deg)
        rotateZ(-4deg);
    filter: saturate(.88)
        brightness(.96);
}

/* =========================================================
   LIVRE SUIVANT
========================================================= */

.carousel-book.is-next {
    z-index: 6;
    opacity: .9;
    pointer-events: auto;
    transform: translate(-50%, -50%)
        translateX(175px)
        scale(.87)
        rotateY(-13deg)
        rotateZ(4deg);
    filter: saturate(.88)
        brightness(.96);
}

/* =========================================================
   DEUXIÈME LIVRE À GAUCHE
========================================================= */

.carousel-book.is-prev-2 {
    z-index: 3;
    opacity: .42;
    pointer-events: auto;
    transform: translate(-50%, -50%)
        translateX(-300px)
        scale(.68)
        rotateY(20deg)
        rotateZ(-7deg);
    filter: saturate(.65)
        brightness(.9);
}

/* =========================================================
   DEUXIÈME LIVRE À DROITE
========================================================= */

.carousel-book.is-next-2 {
    z-index: 3;
    opacity: .42;
    pointer-events: auto;
    transform: translate(-50%, -50%)
        translateX(300px)
        scale(.68)
        rotateY(-20deg)
        rotateZ(7deg);
    filter: saturate(.65)
        brightness(.9);
}

/* =========================================================
   LIVRES TEMPORAIREMENT CACHÉS
========================================================= */

.carousel-book.is-hidden {
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%)
        scale(.55);
}

/* =========================================================
   INFORMATIONS DU LIVRE ACTIF
========================================================= */

.book-carousel-info {
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 86px;
    margin-top: 5px;
    text-align: center;
}

.book-carousel-type {
    margin-bottom: 5px;
    color: var(--blue-deep);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.book-carousel-title {
    max-width: 440px;
    font: 600
        25px / 1.15
        var(--serif);
    letter-spacing: -.025em;
}

.book-carousel-hint {
    margin-top: 7px;
    color: var(--muted);
    font-size: 11px;
}

/* =========================================================
   TABLETTE
========================================================= */

@media (max-width: 1080px) {
    .book-carousel {
        min-height: 560px;
        max-width: 680px;
        width: 100%;
        margin: 0
            auto;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {
    .book-carousel {
        min-height: 465px;
    }

    .book-carousel-stage {
        height: 390px;
    }

    .book-carousel-stage::before {
        width: 300px;
        height: 300px;
    }

    .carousel-book {
        width: 165px;
    }

    .carousel-book.is-active {
        transform: translate(-50%, -50%)
            scale(1.1);
    }

    .carousel-book.is-active:hover {
        transform: translate(-50%, -50%)
            scale(1.1);
    }

    .carousel-book.is-prev {
        transform: translate(-50%, -50%)
            translateX(-115px)
            scale(.78)
            rotateY(12deg)
            rotateZ(-4deg);
    }

    .carousel-book.is-next {
        transform: translate(-50%, -50%)
            translateX(115px)
            scale(.78)
            rotateY(-12deg)
            rotateZ(4deg);
    }

    .carousel-book.is-prev-2,
    .carousel-book.is-next-2 {
        opacity: 0;
        pointer-events: none;
    }

    .book-carousel-title {
        font-size: 21px;
    }
}

/* =========================================================
   HERO — BLOC ÉDITORIAL GAUCHE
========================================================= */

.hero-intro {
    position: relative;
    z-index: 5;
    max-width: 670px;
}

/* ---------------------------------------------------------
   SURTITRE
--------------------------------------------------------- */

.hero-intro .eyebrow {
    margin-bottom: 22px;
    color: #49687a;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .22em;
}

.hero-intro .eyebrow::before {
    width: 42px;
}

/* ---------------------------------------------------------
   TITRE PRINCIPAL
--------------------------------------------------------- */

.hero-intro h1 {
    max-width: 650px;
    margin: 0
        0
        28px;
    font: 500
        clamp(54px, 5.4vw, 78px)
        / .95
        var(--serif);
    letter-spacing: -.052em;
}

/*
 * Première partie :
 *
 * Et si ces histoires
 */

.hero-intro h1 {
    color: var(--ink);
}

/*
 * Deuxième partie :
 *
 * parlaient aussi de vous ?
 */

.hero-intro h1 span {
    display: block;
    margin-top: 10px;
    color: #6fa6b8;
    font-size: .93em;
    font-weight: 500;
    font-style: italic;
    line-height: .98;
    letter-spacing: -.045em;
}

/* ---------------------------------------------------------
   TEXTE D'INTRODUCTION
--------------------------------------------------------- */

.hero-intro .hero-copy {
    max-width: 620px;
    margin: 0;
    color: #536575;
    font-size: 17px;
    line-height: 1.8;
    letter-spacing: -.006em;
}

/* ---------------------------------------------------------
   BOUTONS
--------------------------------------------------------- */

.hero-intro .hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.hero-intro .hero-actions .btn {
    min-height: 52px;
    padding: 13px
        22px;
    font-size: 14px;
    white-space: nowrap;
}

/*
 * Le CTA principal reste dominant
 */

.hero-intro .hero-actions .btn:first-child {
    padding-inline: 27px;
    box-shadow: 0 15px 35px
        rgba(6, 19, 38, .16);
}

/*
 * Le bouton auteur devient plus discret
 */

.hero-intro .hero-actions .btn-light {
    color: var(--ink) !important;
    background: rgba(255, 255, 255, .72);
    border: 1px solid
        rgba(6, 19, 38, .11);
    box-shadow: 0 10px 28px
        rgba(6, 19, 38, .07);
    backdrop-filter: blur(10px);
}

/* ---------------------------------------------------------
   MICRO-INFORMATIONS
--------------------------------------------------------- */

.hero-intro .hero-micro {
    margin-top: 38px;
    padding-top: 22px;
    border-top: 1px solid
        rgba(6, 19, 38, .10);
    gap: 25px;
}

.hero-intro .hero-micro strong {
    font: 700
        20px / 1
        var(--serif);
}

.hero-intro .hero-micro span {
    max-width: 150px;
    margin-top: 7px;
    color: #72808d;
    font-size: 11px;
    line-height: 1.45;
}

/* =========================================================
   ÉQUILIBRE DU HERO
========================================================= */

.hero {
    padding-top: 72px;
    padding-bottom: 72px;
}

.hero-grid {
    grid-template-columns: minmax(0, 1.02fr)
        minmax(0, .98fr);
    gap: 72px;
}

/* =========================================================
   ÉCRANS INTERMÉDIAIRES
========================================================= */

@media (max-width: 1180px) {
    .hero-intro h1 {
        font-size: clamp(
                52px,
                6vw,
                72px
            );
    }
}

/* =========================================================
   TABLETTE
========================================================= */

@media (max-width: 1080px) {
    .hero-intro {
        max-width: 760px;
    }

    .hero-intro h1 {
        max-width: 720px;
        font-size: clamp(
                52px,
                8vw,
                76px
            );
    }

    .hero-intro .hero-copy {
        max-width: 680px;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {
    .hero-intro .eyebrow {
        margin-bottom: 18px;
        font-size: 9px;
        letter-spacing: .18em;
    }

    .hero-intro .eyebrow::before {
        width: 28px;
    }

    .hero-intro h1 {
        margin-bottom: 22px;
        font-size: clamp(
                45px,
                13vw,
                62px
            );
        line-height: .97;
    }

    .hero-intro h1 span {
        margin-top: 8px;
        font-size: .91em;
    }

    .hero-intro .hero-copy {
        font-size: 16px;
        line-height: 1.7;
    }

    .hero-intro .hero-actions {
        margin-top: 27px;
        flex-direction: column;
        align-items: stretch;
    }

    .hero-intro .hero-actions .btn {
        width: 100%;
        white-space: normal;
        text-align: center;
    }

    .hero-intro .hero-micro {
        margin-top: 32px;
    }
}

/* =========================================================
   HERO — ÉMOTION / IDENTIFICATION
========================================================= */

.hero-emotion {
    max-width: 620px;
    margin-top: 28px;
}

/* Chaque expérience */

.hero-emotion-line {
    position: relative;
    margin: 0 0 13px;
    padding-left: 21px;
    color: #657381;
    font-size: 16px;
    line-height: 1.55;
    letter-spacing: -.005em;
}

/* Petit trait éditorial */

.hero-emotion-line::before {
    content: "";
    position: absolute;
    left: 0;
    top: .78em;
    width: 8px;
    height: 1px;
    background: var(--blue-deep);
}

/* Partie forte de chaque phrase */

.hero-emotion-line strong {
    color: var(--ink);
    font-weight: 750;
}

/* Conclusion émotionnelle */

.hero-emotion-signature {
    position: relative;
    margin: 24px 0 0;
    padding: 21px 0 0;
    border-top: 1px solid
        rgba(6, 19, 38, .11);
    color: var(--ink);
    font: 500
        21px / 1.35
        var(--serif);
}

/* Phrase finale */

.hero-emotion-signature em {
    display: block;
    margin-top: 2px;
    color: var(--blue-deep);
    font-size: 1.2em;
    font-weight: 500;
    font-style: italic;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {
    .hero-emotion {
        margin-top: 23px;
    }

    .hero-emotion-line {
        margin-bottom: 12px;
        padding-left: 17px;
        font-size: 15px;
        line-height: 1.55;
    }

    .hero-emotion-line::before {
        width: 6px;
    }

    .hero-emotion-signature {
        margin-top: 20px;
        padding-top: 18px;
        font-size: 19px;
    }
}

/* =========================================================
   À LA UNE — VERSION ÉDITORIALE
========================================================= */

.spotlight-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
            180deg,
            #fcfbf8 0%,
            #f5f8f8 100%
        );
}

/* =========================================================
   COMPOSITION
========================================================= */

.spotlight {
    position: relative;
    display: grid;
    grid-template-columns: minmax(360px, .9fr)
        minmax(0, 1.1fr);
    min-height: 640px;
    overflow: hidden;
    border-radius: 38px;
    background: #071829;
    color: #fff;
    box-shadow: 0 35px 90px rgba(6, 19, 38, .16);
}

/* =========================================================
   PARTIE VISUELLE
========================================================= */

.spotlight-visual {
    position: relative;
    min-height: 640px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(
            145deg,
            var(--spotlight-accent),
            #d9edf1 65%,
            #f5faf9
        );
}

/* motif décoratif */

.spotlight-visual::before {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    border: 1px solid
        rgba(255, 255, 255, .55);
    box-shadow: 0 0 0 70px
        rgba(255, 255, 255, .08);
}

/* petit label */

.spotlight-label {
    position: absolute;
    top: 34px;
    left: 36px;
    z-index: 5;
    color: #173043;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .22em;
    text-transform: uppercase;
}

/* halo derrière le livre */

.spotlight-halo {
    position: absolute;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .34);
    filter: blur(2px);
}

/* =========================================================
   COUVERTURE
========================================================= */

.spotlight-cover {
    position: relative;
    z-index: 4;
    width: min(64%, 325px);
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}

.spotlight-cover::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -30px;
    height: 34px;
    border-radius: 50%;
    background: rgba(4, 18, 30, .25);
    filter: blur(18px);
    z-index: -1;
}

.spotlight-cover img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 42px 75px rgba(1, 12, 22, .38);
    transform: perspective(1100px)
        rotateY(-4deg)
        rotateZ(-1deg);
    transition: transform .45s cubic-bezier(.2, .8, .2, 1),
        box-shadow .45s ease;
}

.spotlight-cover:hover img {
    transform: perspective(1100px)
        rotateY(0deg)
        rotateZ(0deg)
        translateY(-8px);
    box-shadow: 0 50px 90px rgba(1, 12, 22, .45);
}

/* =========================================================
   CONTENU
========================================================= */

.spotlight-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 78px
        76px;
}

/* détail décoratif */

.spotlight-content::before {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    right: -90px;
    top: -70px;
    border-radius: 50%;
    background: rgba(143, 196, 213, .08);
}

/* =========================================================
   META
========================================================= */

.spotlight-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 23px;
}

.spotlight-meta span {
    position: relative;
    color: #9ec3cf;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.spotlight-meta span:not(:last-child)::after {
    content: "•";
    margin-left: 10px;
    color: rgba(255, 255, 255, .28);
}

/* =========================================================
   TITRE
========================================================= */

.spotlight-content h2 {
    max-width: 680px;
    margin: 0;
    color: #fff;
    font: 500
        clamp(48px, 5vw, 72px)
        / .96
        var(--serif);
    letter-spacing: -.05em;
}

/* =========================================================
   DESCRIPTION
========================================================= */

.spotlight-description {
    max-width: 620px;
    margin: 30px
        0
        0;
    color: #b9c7d1;
    font-size: 17px;
    line-height: 1.8;
}

/* =========================================================
   ACTIONS
========================================================= */

.spotlight-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 38px;
}

.spotlight-actions .btn {
    background: #fff;
    color: #071829 !important;
    box-shadow: none;
}

.spotlight-actions .btn:hover {
    background: #dff3f8;
}

/* lien achat volontairement différent */

.spotlight-buy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px
        0;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    border-bottom: 1px solid
        rgba(255, 255, 255, .35);
    transition: color .2s ease,
        border-color .2s ease;
}

.spotlight-buy:hover {
    color: var(--blue);
    border-color: var(--blue);
}

/* =========================================================
   TABLETTE
========================================================= */

@media (max-width: 1080px) {
    .spotlight {
        grid-template-columns: 1fr;
    }

    .spotlight-visual {
        min-height: 560px;
    }

    .spotlight-content {
        padding: 60px
            54px;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {
    .spotlight {
        border-radius: 26px;
    }

    .spotlight-visual {
        min-height: 440px;
    }

    .spotlight-visual::before {
        width: 310px;
        height: 310px;
        box-shadow: 0 0 0 45px
            rgba(255, 255, 255, .07);
    }

    .spotlight-label {
        top: 24px;
        left: 24px;
    }

    .spotlight-cover {
        width: min(60%, 230px);
    }

    .spotlight-content {
        padding: 42px
            28px
            46px;
    }

    .spotlight-content h2 {
        font-size: clamp(
                42px,
                12vw,
                56px
            );
    }

    .spotlight-description {
        margin-top: 23px;
        font-size: 15px;
        line-height: 1.7;
    }

    .spotlight-actions {
        margin-top: 30px;
        gap: 18px;
    }
}

.spotlight-hook {
    max-width: 620px;
    margin: 25px 0 0;
    color: #fff;
    font: italic 500
        clamp(22px, 2.3vw, 30px)
        / 1.35
        var(--serif);
}

.spotlight-description {
    max-width: 610px;
    margin: 22px 0 0;
    color: #aebdca;
    font-size: 16px;
    line-height: 1.75;
}

.spotlight-reader {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid
        rgba(255, 255, 255, .12);
}

.spotlight-reader-label {
    display: block;
    margin-bottom: 13px;
    color: #8196a6;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.spotlight-themes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.spotlight-themes span {
    padding: 8px 12px;
    border: 1px solid
        rgba(255, 255, 255, .13);
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    color: #d4dde4;
    font-size: 12px;
}

.spotlight-details {
    color: #a9bbc7;
    font-size: 13px;
    font-weight: 700;
    transition: color .2s ease;
}

.spotlight-details:hover {
    color: #fff;
}

/* =========================================================
   À LA UNE — ACCROCHES
========================================================= */

.spotlight-hooks {
    max-width: 650px;
    margin-top: 27px;
}

.spotlight-hooks p {
    position: relative;
    margin: 0 0 9px;
    padding-left: 19px;
    color: #fff;
    font: italic
        500
        19px / 1.45
        var(--serif);
}

.spotlight-hooks p::before {
    content: "";
    position: absolute;
    left: 0;
    top: .72em;
    width: 8px;
    height: 1px;
    background: var(--blue);
}

/* =========================================================
   RÉSUMÉ ANIMÉ
========================================================= */

.spotlight-summary-wrap {
    max-width: 640px;
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid
        rgba(255,255,255,.12);
}

.spotlight-summary-label,
.spotlight-themes-label {
    display: block;
    margin-bottom: 12px;
    color: #7893a5;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.spotlight-summary {
    min-height: 112px;
    margin: 0;
    color: #c0ccd5;
    font-size: 16px;
    line-height: 1.75;
}

.spotlight-summary-typed {
    position: relative;
}

.spotlight-summary-typed.is-typing::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 4px;
    vertical-align: -.12em;
    background: var(--blue);
    animation: spotlightCaret .7s
        steps(1)
        infinite;
}

@keyframes spotlightCaret {
    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

/* =========================================================
   THÈMES
========================================================= */

.spotlight-themes-block {
    margin-top: 27px;
}

.spotlight-themes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.spotlight-themes span {
    padding: 7px
        12px;
    border: 1px solid
        rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(255,255,255,.04);
    color: #d7e0e6;
    font-size: 11px;
    font-weight: 700;
}

/* =========================================================
   ACTIONS
========================================================= */

.spotlight-details {
    color: #a7b9c5;
    font-size: 13px;
    font-weight: 800;
    transition: color .2s ease;
}

.spotlight-details:hover {
    color: #fff;
}

/* =========================================================
   POPUP EXTRAIT
========================================================= */

.excerpt-dialog {
    width: min(
            760px,
            calc(100% - 32px)
        );
    max-height: calc(100vh - 50px);
    padding: 0;
    border: 0;
    border-radius: 28px;
    background: #fcfbf8;
    color: var(--ink);
    box-shadow: 0 50px 140px
        rgba(1,12,22,.42);
}

.excerpt-dialog::backdrop {
    background: rgba(3, 13, 24, .72);
    backdrop-filter: blur(8px);
}

.excerpt-dialog-inner {
    position: relative;
}

.excerpt-dialog-header {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    padding: 34px
        38px
        25px;
    background: rgba(252,251,248,.94);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid
        var(--line);
}

.excerpt-dialog-header h2 {
    margin: 8px 0 0;
    font: 600
        clamp(30px, 5vw, 44px)
        / 1
        var(--serif);
    letter-spacing: -.035em;
}

.excerpt-dialog-close {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid
        var(--line);
    border-radius: 50%;
    background: #fff;
    color: var(--ink);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.excerpt-dialog-body {
    padding: 40px
        48px;
    color: #263646;
    font: 400
        18px / 1.9
        var(--serif);
}

.excerpt-dialog-footer {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    padding: 22px
        38px;
    background: rgba(252,251,248,.95);
    backdrop-filter: blur(16px);
    border-top: 1px solid
        var(--line);
}

/* =========================================================
   ACCESSIBILITÉ
========================================================= */

.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;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {
    .spotlight-hooks p {
        font-size: 17px;
    }

    .spotlight-summary {
        min-height: 0;
        font-size: 15px;
    }

    .excerpt-dialog-header {
        padding: 25px
            22px
            20px;
    }

    .excerpt-dialog-body {
        padding: 30px
            25px;
        font-size: 17px;
    }

    .excerpt-dialog-footer {
        padding: 20px
            22px;
    }

    .excerpt-dialog-footer .btn {
        width: 100%;
    }
}

/* =========================================================
   SPOTLIGHT — NOUVELLE HIÉRARCHIE
========================================================= */

.spotlight {
    grid-template-columns: minmax(390px, .92fr)
        minmax(0, 1.08fr);
    min-height: 720px;
}

/* =========================================================
   GAUCHE
========================================================= */

.spotlight-visual {
    position: relative;
    min-height: 720px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 82px
        54px
        48px;
    overflow: hidden;
}

.spotlight-visual-inner {
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: 390px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* couverture */

.spotlight-cover {
    width: min(100%, 325px);
}

/* =========================================================
   ACTIONS SOUS LA COUVERTURE
========================================================= */

.spotlight-visual-actions {
    width: 100%;
    margin-top: 42px;
}

/* Lire + en savoir plus */

.spotlight-discovery-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.spotlight-read-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 50px;
    padding: 0
        22px;
    border: 0;
    border-radius: 999px;
    background: #071829;
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 850;
    cursor: pointer;
    box-shadow: 0 14px 34px
        rgba(7,24,41,.16);
    transition: transform .25s ease,
        background .25s ease;
}

.spotlight-read-link:hover {
    transform: translateY(-2px);
    background: #12314a;
}

.spotlight-read-link span {
    transition: transform .25s ease;
}

.spotlight-read-link:hover span {
    transform: translateX(4px);
}

.spotlight-more-link {
    position: relative;
    color: #173043;
    font-size: 13px;
    font-weight: 800;
}

.spotlight-more-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -5px;
    height: 1px;
    background: #173043;
    transition: right .25s ease;
}

.spotlight-more-link:hover::after {
    right: 0;
}

/* =========================================================
   ACHAT
========================================================= */

.spotlight-buy-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 21px;
}

.spotlight-price {
    color: #173043;
    font-size: 15px;
    font-weight: 600;
}

.spotlight-buy-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #071829;
    font-size: 14px;
    font-weight: 900;
    border-bottom: 1px solid
        rgba(7,24,41,.35);
    padding-bottom: 4px;
    transition: color .2s ease,
        border-color .2s ease;
}

.spotlight-buy-link:hover {
    color: #386f82;
    border-color: #386f82;
}

.spotlight-buy-link span {
    font-size: 12px;
}

/* =========================================================
   DROITE — RESPIRATION
========================================================= */

.spotlight-content {
    justify-content: center;
    padding: 72px
        76px;
}

/* =========================================================
   MÉTA
========================================================= */

.spotlight-meta {
    margin-bottom: 26px;
}

/* =========================================================
   TITRE
========================================================= */

.spotlight-header h2 {
    max-width: 650px;
    margin: 0;
    color: #fff;
    font: 500
        clamp(54px, 5vw, 76px)
        / .94
        var(--serif);
    letter-spacing: -.055em;
}

/* =========================================================
   ACCROCHE PRINCIPALE
========================================================= */

.spotlight-pitch {
    max-width: 650px;
    margin-top: 28px;
}

.spotlight-main-hook {
    margin: 0;
    color: #fff;
    font: 500
        clamp(20px, 1.8vw, 25px)
        / 1.45
        var(--serif);
}

/* =========================================================
   HISTOIRE
========================================================= */

.spotlight-story {
    max-width: 660px;
    margin-top: 45px;
    padding: 31px
        0
        0;
    border-top: 1px solid
        rgba(255,255,255,.12);
}

.spotlight-section-label {
    display: block;
    margin-bottom: 13px;
    color: #8fb2c0;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.spotlight-summary {
    min-height: 0;
    margin: 0;
    color: #d3dce3;
    font-size: 17px;
    line-height: 1.8;
}

/* =========================================================
   ACCROCHES SECONDAIRES
========================================================= */

.spotlight-hook-list {
    display: grid;
    gap: 13px;
    max-width: 650px;
    margin-top: 34px;
}

.spotlight-hook-list p {
    position: relative;
    margin: 0;
    padding-left: 23px;
    color: #fff;
    font: italic
        500
        17px / 1.55
        var(--serif);
}

.spotlight-hook-list p::before {
    content: "";
    position: absolute;
    left: 0;
    top: .8em;
    width: 10px;
    height: 1px;
    background: #8fc4d5;
}

/* =========================================================
   THÈMES
========================================================= */

.spotlight-themes-block {
    max-width: 650px;
    margin-top: 37px;
}

.spotlight-themes {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.spotlight-themes span {
    padding: 8px
        13px;
    border: 1px solid
        rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(255,255,255,.045);
    color: #dce6eb;
    font-size: 11px;
    font-weight: 800;
    transition: background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.spotlight-themes span:hover {
    transform: translateY(-2px);
    background: rgba(143,196,213,.12);
    border-color: rgba(143,196,213,.35);
}

/* =========================================================
   TABLETTE
========================================================= */

@media (max-width: 1080px) {
    .spotlight {
        grid-template-columns: 1fr;
    }

    .spotlight-visual {
        min-height: 650px;
    }

    .spotlight-content {
        padding: 58px
            54px
            65px;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {
    .spotlight-visual {
        min-height: auto;
        padding: 78px
            25px
            40px;
    }

    .spotlight-visual-inner {
        max-width: 300px;
    }

    .spotlight-cover {
        width: min(78%, 235px);
    }

    .spotlight-visual-actions {
        margin-top: 32px;
    }

    .spotlight-discovery-actions {
        flex-direction: column;
        gap: 14px;
    }

    .spotlight-read-link {
        width: 100%;
    }

    .spotlight-buy-zone {
        flex-wrap: wrap;
    }

    .spotlight-content {
        padding: 45px
            28px
            52px;
    }

    .spotlight-header h2 {
        font-size: clamp(
                44px,
                13vw,
                60px
            );
    }

    .spotlight-story {
        margin-top: 35px;
    }
}

/* =========================================================
   À LA UNE — BADGE FORT
========================================================= */

.spotlight-featured-badge {
    position: absolute;
    top: 32px;
    left: 34px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px
        17px;
    border-radius: 999px;
    background: #071829;
    color: #fff;
    box-shadow: 0 12px 30px
        rgba(7, 24, 41, .16);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.spotlight-featured-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 5px
        rgba(214, 169, 75, .15);
}

/* =========================================================
   À LA UNE — ALERTE
========================================================= */

.spotlight-featured-badge {
    position: absolute;
    top: 32px;
    left: 34px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 12px
        19px;
    border-radius: 999px;
    background: #071829;
    color: #fff;
    box-shadow: 0 14px 34px rgba(7,24,41,.18);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .22em;
    text-transform: uppercase;
    animation: spotlightAlert 2.4s ease-in-out infinite;
}

/* point */

.spotlight-featured-dot {
    position: relative;
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 6px
        rgba(214,169,75,.14);
    animation: spotlightAlertDot 1.2s ease-in-out infinite;
}

/* halo supplémentaire */

.spotlight-featured-dot::after {
    content: "";
    position: absolute;
    inset: -7px;
    border: 1px solid
        rgba(214,169,75,.65);
    border-radius: 50%;
    animation: spotlightAlertRing 1.6s ease-out infinite;
}

/* badge légèrement vivant */

@keyframes spotlightAlert {
    0%,
    78%,
    100% {
        box-shadow: 0 14px 34px
            rgba(7,24,41,.18);
    }

    84% {
        box-shadow: 0 14px 34px
            rgba(7,24,41,.18),
            0 0 0 5px
            rgba(214,169,75,.10);
    }

    90% {
        box-shadow: 0 14px 34px
            rgba(7,24,41,.18);
    }
}

/* point qui clignote */

@keyframes spotlightAlertDot {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .35;
        transform: scale(.78);
    }
}

/* onde d'alerte */

@keyframes spotlightAlertRing {
    0% {
        opacity: .75;
        transform: scale(.45);
    }

    100% {
        opacity: 0;
        transform: scale(1.7);
    }
}

/* =========================================================
   COUVERTURE
========================================================= */

.spotlight-cover {
    position: relative;
    display: block;
    width: min(100%, 325px);
    overflow: hidden;
    border-radius: 8px;
}

.spotlight-cover img {
    display: block;
    width: 100%;
}

/* =========================================================
   EN SAVOIR PLUS SUR LA COUVERTURE
========================================================= */

.spotlight-cover-more {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 13px
        16px;
    border: 1px solid
        rgba(255,255,255,.32);
    border-radius: 999px;
    background: rgba(5,20,34,.82);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 12px;
    font-weight: 850;
    box-shadow: 0 12px 28px
        rgba(4,18,30,.22);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .3s ease,
        transform .3s ease,
        background .3s ease;
}

.spotlight-cover:hover
.spotlight-cover-more {
    opacity: 1;
    transform: translateY(0);
}

.spotlight-cover-more span {
    transition: transform .25s ease;
}

.spotlight-cover:hover
.spotlight-cover-more span {
    transform: translateX(4px);
}

@media (max-width: 860px) {
    .spotlight-cover-more {
        opacity: 1;
        transform: none;
    }
}

.spotlight-visual-actions {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin-top: 36px;
}

.spotlight-buy-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px
        2px
        8px;
    color: #071829;
    font-size: 13px;
    font-weight: 900;
    border-bottom: 2px solid
        rgba(7,24,41,.32);
    transition: color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.spotlight-buy-link:hover {
    color: #3d7587;
    border-color: #3d7587;
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .spotlight-featured-badge,
    .spotlight-featured-dot,
    .spotlight-featured-dot::after {
        animation: none;
    }
}

/* =========================================================
   LECTEUR — DIALOG
========================================================= */

.excerpt-dialog {
    width: min(
            1280px,
            calc(100vw - 36px)
        );
    max-width: none;
    max-height: 96vh;
    padding: 0;
    border: 0;
    background: transparent;
    color: #241f19;
    overflow-y: auto;
    box-shadow: none;
}

.excerpt-dialog[open] {
    animation: readerDialogAppear
        .28s ease-out both;
}

.excerpt-dialog::backdrop {
    background: rgba(2, 11, 20, .86);
    backdrop-filter: blur(12px);
}

@keyframes readerDialogAppear {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* scrollbar discrète */

.excerpt-dialog {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.2)
        transparent;
}

/* =========================================================
   SCÈNE
========================================================= */

.reader-stage {
    position: relative;
    width: 100%;
    padding: 58px
        32px
        34px;
}

/* =========================================================
   BOUTON FERMER
========================================================= */

.reader-close {
    position: fixed;
    top: 26px;
    right: 30px;
    z-index: 100;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid
        rgba(255,255,255,.18);
    border-radius: 50%;
    background: rgba(5,18,31,.82);
    backdrop-filter: blur(12px);
    color: #fff;
    font-family: inherit;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 12px 35px
        rgba(0,0,0,.25);
    transition: background .2s ease,
        transform .2s ease;
}

.reader-close:hover {
    transform: rotate(5deg)
        scale(1.05);
    background: #fff;
    color: #071829;
}

/* =========================================================
   LIVRE
========================================================= */

.reader-book {
    position: relative;
    width: min(1120px, 100%);
    margin: 0
        auto;
    perspective: 1800px;
    animation: readerBookOpen
        .65s
        cubic-bezier(.16,.8,.25,1)
        both;
}

@keyframes readerBookOpen {
    from {
        opacity: 0;
        transform: perspective(1800px)
            rotateX(7deg)
            scale(.92)
            translateY(25px);
    }

    to {
        opacity: 1;
        transform: perspective(1800px)
            rotateX(0)
            scale(1)
            translateY(0);
    }
}

/* =========================================================
   ÉPAISSEUR DU LIVRE
========================================================= */

.reader-book-edge {
    position: absolute;
    left: 14px;
    right: 14px;
    top: 18px;
    bottom: -18px;
    border-radius: 12px
        12px
        20px
        20px;
    background: linear-gradient(
            180deg,
            #4b3b2b,
            #241b14
        );
    box-shadow: 0 48px 100px
        rgba(0,0,0,.58);
    transform: translateZ(-20px);
}

/* =========================================================
   DOUBLE PAGE
========================================================= */

.reader-spread {
    position: relative;
    min-height: 690px;
    overflow: hidden;
    border-radius: 14px
        14px
        10px
        10px;
    background: /* grain léger */
        radial-gradient(
            circle at 18% 22%,
            rgba(98,70,35,.035) 0 1px,
            transparent 1.4px
        ),

        radial-gradient(
            circle at 72% 64%,
            rgba(98,70,35,.025) 0 1px,
            transparent 1.3px
        ),

        /* deux pages + reliure */
        linear-gradient(
            90deg,

            #eee4d1 0%,

            #fffaf0 4%,

            #fffdf6 44%,

            #f4ead9 48%,

            #d6c8b3 49.65%,

            #b8a78f 50%,

            #d9cbb6 50.35%,

            #f3e8d7 52%,

            #fffdf6 56%,

            #fffaf0 96%,

            #ede2ce 100%
        );
    background-size: 7px 7px,
        11px 11px,
        auto;
    box-shadow: inset
        12px 0
        24px
        rgba(84,60,33,.06),

        inset
        -12px 0
        24px
        rgba(84,60,33,.06),

        0 35px 80px
        rgba(0,0,0,.38);
}

/* =========================================================
   RELIURE CENTRALE
========================================================= */

.reader-spine {
    position: absolute;
    z-index: 5;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 62px;
    transform: translateX(-50%);
    pointer-events: none;
    background: linear-gradient(
            90deg,

            transparent,

            rgba(76,57,37,.05) 20%,

            rgba(50,35,21,.16) 47%,

            rgba(255,255,255,.3) 50%,

            rgba(50,35,21,.13) 53%,

            rgba(76,57,37,.04) 80%,

            transparent
        );
}

/* =========================================================
   EN-TÊTES DU LIVRE
========================================================= */

.reader-running-head {
    position: absolute;
    top: 33px;
    z-index: 6;
    width: calc(50% - 72px);
    color: #978b7b;
    font-family: var(--serif);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.reader-running-left {
    left: 56px;
    text-align: left;
}

.reader-running-right {
    right: 56px;
    text-align: right;
}

/* petite ligne sous les en-têtes */

.reader-running-head::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 13px;
    background: rgba(65,48,31,.12);
}

/* =========================================================
   CONTENU DU LIVRE
========================================================= */

.reader-text {
    position: relative;
    z-index: 3;
    padding: 86px
        72px
        70px;
}

/* =========================================================
   PETIT TITRE "EXTRAIT"
========================================================= */

.reader-excerpt-heading {
    width: calc(
            50% -
            42px
        );
    margin-bottom: 22px;
}

.reader-excerpt-heading span {
    display: inline-block;
    color: #9a7b45;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .24em;
    text-transform: uppercase;
}

/* =========================================================
   TYPOGRAPHIE DU ROMAN
========================================================= */

.reader-text-columns {
    column-count: 2;
    column-gap: 86px;
    column-fill: balance;
    color: #312a22;
    font: 400
        18px / 1.9
        Georgia,
        "Times New Roman",
        var(--serif);
    text-align: justify;
    text-rendering: optimizeLegibility;
    hyphens: auto;
}

/* paragraphes */

.reader-text-columns p {
    margin: 0
        0
        1.05em;
    text-indent: 1.65em;
    orphans: 3;
    widows: 3;
}

/* premier paragraphe */

.reader-text-columns p:first-child {
    text-indent: 0;
}

/* =========================================================
   LETTRINE
========================================================= */

.reader-text-columns p:first-child::first-letter {
    float: left;
    margin: .04em
        .12em
        -.05em
        0;
    color: #6f5433;
    font-family: Georgia,
        "Times New Roman",
        serif;
    font-size: 4.7em;
    font-weight: 500;
    line-height: .78;
}

/* =========================================================
   FOLIOS
========================================================= */

.reader-folio {
    position: absolute;
    bottom: 27px;
    z-index: 6;
    color: #9f9383;
    font: italic
        11px
        var(--serif);
}

.reader-folio-left {
    left: 66px;
}

.reader-folio-right {
    right: 66px;
}

/* =========================================================
   BARRE SOUS LE LIVRE
========================================================= */

.reader-toolbar {
    width: min(
            1000px,
            calc(100% - 30px)
        );
    margin: 28px
        auto
        0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    color: #fff;
}

/* texte */

.reader-toolbar-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.reader-toolbar-kicker {
    color: rgba(255,255,255,.48);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.reader-toolbar-text strong {
    font: 500
        20px / 1.2
        var(--serif);
}

/* =========================================================
   ACTIONS
========================================================= */

.reader-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 26px;
}

.reader-more,
.reader-buy {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    font-size: 12px;
    font-weight: 850;
    transition: color .2s ease,
        transform .2s ease;
}

.reader-more:hover,
.reader-buy:hover {
    color: var(--blue);
    transform: translateY(-2px);
}

.reader-buy {
    padding: 12px
        18px;
    border: 1px solid
        rgba(255,255,255,.2);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(8px);
}

/* =========================================================
   TABLETTE
========================================================= */

@media (max-width: 900px) {
    .reader-stage {
        padding: 55px
            18px
            28px;
    }

    .reader-spread {
        min-height: 0;
        background: radial-gradient(
                circle at 20% 20%,
                rgba(98,70,35,.035)
                0 1px,
                transparent 1.4px
            ),

            linear-gradient(
                90deg,
                #eee4d1,
                #fffdf6 8%,
                #fffdf6 92%,
                #eee4d1
            );
    }

    .reader-spine {
        display: none;
    }

    .reader-running-left {
        left: 42px;
    }

    .reader-running-right {
        display: none;
    }

    .reader-running-head {
        width: calc(
                100% -
                84px
            );
    }

    .reader-text {
        padding: 88px
            45px
            62px;
    }

    .reader-excerpt-heading {
        width: 100%;
    }

    .reader-text-columns {
        column-count: 1;
        font-size: 18px;
        line-height: 1.9;
    }

    .reader-folio-right {
        display: none;
    }

    .reader-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {
    .excerpt-dialog {
        width: calc(
                100vw -
                14px
            );
        max-height: 98vh;
    }

    .reader-stage {
        padding: 49px
            5px
            22px;
    }

    .reader-close {
        top: 14px;
        right: 14px;
        width: 42px;
        height: 42px;
    }

    .reader-book-edge {
        left: 5px;
        right: 5px;
        bottom: -10px;
    }

    .reader-spread {
        border-radius: 8px;
    }

    .reader-running-left {
        top: 26px;
        left: 25px;
        width: calc(
                100% -
                50px
            );
    }

    .reader-text {
        padding: 75px
            27px
            55px;
    }

    .reader-text-columns {
        font-size: 16.5px;
        line-height: 1.9;
    }

    .reader-text-columns p {
        text-indent: 1.25em;
    }

    .reader-text-columns p:first-child::first-letter {
        font-size: 4.1em;
    }

    .reader-folio-left {
        left: 27px;
        bottom: 22px;
    }

    .reader-toolbar {
        width: calc(
                100% -
                24px
            );
        margin-top: 24px;
    }

    .reader-toolbar-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .reader-more,
    .reader-buy {
        justify-content: center;
    }

    .reader-more {
        padding: 12px;
    }
}

/* =========================================================
   RÉDUCTION DES ANIMATIONS
========================================================= */

@media (
    prefers-reduced-motion: reduce
) {
    .excerpt-dialog[open],
    .reader-book {
        animation: none;
    }
}

/* =========================================================
   LIVRE — ZONE DES PAGES
========================================================= */

.reader-spread {
    position: relative;
    width: 100%;
    min-height: 720px;
    overflow: hidden;
    border-radius: 14px
        14px
        9px
        9px;
    background: #e8ddca;
    box-shadow: 0 40px 100px
        rgba(0,0,0,.5);
}

.reader-pages {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(
            2,
            minmax(0,1fr)
        );
    width: 100%;
    min-height: 720px;
    perspective: 1800px;
}

/* =========================================================
   UNE PAGE
========================================================= */

.reader-page {
    position: relative;
    display: none;
    height: 720px;
    overflow: hidden;
    padding: 82px
        64px
        68px;
    color: #302920;
    background: radial-gradient(
            circle at 20% 25%,
            rgba(80,55,28,.025)
            0 1px,
            transparent 1.2px
        ),

        linear-gradient(
            90deg,
            #f2e9d8,
            #fffdf6 9%,
            #fffdf7 91%,
            #eee2ce
        );
    background-size: 8px 8px,
        auto;
    font-family: Georgia,
        "Times New Roman",
        serif;
}

.reader-page.is-visible {
    display: block;
}

/* page gauche */

.reader-page:nth-child(odd) {
    border-radius: 12px
        0
        0
        10px;
    box-shadow: inset -22px 0 28px
        rgba(69,48,27,.08);
    transform-origin: right center;
}

/* page droite */

.reader-page:nth-child(even) {
    border-radius: 0
        12px
        10px
        0;
    box-shadow: inset 22px 0 28px
        rgba(69,48,27,.08);
    transform-origin: left center;
}

/* =========================================================
   CONTENU DISPONIBLE
========================================================= */

.reader-page-content {
    height: calc(
        100% -
        28px
    );
    overflow: hidden;
    font-size: 17px;
    line-height: 1.85;
    text-align: justify;
    hyphens: auto;
    text-rendering: optimizeLegibility;
}

/* paragraphes */

.reader-page-content p {
    margin: 0
        0
        1em;
    text-indent: 1.55em;
    orphans: 3;
    widows: 3;
}

.reader-page-content p:first-child {
    text-indent: 0;
}

/* continuation d'un paragraphe */

.reader-page-content
.reader-paragraph-continuation {
    text-indent: 0;
}

/* première lettre de la première page */

.reader-page:first-child
.reader-page-content
p:first-child::first-letter {
    float: left;
    margin: .04em
        .12em
        -.05em
        0;
    color: #765a36;
    font-size: 4.5em;
    font-weight: 500;
    line-height: .8;
}

/* =========================================================
   EN-TÊTE DE PAGE
========================================================= */

.reader-page-running-head {
    position: absolute;
    top: 30px;
    left: 55px;
    right: 55px;
    padding-bottom: 12px;
    border-bottom: 1px solid
        rgba(65,48,31,.11);
    color: #978b7b;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.reader-page:nth-child(even)
.reader-page-running-head {
    text-align: right;
}

/* =========================================================
   NUMÉRO DE PAGE
========================================================= */

.reader-page-number {
    position: absolute;
    bottom: 26px;
    left: 0;
    right: 0;
    color: #958979;
    font-size: 11px;
    text-align: center;
}

/* =========================================================
   PAGE BLANCHE
========================================================= */

.reader-page-blank
.reader-page-content {
    display: none;
}

/* =========================================================
   ZONE DE MESURE INVISIBLE
========================================================= */

.reader-measurement {
    position: fixed;
    top: -10000px;
    left: -10000px;
    width: min(
            1120px,
            calc(100vw - 100px)
        );
    visibility: hidden;
    pointer-events: none;
}

.reader-page-measuring {
    display: block;
    width: 560px;
}

/* =========================================================
   RELIURE
========================================================= */

.reader-spine {
    position: absolute;
    z-index: 10;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 60px;
    transform: translateX(-50%);
    pointer-events: none;
    background: linear-gradient(
            90deg,
            transparent,
            rgba(50,35,21,.05),
            rgba(31,21,12,.17),
            rgba(255,255,255,.22),
            rgba(31,21,12,.14),
            rgba(50,35,21,.04),
            transparent
        );
}

/* =========================================================
   CHANGEMENT DE PAGES
========================================================= */

.reader-pages {
    transition: opacity .18s ease,
        transform .18s ease;
}

.reader-pages.is-turning-next {
    opacity: .45;
    transform: perspective(1600px)
        rotateY(-2deg);
}

.reader-pages.is-turning-prev {
    opacity: .45;
    transform: perspective(1600px)
        rotateY(2deg);
}

/* =========================================================
   NAVIGATION
========================================================= */

.reader-navigation {
    width: min(
            1040px,
            calc(100% - 24px)
        );
    margin: 25px
        auto
        0;
    display: grid;
    grid-template-columns: 1fr
        auto
        1fr;
    align-items: center;
    gap: 30px;
}

.reader-nav-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    opacity: .82;
}

.reader-nav-button:last-child {
    justify-self: end;
}

.reader-nav-button:hover {
    opacity: 1;
}

.reader-nav-button:disabled {
    opacity: .25;
    cursor: default;
}

/* =========================================================
   PROGRESSION
========================================================= */

.reader-progress {
    min-width: 190px;
    color: rgba(255,255,255,.7);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
}

.reader-progress-track {
    width: 100%;
    height: 2px;
    margin-top: 9px;
    overflow: hidden;
    border-radius: 100px;
    background: rgba(255,255,255,.13);
}

.reader-progress-bar {
    display: block;
    width: 0;
    height: 100%;
    background: var(--gold);
    transition: width .35s ease;
}

@media (max-width: 900px) {
    .reader-pages {
        grid-template-columns: 1fr;
        min-height: 680px;
    }

    .reader-page {
        height: 680px;
        padding: 78px
            46px
            62px;
        border-radius: 10px !important;
        box-shadow: inset 12px 0 22px
            rgba(69,48,27,.05),
            inset -12px 0 22px
            rgba(69,48,27,.05) !important;
    }

    .reader-spine {
        display: none;
    }

    .reader-measurement {
        width: calc(
                100vw -
                70px
            );
    }

    .reader-page-measuring {
        width: 100%;
    }
}

@media (max-width: 620px) {
    .reader-page {
        height: 640px;
        padding: 72px
            28px
            58px;
    }

    .reader-page-content {
        font-size: 16px;
        line-height: 1.8;
    }

    .reader-page-running-head {
        left: 28px;
        right: 28px;
    }

    .reader-navigation {
        grid-template-columns: 1fr
            1fr;
        gap: 18px;
    }

    .reader-progress {
        grid-column: 1 / -1;
        grid-row: 1;
        min-width: 0;
    }

    .reader-nav-button {
        grid-row: 2;
    }
}

/* =========================================================
   PAGE INVISIBLE UTILISÉE POUR MESURER LE TEXTE
========================================================= */

.reader-measurement {
    position: fixed;
    z-index: -9999;
    top: 0;
    left: -10000px;
    width: 560px;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
}

.reader-measurement .reader-page {
    display: block;
    width: 560px;
    height: 720px;
}

.reader-page {
    position: relative;
    display: none;
    width: 100%;
    height: 720px;
    padding: 82px
        64px
        68px;
    overflow: hidden;
    box-sizing: border-box;
}

.reader-page.is-visible {
    display: block;
}

.reader-page-content {
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    color: #302920;
    font: 400
        17px / 1.85
        Georgia,
        "Times New Roman",
        serif;
    text-align: justify;
    hyphens: auto;
}

/* =========================================================
   BIBLIOTHÈQUE
========================================================= */

.library-section {
    position: relative;
    overflow: hidden;
    background: radial-gradient(
            circle at 8% 15%,
            rgba(143,196,213,.13),
            transparent 28%
        ),
        radial-gradient(
            circle at 93% 78%,
            rgba(214,169,75,.08),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #f7faf9 0%,
            #fbfaf6 100%
        );
}

/* =========================================================
   GRILLE
========================================================= */

.library-grid {
    display: grid;
    grid-template-columns: repeat(
            4,
            minmax(0,1fr)
        );
    gap: 38px 28px;
}

/* =========================================================
   CARTE
========================================================= */

.library-card {
    position: relative;
}

.library-card-link {
    display: block;
    color: inherit;
}

/* =========================================================
   ZONE LIVRE
========================================================= */

.library-book {
    position: relative;
    padding: 25px;
    border-radius: 28px;
    background: linear-gradient(
            145deg,
            rgba(255,255,255,.84),
            rgba(232,243,245,.7)
        );
    border: 1px solid
        rgba(6,19,38,.07);
    box-shadow: 0 18px 45px
        rgba(6,19,38,.07);
    transition: transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease;
}

.library-card:hover .library-book {
    transform: translateY(-8px);
    box-shadow: 0 30px 70px
        rgba(6,19,38,.13);
}

/* =========================================================
   CONTENEUR COUVERTURE
========================================================= */

.library-book-inner {
    position: relative;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: 8px;
    background: #e9edf0;
    box-shadow: 0 20px 40px
        rgba(4,18,30,.18);
    transform: perspective(1200px)
        rotateY(-2deg);
    transition: transform .5s cubic-bezier(.2,.8,.2,1);
}

.library-card:hover .library-book-inner {
    transform: perspective(1200px)
        rotateY(0);
}

/* =========================================================
   COUVERTURE AVANT
========================================================= */

.library-book-front {
    position: absolute;
    inset: 0;
    transition: opacity .55s ease,
        transform .65s cubic-bezier(.2,.8,.2,1);
}

.library-book-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.library-card:hover
.library-book-front {
    opacity: 0;
    transform: scale(1.045);
}

/* =========================================================
   CONTENU AU SURVOL
========================================================= */

.library-book-reveal {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(.97);
    transition: opacity .55s ease,
        transform .6s cubic-bezier(.2,.8,.2,1);
}

.library-card:hover
.library-book-reveal {
    opacity: 1;
    transform: scale(1);
}

/* =========================================================
   QUATRIÈME DE COUVERTURE
========================================================= */

.library-book-back {
    background: #071829;
}

.library-book-back img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* voile doux */

.library-book-back::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            180deg,
            transparent 48%,
            rgba(3,14,25,.68) 100%
        );
}

/* légende */

.library-reveal-caption {
    position: absolute;
    z-index: 4;
    left: 20px;
    right: 20px;
    bottom: 20px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 15px;
    color: #fff;
}

.library-reveal-caption > span {
    max-width: 110px;
    color: rgba(255,255,255,.7);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .13em;
    line-height: 1.4;
    text-transform: uppercase;
}

.library-reveal-caption strong {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
}

/* =========================================================
   RÉSUMÉ SI PAS DE QUATRIÈME
========================================================= */

.library-book-summary {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 36px 30px;
    background: radial-gradient(
            circle at 80% 10%,
            rgba(143,196,213,.18),
            transparent 35%
        ),
        #071829;
    color: #fff;
}

.library-summary-kicker {
    margin-bottom: 18px;
    color: #8fc4d5;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.library-book-summary p {
    margin: 0;
    color: #d6e0e6;
    font: 500
        17px / 1.65
        var(--serif);
}

.library-summary-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 28px;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .04em;
}

/* =========================================================
   BADGE TYPE
========================================================= */

.library-book-type {
    position: absolute;
    z-index: 10;
    top: 15px;
    left: 15px;
    padding: 7px
        11px;
    border-radius: 999px;
    background: rgba(7,24,41,.82);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .15em;
    text-transform: uppercase;
    transition: opacity .3s ease;
}

.library-card:hover
.library-book-type {
    opacity: .45;
}

/* =========================================================
   CONTENU SOUS LE LIVRE
========================================================= */

.library-card-content {
    padding: 22px
        5px
        0;
}

/* =========================================================
   LIGNE META + PRIX
========================================================= */

.library-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.library-card-meta {
    color: #758491;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* =========================================================
   PRIX
========================================================= */

.library-card-price {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px
        11px;
    border: 1px solid
        rgba(6,19,38,.09);
    border-radius: 999px;
    background: #fff;
    color: #071829;
    box-shadow: 0 7px 18px
        rgba(6,19,38,.06);
    font-size: 11px;
    font-weight: 900;
}

/* =========================================================
   TITRE
========================================================= */

.library-card-content h3 {
    margin: 0;
    color: var(--ink);
    font: 500
        clamp(24px,2vw,31px)
        / 1.05
        var(--serif);
    letter-spacing: -.035em;
    transition: color .25s ease;
}

.library-card:hover
.library-card-content h3 {
    color: var(--blue-deep);
}

/* =========================================================
   SOUS-TITRE
========================================================= */

.library-card-subtitle {
    margin: 9px
        0
        0;
    color: #788692;
    font-size: 13px;
    line-height: 1.55;
}

/* =========================================================
   LIEN DÉCOUVRIR
========================================================= */

.library-card-discover {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 17px;
    color: #173043;
    font-size: 11px;
    font-weight: 900;
    opacity: .72;
    transition: opacity .25s ease,
        gap .25s ease;
}

.library-card:hover
.library-card-discover {
    opacity: 1;
    gap: 13px;
}

/* =========================================================
   TABLETTE
========================================================= */

@media (max-width: 1080px) {
    .library-grid {
        grid-template-columns: repeat(
                2,
                minmax(0,1fr)
            );
        gap: 48px
            30px;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {
    .library-grid {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .library-book {
        max-width: 360px;
        margin: 0
            auto;
        padding: 20px;
    }

    .library-card-content {
        max-width: 360px;
        margin: 0
            auto;
        padding-top: 19px;
    }

    /*
         * Pas de hover fiable sur mobile :
         * le contenu reste principalement
         * accessible via le clic sur la fiche.
         */

    .library-card-content h3 {
        font-size: 29px;
    }
}

/* =========================================================
   BIBLIOTHÈQUE — UNIVERS
========================================================= */

.library-showcase {
    position: relative;
    overflow: hidden;
    padding: 105px
        0
        115px;
    background: radial-gradient(
            circle at 50% 38%,
            rgba(143,196,213,.20),
            transparent 32%
        ),
        radial-gradient(
            circle at 10% 80%,
            rgba(214,169,75,.08),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #071829 0%,
            #0b2235 54%,
            #102d40 100%
        );
    color: #fff;
}

/* halo géant */

.library-showcase::before {
    content: "";
    position: absolute;
    width: 720px;
    height: 720px;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    border: 1px solid
        rgba(255,255,255,.05);
    border-radius: 50%;
    box-shadow: 0 0 0 120px
        rgba(255,255,255,.018);
    pointer-events: none;
}

/* =========================================================
   HEADER
========================================================= */

.library-showcase-head {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 35px;
    margin-bottom: 30px;
}

.library-showcase-head .eyebrow {
    color: #8fc4d5;
}

.library-showcase-head h2 {
    margin: 8px
        0
        0;
    color: #fff;
    font: 500
        clamp(48px,5vw,70px)
        / 1
        var(--serif);
    letter-spacing: -.045em;
}

.library-showcase-head .link-arrow {
    color: rgba(255,255,255,.72);
}

.library-showcase-head .link-arrow:hover {
    color: #fff;
}

/* =========================================================
   CARROUSEL
========================================================= */

.library-carousel {
    position: relative;
    min-height: 720px;
}

/* =========================================================
   SCÈNE
========================================================= */

.library-carousel-stage {
    position: relative;
    height: 540px;
    perspective: 1800px;
    transform-style: preserve-3d;
}

/* =========================================================
   SLIDE
========================================================= */

.library-slide {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 275px;
    transform: translate(-50%, -50%)
        scale(.55);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: transform .7s
        cubic-bezier(.2,.8,.2,1),
        opacity .5s ease,
        filter .5s ease;
}

/* centre */

.library-slide.is-active {
    z-index: 10;
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%)
        translateZ(90px)
        scale(1.08);
    filter: none;
}

/* voisin gauche */

.library-slide.is-prev {
    z-index: 7;
    opacity: .72;
    pointer-events: auto;
    transform: translate(-50%, -50%)
        translateX(-260px)
        rotateY(20deg)
        scale(.82);
    filter: saturate(.78);
}

/* voisin droit */

.library-slide.is-next {
    z-index: 7;
    opacity: .72;
    pointer-events: auto;
    transform: translate(-50%, -50%)
        translateX(260px)
        rotateY(-20deg)
        scale(.82);
    filter: saturate(.78);
}

/* extérieur gauche */

.library-slide.is-prev2 {
    z-index: 4;
    opacity: .25;
    transform: translate(-50%, -50%)
        translateX(-450px)
        rotateY(28deg)
        scale(.62);
}

/* extérieur droit */

.library-slide.is-next2 {
    z-index: 4;
    opacity: .25;
    transform: translate(-50%, -50%)
        translateX(450px)
        rotateY(-28deg)
        scale(.62);
}

/* =========================================================
   LIVRE 3D
========================================================= */

.library-volume-link {
    display: block;
    color: inherit;
}

.library-volume {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    transform-style: preserve-3d;
    transform: rotateY(-7deg)
        rotateX(1deg);
    transition: transform .8s
        cubic-bezier(.2,.8,.2,1);
    filter: drop-shadow(
            0 38px 32px
            rgba(0,0,0,.36)
        );
}

/* livre central au survol */

.library-slide.is-active:hover
.library-volume {
    transform: rotateY(168deg)
        rotateX(0deg);
}

/* =========================================================
   PREMIÈRE
========================================================= */

.library-volume-front,
.library-volume-back {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 3px
        8px
        8px
        3px;
    backface-visibility: hidden;
}

.library-volume-front {
    z-index: 4;
    transform: translateZ(18px);
    background: #ddd;
}

.library-volume-front img,
.library-volume-back img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* léger reflet */

.library-volume-front::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
            110deg,
            rgba(255,255,255,.17),
            transparent 20%,
            transparent 75%,
            rgba(0,0,0,.09)
        );
}

/* =========================================================
   QUATRIÈME
========================================================= */

.library-volume-back {
    z-index: 3;
    transform: rotateY(180deg)
        translateZ(18px);
    background: #e9dfcf;
}

/* =========================================================
   RÉSUMÉ SI PAS DE QUATRIÈME
========================================================= */

.library-volume-summary {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 34px
        27px;
    background: radial-gradient(
            circle at 80% 10%,
            rgba(143,196,213,.2),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #f5efe3,
            #e8dece
        );
    color: #172738;
}

.library-volume-summary > span:first-child {
    margin-bottom: 15px;
    color: #718897;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.library-volume-summary h3 {
    margin: 0
        0
        17px;
    font: 500
        25px / 1.05
        var(--serif);
    letter-spacing: -.035em;
}

.library-volume-summary p {
    margin: 0;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 9;
    -webkit-box-orient: vertical;
    font: 400
        13px / 1.65
        var(--serif);
}

.library-volume-summary strong {
    margin-top: 20px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* =========================================================
   PAGES — TRANCHE DROITE
========================================================= */

.library-volume-pages {
    position: absolute;
    z-index: 2;
    top: 5px;
    bottom: 5px;
    right: -18px;
    width: 36px;
    transform: rotateY(90deg)
        translateZ(257px);
    transform-origin: right center;
    background: repeating-linear-gradient(
            90deg,
            #ede5d6 0,
            #ede5d6 2px,
            #d6cbbb 3px,
            #f7f0e4 4px
        );
    border-radius: 0
        3px
        3px
        0;
}

/* =========================================================
   DOS / TRANCHE GAUCHE
========================================================= */

.library-volume-spine {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: -17px;
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transform: rotateY(-90deg)
        translateZ(18px);
    transform-origin: right center;
    background: linear-gradient(
            90deg,
            #04111e,
            #163449
        );
    color: rgba(255,255,255,.88);
}

.library-volume-spine span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* =========================================================
   INFORMATIONS DU LIVRE ACTIF
========================================================= */

.library-current {
    position: relative;
    z-index: 15;
    width: min(620px, 100%);
    margin: 0
        auto;
    text-align: center;
}

.library-current-meta {
    display: flex;
    justify-content: center;
    gap: 10px;
    color: #8fc4d5;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.library-current h3 {
    margin: 10px
        0
        0;
    color: #fff;
    font: 500
        clamp(34px,3vw,48px)
        / 1
        var(--serif);
    letter-spacing: -.04em;
}

.library-current-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 14px;
}

.library-current-price {
    color: #fff;
    font-size: 13px;
    font-weight: 900;
}

.library-current-hint {
    color: rgba(255,255,255,.42);
    font-size: 10px;
}

/* =========================================================
   FLÈCHES
========================================================= */

.library-carousel-arrow {
    position: absolute;
    z-index: 30;
    top: 240px;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid
        rgba(255,255,255,.14);
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(12px);
    color: #fff;
    font-size: 19px;
    cursor: pointer;
    transition: background .2s ease,
        transform .2s ease;
}

.library-carousel-arrow:hover {
    background: rgba(255,255,255,.13);
    transform: scale(1.06);
}

.library-carousel-prev {
    left: 0;
}

.library-carousel-next {
    right: 0;
}

/* =========================================================
   POINTS
========================================================= */

.library-carousel-progress {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 27px;
}

.library-carousel-dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.24);
    cursor: pointer;
    transition: width .25s ease,
        background .25s ease;
}

.library-carousel-dot.is-active {
    width: 27px;
    background: var(--gold);
}

/* =========================================================
   BIBLIOTHÈQUE — ÉTAGÈRE
========================================================= */

.library-shelf-section {
    position: relative;
    overflow: hidden;
    padding: 105px
        0
        110px;
    background: radial-gradient(
            circle at 10% 20%,
            rgba(143,196,213,.23),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(214,169,75,.09),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #eaf3f4 0%,
            #f3f1ea 100%
        );
}

/* grande forme décorative */

.library-shelf-section::before {
    content: "";
    position: absolute;
    width: 800px;
    height: 800px;
    top: -300px;
    right: -300px;
    border-radius: 50%;
    border: 1px solid
        rgba(6,19,38,.05);
    pointer-events: none;
}

/* =========================================================
   EN-TÊTE
========================================================= */

.library-shelf-head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 55px;
}

.library-shelf-head h2 {
    margin: 7px
        0
        10px;
    color: var(--ink);
    font: 500
        clamp(50px,5vw,72px)
        / .96
        var(--serif);
    letter-spacing: -.05em;
}

.library-shelf-head p {
    max-width: 480px;
    margin: 0;
    color: #6a7a87;
    font-size: 14px;
}

/* =========================================================
   STRUCTURE
========================================================= */

.library-shelf {
    position: relative;
    padding: 0
        64px
        55px;
}

/* =========================================================
   VIEWPORT
========================================================= */

.library-shelf-viewport {
    position: relative;
    overflow-x: auto;
    overflow-y: visible;
    padding: 30px
        8px
        48px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.library-shelf-viewport::-webkit-scrollbar {
    display: none;
}

/* =========================================================
   TRACK
========================================================= */

.library-shelf-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(225px, 255px);
    gap: 44px;
    width: max-content;
}

/* =========================================================
   LIVRE
========================================================= */

.shelf-book {
    width: 100%;
    scroll-snap-align: start;
}

/* =========================================================
   OBJET 3D
========================================================= */

.shelf-book-object {
    position: relative;
    display: block;
    width: 88%;
    margin: 0
        auto;
    perspective: 1500px;
}

/* =========================================================
   VOLUME
========================================================= */

.shelf-book-volume {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    transform-style: preserve-3d;
    transform: rotateY(-10deg)
        rotateX(1deg);
    transition: transform .75s
        cubic-bezier(.2,.75,.2,1);
    filter: drop-shadow(
            0
            28px
            24px
            rgba(5,20,34,.25)
        );
}

/*
 * Chaque livre peut se retourner indépendamment.
 * Contrairement au Hero, aucun livre central.
 */

.shelf-book-object:hover
.shelf-book-volume {
    transform: rotateY(170deg)
        rotateX(0);
}

/* =========================================================
   PREMIÈRE / QUATRIÈME
========================================================= */

.shelf-book-front,
.shelf-book-back {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 2px
        7px
        7px
        2px;
    backface-visibility: hidden;
    background: #ddd;
}

/* première */

.shelf-book-front {
    z-index: 3;
    transform: translateZ(15px);
}

/* quatrième */

.shelf-book-back {
    z-index: 2;
    transform: rotateY(180deg)
        translateZ(15px);
}

.shelf-book-front img,
.shelf-book-back img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* reflet couverture */

.shelf-book-front::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
            110deg,
            rgba(255,255,255,.15),
            transparent 22%,
            transparent 72%,
            rgba(0,0,0,.10)
        );
    pointer-events: none;
}

/* =========================================================
   TRANCHE DE PAGES
========================================================= */

.shelf-book-pages {
    position: absolute;
    z-index: 1;
    top: 5px;
    right: -15px;
    bottom: 5px;
    width: 30px;
    transform: rotateY(90deg)
        translateZ(220px);
    transform-origin: right center;
    background: repeating-linear-gradient(
            90deg,
            #eee7d9 0,
            #eee7d9 2px,
            #d7cebf 3px,
            #f7f2e8 4px
        );
    border-radius: 0
        3px
        3px
        0;
}

/* =========================================================
   DOS DU LIVRE
========================================================= */

.shelf-book-spine {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: -14px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transform: rotateY(-90deg)
        translateZ(15px);
    transform-origin: right center;
    background: linear-gradient(
            90deg,
            #071829,
            #24445a
        );
    color: #fff;
}

.shelf-book-spine span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* =========================================================
   RÉSUMÉ
========================================================= */

.shelf-book-summary {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px
        24px;
    background: radial-gradient(
            circle at 80% 10%,
            rgba(143,196,213,.20),
            transparent 35%
        ),
        #f2eadc;
    color: #172635;
}

.shelf-book-summary > span:first-child {
    margin-bottom: 14px;
    color: #78909c;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.shelf-book-summary h3 {
    margin: 0
        0
        15px;
    color: #13283a;
    font: 500
        23px / 1.05
        var(--serif);
    letter-spacing: -.035em;
}

.shelf-book-summary p {
    margin: 0;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 9;
    -webkit-box-orient: vertical;
    color: #4e5f6b;
    font: 400
        12px / 1.65
        var(--serif);
}

.shelf-book-summary strong {
    margin-top: 20px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* =========================================================
   INFORMATIONS
========================================================= */

.shelf-book-info {
    padding: 25px
        5px
        0;
}

.shelf-book-meta {
    display: flex;
    gap: 7px;
    margin-bottom: 8px;
    color: #758996;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.shelf-book-info h3 {
    margin: 0;
    font: 500
        27px / 1.05
        var(--serif);
    letter-spacing: -.04em;
}

.shelf-book-info h3 a {
    color: var(--ink);
    transition: color .2s ease;
}

.shelf-book-info h3 a:hover {
    color: var(--blue-deep);
}

/* =========================================================
   PRIX + LIEN
========================================================= */

.shelf-book-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 17px;
    padding-top: 15px;
    border-top: 1px solid
        rgba(6,19,38,.09);
}

.shelf-book-price {
    color: #071829;
    font-size: 13px;
    font-weight: 900;
}

.shelf-book-discover {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #506f7d;
    font-size: 10px;
    font-weight: 900;
}

.shelf-book-discover:hover {
    color: var(--ink);
}

/* =========================================================
   EFFET D'ÉTAGÈRE
========================================================= */

.library-shelf::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 55px;
    right: 55px;
    bottom: 32px;
    height: 13px;
    border-radius: 50%;
    background: rgba(6,19,38,.11);
    filter: blur(11px);
    pointer-events: none;
}

/* =========================================================
   FLÈCHES
========================================================= */

.library-shelf-arrow {
    position: absolute;
    z-index: 20;
    top: 195px;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid
        rgba(6,19,38,.09);
    border-radius: 50%;
    background: rgba(255,255,255,.68);
    backdrop-filter: blur(12px);
    color: var(--ink);
    font-size: 18px;
    box-shadow: 0 12px 28px
        rgba(6,19,38,.08);
    cursor: pointer;
    transition: transform .2s ease,
        background .2s ease;
}

.library-shelf-arrow:hover {
    transform: scale(1.06);
    background: #fff;
}

.library-shelf-prev {
    left: 0;
}

.library-shelf-next {
    right: 0;
}

/* =========================================================
   NOMBRE D'ŒUVRES
========================================================= */

.library-shelf-counter {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 7px;
    margin-top: 8px;
    color: #84939d;
}

.library-shelf-counter strong {
    color: var(--ink);
    font: 500
        25px
        var(--serif);
}

.library-shelf-counter span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* =========================================================
   INFORMATIONS DU LIVRE
========================================================= */

.book-card-meta {
    margin: 7px
        0
        0;
    color: #798792;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* =========================================================
   PRIX — STYLE LIBRAIRIE PREMIUM
========================================================= */

.book-price {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    width: fit-content;
    margin-top: 12px;
    color: var(--ink);
    line-height: 1;
}

/* partie principale : 12 */

.book-price-whole {
    font: 600
        23px / .95
        var(--serif);
    letter-spacing: -.035em;
}

/* partie secondaire : ,00 € */

.book-price-small {
    margin-top: 2px;
    color: #536674;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: -.01em;
}

/* ligne très discrète sous le prix */

.book-price::after {
    content: "";
    align-self: flex-end;
    width: 22px;
    height: 1px;
    margin: 0
        0
        3px
        8px;
    background: rgba(6,19,38,.13);
    transition: width .3s ease,
        background .3s ease;
}

.book-card:hover
.book-price::after {
    width: 38px;
    background: var(--blue-deep);
}

/* =========================================================
   TITRE
========================================================= */

.book-card h3 {
    margin: 19px
        0
        0;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 620px) {
    .book-price-whole {
        font-size: 22px;
    }
}

/* =========================================================
   SURVOL COUVERTURE — RÉSUMÉ
========================================================= */

.book-cover-wrap {
    position: relative;
    overflow: hidden;
}

/* =========================================================
   OVERLAY
========================================================= */

.book-hover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 28px
        24px;
    background: linear-gradient(
            180deg,
            rgba(4, 17, 29, .04) 0%,
            rgba(4, 17, 29, .62) 35%,
            rgba(4, 17, 29, .94) 100%
        );
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .42s ease,
        transform .42s cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
}

.book-card:hover
.book-hover {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   CONTENU
========================================================= */

.book-hover-summary {
    width: 100%;
}

/* petit titre */

.book-hover-label {
    display: block;
    margin-bottom: 12px;
    color: var(--blue);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .19em;
    text-transform: uppercase;
}

/* résumé */

.book-hover-summary p {
    margin: 0;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    color: rgba(255,255,255,.92);
    font: 400
        14px / 1.65
        var(--serif);
    text-align: left;
}

/* lien discret */

.book-hover-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 19px;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
}

.book-hover-more > span {
    transition: transform .25s ease;
}

.book-card:hover
.book-hover-more > span {
    transform: translateX(4px);
}

/* =========================================================
   COUVERTURE — PETIT ZOOM
========================================================= */

.book-cover-wrap > img {
    transition: transform .55s cubic-bezier(.2,.8,.2,1),
        filter .4s ease;
}

.book-card:hover
.book-cover-wrap > img {
    transform: scale(1.035);
    filter: brightness(.82);
}

.book-hover-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 20px;
    padding: 11px
        16px;
    border-radius: 999px;
    background: #fff;
    color: #071829;
    box-shadow: 0 10px 28px
        rgba(0, 0, 0, .22);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
    transition: background .25s ease,
        color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.book-hover-more > span {
    color: inherit;
    font-size: 13px;
    transition: transform .25s ease;
}

.book-card:hover
.book-hover-more {
    background: var(--sky);
    color: #071829;
    transform: translateY(-2px);
    box-shadow: 0 14px 34px
        rgba(0, 0, 0, .28);
}

.book-card:hover
.book-hover-more > span {
    transform: translateX(4px);
}

/* =========================================================
   CONTENU DU SURVOL
========================================================= */

.book-hover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: stretch;
    padding: 28px
        24px
        24px;
    background: linear-gradient(
            180deg,
            rgba(4, 17, 29, .10) 0%,
            rgba(4, 17, 29, .72) 30%,
            rgba(4, 17, 29, .96) 100%
        );
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .42s ease,
        transform .42s cubic-bezier(.2,.8,.2,1);
}

.book-card:hover
.book-hover {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   STRUCTURE INTERNE
========================================================= */

.book-hover-summary {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* =========================================================
   LABEL
========================================================= */

.book-hover-label {
    flex: 0 0 auto;
    display: block;
    margin-bottom: 14px;
    color: var(--blue);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .19em;
    text-transform: uppercase;
}

/* =========================================================
   RÉSUMÉ — LONGUEUR ILLIMITÉE
========================================================= */

.book-hover-summary p {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding-right: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    color: rgba(255,255,255,.94);
    font: 400
        14px / 1.65
        var(--serif);
    text-align: left;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.35)
        transparent;
}

/* scrollbar Chrome / Edge */

.book-hover-summary p::-webkit-scrollbar {
    width: 4px;
}

.book-hover-summary p::-webkit-scrollbar-track {
    background: transparent;
}

.book-hover-summary p::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255,255,255,.32);
}

/* =========================================================
   BOUTON — TOUJOURS VISIBLE
========================================================= */

.book-hover-more {
    flex: 0 0 auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 20px;
    padding: 11px
        16px;
    border-radius: 999px;
    background: #fff;
    color: #071829;
    box-shadow: 0 10px 28px
        rgba(0,0,0,.22);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
}

/* =========================================================
   MARQUE THÉOPHILE TOUALI
========================================================= */

.author-brand {
    position: relative;
    overflow: hidden;
    padding: 115px
        0;
    background: linear-gradient(
            145deg,
            #071829 0%,
            #0a2133 55%,
            #102f42 100%
        );
    color: #fff;
}

/* signature géante en arrière-plan */

.author-brand::before {
    content: "TOUALI";
    position: absolute;
    left: 50%;
    bottom: -85px;
    transform: translateX(-50%);
    color: rgba(255,255,255,.025);
    font: 900
        clamp(160px, 22vw, 360px)
        / .8
        var(--serif);
    letter-spacing: -.08em;
    white-space: nowrap;
    pointer-events: none;
}

/* =========================================================
   CONTENEUR
========================================================= */

.author-brand-shell {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: .75fr
        1.25fr;
    gap: 65px
        80px;
}

/* =========================================================
   IDENTITÉ
========================================================= */

.author-brand-identity {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 390px;
    padding: 10px
        0;
}

/* =========================================================
   MONOGRAMME
========================================================= */

.author-brand-monogram {
    width: 118px;
    height: 118px;
    display: grid;
    place-items: center;
    border: 1px solid
        rgba(255,255,255,.15);
    border-radius: 50%;
    background: rgba(255,255,255,.04);
    box-shadow: 0 25px 60px
        rgba(0,0,0,.18);
    backdrop-filter: blur(10px);
}

.author-brand-monogram img {
    width: 62%;
    display: block;
}

/* =========================================================
   WORDMARK
========================================================= */

.author-brand-wordmark {
    margin-top: 70px;
}

.author-brand-kicker {
    display: block;
    margin-bottom: 14px;
    color: #8fc4d5;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.author-brand-wordmark strong {
    display: block;
    color: #fff;
    font: 500
        clamp(38px,4vw,56px)
        / .88
        var(--serif);
    letter-spacing: -.05em;
}

.author-brand-wordmark strong span {
    display: block;
    color: var(--blue);
    font-style: italic;
}

/* =========================================================
   MESSAGE
========================================================= */

.author-brand-message {
    max-width: 760px;
}

.author-brand-message .eyebrow {
    color: #8fc4d5;
}

.author-brand-message h2 {
    margin: 19px
        0
        0;
    max-width: 760px;
    color: #fff;
    font: 500
        clamp(51px,5.5vw,78px)
        / .94
        var(--serif);
    letter-spacing: -.055em;
}

.author-brand-message h2 span {
    display: block;
    margin-top: 8px;
    color: #91c7d7;
    font-style: italic;
}

.author-brand-bio {
    max-width: 650px;
    margin: 32px
        0
        0;
    color: #b7c6d0;
    font-size: 16px;
    line-height: 1.8;
}

/* =========================================================
   LIEN
========================================================= */

.author-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-top: 33px;
    padding-bottom: 6px;
    border-bottom: 1px solid
        rgba(255,255,255,.30);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    transition: color .25s ease,
        border-color .25s ease,
        gap .25s ease;
}

.author-brand-link:hover {
    gap: 16px;
    color: var(--blue);
    border-color: var(--blue);
}

/* =========================================================
   PILIERS DE MARQUE
========================================================= */

.author-brand-pillars {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(
            4,
            minmax(0,1fr)
        );
    margin-top: 25px;
    border-top: 1px solid
        rgba(255,255,255,.11);
    border-bottom: 1px solid
        rgba(255,255,255,.11);
}

.author-brand-pillar {
    position: relative;
    min-height: 210px;
    padding: 31px
        30px
        34px;
    border-right: 1px solid
        rgba(255,255,255,.10);
    transition: background .3s ease;
}

.author-brand-pillar:first-child {
    padding-left: 0;
}

.author-brand-pillar:last-child {
    border-right: 0;
}

.author-brand-pillar:hover {
    background: rgba(255,255,255,.035);
}

.author-brand-number {
    display: block;
    margin-bottom: 35px;
    color: rgba(143,196,213,.55);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .18em;
}

.author-brand-pillar strong {
    display: block;
    color: #fff;
    font: 500
        27px / 1
        var(--serif);
    letter-spacing: -.025em;
}

.author-brand-pillar p {
    max-width: 245px;
    margin: 13px
        0
        0;
    color: #99aeba;
    font-size: 12px;
    line-height: 1.65;
}

/* =========================================================
   SIGNATURE INFÉRIEURE
========================================================= */

.author-brand-signature {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding-top: 6px;
}

.author-brand-signature > span {
    color: rgba(255,255,255,.38);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .20em;
    text-transform: uppercase;
}

.author-brand-signature strong {
    color: rgba(255,255,255,.70);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .27em;
}

/* =========================================================
   TABLETTE
========================================================= */

@media (max-width: 1000px) {
    .author-brand-shell {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .author-brand-identity {
        min-height: 0;
        flex-direction: row;
        align-items: flex-end;
        gap: 40px;
    }

    .author-brand-wordmark {
        margin-top: 0;
    }

    .author-brand-pillars {
        grid-template-columns: repeat(
                2,
                minmax(0,1fr)
            );
    }

    .author-brand-pillar:nth-child(2) {
        border-right: 0;
    }

    .author-brand-pillar:first-child {
        padding-left: 30px;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {
    .author-brand {
        padding: 82px
            0;
    }

    .author-brand-identity {
        align-items: flex-start;
        flex-direction: column;
    }

    .author-brand-monogram {
        width: 88px;
        height: 88px;
    }

    .author-brand-message h2 {
        font-size: clamp(
                44px,
                13vw,
                61px
            );
    }

    .author-brand-pillars {
        grid-template-columns: 1fr;
    }

    .author-brand-pillar,
    .author-brand-pillar:first-child {
        min-height: 0;
        padding: 27px
            0;
        border-right: 0;
        border-bottom: 1px solid
            rgba(255,255,255,.09);
    }

    .author-brand-pillar:last-child {
        border-bottom: 0;
    }

    .author-brand-number {
        margin-bottom: 15px;
    }

    .author-brand-signature {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   LAYOUT DE MARQUE
========================================================= */

.author-brand-shell {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(330px, .78fr)
        minmax(0, 1.22fr);
    gap: 70px
        85px;
}

/* =========================================================
   PORTRAIT
========================================================= */

.author-brand-portrait {
    position: relative;
}

.author-brand-photo {
    position: relative;
    min-height: 620px;
    overflow: hidden;
    border-radius: 160px
        160px
        32px
        32px;
    background: #102638;
    box-shadow: 0 45px 100px
        rgba(0,0,0,.28);
}

.author-brand-photo img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 620px;
    object-fit: cover;
    object-position: center 27%;
    transition: transform .8s
        cubic-bezier(.2,.8,.2,1);
}

.author-brand-photo:hover img {
    transform: scale(1.025);
}

.author-brand-photo-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
            180deg,
            transparent 48%,
            rgba(4,16,28,.10) 64%,
            rgba(4,16,28,.92) 100%
        );
}

.author-brand-photo-signature {
    position: absolute;
    z-index: 3;
    left: 34px;
    right: 34px;
    bottom: 34px;
}

.author-brand-photo-signature span {
    display: block;
    margin-bottom: 8px;
    color: #9bc8d5;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .20em;
    text-transform: uppercase;
}

.author-brand-photo-signature strong {
    color: #fff;
    font: 500
        31px / 1
        var(--serif);
}

/* =========================================================
   MONOGRAMME
========================================================= */

.author-brand-monogram {
    position: absolute;
    z-index: 5;
    top: 42px;
    right: -36px;
    width: 94px;
    height: 94px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 20px 50px
        rgba(0,0,0,.22);
}

.author-brand-monogram img {
    width: 59%;
}

/* =========================================================
   MESSAGE
========================================================= */

.author-brand-message {
    align-self: center;
    max-width: 760px;
}

.author-brand-statement {
    max-width: 670px;
    margin: 31px
        0
        0;
    color: #d1dbe1;
    font: 500
        20px / 1.7
        var(--serif);
}

.author-brand-bio {
    max-width: 650px;
    margin: 24px
        0
        0;
    color: #91a6b3;
    font-size: 14px;
    line-height: 1.75;
}

/* =========================================================
   TERRITOIRES
========================================================= */

.author-brand-territories {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(
            4,
            minmax(0,1fr)
        );
    margin-top: 15px;
    border-top: 1px solid
        rgba(255,255,255,.11);
}

.brand-territory {
    min-height: 205px;
    padding: 30px
        28px;
    border-right: 1px solid
        rgba(255,255,255,.09);
    border-bottom: 1px solid
        rgba(255,255,255,.09);
    transition: background .3s ease,
        transform .3s ease;
}

.brand-territory:nth-child(4n) {
    border-right: 0;
}

.brand-territory:hover {
    background: rgba(255,255,255,.035);
    transform: translateY(-4px);
}

.brand-territory > span {
    display: block;
    margin-bottom: 27px;
    color: rgba(143,196,213,.55);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .18em;
}

.brand-territory strong {
    display: block;
    color: #fff;
    font: 500
        28px / 1
        var(--serif);
}

.brand-territory p {
    max-width: 250px;
    margin: 13px
        0
        0;
    color: #95aab7;
    font-size: 12px;
    line-height: 1.65;
}

/* =========================================================
   CONSTELLATION
========================================================= */

.author-brand-themes {
    grid-column: 1 / -1;
    padding-top: 38px;
}

.author-brand-themes-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 25px;
}

.author-brand-themes-head > span {
    color: #8fc4d5;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .20em;
    text-transform: uppercase;
}

.author-brand-themes-head strong {
    color: #fff;
    font: italic
        500
        19px / 1
        var(--serif);
}

/* =========================================================
   MOTS-THÈMES
========================================================= */

.author-brand-theme-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 9px
        8px;
}

.author-brand-theme-cloud span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 8px
        13px;
    border: 1px solid
        rgba(255,255,255,.12);
    border-radius: 999px;
    background: rgba(255,255,255,.035);
    color: #bac9d2;
    font-size: 10px;
    font-weight: 700;
    transition: background .25s ease,
        border-color .25s ease,
        color .25s ease,
        transform .25s ease;
}

.author-brand-theme-cloud span:hover {
    transform: translateY(-2px);
    border-color: rgba(143,196,213,.38);
    background: rgba(143,196,213,.10);
    color: #fff;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {
    .author-brand-shell {
        grid-template-columns: 1fr;
    }

    .author-brand-portrait {
        max-width: 520px;
    }

    .author-brand-territories {
        grid-template-columns: repeat(
                2,
                minmax(0,1fr)
            );
    }

    .brand-territory:nth-child(2n) {
        border-right: 0;
    }
}

@media (max-width: 620px) {
    .author-brand-photo {
        min-height: 500px;
        border-radius: 110px
            110px
            24px
            24px;
    }

    .author-brand-photo img {
        min-height: 500px;
    }

    .author-brand-monogram {
        right: 18px;
        width: 74px;
        height: 74px;
    }

    .author-brand-territories {
        grid-template-columns: 1fr;
    }

    .brand-territory {
        min-height: 0;
        padding: 26px
            0;
        border-right: 0;
    }

    .author-brand-themes-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}

/* =========================================================
   UNIVERS — THÈMES SECONDAIRES
========================================================= */

.author-brand-themes {
    grid-column: 1 / -1;
    margin-top: 18px;
    padding-top: 42px;
    border-top: 1px solid
        rgba(255,255,255,.10);
}

/* =========================================================
   EN-TÊTE
========================================================= */

.author-brand-themes-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 34px;
}

.author-brand-themes-head > span {
    color: #8fc4d5;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .20em;
    text-transform: uppercase;
}

.author-brand-themes-head strong {
    color: rgba(255,255,255,.88);
    font: italic
        500
        20px / 1
        var(--serif);
}

/* =========================================================
   4 FAMILLES
========================================================= */

.author-brand-theme-groups {
    display: grid;
    grid-template-columns: repeat(
            4,
            minmax(0, 1fr)
        );
    border-top: 1px solid
        rgba(255,255,255,.08);
    border-bottom: 1px solid
        rgba(255,255,255,.08);
}

/* =========================================================
   GROUPE
========================================================= */

.brand-theme-group {
    position: relative;
    min-height: 185px;
    padding: 28px
        26px
        30px;
    border-right: 1px solid
        rgba(255,255,255,.08);
}

.brand-theme-group:first-child {
    padding-left: 0;
}

.brand-theme-group:last-child {
    border-right: 0;
}

/* =========================================================
   NUMÉRO
========================================================= */

.brand-theme-number {
    display: block;
    margin-bottom: 22px;
    color: rgba(143,196,213,.50);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .18em;
}

/* =========================================================
   TITRE
========================================================= */

.brand-theme-group h3 {
    margin: 0
        0
        18px;
    color: #fff;
    font: 500
        22px / 1
        var(--serif);
    letter-spacing: -.025em;
}

/* =========================================================
   MOTS
========================================================= */

.brand-theme-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
        14px;
}

.brand-theme-list span {
    position: relative;
    color: #9eb0ba;
    font-size: 11px;
    line-height: 1.6;
}

.brand-theme-list span:not(:last-child)::after {
    content: "·";
    position: absolute;
    right: -9px;
    color: rgba(143,196,213,.45);
}

/* =========================================================
   HOVER TRÈS DISCRET
========================================================= */

.brand-theme-group {
    transition: background .25s ease;
}

.brand-theme-group:hover {
    background: rgba(255,255,255,.025);
}

/* =========================================================
   TABLETTE
========================================================= */

@media (max-width: 900px) {
    .author-brand-theme-groups {
        grid-template-columns: repeat(
                2,
                minmax(0,1fr)
            );
    }

    .brand-theme-group:nth-child(2) {
        border-right: 0;
    }

    .brand-theme-group:nth-child(-n/**/+2) {
        border-bottom: 1px solid
            rgba(255,255,255,.08);
    }

    .brand-theme-group:first-child {
        padding-left: 26px;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {
    .author-brand-themes-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .author-brand-theme-groups {
        grid-template-columns: 1fr;
    }

    .brand-theme-group,
    .brand-theme-group:first-child {
        min-height: 0;
        padding: 25px
            0;
        border-right: 0;
        border-bottom: 1px solid
            rgba(255,255,255,.08);
    }

    .brand-theme-group:last-child {
        border-bottom: 0;
    }
}

/* =========================================================
   THÉOPHILE TOUALI — IDENTITÉ DE MARQUE
========================================================= */

.author-brand {
    position: relative;
    overflow: hidden;
    padding: 115px
        0
        105px;
    background: radial-gradient(
            circle at 16% 25%,
            rgba(143,196,213,.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 80%,
            rgba(214,169,75,.08),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #061525 0%,
            #091d2f 52%,
            #102d40 100%
        );
    color: #fff;
}

/* grand TOUALI en arrière-plan */

.author-brand::before {
    content: "TOUALI";
    position: absolute;
    left: 50%;
    bottom: -75px;
    transform: translateX(-50%);
    color: rgba(255,255,255,.018);
    font: 900
        clamp(150px,22vw,350px)
        / .8
        var(--serif);
    letter-spacing: -.075em;
    white-space: nowrap;
    pointer-events: none;
}

/* =========================================================
   STRUCTURE PRINCIPALE
========================================================= */

.author-brand-shell {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(320px,.78fr)
        minmax(0,1.22fr);
    gap: 72px
        86px;
}

/* =========================================================
   PORTRAIT
========================================================= */

.author-brand-portrait {
    position: relative;
    min-width: 0;
}

.author-brand-photo {
    position: relative;
    min-height: 610px;
    overflow: hidden;
    border-radius: 150px
        150px
        30px
        30px;
    background: #102638;
    box-shadow: 0 40px 95px
        rgba(0,0,0,.30);
}

.author-brand-photo img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 610px;
    object-fit: cover;
    object-position: center center;
    transition: transform .8s
        cubic-bezier(.2,.8,.2,1);
}

.author-brand-photo:hover img {
    transform: scale(1.025);
}

/* voile inférieur */

.author-brand-photo-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
            180deg,
            transparent 48%,
            rgba(4,16,28,.08) 62%,
            rgba(4,16,28,.92) 100%
        );
    pointer-events: none;
}

/* signature sur photo */

.author-brand-photo-signature {
    position: absolute;
    z-index: 3;
    left: 34px;
    right: 34px;
    bottom: 34px;
}

.author-brand-photo-signature span {
    display: block;
    margin-bottom: 8px;
    color: #9bc8d5;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .20em;
    text-transform: uppercase;
}

.author-brand-photo-signature strong {
    display: block;
    color: #fff;
    font: 500
        31px / 1
        var(--serif);
    letter-spacing: -.03em;
}

/* =========================================================
   MONOGRAMME
========================================================= */

.author-brand-monogram {
    position: absolute;
    z-index: 6;
    top: 44px;
    right: -35px;
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 20px 50px
        rgba(0,0,0,.24);
}

.author-brand-monogram img {
    display: block;
    width: 58%;
}

/* =========================================================
   PROMESSE
========================================================= */

.author-brand-message {
    align-self: center;
    max-width: 760px;
}

.author-brand-message .eyebrow {
    color: #8fc4d5;
}

.author-brand-message h2 {
    max-width: 750px;
    margin: 18px
        0
        0;
    color: #fff;
    font: 500
        clamp(50px,5.2vw,76px)
        / .94
        var(--serif);
    letter-spacing: -.055em;
}

.author-brand-message h2 span {
    display: block;
    margin-top: 8px;
    color: #8fc4d5;
    font-style: italic;
}

/* phrase manifeste */

.author-brand-statement {
    max-width: 680px;
    margin: 32px
        0
        0;
    color: #d2dce2;
    font: 500
        19px / 1.72
        var(--serif);
}

/* bio secondaire */

.author-brand-bio {
    max-width: 650px;
    margin: 23px
        0
        0;
    color: #93a8b5;
    font-size: 14px;
    line-height: 1.75;
}

/* lien */

.author-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 31px;
    padding-bottom: 6px;
    border-bottom: 1px solid
        rgba(255,255,255,.28);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    transition: gap .25s ease,
        color .25s ease,
        border-color .25s ease;
}

.author-brand-link:hover {
    gap: 15px;
    color: var(--blue);
    border-color: var(--blue);
}

/* =========================================================
   8 TERRITOIRES PRINCIPAUX
========================================================= */

.author-brand-territories {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(
            4,
            minmax(0,1fr)
        );
    margin-top: 4px;
    border-top: 1px solid
        rgba(255,255,255,.11);
}

.brand-territory {
    position: relative;
    min-height: 205px;
    padding: 30px
        28px
        32px;
    border-right: 1px solid
        rgba(255,255,255,.09);
    border-bottom: 1px solid
        rgba(255,255,255,.09);
    transition: background .3s ease,
        transform .3s ease;
}

.brand-territory:nth-child(4n) {
    border-right: 0;
}

.brand-territory:hover {
    background: rgba(255,255,255,.035);
    transform: translateY(-3px);
}

/* numéro */

.brand-territory > span {
    display: block;
    margin-bottom: 25px;
    color: rgba(143,196,213,.52);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .18em;
}

/* nom */

.brand-territory strong {
    display: block;
    color: #fff;
    font: 500
        27px / 1
        var(--serif);
    letter-spacing: -.025em;
}

/* description */

.brand-territory p {
    max-width: 245px;
    margin: 13px
        0
        0;
    color: #97aab6;
    font-size: 12px;
    line-height: 1.65;
}

/* =========================================================
   UNIVERS SECONDAIRE
========================================================= */

.author-brand-themes {
    grid-column: 1 / -1;
    margin-top: 9px;
    padding-top: 40px;
    border-top: 1px solid
        rgba(255,255,255,.08);
}

/* =========================================================
   EN-TÊTE
========================================================= */

.author-brand-themes-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 30px;
}

.author-brand-themes-head > span {
    color: #8fc4d5;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .20em;
    text-transform: uppercase;
}

.author-brand-themes-head strong {
    color: rgba(255,255,255,.84);
    font: italic
        500
        19px / 1
        var(--serif);
}

/* =========================================================
   4 FAMILLES
========================================================= */

.author-brand-theme-groups {
    display: grid;
    grid-template-columns: repeat(
            4,
            minmax(0,1fr)
        );
    border-top: 1px solid
        rgba(255,255,255,.07);
    border-bottom: 1px solid
        rgba(255,255,255,.07);
}

/* =========================================================
   UNE FAMILLE
========================================================= */

.brand-theme-group {
    position: relative;
    min-height: 155px;
    padding: 26px
        25px
        28px;
    border-right: 1px solid
        rgba(255,255,255,.075);
    transition: background .25s ease;
}

.brand-theme-group:first-child {
    padding-left: 0;
}

.brand-theme-group:last-child {
    border-right: 0;
}

.brand-theme-group:hover {
    background: rgba(255,255,255,.022);
}

/* =========================================================
   NUMÉRO SECONDAIRE
========================================================= */

.brand-theme-number {
    display: block;
    margin-bottom: 13px;
    color: rgba(143,196,213,.44);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .18em;
}

/* =========================================================
   TITRE FAMILLE
========================================================= */

.brand-theme-group h3 {
    margin: 0
        0
        15px;
    color: rgba(255,255,255,.92);
    font: 500
        19px / 1.1
        var(--serif);
    letter-spacing: -.02em;
}

/* =========================================================
   THÈMES — PAS DE PASTILLES
========================================================= */

.brand-theme-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
        16px;
}

.brand-theme-list span {
    position: relative;
    color: rgba(255,255,255,.56);
    font-size: 11px;
    line-height: 1.55;
}

.brand-theme-list span:not(:last-child)::after {
    content: "•";
    position: absolute;
    right: -11px;
    color: rgba(143,196,213,.35);
}

/* =========================================================
   SIGNATURE FINALE
========================================================= */

.author-brand-signature {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding-top: 23px;
}

.author-brand-signature > span {
    color: rgba(255,255,255,.36);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .19em;
    text-transform: uppercase;
}

.author-brand-signature strong {
    color: rgba(255,255,255,.70);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .27em;
}

/* =========================================================
   TABLETTE
========================================================= */

@media (max-width: 1000px) {
    .author-brand-shell {
        grid-template-columns: 1fr;
        gap: 55px
            0;
    }

    .author-brand-portrait {
        max-width: 520px;
        margin: 0
            auto;
    }

    .author-brand-message {
        max-width: 760px;
    }

    .author-brand-territories {
        grid-template-columns: repeat(
                2,
                minmax(0,1fr)
            );
    }

    .brand-territory:nth-child(2n) {
        border-right: 0;
    }

    .author-brand-theme-groups {
        grid-template-columns: repeat(
                2,
                minmax(0,1fr)
            );
    }

    .brand-theme-group:nth-child(2n) {
        border-right: 0;
    }

    .brand-theme-group:nth-child(-n/**/+2) {
        border-bottom: 1px solid
            rgba(255,255,255,.07);
    }

    .brand-theme-group:first-child {
        padding-left: 25px;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {
    .author-brand {
        padding: 80px
            0
            75px;
    }

    .author-brand-shell {
        gap: 45px
            0;
    }

    /* portrait */

    .author-brand-photo {
        min-height: 500px;
        border-radius: 105px
            105px
            24px
            24px;
    }

    .author-brand-photo img {
        min-height: 500px;
        object-position: center center;
    }

    .author-brand-monogram {
        top: 30px;
        right: 18px;
        width: 72px;
        height: 72px;
    }

    /* titre */

    .author-brand-message h2 {
        font-size: clamp(
                43px,
                12vw,
                59px
            );
    }

    .author-brand-statement {
        font-size: 17px;
    }

    /* territoires */

    .author-brand-territories {
        grid-template-columns: 1fr;
    }

    .brand-territory {
        min-height: 0;
        padding: 25px
            0;
        border-right: 0;
    }

    /* entête thèmes */

    .author-brand-themes-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    /* familles */

    .author-brand-theme-groups {
        grid-template-columns: 1fr;
    }

    .brand-theme-group,
    .brand-theme-group:first-child {
        min-height: 0;
        padding: 24px
            0;
        border-right: 0;
        border-bottom: 1px solid
            rgba(255,255,255,.07);
    }

    .brand-theme-group:last-child {
        border-bottom: 0;
    }

    /* signature */

    .author-brand-signature {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}

/* =========================================================
   UNIVERS THÉOPHILE TOUALI
========================================================= */

.author-brand-universe {
    grid-column: 1 / -1;
    position: relative;
    margin-top: 12px;
    padding-top: 48px;
    border-top: 1px solid
        rgba(255,255,255,.11);
}

/* =========================================================
   EN-TÊTE
========================================================= */

.author-brand-universe-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 38px;
}

.author-brand-universe-kicker {
    display: block;
    margin-bottom: 13px;
    color: #8fc4d5;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.author-brand-universe-head h3 {
    margin: 0;
    color: #fff;
    font: 500
        clamp(34px,3.4vw,48px)
        / 1
        var(--serif);
    letter-spacing: -.04em;
}

.author-brand-universe-head h3 em {
    color: #8fc4d5;
    font-weight: 500;
}

.author-brand-universe-head > p {
    flex: 0 0 auto;
    margin: 0 0 4px;
    color: rgba(255,255,255,.78);
    font: italic
        500
        20px / 1.2
        var(--serif);
}

/* =========================================================
   GRILLE
========================================================= */

.author-brand-universe-grid {
    display: grid;
    grid-template-columns: repeat(
            4,
            minmax(0,1fr)
        );
    border-top: 1px solid
        rgba(255,255,255,.09);
    border-bottom: 1px solid
        rgba(255,255,255,.09);
}

/* =========================================================
   CARTE
========================================================= */

.brand-universe-card {
    position: relative;
    min-height: 285px;
    padding: 31px
        30px
        30px;
    border-right: 1px solid
        rgba(255,255,255,.085);
    border-bottom: 1px solid
        rgba(255,255,255,.085);
    overflow: hidden;
    transition: background .35s ease,
        transform .35s ease;
}

/* fin de chaque ligne */

.brand-universe-card:nth-child(4n) {
    border-right: 0;
}

/* dernière rangée */

.brand-universe-card:nth-child(n/**/+5) {
    border-bottom: 0;
}

/* petite lumière au survol */

.brand-universe-card::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -90px;
    top: -100px;
    border-radius: 50%;
    background: radial-gradient(
            circle,
            rgba(143,196,213,.11),
            transparent 68%
        );
    opacity: 0;
    transition: opacity .35s ease;
}

.brand-universe-card:hover {
    background: rgba(255,255,255,.028);
}

.brand-universe-card:hover::before {
    opacity: 1;
}

/* =========================================================
   NUMÉRO
========================================================= */

.brand-universe-number {
    display: block;
    margin-bottom: 23px;
    color: rgba(143,196,213,.48);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .19em;
}

/* =========================================================
   TITRE
========================================================= */

.brand-universe-card h4 {
    margin: 0;
    color: #fff;
    font: 500
        29px / 1
        var(--serif);
    letter-spacing: -.03em;
}

/* =========================================================
   TEXTE
========================================================= */

.brand-universe-text {
    max-width: 255px;
    min-height: 65px;
    margin: 14px
        0
        22px;
    color: #97aab6;
    font-size: 12px;
    line-height: 1.7;
}

/* =========================================================
   SOUS-THÈMES
========================================================= */

.brand-universe-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
        16px;
}

.brand-universe-tags span {
    position: relative;
    color: rgba(255,255,255,.68);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.55;
}

.brand-universe-tags span:not(:last-child)::after {
    content: "•";
    position: absolute;
    right: -11px;
    color: rgba(214,169,75,.55);
}

/* =========================================================
   PETIT TRAIT D'ACCENT
========================================================= */

.brand-universe-card::after {
    content: "";
    position: absolute;
    left: 30px;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--gold);
    transition: width .35s
        cubic-bezier(.2,.8,.2,1);
}

.brand-universe-card:hover::after {
    width: 44px;
}

/* =========================================================
   TABLETTE
========================================================= */

@media (max-width: 1000px) {
    .author-brand-universe-grid {
        grid-template-columns: repeat(
                2,
                minmax(0,1fr)
            );
    }

    .brand-universe-card:nth-child(4n) {
        border-right: 1px solid
            rgba(255,255,255,.085);
    }

    .brand-universe-card:nth-child(2n) {
        border-right: 0;
    }

    .brand-universe-card:nth-child(n/**/+5) {
        border-bottom: 1px solid
            rgba(255,255,255,.085);
    }

    .brand-universe-card:nth-child(n/**/+7) {
        border-bottom: 0;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {
    .author-brand-universe {
        padding-top: 37px;
    }

    .author-brand-universe-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
        margin-bottom: 27px;
    }

    .author-brand-universe-head > p {
        font-size: 18px;
    }

    .author-brand-universe-grid {
        grid-template-columns: 1fr;
    }

    .brand-universe-card,
    .brand-universe-card:nth-child(2n),
    .brand-universe-card:nth-child(4n),
    .brand-universe-card:nth-child(n/**/+5),
    .brand-universe-card:nth-child(n/**/+7) {
        min-height: 0;
        padding: 27px
            0
            30px;
        border-right: 0;
        border-bottom: 1px solid
            rgba(255,255,255,.08);
    }

    .brand-universe-card:last-child {
        border-bottom: 0;
    }

    .brand-universe-card::after {
        left: 0;
    }

    .brand-universe-text {
        max-width: 100%;
        min-height: 0;
    }
}

/* =========================================================
   GRAND TOUALI — WATERMARK COMPLET
========================================================= */

.author-brand::before {
    content: "TOUALI";
    position: absolute;
    z-index: 0;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    width: 100%;
    color: rgba(255,255,255,.022);
    font: 900
        clamp(125px, 19vw, 310px)
        / .88
        var(--serif);
    letter-spacing: -.075em;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

.author-brand {
    padding-bottom: 155px;
}

.author-brand-shell {
    position: relative;
    z-index: 2;
}

.author-brand-signature {
    position: relative;
    z-index: 3;
}

@media (max-width: 620px) {
    .author-brand {
        padding-bottom: 105px;
    }

    .author-brand::before {
        bottom: 18px;
        font-size: clamp(
                78px,
                26vw,
                145px
            );
        letter-spacing: -.065em;
    }
}

/* =========================================================
   CITATIONS — UNIVERS THÉOPHILE TOUALI
========================================================= */

.quote-showcase {
    position: relative;
    overflow: hidden;
    padding: 105px
        0
        95px;
    background: radial-gradient(
            circle at 18% 20%,
            rgba(143,196,213,.11),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #051321,
            #0a2133
        );
    color: #fff;
}

.quote-showcase::before {
    content: "“";
    position: absolute;
    top: -150px;
    right: 5%;
    color: rgba(255,255,255,.025);
    font: 500
        500px / 1
        var(--serif);
    pointer-events: none;
}

.quote-carousel {
    position: relative;
}

.quote-showcase-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 55px;
}

.quote-showcase-heading .eyebrow {
    color: var(--blue);
}

.quote-showcase-count {
    color: rgba(255,255,255,.35);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .15em;
}

.quote-showcase-count strong {
    color: #fff;
    font-size: 16px;
}

/* =========================================================
   SCÈNE
========================================================= */

.quote-carousel-stage {
    position: relative;
    min-height: 300px;
}

/* =========================================================
   UNE CITATION
========================================================= */

.quote-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity .55s ease,
        transform .55s ease,
        visibility .55s;
}

.quote-slide.is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.quote-slide blockquote {
    position: relative;
    max-width: 1050px;
    margin: 0;
    padding-left: 70px;
    color: #fff;
    font: italic
        500
        clamp(34px,4.6vw,65px)
        / 1.13
        var(--serif);
    letter-spacing: -.035em;
}

/* guillemet */

.quote-mark-large {
    position: absolute;
    left: 0;
    top: -15px;
    color: var(--gold);
    font: 500
        85px / 1
        var(--serif);
}

/* =========================================================
   SOURCE
========================================================= */

.quote-slide figcaption {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 38px
        0
        0
        70px;
    font-size: 10px;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.quote-book {
    color: var(--blue);
    font-weight: 900;
}

.quote-author {
    color: rgba(255,255,255,.42);
}

.quote-author::before {
    content: "—";
    margin-right: 13px;
}

/* =========================================================
   NAVIGATION
========================================================= */

.quote-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    margin-top: 45px;
}

.quote-nav {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid
        rgba(255,255,255,.14);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.quote-nav:hover {
    transform: scale(1.06);
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.28);
}

/* points */

.quote-progress {
    display: flex;
    align-items: center;
    gap: 7px;
}

.quote-dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.24);
    cursor: pointer;
    transition: width .25s ease,
        background .25s ease;
}

.quote-dot.is-active {
    width: 25px;
    background: var(--gold);
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {
    .quote-showcase {
        padding: 75px
            0;
    }

    .quote-carousel-stage {
        min-height: 380px;
    }

    .quote-slide blockquote {
        padding-left: 38px;
        font-size: clamp(
                31px,
                9vw,
                43px
            );
    }

    .quote-mark-large {
        font-size: 60px;
    }

    .quote-slide figcaption {
        align-items: flex-start;
        flex-direction: column;
        margin-left: 38px;
        gap: 6px;
    }

    .quote-author::before {
        display: none;
    }

    .quote-navigation {
        justify-content: center;
    }
}

/* =========================================================
   CTA FINAL — THÉOPHILE TOUALI
========================================================= */

.final-cta-section {
    padding: 30px
        0
        110px;
    background: linear-gradient(
            180deg,
            #f7f4ee 0%,
            #eef5f5 100%
        );
}

/* =========================================================
   PANNEAU
========================================================= */

.final-cta {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr)
        auto;
    align-items: end;
    gap: 70px;
    overflow: hidden;
    padding: 72px
        76px;
    border-radius: 36px;
    background: radial-gradient(
            circle at 87% 20%,
            rgba(143,196,213,.15),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #061525 0%,
            #0a2133 60%,
            #103247 100%
        );
    color: #fff;
    box-shadow: 0 35px 85px
        rgba(6,19,38,.16);
}

/* =========================================================
   MONOGRAMME GÉANT
========================================================= */

.final-cta-watermark {
    position: absolute;
    right: -30px;
    top: -95px;
    color: rgba(255,255,255,.025);
    font: 900
        330px / 1
        var(--serif);
    letter-spacing: -.1em;
    pointer-events: none;
}

/* =========================================================
   CONTENU
========================================================= */

.final-cta-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

.final-cta .eyebrow {
    color: #9ccbd8;
}

.final-cta h2 {
    max-width: 760px;
    margin: 17px
        0
        0;
    color: #fff;
    font: 500
        clamp(48px,5vw,72px)
        / .96
        var(--serif);
    letter-spacing: -.05em;
}

.final-cta h2 span {
    display: block;
    margin-top: 6px;
    color: #8fc4d5;
    font-style: italic;
}

.final-cta-content > p {
    max-width: 650px;
    margin: 28px
        0
        0;
    color: #b5c5cf;
    font-size: 16px;
    line-height: 1.8;
}

/* =========================================================
   SIGNATURE
========================================================= */

.final-cta-signature {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 32px;
}

.final-cta-signature span {
    color: rgba(255,255,255,.42);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.final-cta-signature strong {
    color: rgba(255,255,255,.78);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .22em;
}

/* =========================================================
   ACTIONS
========================================================= */

.final-cta-actions {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 13px;
    min-width: 245px;
}

/* bouton principal */

.final-cta-primary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 58px;
    padding: 0
        22px;
    border-radius: 999px;
    background: #fff;
    color: #071829;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 15px 35px
        rgba(0,0,0,.18);
    transition: transform .25s ease,
        background .25s ease;
}

.final-cta-primary:hover {
    transform: translateY(-3px);
    background: #dff3f8;
}

.final-cta-primary span {
    font-size: 17px;
    transition: transform .25s ease;
}

.final-cta-primary:hover span {
    transform: translateX(4px);
}

/* bouton secondaire */

.final-cta-secondary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 54px;
    padding: 0
        22px;
    border: 1px solid
        rgba(255,255,255,.18);
    border-radius: 999px;
    background: rgba(255,255,255,.05);
    color: #fff;
    font-size: 11px;
    font-weight: 850;
    backdrop-filter: blur(10px);
    transition: background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.final-cta-secondary:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.30);
}

/* =========================================================
   TABLETTE
========================================================= */

@media (max-width: 900px) {
    .final-cta {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 45px;
        padding: 60px
            54px;
    }

    .final-cta-actions {
        flex-direction: row;
        min-width: 0;
    }

    .final-cta-primary,
    .final-cta-secondary {
        min-width: 230px;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {
    .final-cta-section {
        padding-bottom: 75px;
    }

    .final-cta {
        gap: 35px;
        padding: 45px
            27px;
        border-radius: 26px;
    }

    .final-cta h2 {
        font-size: clamp(
                42px,
                12vw,
                57px
            );
    }

    .final-cta-content > p {
        font-size: 15px;
    }

    .final-cta-signature {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .final-cta-actions {
        flex-direction: column;
        width: 100%;
    }

    .final-cta-primary,
    .final-cta-secondary {
        width: 100%;
        min-width: 0;
    }

    .final-cta-watermark {
        right: -20px;
        top: -35px;
        font-size: 180px;
    }
}

/* =========================================================
   FOOTER — MARQUE THÉOPHILE TOUALI
========================================================= */

.site-footer {
    position: relative;
    overflow: hidden;
    padding: 88px
        0
        28px;
    background: radial-gradient(
            circle at 8% 12%,
            rgba(143,196,213,.07),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(214,169,75,.04),
            transparent 25%
        ),
        linear-gradient(
            145deg,
            #040e1a 0%,
            #061525 58%,
            #092035 100%
        );
    color: #dce5ec;
}

/* =========================================================
   GRAND TOUALI DE MARQUE
========================================================= */

.site-footer::before {
    content: "TOUALI";
    position: absolute;
    left: 50%;
    bottom: -52px;
    transform: translateX(-50%);
    width: 100%;
    color: rgba(255,255,255,.018);
    font: 900
        clamp(125px,18vw,295px)
        / .85
        var(--serif);
    letter-spacing: -.07em;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}

/* =========================================================
   GRILLE PRINCIPALE
========================================================= */

.footer-main {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(330px,1.7fr)
        repeat(
            3,
            minmax(125px,.55fr)
        );
    gap: 55px
        52px;
}

/* =========================================================
   IDENTITÉ
========================================================= */

.footer-identity {
    max-width: 520px;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 17px;
}

.footer-logo-mark {
    width: 62px;
    height: 62px;
    object-fit: contain;
    filter: drop-shadow(
            0 10px 25px
            rgba(0,0,0,.20)
        );
}

.footer-logo-copy {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.footer-logo-copy strong {
    color: #fff;
    font: 700
        28px / 1
        var(--serif);
    letter-spacing: -.015em;
}

.footer-logo-copy small {
    margin-top: 9px;
    color: #8ba2b3;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .23em;
    text-transform: uppercase;
}

/* =========================================================
   PROMESSE
========================================================= */

.footer-promise {
    max-width: 500px;
    margin: 31px
        0
        0;
    color: #fff;
    font: 500
        clamp(28px,2.5vw,39px)
        / 1.13
        var(--serif);
    letter-spacing: -.035em;
}

.footer-promise em {
    display: block;
    color: #8fc4d5;
    font-weight: 500;
}

/* =========================================================
   TAGLINE DU BO
========================================================= */

.footer-note {
    max-width: 470px;
    margin: 20px
        0
        0;
    color: #8197a7;
    font-size: 13px;
    line-height: 1.75;
}

/* =========================================================
   COLONNES
========================================================= */

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-top: 5px;
}

.footer-title {
    margin: 0
        0
        15px;
    color: #738fa2;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .23em;
    text-transform: uppercase;
}

.footer-column a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #c2d0d9;
    font-size: 13px;
    transition: color .2s ease,
        transform .2s ease;
}

.footer-column a:hover {
    color: #fff;
    transform: translateX(4px);
}

.footer-column a > span {
    color: #6e94a9;
    font-size: 10px;
}

/* =========================================================
   TEXTE SI AUCUN RÉSEAU
========================================================= */

.footer-coming {
    max-width: 140px;
    color: #687e8e;
    font: italic
        12px / 1.55
        var(--serif);
}

/* =========================================================
   SIGNATURE LITTÉRAIRE
========================================================= */

.footer-literary-signature {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-top: 70px;
    padding: 30px
        20px;
    border-top: 1px solid
        rgba(255,255,255,.075);
    border-bottom: 1px solid
        rgba(255,255,255,.075);
    text-align: center;
}

.footer-literary-signature span {
    color: rgba(255,255,255,.40);
    font: italic
        500
        17px / 1.4
        var(--serif);
}

.footer-literary-signature strong {
    color: #fff;
    font: italic
        500
        20px / 1.4
        var(--serif);
}

/* =========================================================
   BAS DU FOOTER
========================================================= */

.footer-bottom {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 0;
    padding-top: 25px;
    border-top: 0;
    color: #617788;
    font-size: 10px;
}

.footer-copyright {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-dot {
    color: rgba(255,255,255,.18);
}

/* =========================================================
   ADMINISTRATION — VOLONTAIREMENT DISCRÈTE
========================================================= */

.footer-admin {
    color: #617788;
    opacity: .48;
    font-size: 9px;
    transition: opacity .2s ease,
        color .2s ease;
}

.footer-admin:hover {
    color: #c2d0d9;
    opacity: 1;
}

/* =========================================================
   TABLETTE
========================================================= */

@media (max-width: 950px) {
    .footer-main {
        grid-template-columns: repeat(
                3,
                minmax(0,1fr)
            );
        gap: 50px
            35px;
    }

    .footer-identity {
        grid-column: 1 / -1;
        max-width: 650px;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {
    .site-footer {
        padding: 70px
            0
            24px;
    }

    .footer-main {
        grid-template-columns: repeat(
                2,
                minmax(0,1fr)
            );
        gap: 42px
            28px;
    }

    .footer-identity {
        grid-column: 1 / -1;
    }

    .footer-logo-mark {
        width: 54px;
        height: 54px;
    }

    .footer-logo-copy strong {
        font-size: 23px;
    }

    .footer-logo-copy small {
        font-size: 8px;
    }

    .footer-promise {
        font-size: clamp(
                28px,
                9vw,
                36px
            );
    }

    .footer-literary-signature {
        align-items: center;
        flex-direction: column;
        gap: 1px;
        margin-top: 52px;
        padding: 25px
            12px;
    }

    .footer-literary-signature span {
        font-size: 15px;
    }

    .footer-literary-signature strong {
        font-size: 18px;
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .footer-copyright {
        flex-wrap: wrap;
    }

    .site-footer::before {
        bottom: -14px;
        font-size: clamp(
                85px,
                27vw,
                145px
            );
    }
}

/* =========================================================
   PAGE LIVRE — VERSION PREMIUM
   À ajouter à la fin de votre CSS principal.
========================================================= */

.book-page-hero {
    position: relative;
    overflow: hidden;
    padding: 72px 0 92px;
    background:
        radial-gradient(circle at 17% 18%, color-mix(in srgb, var(--book-accent) 48%, transparent), transparent 33%),
        radial-gradient(circle at 86% 82%, rgba(214, 169, 75, .10), transparent 27%),
        linear-gradient(145deg, #fbfaf6 0%, #f2f8f9 55%, #eef4f5 100%);
}

.book-page-hero::after {
    content: "TT";
    position: absolute;
    right: -40px;
    bottom: -125px;
    color: rgba(6, 19, 38, .025);
    font: 900 clamp(230px, 28vw, 430px) / 1 var(--serif);
    letter-spacing: -.12em;
    pointer-events: none;
}

.book-page-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(340px, .8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 80px;
}

.book-page-cover {
    position: relative;
    min-height: 620px;
    display: grid;
    place-items: center;
}

.book-page-cover-halo {
    position: absolute;
    width: min(100%, 500px);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--book-accent) 70%, white), rgba(255,255,255,.42));
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.75),
        0 40px 95px rgba(6,19,38,.09);
}

.book-page-cover img {
    position: relative;
    z-index: 2;
    width: min(68%, 390px);
    max-height: 585px;
    object-fit: cover;
    border-radius: 9px;
    box-shadow: 0 45px 95px rgba(4,18,30,.30);
    transform: perspective(1200px) rotateY(-3deg) rotateZ(-1deg);
}

.book-page-intro {
    max-width: 760px;
}

.book-page-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}

.book-page-meta span {
    position: relative;
    color: #57778a;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.book-page-meta span:not(:last-child)::after {
    content: "•";
    margin-left: 10px;
    color: rgba(6,19,38,.25);
}

.book-page-intro h1 {
    max-width: 780px;
    margin: 0;
    color: var(--ink);
    font: 500 clamp(58px, 6.4vw, 92px) / .92 var(--serif);
    letter-spacing: -.058em;
}

.book-page-subtitle {
    max-width: 650px;
    margin: 18px 0 0;
    color: #5f7180;
    font: italic 500 21px / 1.45 var(--serif);
}

.book-page-hook {
    max-width: 680px;
    margin: 30px 0 0;
    color: var(--ink);
    font: italic 500 clamp(24px, 2.5vw, 34px) / 1.3 var(--serif);
    letter-spacing: -.02em;
}

.book-page-summary {
    max-width: 660px;
    margin: 21px 0 0;
    color: #5b6c79;
    font-size: 16px;
    line-height: 1.8;
}

.book-page-themes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 27px;
}

.book-page-themes span {
    padding: 7px 11px;
    border: 1px solid rgba(6,19,38,.11);
    border-radius: 999px;
    background: rgba(255,255,255,.55);
    color: #455c6c;
    font-size: 10px;
    font-weight: 800;
}

.book-page-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 34px;
    margin-top: 34px;
    padding-top: 25px;
    border-top: 1px solid rgba(6,19,38,.10);
}

.book-page-facts > div {
    min-width: 110px;
}

.book-page-facts span {
    display: block;
    color: #72828f;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.book-page-facts strong {
    display: block;
    margin-top: 5px;
    color: var(--ink);
    font: 600 16px / 1.35 var(--serif);
}

.book-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 31px;
}

.book-page-actions .btn {
    min-height: 53px;
    padding-inline: 24px;
}

/* =========================================================
   HISTOIRE + CITATION
========================================================= */

.book-page-story-section {
    background: #fcfbf8;
}

.book-page-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    align-items: start;
    gap: 90px;
}

.book-page-story {
    max-width: 760px;
}

.book-page-story h2 {
    margin: 15px 0 30px;
    font: 500 clamp(46px, 5vw, 68px) / .98 var(--serif);
    letter-spacing: -.045em;
}

.book-page-story h2 em {
    display: block;
    color: var(--blue-deep);
    font-weight: 500;
}

.book-page-prose {
    color: #334553;
    font: 400 18px / 1.9 var(--serif);
}

.book-page-quote {
    position: sticky;
    top: 120px;
    overflow: hidden;
    padding: 48px 42px 40px;
    border-radius: 30px;
    background:
        radial-gradient(circle at 100% 0%, rgba(143,196,213,.12), transparent 34%),
        linear-gradient(145deg, #061525, #0b263a);
    color: #fff;
    box-shadow: 0 30px 70px rgba(6,19,38,.12);
}

.book-page-quote-mark {
    display: block;
    height: 52px;
    color: var(--gold);
    font: 500 90px / .7 var(--serif);
}

.book-page-quote blockquote {
    margin: 18px 0 0;
    font: italic 500 clamp(27px, 3vw, 38px) / 1.35 var(--serif);
    letter-spacing: -.025em;
}

.book-page-quote p {
    margin: 29px 0 0;
    color: #8fc4d5;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.book-page-quote p span {
    display: block;
    margin-top: 6px;
    color: rgba(255,255,255,.42);
}

/* =========================================================
   RÉSONANCE
========================================================= */

.book-page-resonance .section-head {
    margin-bottom: 35px;
}

.book-page-hook-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.book-page-hook-card {
    position: relative;
    min-height: 220px;
    padding: 30px 30px 32px;
    border-right: 1px solid var(--line);
}

.book-page-hook-card:last-child {
    border-right: 0;
}

.book-page-hook-card > span {
    color: rgba(95,157,175,.65);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .16em;
}

.book-page-hook-card p {
    margin: 24px 0 0;
    color: var(--ink);
    font: italic 500 24px / 1.4 var(--serif);
}

.book-page-theme-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.book-page-theme-cloud span {
    padding: 9px 13px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    color: #556a79;
    font-size: 11px;
    font-weight: 800;
}

/* =========================================================
   APPEL À L’EXTRAIT
========================================================= */

.book-page-excerpt-call {
    padding-top: 38px;
}

.book-page-excerpt-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 70px;
    overflow: hidden;
    padding: 64px 68px;
    border-radius: 34px;
    background:
        radial-gradient(circle at 90% 15%, rgba(143,196,213,.15), transparent 30%),
        linear-gradient(145deg, #061525, #0a2133 60%, #103247);
    color: #fff;
}

.book-page-excerpt-panel::after {
    content: "“";
    position: absolute;
    right: 35px;
    top: -115px;
    color: rgba(255,255,255,.025);
    font: 500 350px / 1 var(--serif);
    pointer-events: none;
}

.book-page-excerpt-panel > div,
.book-page-excerpt-button {
    position: relative;
    z-index: 2;
}

.book-page-excerpt-panel .eyebrow {
    color: #8fc4d5;
}

.book-page-excerpt-panel h2 {
    max-width: 770px;
    margin: 15px 0 0;
    font: 500 clamp(43px, 4.7vw, 66px) / .98 var(--serif);
    letter-spacing: -.045em;
}

.book-page-excerpt-panel h2 span {
    display: block;
    color: #8fc4d5;
    font-style: italic;
}

.book-page-excerpt-panel p {
    max-width: 650px;
    margin: 24px 0 0;
    color: #afc0ca;
    font-size: 15px;
    line-height: 1.8;
}

.book-page-excerpt-button {
    min-width: 220px;
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 15px 35px rgba(0,0,0,.18);
    transition: transform .25s ease, background .25s ease;
}

.book-page-excerpt-button:hover {
    transform: translateY(-3px);
    background: #dff3f8;
}

/* =========================================================
   OBJET LIVRE
========================================================= */

.book-page-spread {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px;
}

.book-page-spread figure {
    margin: 0;
}

.book-page-spread img {
    width: 100%;
    border-radius: 22px;
    box-shadow: 0 28px 65px rgba(6,19,38,.12);
}

.book-page-spread figcaption {
    margin-top: 12px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* =========================================================
   AUTRES ŒUVRES
========================================================= */

.book-page-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.book-page-related-card {
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr);
    gap: 22px;
    align-items: stretch;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 14px 35px rgba(6,19,38,.05);
    transition: transform .25s ease, box-shadow .25s ease;
}

.book-page-related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 55px rgba(6,19,38,.10);
}

.book-page-related-cover {
    overflow: hidden;
    border-radius: 10px;
    background: #e6ecee;
}

.book-page-related-cover img {
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
}

.book-page-related-copy {
    display: flex;
    flex-direction: column;
    padding: 8px 4px 5px 0;
}

.book-page-related-copy > span {
    color: var(--blue-deep);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.book-page-related-copy h3 {
    margin: 11px 0 10px;
    font: 600 25px / 1.05 var(--serif);
    letter-spacing: -.025em;
}

.book-page-related-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.65;
}

.book-page-related-copy strong {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 18px;
    color: var(--ink);
    font-size: 11px;
    font-weight: 900;
}

/* =========================================================
   CTA FINAL
========================================================= */

.book-page-final-section {
    padding-top: 25px;
    padding-bottom: 110px;
    background: linear-gradient(180deg, #fcfbf8, #eef5f5);
}

.book-page-final {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) auto;
    align-items: end;
    gap: 70px;
    overflow: hidden;
    padding: 70px 74px;
    border-radius: 36px;
    background:
        radial-gradient(circle at 88% 18%, rgba(143,196,213,.15), transparent 31%),
        linear-gradient(145deg, #061525, #0a2133 60%, #103247);
    color: #fff;
    box-shadow: 0 35px 85px rgba(6,19,38,.15);
}

.book-page-final-title {
    position: absolute;
    right: -30px;
    top: -95px;
    color: rgba(255,255,255,.025);
    font: 900 330px / 1 var(--serif);
    letter-spacing: -.1em;
    pointer-events: none;
}

.book-page-final-content,
.book-page-final-actions {
    position: relative;
    z-index: 2;
}

.book-page-final .eyebrow {
    color: #9ccbd8;
}

.book-page-final h2 {
    max-width: 780px;
    margin: 17px 0 0;
    color: #fff;
    font: 500 clamp(47px, 5vw, 70px) / .96 var(--serif);
    letter-spacing: -.05em;
}

.book-page-final h2 span {
    display: block;
    margin-top: 6px;
    color: #8fc4d5;
    font-style: italic;
}

.book-page-final p {
    max-width: 640px;
    margin: 27px 0 0;
    color: #b5c5cf;
    font-size: 15px;
    line-height: 1.8;
}

.book-page-final-actions {
    min-width: 260px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.book-page-final-primary,
.book-page-final-secondary {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 0 22px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

.book-page-final-primary {
    background: #fff;
    color: var(--ink);
    box-shadow: 0 15px 35px rgba(0,0,0,.18);
}

.book-page-final-primary:hover {
    transform: translateY(-3px);
    background: #dff3f8;
}

.book-page-final-secondary {
    border: 1px solid rgba(255,255,255,.17);
    background: rgba(255,255,255,.05);
    color: #fff;
}

.book-page-final-secondary:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.28);
}

/* =========================================================
   404
========================================================= */

.book-not-found .empty h1 {
    margin: 12px 0 10px;
    font: 500 clamp(45px, 6vw, 70px) / 1 var(--serif);
}

.book-not-found .empty p {
    margin-bottom: 25px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1080px) {
    .book-page-hero-grid,
    .book-page-story-grid {
        grid-template-columns: 1fr;
    }

    .book-page-cover {
        min-height: 560px;
    }

    .book-page-intro {
        max-width: 800px;
    }

    .book-page-quote {
        position: relative;
        top: auto;
        max-width: 760px;
    }

    .book-page-related-grid {
        grid-template-columns: 1fr;
    }

    .book-page-related-card {
        grid-template-columns: 170px minmax(0, 1fr);
    }

    .book-page-excerpt-panel,
    .book-page-final {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 42px;
    }

    .book-page-excerpt-button {
        justify-self: start;
    }

    .book-page-final-actions {
        min-width: 0;
        max-width: 360px;
    }
}

@media (max-width: 760px) {
    .book-page-hook-grid {
        grid-template-columns: 1fr;
    }

    .book-page-hook-card {
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .book-page-hook-card:last-child {
        border-bottom: 0;
    }

    .book-page-spread {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .book-page-hero {
        padding: 42px 0 68px;
    }

    .book-page-hero-grid {
        gap: 35px;
    }

    .book-page-cover {
        min-height: 445px;
    }

    .book-page-cover-halo {
        width: 330px;
    }

    .book-page-cover img {
        width: min(68%, 255px);
        max-height: 390px;
    }

    .book-page-intro h1 {
        font-size: clamp(48px, 13vw, 66px);
    }

    .book-page-hook {
        font-size: 25px;
    }

    .book-page-actions {
        flex-direction: column;
    }

    .book-page-actions .btn {
        width: 100%;
    }

    .book-page-story h2 {
        font-size: clamp(42px, 11vw, 55px);
    }

    .book-page-prose {
        font-size: 17px;
    }

    .book-page-quote {
        padding: 38px 28px 32px;
        border-radius: 24px;
    }

    .book-page-excerpt-panel,
    .book-page-final {
        padding: 44px 27px;
        border-radius: 26px;
    }

    .book-page-excerpt-panel h2,
    .book-page-final h2 {
        font-size: clamp(40px, 11vw, 54px);
    }

    .book-page-excerpt-button,
    .book-page-final-actions,
    .book-page-final-primary,
    .book-page-final-secondary {
        width: 100%;
    }

    .book-page-related-card {
        grid-template-columns: 110px minmax(0, 1fr);
        gap: 16px;
        padding: 14px;
    }

    .book-page-related-cover img {
        min-height: 170px;
    }

    .book-page-related-copy h3 {
        font-size: 21px;
    }

    .book-page-related-copy p {
        display: none;
    }

    .book-page-final-section {
        padding-bottom: 75px;
    }
}

/* ==========================================================================
   PAGE LIVRES — HERO
   ========================================================================== */

.page-hero-library {
    position: relative;
    overflow: hidden;

    padding-top: clamp(135px, 11vw, 180px);
    padding-bottom: clamp(90px, 10vw, 150px);

    background:
        radial-gradient(
            circle at 82% 40%,
            rgba(135, 189, 205, 0.10),
            transparent 32%
        ),
        #f7fafb;
}


/* ==========================================================================
   TITRE
   ========================================================================== */

.library-hero-heading {
    width: min(100%, 1000px);
    margin-bottom: clamp(55px, 7vw, 100px);
}

.library-hero-heading .eyebrow {
    display: block;
    margin-bottom: 20px;
}

.library-hero-heading h1 {
    margin: 0;

    font-size: clamp(4rem, 7vw, 7.4rem);
    line-height: 0.92;
    letter-spacing: -0.055em;

    color: #071426;
}

.library-hero-heading h1 span {
    display: block;
}


/* ==========================================================================
   BLOC ÉDITORIAL
   ========================================================================== */

.library-story {
    display: grid;
    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(320px, 0.88fr);

    align-items: center;

    gap: clamp(50px, 8vw, 120px);
}


/* ==========================================================================
   PHOTO
   ========================================================================== */

.library-story-photo {
    position: relative;

    margin: 0;

    max-width: 690px;
}


/*
 * On respecte beaucoup mieux le format
 * vertical de la photographie originale.
 */

.library-story-photo img {
    display: block;

    width: 100%;
    height: auto;

    max-height: 780px;

    object-fit: cover;
    object-position: center;

    border-radius: 3px;

    box-shadow:
        0 32px 75px rgba(5, 16, 30, 0.16),
        0 8px 24px rgba(5, 16, 30, 0.07);
}


/* petit décalage graphique derrière la photo */

.library-story-photo::before {
    content: "";

    position: absolute;

    left: -22px;
    bottom: -22px;

    width: 58%;
    height: 54%;

    border-left: 1px solid rgba(184, 153, 90, 0.55);
    border-bottom: 1px solid rgba(184, 153, 90, 0.55);

    pointer-events: none;

    z-index: -1;
}


/* ==========================================================================
   LÉGENDE
   ========================================================================== */

.library-story-photo figcaption {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-top: 18px;

    font-size: 0.68rem;
    line-height: 1.5;

    letter-spacing: 0.14em;
    text-transform: uppercase;

    color: rgba(7, 20, 38, 0.48);
}

.library-story-photo figcaption span {
    display: block;

    width: 36px;
    height: 1px;

    background: #b8995a;
}


/* ==========================================================================
   TEXTE
   ========================================================================== */

.library-story-copy {
    max-width: 540px;
}

.library-story-copy .eyebrow {
    margin-bottom: 22px;
}

.library-story-copy h2 {
    margin:
        0
        0
        30px;

    font-size: clamp(2.5rem, 4.2vw, 4.6rem);
    line-height: 0.98;

    letter-spacing: -0.04em;

    color: #071426;
}

.library-story-copy h2 span {
    display: block;

    color: rgba(7, 20, 38, 0.55);
}


.library-story-copy p {
    max-width: 500px;

    margin:
        0
        0
        20px;

    font-size: 1rem;
    line-height: 1.85;

    color: rgba(7, 20, 38, 0.68);
}


.library-story-copy .library-story-lead {
    font-family: var(--font-serif, Georgia, serif);

    font-size: clamp(1.2rem, 1.6vw, 1.45rem);
    line-height: 1.65;

    color: #071426;
}


.library-story-signature {
    position: relative;

    margin-top: 38px !important;
    padding-left: 26px;

    font-family: var(--font-serif, Georgia, serif);

    font-size: 1.05rem !important;
    font-style: italic;

    color: #071426 !important;
}

.library-story-signature::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0.2em;

    width: 1px;
    height: calc(100% - 0.4em);

    background: #b8995a;
}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width: 980px) {

    .library-story {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .library-story-photo {
        width: min(100%, 680px);
    }

    .library-story-copy {
        max-width: 720px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 680px) {

    .page-hero-library {
        padding-top: 105px;
        padding-bottom: 80px;
    }

    .library-hero-heading {
        margin-bottom: 48px;
    }

    .library-hero-heading h1 {
        font-size: clamp(3.2rem, 15vw, 5rem);
        line-height: 0.94;
    }

    .library-story {
        gap: 42px;
    }

    .library-story-photo::before {
        left: -10px;
        bottom: -10px;
    }

    .library-story-copy h2 {
        font-size: clamp(2.5rem, 11vw, 3.6rem);
    }

}

/* ==========================================================================
   PAGE LIVRES — HERO AVEC PHOTO
   ========================================================================== */

.page-hero-books {
    position: relative;
    overflow: hidden;

    padding:
        clamp(125px, 9vw, 165px)
        0
        clamp(80px, 7vw, 115px);

    background:
        radial-gradient(
            circle at 82% 28%,
            rgba(135, 189, 205, 0.10),
            transparent 34%
        ),
        #f7fafb;
}


/* ==========================================================================
   GRILLE
   ========================================================================== */

.books-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(400px, 0.9fr);

    align-items: center;

    gap: clamp(55px, 6vw, 105px);
}


/* ==========================================================================
   TEXTE
   ========================================================================== */

.books-hero-copy {
    position: relative;

    z-index: 2;
}

.books-hero-copy .eyebrow {
    display: block;

    margin-bottom: 28px;
}

.books-hero-copy h1 {
    max-width: 980px;

    margin:
        0
        0
        38px;

    font-size: clamp(4.2rem, 6.8vw, 7.7rem);
    line-height: 0.92;

    letter-spacing: -0.055em;

    color: #071426;
}

.books-hero-copy h1 span {
    display: block;
}

.books-hero-copy > p {
    max-width: 790px;

    margin: 0;

    font-size: clamp(1rem, 1.2vw, 1.18rem);
    line-height: 1.8;

    color: rgba(7, 20, 38, 0.62);
}


/* ==========================================================================
   VISUEL
   ========================================================================== */

.books-hero-visual {
    position: relative;

    align-self: stretch;

    display: flex;
    align-items: center;
}

.books-hero-photo {
    position: relative;

    width: 100%;
    height: clamp(500px, 34vw, 650px);

    overflow: hidden;

    border-radius: 3px;

    background: #061326;

    box-shadow:
        0 35px 90px rgba(5, 16, 30, 0.18),
        0 10px 30px rgba(5, 16, 30, 0.08);
}


/* ==========================================================================
   PHOTO
   ========================================================================== */

.books-hero-photo-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
     * On privilégie la partie basse :
     * votre geste de dédicace + les livres.
     */
    object-position: center 62%;

    transition:
        transform 900ms cubic-bezier(.2, .7, .2, 1);
}

.books-hero-photo:hover .books-hero-photo-image {
    transform: scale(1.025);
}


/* ==========================================================================
   VOILE GRAPHIQUE
   ========================================================================== */

.books-hero-photo::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(5, 16, 30, 0.02) 35%,
            rgba(5, 16, 30, 0.08) 65%,
            rgba(5, 16, 30, 0.62) 100%
        );
}


/* ==========================================================================
   LOGO
   ========================================================================== */

.books-hero-logo {
    position: absolute;

    top: 28px;
    right: 28px;

    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: center;

    width: clamp(78px, 7vw, 110px);
    height: clamp(78px, 7vw, 110px);

    padding: 15px;

    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 50%;

    background: rgba(5, 16, 30, 0.78);

    box-shadow:
        0 14px 35px rgba(5, 16, 30, 0.22);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.books-hero-logo img {
    display: block;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
}


/* ==========================================================================
   LÉGENDE SUR LA PHOTO
   ========================================================================== */

.books-hero-caption {
    position: absolute;

    left: 30px;
    right: 30px;
    bottom: 28px;

    z-index: 3;

    display: flex;
    align-items: center;

    gap: 14px;

    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.5;

    letter-spacing: 0.16em;
    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.88);
}

.books-hero-caption-line {
    display: block;

    width: 38px;
    height: 1px;

    flex: 0 0 38px;

    background: #d5b66d;
}


/* ==========================================================================
   DÉTAIL DÉCORATIF
   ========================================================================== */

.books-hero-visual::before {
    content: "";

    position: absolute;

    top: -18px;
    right: -18px;

    width: 45%;
    height: 42%;

    border-top: 1px solid rgba(184, 153, 90, 0.48);
    border-right: 1px solid rgba(184, 153, 90, 0.48);

    pointer-events: none;
}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width: 1100px) {

    .books-hero-grid {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(340px, 0.8fr);

        gap: 50px;
    }

    .books-hero-copy h1 {
        font-size: clamp(4rem, 7vw, 6rem);
    }

}


/* ==========================================================================
   MOBILE / PETITE TABLETTE
   ========================================================================== */

@media (max-width: 900px) {

    .page-hero-books {
        padding-top: 110px;
    }

    .books-hero-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .books-hero-copy {
        max-width: 780px;
    }

    .books-hero-photo {
        width: min(100%, 680px);
        height: auto;

        aspect-ratio: 4 / 5;
    }

    .books-hero-photo-image {
        object-position: center 58%;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    .page-hero-books {
        padding:
            100px
            0
            70px;
    }

    .books-hero-copy h1 {
        margin-bottom: 28px;

        font-size: clamp(3.3rem, 15vw, 4.8rem);
        line-height: 0.94;
    }

    .books-hero-copy > p {
        font-size: 0.98rem;
    }

    .books-hero-photo {
        aspect-ratio: 4 / 5;
    }

    .books-hero-logo {
        top: 18px;
        right: 18px;

        width: 76px;
        height: 76px;

        padding: 12px;
    }

    .books-hero-caption {
        left: 20px;
        right: 20px;
        bottom: 20px;

        font-size: 0.61rem;
    }

    .books-hero-visual::before {
        display: none;
    }

}

/* ==========================================================================
   PAGE LIVRES — VERSION FOND BLANC
   ========================================================================== */

.page-hero-books {
    background: #ffffff;
    color: #071426;
}


/* ==========================================================================
   DÉCORATIONS DE FOND
   ========================================================================== */

.page-hero-books::before {
    border-color: rgba(7, 20, 38, 0.06);
}

.page-hero-books::after {
    border-color: rgba(135, 189, 205, 0.14);
}


/* ==========================================================================
   EYEBROW — BIBLIOTHÈQUE
   ========================================================================== */

.books-hero-copy .eyebrow {
    color: #31586f;
}

.books-hero-copy .eyebrow::before {
    background: #87bdcd;
}


/* ==========================================================================
   GRAND TITRE
   ========================================================================== */

.books-hero-copy h1 {
    color: #071426;
}


/*
 * Partie émotionnelle du titre.
 * On conserve le bleu clair et l'italique
 * comme dans la section "Signature".
 */

.books-hero-copy h1 span {
    color: #77aebe;
}


/* ==========================================================================
   TEXTE D'INTRODUCTION
   ========================================================================== */

.books-hero-lead {
    color: rgba(7, 20, 38, 0.68);
}


/* ==========================================================================
   PROMESSE
   ========================================================================== */

.books-hero-promise {
    color: #31586f;
}

.books-hero-promise-line {
    background: #b8995a;
}


/* ==========================================================================
   SIGNATURE DÉCORATIVE
   ========================================================================== */

.books-hero-signature {
    color: rgba(49, 88, 111, 0.065);
}

/* ==========================================================================
   PAGE LIVRES — HERO BIBLIOTHÈQUE
   Fond blanc + visuel éditorial premium
   ========================================================================== */

.page-hero-books {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding:
        clamp(125px, 9vw, 165px)
        0
        clamp(95px, 8vw, 135px);

    background: #ffffff;
    color: #071426;
}


/* ==========================================================================
   DÉCORATION DISCRÈTE
   ========================================================================== */

.page-hero-books::before {
    content: "";

    position: absolute;
    z-index: 0;

    top: -260px;
    left: -260px;

    width: 540px;
    height: 540px;

    border: 1px solid rgba(7, 20, 38, 0.045);
    border-radius: 50%;

    pointer-events: none;
}


.page-hero-books::after {
    content: "";

    position: absolute;
    z-index: 0;

    top: 18px;
    right: -160px;

    width: 460px;
    height: 460px;

    border: 1px solid rgba(98, 152, 170, 0.10);
    border-radius: 50%;

    pointer-events: none;
}


/* ==========================================================================
   GRILLE
   ========================================================================== */

.books-hero-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(420px, 0.92fr);

    align-items: center;

    gap: clamp(65px, 7vw, 120px);
}


/* ==========================================================================
   COLONNE TEXTE
   ========================================================================== */

.books-hero-copy {
    max-width: 900px;
}


/* ==========================================================================
   EYEBROW
   ========================================================================== */

.books-hero-copy .eyebrow {
    display: flex;
    align-items: center;

    gap: 18px;

    margin-bottom: 30px;

    color: #31586f;

    font-size: 0.75rem;
    font-weight: 800;

    letter-spacing: 0.22em;
    text-transform: uppercase;
}


.books-hero-copy .eyebrow::before {
    content: "";

    display: block;

    width: 44px;
    height: 1px;

    background: #87bdcd;
}


/* ==========================================================================
   TITRE
   ========================================================================== */

.books-hero-copy h1 {
    max-width: 900px;

    margin:
        0
        0
        clamp(34px, 4vw, 48px);

    font-family: var(--font-serif, Georgia, serif);

    font-size: clamp(4rem, 6.2vw, 7rem);
    font-weight: 400;

    line-height: 0.92;
    letter-spacing: -0.055em;

    color: #071426;
}


.books-hero-copy h1 span {
    display: block;

    margin-top: 0.04em;

    color: #6298aa;

    font-style: italic;
    font-weight: 400;
}


/* ==========================================================================
   TEXTE INTRODUCTIF
   ========================================================================== */

.books-hero-lead {
    max-width: 760px;

    margin: 0;

    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
    line-height: 1.85;

    color: rgba(7, 20, 38, 0.66);
}


/* ==========================================================================
   COLONNE PHOTO
   ========================================================================== */

.books-hero-visual {
    position: relative;

    display: flex;
    justify-content: flex-end;
}


/* ==========================================================================
   CADRE PHOTO
   ========================================================================== */

.books-hero-photo {
    position: relative;

    width: min(100%, 590px);

    aspect-ratio: 0.84;

    overflow: visible;
}


/* ==========================================================================
   PHOTO
   ========================================================================== */

.books-hero-photo-image {
    position: relative;
    z-index: 1;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center 56%;

    border-radius:
        110px
        110px
        42px
        42px;

    box-shadow:
        0 38px 85px rgba(7, 20, 38, 0.17),
        0 12px 30px rgba(7, 20, 38, 0.10);
}


/* ==========================================================================
   DÉGRADÉ BAS DE PHOTO
   ========================================================================== */

.books-hero-photo::after {
    content: "";

    position: absolute;
    z-index: 2;

    inset: 0;

    pointer-events: none;

    border-radius:
        110px
        110px
        42px
        42px;

    background:
        linear-gradient(
            180deg,
            rgba(4, 17, 30, 0) 45%,
            rgba(4, 17, 30, 0.05) 58%,
            rgba(4, 17, 30, 0.22) 72%,
            rgba(4, 17, 30, 0.86) 100%
        );
}


/* ==========================================================================
   PETIT FILET DÉCORATIF
   ========================================================================== */

.books-hero-visual::before {
    content: "";

    position: absolute;

    z-index: 0;

    top: -24px;
    right: -24px;

    width: 46%;
    height: 38%;

    border-top: 1px solid rgba(184, 153, 90, 0.48);
    border-right: 1px solid rgba(184, 153, 90, 0.48);

    pointer-events: none;
}


/* ==========================================================================
   LOGO EN MÉDAILLON
   ========================================================================== */

.books-hero-logo {
    position: absolute;

    z-index: 4;

    top: 38px;
    right: -42px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: clamp(100px, 7vw, 130px);
    aspect-ratio: 1;

    padding: 14px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 20px 45px rgba(7, 20, 38, 0.20),
        0 4px 14px rgba(7, 20, 38, 0.08);
}


.books-hero-logo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* ==========================================================================
   LÉGENDE SUR LA PHOTO
   ========================================================================== */

.books-hero-caption {
    position: absolute;

    z-index: 4;

    left: 38px;
    right: 28px;
    bottom: 32px;

    display: flex;
    align-items: center;

    gap: 15px;

    color: rgba(255, 255, 255, 0.96);

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.22em;
    text-transform: uppercase;
}


.books-hero-caption-line {
    display: block;

    width: 42px;
    height: 1px;

    flex: 0 0 42px;

    background: #d2b46f;
}


/* ==========================================================================
   INTERACTION TRÈS LÉGÈRE
   ========================================================================== */

.books-hero-photo-image {
    transition:
        transform 800ms cubic-bezier(.2, .7, .2, 1),
        box-shadow 800ms ease;
}


@media (hover: hover) {

    .books-hero-photo:hover .books-hero-photo-image {
        transform: translateY(-4px);

        box-shadow:
            0 45px 95px rgba(7, 20, 38, 0.20),
            0 14px 34px rgba(7, 20, 38, 0.12);
    }

}


/* ==========================================================================
   TABLETTE LARGE
   ========================================================================== */

@media (max-width: 1100px) {

    .books-hero-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(360px, 0.8fr);

        gap: 55px;
    }


    .books-hero-copy h1 {
        font-size: clamp(3.8rem, 6.6vw, 5.9rem);
    }


    .books-hero-logo {
        right: -22px;
    }

}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width: 900px) {

    .page-hero-books {
        padding-top: 115px;
    }


    .books-hero-grid {
        grid-template-columns: 1fr;

        gap: 70px;
    }


    .books-hero-copy {
        max-width: 780px;
    }


    .books-hero-visual {
        justify-content: center;
    }


    .books-hero-photo {
        width: min(88%, 620px);

        margin: 0 auto;

        aspect-ratio: 0.88;
    }


    .books-hero-logo {
        top: 28px;
        right: -24px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    .page-hero-books {
        padding:
            100px
            0
            75px;
    }


    .books-hero-copy .eyebrow {
        margin-bottom: 22px;

        font-size: 0.66rem;
    }


    .books-hero-copy .eyebrow::before {
        width: 30px;
    }


    .books-hero-copy h1 {
        margin-bottom: 28px;

        font-size: clamp(3.1rem, 14vw, 4.7rem);
        line-height: 0.94;
    }


    .books-hero-lead {
        font-size: 1rem;
        line-height: 1.75;
    }


    .books-hero-photo {
        width: calc(100% - 20px);

        aspect-ratio: 0.82;
    }


    .books-hero-photo-image,
    .books-hero-photo::after {
        border-radius:
            56px
            56px
            26px
            26px;
    }


    .books-hero-logo {
        top: 20px;
        right: -8px;

        width: 82px;

        padding: 10px;
    }


    .books-hero-caption {
        left: 22px;
        right: 18px;
        bottom: 22px;

        font-size: 0.58rem;

        letter-spacing: 0.15em;
    }


    .books-hero-caption-line {
        width: 28px;
        flex-basis: 28px;
    }


    .books-hero-visual::before {
        display: none;
    }

}

/* ==========================================================================
   PAGE LIVRES — CATALOGUE ÉDITORIAL
   ========================================================================== */

.library-catalog {
    padding:
        clamp(90px, 8vw, 140px)
        0
        clamp(110px, 9vw, 160px);

    background: #fbfaf7;
}


/* ==========================================================================
   EN-TÊTE
   ========================================================================== */

.library-catalog-head {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, 0.65fr);

    align-items: end;

    gap: clamp(40px, 7vw, 110px);

    margin-bottom: clamp(50px, 6vw, 80px);
}


.library-catalog-head .eyebrow {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 20px;

    color: #31586f;

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.20em;
    text-transform: uppercase;
}


.library-catalog-head .eyebrow::before {
    content: "";

    width: 38px;
    height: 1px;

    background: #b8995a;
}


.library-catalog-head h2 {
    max-width: 760px;

    margin: 0;

    font-family: var(--font-serif, Georgia, serif);

    font-size: clamp(3rem, 5vw, 5.6rem);
    font-weight: 400;

    line-height: 0.95;

    letter-spacing: -0.045em;

    color: #071426;
}


.library-catalog-head h2 span {
    display: block;

    color: #6298aa;

    font-style: italic;
}


.library-catalog-head > p {
    max-width: 490px;

    margin: 0 0 5px;

    font-size: 1rem;
    line-height: 1.8;

    color: rgba(7, 20, 38, 0.60);
}


/* ==========================================================================
   FILTRES
   ========================================================================== */

.library-filters {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: clamp(38px, 5vw, 60px);
}


.library-filter {
    appearance: none;

    min-height: 46px;

    padding: 0 22px;

    border:
        1px solid
        rgba(7, 20, 38, 0.14);

    border-radius: 999px;

    background: transparent;

    color: #071426;

    font: inherit;

    font-size: 0.78rem;
    font-weight: 800;

    cursor: pointer;

    transition:
        background 220ms ease,
        color 220ms ease,
        border-color 220ms ease,
        transform 220ms ease;
}


.library-filter:hover {
    border-color:
        rgba(7, 20, 38, 0.34);

    transform: translateY(-1px);
}


.library-filter.is-active {
    border-color: #071426;

    background: #071426;

    color: #ffffff;
}


/* ==========================================================================
   GRILLE
   ========================================================================== */

.library-catalog-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: clamp(24px, 3vw, 42px);
}


/* ==========================================================================
   CARTE
   ========================================================================== */

.library-catalog-card {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(190px, 0.78fr)
        minmax(0, 1.22fr);

    min-height: 455px;

    overflow: hidden;

    border:
        1px solid
        rgba(7, 20, 38, 0.08);

    border-radius: 30px;

    background: #ffffff;

    box-shadow:
        0 24px 60px rgba(7, 20, 38, 0.06);

    transition:
        transform 420ms cubic-bezier(.2, .7, .2, 1),
        box-shadow 420ms ease,
        border-color 420ms ease;
}


.library-catalog-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(98, 152, 170, 0.26);

    box-shadow:
        0 34px 80px rgba(7, 20, 38, 0.11);
}


.library-catalog-card.is-hidden {
    display: none;
}


/* ==========================================================================
   VISUEL
   ========================================================================== */

.library-book-visual {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 100%;

    padding:
        38px
        24px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(135, 189, 205, 0.16),
            transparent 52%
        ),
        #f2f5f5;

    text-decoration: none;
}


/* numéro décoratif */

.library-book-number {
    position: absolute;

    top: 20px;
    left: 22px;

    font-family: var(--font-serif, Georgia, serif);

    font-size: 0.82rem;
    font-style: italic;

    color: rgba(7, 20, 38, 0.35);
}


/* couverture */

.library-book-visual img {
    position: relative;
    z-index: 2;

    display: block;

    width: min(100%, 210px);
    height: auto;

    max-height: 340px;

    object-fit: contain;

    border-radius: 3px;

    box-shadow:
        0 28px 50px rgba(7, 20, 38, 0.20),
        0 8px 20px rgba(7, 20, 38, 0.12);

    transition:
        transform 520ms cubic-bezier(.2, .7, .2, 1),
        box-shadow 520ms ease;
}


.library-catalog-card:hover
.library-book-visual img {
    transform:
        translateY(-5px)
        rotate(-1.2deg)
        scale(1.025);

    box-shadow:
        0 35px 65px rgba(7, 20, 38, 0.25),
        0 10px 22px rgba(7, 20, 38, 0.12);
}


/* ==========================================================================
   CONTENU
   ========================================================================== */

.library-book-copy {
    display: flex;
    flex-direction: column;

    min-width: 0;

    padding:
        clamp(34px, 4vw, 52px)
        clamp(30px, 3.4vw, 48px)
        34px;
}


/* ==========================================================================
   MÉTADONNÉES
   ========================================================================== */

.library-book-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 28px;
}


.library-book-meta span {
    display: inline-flex;
    align-items: center;

    min-height: 31px;

    padding: 0 12px;

    border:
        1px solid
        rgba(7, 20, 38, 0.12);

    border-radius: 999px;

    color: #31586f;

    font-size: 0.65rem;
    font-weight: 800;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}


/* ==========================================================================
   TITRE
   ========================================================================== */

.library-book-copy h3 {
    margin:
        0
        0
        24px;

    font-family: var(--font-serif, Georgia, serif);

    font-size: clamp(2rem, 2.6vw, 3.2rem);
    font-weight: 400;

    line-height: 1;

    letter-spacing: -0.035em;

    color: #071426;
}


.library-book-copy h3 a {
    color: inherit;
    text-decoration: none;
}


/* ==========================================================================
   DESCRIPTION
   ========================================================================== */

.library-book-copy > p {
    max-width: 430px;

    margin:
        0
        0
        34px;

    font-size: 0.96rem;
    line-height: 1.75;

    color: rgba(7, 20, 38, 0.60);
}


/* ==========================================================================
   CTA
   ========================================================================== */

.library-book-link {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    width: 100%;

    margin-top: auto;

    padding:
        20px
        0
        4px;

    border-top:
        1px solid
        rgba(7, 20, 38, 0.10);

    color: #071426;

    font-size: 0.82rem;
    font-weight: 800;

    text-decoration: none;

    transition:
        color 220ms ease;
}


.library-book-link-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    flex: 0 0 40px;

    border-radius: 50%;

    background: #071426;

    color: #ffffff;

    transition:
        transform 260ms ease,
        background 260ms ease;
}


.library-book-link:hover {
    color: #31586f;
}


.library-book-link:hover
.library-book-link-arrow {
    transform:
        translateX(4px);

    background: #31586f;
}


/* ==========================================================================
   ÉCRANS MOYENS
   ========================================================================== */

@media (max-width: 1180px) {

    .library-catalog-card {
        grid-template-columns:
            minmax(170px, 0.72fr)
            minmax(0, 1.28fr);
    }


    .library-book-copy {
        padding:
            34px
            28px
            30px;
    }


    .library-book-copy h3 {
        font-size: clamp(1.9rem, 2.8vw, 2.7rem);
    }

}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width: 900px) {

    .library-catalog-head {
        grid-template-columns: 1fr;

        gap: 24px;
    }


    .library-catalog-head > p {
        max-width: 660px;
    }


    .library-catalog-grid {
        grid-template-columns: 1fr;
    }


    .library-catalog-card {
        grid-template-columns:
            minmax(200px, 0.72fr)
            minmax(0, 1.28fr);

        min-height: 420px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 620px) {

    .library-catalog {
        padding:
            75px
            0
            100px;
    }


    .library-catalog-head {
        margin-bottom: 40px;
    }


    .library-catalog-head h2 {
        font-size: clamp(2.8rem, 13vw, 4rem);
    }


    .library-filters {
        gap: 8px;

        margin-bottom: 36px;
    }


    .library-filter {
        min-height: 42px;

        padding: 0 16px;

        font-size: 0.70rem;
    }


    .library-catalog-grid {
        gap: 24px;
    }


    .library-catalog-card {
        display: flex;
        flex-direction: column;

        min-height: 0;

        border-radius: 24px;
    }


    .library-book-visual {
        min-height: 360px;

        padding:
            40px
            30px;
    }


    .library-book-visual img {
        width: min(70%, 230px);

        max-height: 300px;
    }


    .library-book-copy {
        padding:
            30px
            26px
            28px;
    }


    .library-book-meta {
        margin-bottom: 22px;
    }


    .library-book-copy h3 {
        margin-bottom: 20px;

        font-size: clamp(2.3rem, 10vw, 3rem);
    }


    .library-book-copy > p {
        margin-bottom: 30px;
    }

}

/* ==========================================================================
   BIBLIOTHÈQUE — COULEUR PROPRE À CHAQUE LIVRE
   ========================================================================== */


/* ==========================================================================
   CARTE
   ========================================================================== */

.library-catalog-card {
    --book-accent: #d2b46f;

    background: #fffaf2;

    border-color:
        color-mix(
            in srgb,
            var(--book-accent) 18%,
            transparent
        );
}


/* ==========================================================================
   ZONE COUVERTURE
   ========================================================================== */

.library-book-visual {
    position: relative;

    background:
        radial-gradient(
            circle at 50% 26%,
            rgba(255, 255, 255, 0.38),
            transparent 46%
        ),
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--book-accent) 68%,
                white
            ),
            color-mix(
                in srgb,
                var(--book-accent) 88%,
                #071426
            )
        );
}


/*
 * Léger voile pour donner davantage
 * de profondeur derrière la couverture.
 */

.library-book-visual::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.12),
            transparent 38%,
            rgba(7, 20, 38, 0.08)
        );
}


/* ==========================================================================
   NUMÉRO
   ========================================================================== */

.library-book-number {
    z-index: 3;

    color:
        color-mix(
            in srgb,
            var(--book-accent) 45%,
            #071426
        );
}


/* ==========================================================================
   COUVERTURE
   ========================================================================== */

.library-book-visual img {
    position: relative;
    z-index: 2;

    box-shadow:
        0 32px 60px
            color-mix(
                in srgb,
                var(--book-accent) 24%,
                rgba(7, 20, 38, 0.28)
            ),
        0 10px 24px rgba(7, 20, 38, 0.16);
}


/* ==========================================================================
   PARTIE TEXTE
   ========================================================================== */

.library-book-copy {
    background:
        linear-gradient(
            145deg,
            #fffdf9 0%,
            #fbf7ef 100%
        );
}


/* ==========================================================================
   BADGES
   ========================================================================== */

.library-book-meta span {
    border-color:
        color-mix(
            in srgb,
            var(--book-accent) 35%,
            rgba(7, 20, 38, 0.10)
        );

    background:
        color-mix(
            in srgb,
            var(--book-accent) 10%,
            white
        );

    color:
        color-mix(
            in srgb,
            var(--book-accent) 52%,
            #071426
        );
}


/* ==========================================================================
   CTA
   ========================================================================== */

.library-book-link-arrow {
    background:
        color-mix(
            in srgb,
            var(--book-accent) 72%,
            #071426
        );

    color: #ffffff;
}


.library-book-link:hover {
    color:
        color-mix(
            in srgb,
            var(--book-accent) 58%,
            #071426
        );
}


.library-book-link:hover
.library-book-link-arrow {
    background: #071426;
}


/* ==========================================================================
   HOVER CARTE
   ========================================================================== */

.library-catalog-card:hover {
    border-color:
        color-mix(
            in srgb,
            var(--book-accent) 38%,
            transparent
        );

    box-shadow:
        0 36px 85px
            color-mix(
                in srgb,
                var(--book-accent) 10%,
                rgba(7, 20, 38, 0.12)
            );

    transform: translateY(-7px);
}
/* ==========================================================================
   PAGE LIVRES — CATALOGUE ÉDITORIAL
   Couleur dynamique propre à chaque œuvre
   ========================================================================== */


/* ==========================================================================
   SECTION
   ========================================================================== */

.library-catalog {
    padding:
        clamp(90px, 8vw, 140px)
        0
        clamp(110px, 9vw, 160px);

    background: #f2eee6;
}


/* ==========================================================================
   EN-TÊTE
   ========================================================================== */

.library-catalog-head {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(300px, 0.65fr);

    align-items: end;

    gap: clamp(40px, 7vw, 110px);

    margin-bottom: clamp(50px, 6vw, 80px);
}


.library-catalog-head .eyebrow {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 20px;

    color: #31586f;

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.20em;
    text-transform: uppercase;
}


.library-catalog-head .eyebrow::before {
    content: "";

    width: 38px;
    height: 1px;

    background: #b8995a;
}


.library-catalog-head h2 {
    max-width: 760px;

    margin: 0;

    font-family: var(--font-serif, Georgia, serif);

    font-size: clamp(3rem, 5vw, 5.6rem);
    font-weight: 400;

    line-height: 0.95;

    letter-spacing: -0.045em;

    color: #071426;
}


.library-catalog-head h2 span {
    display: block;

    color: #6298aa;

    font-style: italic;
}


.library-catalog-head > p {
    max-width: 490px;

    margin: 0 0 5px;

    font-size: 1rem;
    line-height: 1.8;

    color: rgba(7, 20, 38, 0.60);
}


/* ==========================================================================
   FILTRES
   ========================================================================== */

.library-filters {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: clamp(38px, 5vw, 60px);
}


.library-filter {
    appearance: none;

    min-height: 46px;

    padding: 0 22px;

    border:
        1px solid
        rgba(7, 20, 38, 0.14);

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.62);

    color: #071426;

    font: inherit;

    font-size: 0.78rem;
    font-weight: 800;

    cursor: pointer;

    transition:
        background 220ms ease,
        color 220ms ease,
        border-color 220ms ease,
        transform 220ms ease;
}


.library-filter:hover {
    border-color:
        rgba(7, 20, 38, 0.34);

    background: #ffffff;

    transform: translateY(-1px);
}


.library-filter.is-active {
    border-color: #071426;

    background: #071426;

    color: #ffffff;
}


/* ==========================================================================
   GRILLE
   ========================================================================== */

.library-catalog-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: clamp(26px, 3vw, 44px);
}


/* ==========================================================================
   CARTE
   ========================================================================== */

.library-catalog-card {
    --book-accent: #d2b46f;

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(200px, 0.80fr)
        minmax(0, 1.20fr);

    min-height: 470px;

    overflow: hidden;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--book-accent) 16%,
            rgba(7, 20, 38, 0.08)
        );

    border-radius: 32px;

    background: #fffaf3;

    box-shadow:
        0 24px 60px rgba(7, 20, 38, 0.07);

    transition:
        transform 420ms cubic-bezier(.2, .7, .2, 1),
        box-shadow 420ms ease,
        border-color 420ms ease;
}


.library-catalog-card:hover {
    transform: translateY(-7px);

    border-color:
        color-mix(
            in srgb,
            var(--book-accent) 42%,
            rgba(7, 20, 38, 0.10)
        );

    box-shadow:
        0 38px 86px
        color-mix(
            in srgb,
            var(--book-accent) 12%,
            rgba(7, 20, 38, 0.14)
        );
}


.library-catalog-card.is-hidden {
    display: none;
}


/* ==========================================================================
   ZONE VISUELLE
   ========================================================================== */

.library-book-visual {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 100%;

    padding:
        44px
        26px;

    overflow: hidden;

    text-decoration: none;

    /*
     * Fallback pour les navigateurs
     * ne prenant pas color-mix en charge.
     */

    background: var(--book-accent);

    background:
        radial-gradient(
            circle at 48% 22%,
            rgba(255, 255, 255, 0.48),
            transparent 44%
        ),
        linear-gradient(
            150deg,
            color-mix(
                in srgb,
                var(--book-accent) 76%,
                white
            )
            0%,
            var(--book-accent)
            54%,
            color-mix(
                in srgb,
                var(--book-accent) 72%,
                #071426
            )
            100%
        );
}


/* ==========================================================================
   PROFONDEUR DU VISUEL
   ========================================================================== */

.library-book-visual::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0) 40%,
            rgba(7, 20, 38, 0.05) 70%,
            rgba(7, 20, 38, 0.15) 100%
        );
}


/* lumière décorative */

.library-book-visual::after {
    content: "";

    position: absolute;

    z-index: 0;

    width: 270px;
    height: 270px;

    top: 50%;
    left: 50%;

    border:
        1px solid
        rgba(255, 255, 255, 0.20);

    border-radius: 50%;

    transform:
        translate(-50%, -50%);

    pointer-events: none;
}


/* ==========================================================================
   NUMÉRO
   ========================================================================== */

.library-book-number {
    position: absolute;

    z-index: 3;

    top: 22px;
    left: 24px;

    font-family: var(--font-serif, Georgia, serif);

    font-size: 0.82rem;
    font-style: italic;

    color:
        color-mix(
            in srgb,
            var(--book-accent) 32%,
            #071426
        );
}


/* ==========================================================================
   COUVERTURE
   ========================================================================== */

.library-book-visual img {
    position: relative;

    z-index: 2;

    display: block;

    width: min(100%, 220px);
    height: auto;

    max-height: 350px;

    object-fit: contain;

    border-radius: 4px;

    box-shadow:
        0 34px 60px
        color-mix(
            in srgb,
            var(--book-accent) 18%,
            rgba(7, 20, 38, 0.28)
        ),
        0 10px 22px rgba(7, 20, 38, 0.18);

    transition:
        transform 520ms cubic-bezier(.2, .7, .2, 1),
        box-shadow 520ms ease;
}


.library-catalog-card:hover
.library-book-visual img {
    transform:
        translateY(-7px)
        rotate(-1.2deg)
        scale(1.025);

    box-shadow:
        0 42px 76px
        color-mix(
            in srgb,
            var(--book-accent) 22%,
            rgba(7, 20, 38, 0.32)
        ),
        0 12px 26px rgba(7, 20, 38, 0.16);
}


/* ==========================================================================
   PARTIE TEXTE
   ========================================================================== */

.library-book-copy {
    display: flex;
    flex-direction: column;

    min-width: 0;

    padding:
        clamp(36px, 4vw, 54px)
        clamp(30px, 3.4vw, 48px)
        34px;

    background:
        linear-gradient(
            145deg,
            #fffdf9 0%,
            #faf5eb 100%
        );
}


/* ==========================================================================
   MÉTADONNÉES
   ========================================================================== */

.library-book-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 28px;
}


.library-book-meta span {
    display: inline-flex;
    align-items: center;

    min-height: 31px;

    padding: 0 12px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--book-accent) 32%,
            rgba(7, 20, 38, 0.10)
        );

    border-radius: 999px;

    background:
        color-mix(
            in srgb,
            var(--book-accent) 9%,
            white
        );

    color:
        color-mix(
            in srgb,
            var(--book-accent) 50%,
            #071426
        );

    font-size: 0.65rem;
    font-weight: 800;

    letter-spacing: 0.14em;
    text-transform: uppercase;
}


/* ==========================================================================
   TITRE
   ========================================================================== */

.library-book-copy h3 {
    margin:
        0
        0
        24px;

    font-family: var(--font-serif, Georgia, serif);

    font-size: clamp(2rem, 2.6vw, 3.2rem);
    font-weight: 400;

    line-height: 1;

    letter-spacing: -0.035em;

    color: #071426;
}


.library-book-copy h3 a {
    color: inherit;

    text-decoration: none;
}


/* ==========================================================================
   DESCRIPTION
   ========================================================================== */

.library-book-copy > p {
    max-width: 430px;

    margin:
        0
        0
        34px;

    font-size: 0.96rem;
    line-height: 1.75;

    color: rgba(7, 20, 38, 0.60);
}


/* ==========================================================================
   CTA
   ========================================================================== */

.library-book-link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    width: 100%;

    margin-top: auto;

    padding:
        20px
        0
        4px;

    border-top:
        1px solid
        color-mix(
            in srgb,
            var(--book-accent) 20%,
            rgba(7, 20, 38, 0.10)
        );

    color: #071426;

    font-size: 0.82rem;
    font-weight: 800;

    text-decoration: none;

    transition:
        color 220ms ease;
}


/* ==========================================================================
   FLÈCHE
   ========================================================================== */

.library-book-link-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border-radius: 50%;

    background:
        color-mix(
            in srgb,
            var(--book-accent) 68%,
            #071426
        );

    color: #ffffff;

    transition:
        transform 260ms ease,
        background 260ms ease;
}


.library-book-link:hover {
    color:
        color-mix(
            in srgb,
            var(--book-accent) 58%,
            #071426
        );
}


.library-book-link:hover
.library-book-link-arrow {
    transform: translateX(5px);

    background: #071426;

    color: #ffffff;
}


/* ==========================================================================
   ÉCRANS MOYENS
   ========================================================================== */

@media (max-width: 1180px) {

    .library-catalog-card {
        grid-template-columns:
            minmax(180px, 0.74fr)
            minmax(0, 1.26fr);
    }


    .library-book-copy {
        padding:
            34px
            28px
            30px;
    }


    .library-book-copy h3 {
        font-size:
            clamp(1.9rem, 2.8vw, 2.7rem);
    }

}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width: 900px) {

    .library-catalog-head {
        grid-template-columns: 1fr;

        gap: 24px;
    }


    .library-catalog-head > p {
        max-width: 660px;
    }


    .library-catalog-grid {
        grid-template-columns: 1fr;
    }


    .library-catalog-card {
        grid-template-columns:
            minmax(210px, 0.72fr)
            minmax(0, 1.28fr);

        min-height: 430px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 620px) {

    .library-catalog {
        padding:
            75px
            0
            100px;
    }


    .library-catalog-head {
        margin-bottom: 40px;
    }


    .library-catalog-head h2 {
        font-size:
            clamp(2.8rem, 13vw, 4rem);
    }


    .library-filters {
        gap: 8px;

        margin-bottom: 36px;
    }


    .library-filter {
        min-height: 42px;

        padding: 0 16px;

        font-size: 0.70rem;
    }


    .library-catalog-grid {
        gap: 26px;
    }


    .library-catalog-card {
        display: flex;
        flex-direction: column;

        min-height: 0;

        border-radius: 26px;
    }


    .library-book-visual {
        min-height: 390px;

        padding:
            44px
            30px;
    }


    .library-book-visual img {
        width: min(70%, 235px);

        max-height: 310px;
    }


    .library-book-copy {
        padding:
            30px
            26px
            28px;
    }


    .library-book-meta {
        margin-bottom: 22px;
    }


    .library-book-copy h3 {
        margin-bottom: 20px;

        font-size:
            clamp(2.3rem, 10vw, 3rem);
    }


    .library-book-copy > p {
        margin-bottom: 30px;
    }

}

/* ==========================================================================
   HERO BIBLIOTHÈQUE — HISTOIRE DU JOUR
   ========================================================================== */

.books-daily-story {
    --daily-accent: #6298aa;

    position: relative;

    max-width: 700px;

    margin-top: clamp(34px, 4vw, 50px);

    padding:
        clamp(30px, 3vw, 42px)
        clamp(28px, 3.5vw, 46px);

    overflow: hidden;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--daily-accent) 24%,
            rgba(7, 20, 38, 0.08)
        );

    border-radius: 26px;

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--daily-accent) 7%,
                #ffffff
            ),
            #fffdf9
        );

    box-shadow:
        0 22px 60px rgba(7, 20, 38, 0.06);
}


/* ==========================================================================
   ACCENT DÉCORATIF
   ========================================================================== */

.books-daily-story::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 5px;
    height: 100%;

    background:
        var(--daily-accent);
}


/* Halo extrêmement discret */

.books-daily-story::after {
    content: "";

    position: absolute;

    top: -100px;
    right: -100px;

    width: 240px;
    height: 240px;

    border-radius: 50%;

    background:
        color-mix(
            in srgb,
            var(--daily-accent) 9%,
            transparent
        );

    pointer-events: none;
}


/* ==========================================================================
   LABEL — HISTOIRE DU JOUR
   ========================================================================== */

.books-daily-story-label {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 22px;

    color:
        color-mix(
            in srgb,
            var(--daily-accent) 62%,
            #071426
        );

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.20em;
    text-transform: uppercase;
}


.books-daily-story-label > span {
    display: block;

    width: 34px;
    height: 1px;

    background:
        var(--daily-accent);
}


/* ==========================================================================
   PERSONNAGE
   ========================================================================== */

.books-daily-character {
    position: relative;
    z-index: 2;

    margin:
        0
        0
        12px;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(1.9rem, 2.6vw, 3.1rem);

    font-weight: 400;

    line-height: 1.05;

    letter-spacing: -0.035em;

    color: #071426;
}


.books-daily-character span {
    color:
        color-mix(
            in srgb,
            var(--daily-accent) 65%,
            #071426
        );

    font-style: italic;
}


/* ==========================================================================
   TITRE DU LIVRE
   ========================================================================== */

.books-daily-book {
    position: relative;
    z-index: 2;

    margin:
        0
        0
        20px;

    color: rgba(7, 20, 38, 0.55);

    font-size: 0.88rem;
    line-height: 1.6;
}


.books-daily-book em {
    color: #071426;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size: 1.04rem;
}


/* ==========================================================================
   PROMESSE / RÉSUMÉ
   ========================================================================== */

.books-daily-description {
    position: relative;
    z-index: 2;

    max-width: 610px;

    margin:
        0
        0
        28px;

    font-size: 1rem;
    line-height: 1.8;

    color: rgba(7, 20, 38, 0.68);
}


/* ==========================================================================
   CTA
   ========================================================================== */

.books-daily-link {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;

    gap: 16px;

    color: #071426;

    font-size: 0.82rem;
    font-weight: 800;

    text-decoration: none;
}


.books-daily-link-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background:
        color-mix(
            in srgb,
            var(--daily-accent) 70%,
            #071426
        );

    color: #ffffff;

    transition:
        transform 250ms ease,
        background 250ms ease;
}


.books-daily-link:hover
.books-daily-link-arrow {
    transform: translateX(5px);

    background: #071426;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    .books-daily-story {
        margin-top: 30px;

        padding:
            28px
            24px;

        border-radius: 22px;
    }


    .books-daily-character {
        font-size:
            clamp(1.8rem, 9vw, 2.5rem);
    }


    .books-daily-description {
        font-size: 0.95rem;
        line-height: 1.72;
    }

}

/* ==========================================================================
   BIBLIOTHÈQUE — HISTOIRES SUCCESSIVES
   ========================================================================== */

.books-story-sequence {
    --story-accent: #6298aa;

    position: relative;

    max-width: 700px;

    margin-top: clamp(34px, 4vw, 48px);

    padding:
        clamp(28px, 3vw, 38px)
        clamp(28px, 3.5vw, 44px)
        26px;

    overflow: hidden;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--story-accent) 24%,
            rgba(7, 20, 38, 0.08)
        );

    border-radius: 26px;

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--story-accent) 7%,
                #ffffff
            ),
            #fffdf9
        );

    box-shadow:
        0 22px 58px rgba(7, 20, 38, 0.06);

    transition:
        border-color 600ms ease,
        background 600ms ease;
}


/* ==========================================================================
   ACCENT GAUCHE
   ========================================================================== */

.books-story-sequence::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 5px;

    background: var(--story-accent);

    transition:
        background 600ms ease;
}


/* ==========================================================================
   HAUT
   ========================================================================== */

.books-story-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;
}


.books-story-kicker {
    color:
        color-mix(
            in srgb,
            var(--story-accent) 58%,
            #071426
        );

    font-size: 0.67rem;
    font-weight: 800;

    letter-spacing: 0.20em;
    text-transform: uppercase;
}


.books-story-counter {
    display: flex;

    gap: 5px;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size: 0.78rem;

    color: rgba(7, 20, 38, 0.40);
}


/* ==========================================================================
   TRANSITION DU CONTENU
   ========================================================================== */

.books-story-content {
    opacity: 1;

    transform: translateY(0);

    transition:
        opacity 280ms ease,
        transform 280ms ease;
}


.books-story-content.is-changing {
    opacity: 0;

    transform: translateY(12px);
}


.books-story-content.is-entering {
    opacity: 0;

    transform: translateY(-10px);
}


/* ==========================================================================
   PERSONNAGE
   ========================================================================== */

.books-story-character {
    margin:
        0
        0
        10px;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(1.9rem, 2.5vw, 3rem);

    line-height: 1.05;

    letter-spacing: -0.035em;

    color: #071426;
}


.books-story-character strong {
    color:
        color-mix(
            in srgb,
            var(--story-accent) 66%,
            #071426
        );

    font-weight: 400;
    font-style: italic;
}


/* ==========================================================================
   LIVRE
   ========================================================================== */

.books-story-book {
    margin:
        0
        0
        18px;

    font-size: 0.88rem;

    color: rgba(7, 20, 38, 0.50);
}


.books-story-book em {
    color: #071426;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size: 1.05rem;
}


/* ==========================================================================
   TEXTE
   ========================================================================== */

.books-story-description {
    max-width: 600px;

    margin:
        0
        0
        26px;

    font-size: 0.98rem;
    line-height: 1.75;

    color: rgba(7, 20, 38, 0.66);
}


/* ==========================================================================
   BAS
   ========================================================================== */

.books-story-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;
}


/* ==========================================================================
   CTA
   ========================================================================== */

.books-story-link {
    display: inline-flex;
    align-items: center;

    gap: 14px;

    color: #071426;

    font-size: 0.80rem;
    font-weight: 800;

    text-decoration: none;
}


.books-story-link-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background:
        color-mix(
            in srgb,
            var(--story-accent) 68%,
            #071426
        );

    color: #ffffff;

    transition:
        transform 250ms ease,
        background 250ms ease;
}


.books-story-link:hover
.books-story-link-arrow {
    transform: translateX(4px);

    background: #071426;
}


/* ==========================================================================
   FLÈCHES DE NAVIGATION
   ========================================================================== */

.books-story-controls {
    display: flex;

    gap: 8px;
}


.books-story-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    padding: 0;

    border:
        1px solid
        rgba(7, 20, 38, 0.12);

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.72);

    color: #071426;

    font: inherit;

    cursor: pointer;

    transition:
        background 220ms ease,
        color 220ms ease,
        transform 220ms ease;
}


.books-story-control:hover {
    background: #071426;

    color: #ffffff;

    transform: translateY(-1px);
}


/* ==========================================================================
   PROGRESSION
   ========================================================================== */

.books-story-progress {
    height: 2px;

    margin-top: 24px;

    overflow: hidden;

    background: rgba(7, 20, 38, 0.08);
}


.books-story-progress span {
    display: block;

    width: 100%;
    height: 100%;

    transform-origin: left center;

    background: var(--story-accent);
}


@keyframes booksStoryProgress {

    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    .books-story-sequence {
        padding:
            26px
            23px
            22px;

        border-radius: 22px;
    }


    .books-story-character {
        font-size:
            clamp(1.8rem, 9vw, 2.5rem);
    }


    .books-story-footer {
        align-items: flex-end;
    }


    .books-story-link {
        max-width: 180px;
    }

}

/* ==========================================================================
   HERO LIVRES — HISTOIRE EN VEDETTE, VERSION COMPACTE
   ========================================================================== */


/* ==========================================================================
   TITRE DU HERO — LÉGÈREMENT MOINS MASSIF
   ========================================================================== */

.books-hero-copy h1 {
    max-width: 820px;

    margin-bottom: 28px;

    font-size: clamp(3.8rem, 5.8vw, 6.4rem);
    line-height: 0.92;
}


/* ==========================================================================
   BLOC HISTOIRE — PLUS FIN, PLUS ÉDITORIAL
   ========================================================================== */

.books-story-sequence {
    position: relative;

    max-width: 570px;

    margin-top: 28px;

    padding:
        22px
        26px
        18px;

    border-radius: 20px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--story-accent) 22%,
            rgba(7, 20, 38, 0.07)
        );

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--story-accent) 5%,
                #ffffff
            ),
            #fffdf9
        );

    box-shadow:
        0 14px 36px rgba(7, 20, 38, 0.045);
}


/* Petit accent vertical */

.books-story-sequence::before {
    width: 3px;
}


/* ==========================================================================
   HAUT DU BLOC
   ========================================================================== */

.books-story-topline {
    margin-bottom: 14px;
}


.books-story-kicker {
    font-size: 0.60rem;
    letter-spacing: 0.18em;
}


.books-story-counter {
    font-size: 0.68rem;
}


/* ==========================================================================
   PERSONNAGE
   ========================================================================== */

.books-story-character {
    margin-bottom: 6px;

    font-size: clamp(1.45rem, 1.8vw, 2rem);
    line-height: 1.08;
}


/* ==========================================================================
   LIVRE
   ========================================================================== */

.books-story-book {
    margin-bottom: 12px;

    font-size: 0.78rem;
}


.books-story-book em {
    font-size: 0.92rem;
}


/* ==========================================================================
   RÉSUMÉ
   ========================================================================== */

.books-story-description {
    max-width: 500px;

    margin-bottom: 18px;

    font-size: 0.88rem;
    line-height: 1.6;

    color: rgba(7, 20, 38, 0.64);

    /*
     * Évite qu'un résumé particulièrement long
     * transforme à nouveau le teaser en gros bloc.
     */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    overflow: hidden;
}


/* ==========================================================================
   BAS DU BLOC
   ========================================================================== */

.books-story-footer {
    gap: 16px;
}


/* CTA */

.books-story-link {
    gap: 10px;

    font-size: 0.72rem;
}


.books-story-link-arrow {
    width: 32px;
    height: 32px;

    flex: 0 0 32px;
}


/* Navigation */

.books-story-controls {
    gap: 6px;
}


.books-story-control {
    width: 32px;
    height: 32px;

    font-size: 0.78rem;
}


/* ==========================================================================
   BARRE DE PROGRESSION
   ========================================================================== */

.books-story-progress {
    height: 1px;

    margin-top: 16px;
}


/* ==========================================================================
   PHOTO — ON LA LAISSE DOMINER DAVANTAGE
   ========================================================================== */

.books-hero-grid {
    align-items: center;

    gap: clamp(55px, 6vw, 100px);
}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width: 900px) {

    .books-story-sequence {
        max-width: 620px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    .books-hero-copy h1 {
        font-size: clamp(3rem, 13vw, 4.5rem);
        margin-bottom: 24px;
    }


    .books-story-sequence {
        max-width: 100%;

        margin-top: 24px;

        padding:
            20px
            20px
            16px;

        border-radius: 18px;
    }


    .books-story-character {
        font-size: 1.55rem;
    }


    .books-story-description {
        font-size: 0.85rem;

        -webkit-line-clamp: 4;
    }


    .books-story-footer {
        align-items: center;
    }

}

/* ==========================================================================
   HERO LIVRES — TITRE SUR 2 LIGNES MAXIMUM
   ========================================================================== */

.books-hero-title {
    width: max-content;
    max-width: 100%;

    margin:
        0
        0
        28px;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(3.4rem, 5.1vw, 6.2rem);

    font-weight: 400;

    line-height: 0.94;

    letter-spacing: -0.055em;

    color: #071426;
}


/* Ligne 1 */

.books-hero-title-main {
    display: block;

    white-space: nowrap;
}


/* Ligne 2 */

.books-hero-title-accent {
    display: block;

    margin-top: 0.08em;

    white-space: nowrap;

    color: #6298aa;

    font-style: italic;
    font-weight: 400;
}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width: 1100px) {

    .books-hero-title {
        font-size:
            clamp(3.2rem, 5.4vw, 5rem);
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    .books-hero-title {
        font-size:
            clamp(2.35rem, 10.5vw, 3.5rem);

        line-height: 0.96;
    }

}

.books-hero-title {
    margin: 0 0 26px;

    font-family: var(--font-serif, Georgia, serif);
    font-size: clamp(3.5rem, 5.1vw, 5.9rem);
    font-weight: 400;

    line-height: 0.93;
    letter-spacing: -0.05em;
}

.books-hero-title-main {
    display: block;

    color: #071426;

    font-style: normal;
    white-space: nowrap;
}

.books-hero-title-accent {
    display: block;

    margin-top: 0.05em;

    color: #6298aa;

    font-style: italic;
    font-weight: 400;

    white-space: nowrap;
}

/* ==========================================================================
   HERO BIBLIOTHÈQUE — TITRE FINAL SUR DEUX LIGNES
   ========================================================================== */

.books-hero-title {
    width: 100%;
    max-width: 760px;

    margin:
        0
        0
        26px;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(3.5rem, 4.7vw, 5.5rem);

    font-weight: 400;

    line-height: 0.92;

    letter-spacing: -0.055em;
}


/* ==========================================================================
   LIGNE 1 — BLEU NUIT
   ========================================================================== */

.books-hero-copy .books-hero-title-main {
    display: block;

    margin: 0;

    color: #071426 !important;

    font-style: normal !important;
    font-weight: 400;

    white-space: nowrap;
}


/* ==========================================================================
   LIGNE 2 — BLEU CLAIR / ITALIQUE
   ========================================================================== */

.books-hero-copy .books-hero-title-accent {
    display: block;

    margin-top: 0.06em;

    color: #6298aa !important;

    /*
     * Un peu plus petite pour rester
     * intégralement dans la colonne gauche.
     */
    font-size: 0.80em;

    font-style: italic !important;
    font-weight: 400;

    letter-spacing: -0.045em;

    white-space: nowrap;
}


/* ==========================================================================
   SÉCURITÉ — LE TITRE NE PASSE JAMAIS SUR LA PHOTO
   ========================================================================== */

.books-hero-copy {
    position: relative;
    z-index: 2;

    min-width: 0;
}


.books-hero-visual {
    position: relative;
    z-index: 1;
}


/* ==========================================================================
   ÉCRANS INTERMÉDIAIRES
   ========================================================================== */

@media (max-width: 1250px) {

    .books-hero-title {
        font-size:
            clamp(3.3rem, 4.5vw, 4.8rem);
    }

    .books-hero-copy .books-hero-title-accent {
        font-size: 0.78em;
    }

}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width: 900px) {

    .books-hero-title {
        max-width: 100%;

        font-size:
            clamp(3.2rem, 8vw, 5rem);
    }

    .books-hero-copy .books-hero-title-accent {
        font-size: 0.82em;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    .books-hero-title {
        margin-bottom: 24px;

        font-size:
            clamp(2.45rem, 10.5vw, 3.5rem);

        line-height: 0.95;
    }

    .books-hero-copy .books-hero-title-accent {
        font-size: 0.76em;

        letter-spacing: -0.04em;
    }

}

/* ==========================================================================
   CORRECTION PHOTO HERO — SUPPRESSION DU FOND QUI DÉPASSE
   ========================================================================== */

.books-hero-photo {
    background: transparent !important;
    box-shadow: none !important;
}


/*
 * Supprime un éventuel ancien fond/cadre
 * généré derrière la photographie.
 */
.books-hero-photo::before {
    content: none !important;
    display: none !important;
}


/* ==========================================================================
   PHOTO
   ========================================================================== */

.books-hero-photo-image {
    position: relative;
    z-index: 1;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center 56%;

    border-radius:
        110px
        110px
        42px
        42px;

    box-shadow:
        0 38px 85px rgba(7, 20, 38, 0.17),
        0 12px 30px rgba(7, 20, 38, 0.10);
}


/* ==========================================================================
   DÉGRADÉ — DOIT ÉPOUSER EXACTEMENT LA PHOTO
   ========================================================================== */

.books-hero-photo::after {
    content: "";

    position: absolute;
    z-index: 2;

    inset: 0;

    pointer-events: none;

    border-radius:
        110px
        110px
        42px
        42px;

    background:
        linear-gradient(
            180deg,
            rgba(4, 17, 30, 0) 46%,
            rgba(4, 17, 30, 0.04) 60%,
            rgba(4, 17, 30, 0.20) 74%,
            rgba(4, 17, 30, 0.84) 100%
        );
}


/* ==========================================================================
   LE FILET DORÉ RESTE INDÉPENDANT
   ========================================================================== */

.books-hero-visual::before {
    content: "";

    position: absolute;
    z-index: 0;

    top: -24px;
    right: -24px;

    width: 46%;
    height: 38%;

    border-top: 1px solid rgba(184, 153, 90, 0.48);
    border-right: 1px solid rgba(184, 153, 90, 0.48);

    pointer-events: none;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    .books-hero-photo-image,
    .books-hero-photo::after {
        border-radius:
            56px
            56px
            26px
            26px;
    }

}

/* ==========================================================================
   HERO LIVRES — TITRE 2 LIGNES SANS CHEVAUCHEMENT
   ========================================================================== */

.books-hero-grid {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(480px, 0.82fr);

    gap: clamp(80px, 7vw, 130px);
}


.books-hero-copy {
    min-width: 0;
    max-width: 100%;
}


/* ==========================================================================
   TITRE
   ========================================================================== */

.books-hero-title {
    width: 100%;
    max-width: 760px;

    margin: 0 0 26px;

    font-family:
        var(--font-serif, Georgia, serif);

    font-weight: 400;

    line-height: 0.92;
    letter-spacing: -0.05em;
}


/* Ligne 1 */

.books-hero-copy .books-hero-title-main {
    display: block;

    color: #071426 !important;

    font-size:
        clamp(3.8rem, 4.8vw, 5.7rem);

    font-style: normal !important;
    font-weight: 400;

    white-space: nowrap;
}


/* Ligne 2 */

.books-hero-copy .books-hero-title-accent {
    display: block;

    margin-top: 0.07em;

    color: #6298aa !important;

    /*
     * Plus petite que la première ligne :
     * permet à toute la phrase de rester
     * avant la photographie.
     */
    font-size:
        clamp(2.75rem, 3.65vw, 4.35rem);

    font-style: italic !important;
    font-weight: 400;

    line-height: 0.96;
    letter-spacing: -0.045em;

    white-space: nowrap;
}


/* ==========================================================================
   PHOTO — NE PEUT PLUS ÊTRE RECOUVERTE PAR LE TITRE
   ========================================================================== */

.books-hero-visual {
    position: relative;
    z-index: 3;
}


/* ==========================================================================
   ÉCRANS INTERMÉDIAIRES
   ========================================================================== */

@media (max-width: 1250px) {

    .books-hero-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(420px, 0.82fr);

        gap: 60px;
    }

    .books-hero-copy .books-hero-title-main {
        font-size:
            clamp(3.4rem, 4.6vw, 4.8rem);
    }

    .books-hero-copy .books-hero-title-accent {
        font-size:
            clamp(2.5rem, 3.45vw, 3.7rem);
    }

}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width: 900px) {

    .books-hero-grid {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .books-hero-title {
        max-width: 100%;
    }

    .books-hero-copy .books-hero-title-main {
        font-size:
            clamp(3.2rem, 8vw, 5rem);
    }

    .books-hero-copy .books-hero-title-accent {
        font-size:
            clamp(2.55rem, 6.5vw, 4rem);
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    .books-hero-copy .books-hero-title-main {
        font-size:
            clamp(2.65rem, 11vw, 3.7rem);
    }

    .books-hero-copy .books-hero-title-accent {
        font-size:
            clamp(2rem, 8.3vw, 2.9rem);
    }

}

/* ==========================================================================
   CATALOGUE — PROMESSE ÉDITORIALE
   ========================================================================== */

.library-catalog-intro {
    position: relative;

    max-width: 500px;

    padding:
        6px
        0
        6px
        28px;

    border-left:
        2px solid
        #d2b46f;
}


/* ==========================================================================
   PETIT LABEL
   ========================================================================== */

.library-catalog-intro-label {
    display: block;

    margin-bottom: 14px;

    color: #31586f;

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.20em;
    text-transform: uppercase;
}


/* ==========================================================================
   TEXTE
   ========================================================================== */

.library-catalog-intro p {
    margin: 0;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(1.08rem, 1.35vw, 1.28rem);

    line-height: 1.65;

    color: rgba(7, 20, 38, 0.68);
}


/* ==========================================================================
   MOTS FORTS
   ========================================================================== */

.library-catalog-intro strong {
    color: #071426;

    font-weight: 400;
    font-style: italic;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 900px) {

    .library-catalog-intro {
        max-width: 680px;
    }

}


@media (max-width: 600px) {

    .library-catalog-intro {
        padding-left: 20px;
    }

    .library-catalog-intro p {
        font-size: 1.04rem;
    }

}

/* ==========================================================================
   PAGE AUTEUR — THÉOPHILE TOUALI
   ========================================================================== */


/* ==========================================================================
   HERO
   ========================================================================== */

.author-page-hero {
    position: relative;
    overflow: hidden;

    padding:
        clamp(125px, 9vw, 165px)
        0
        clamp(105px, 8vw, 145px);

    background:
        radial-gradient(
            circle at 75% 20%,
            rgba(135, 189, 205, 0.12),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #071625 0%,
            #081b2e 55%,
            #061321 100%
        );

    color: #ffffff;
}


.author-page-hero::before {
    content: "TOUALI";

    position: absolute;

    left: 46%;
    bottom: -58px;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(9rem, 20vw, 24rem);

    font-weight: 700;

    line-height: 0.75;

    letter-spacing: -0.08em;

    color: rgba(255, 255, 255, 0.022);

    pointer-events: none;
    user-select: none;
}


/* ==========================================================================
   HERO — GRILLE
   ========================================================================== */

.author-page-hero-grid {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(360px, 0.82fr)
        minmax(0, 1.18fr);

    align-items: center;

    gap: clamp(70px, 8vw, 135px);
}


/* ==========================================================================
   PORTRAIT
   ========================================================================== */

.author-page-portrait {
    position: relative;
}


.author-page-photo {
    position: relative;

    width: min(100%, 570px);

    aspect-ratio: 0.78;

    overflow: hidden;

    border-radius:
        110px
        110px
        42px
        42px;

    box-shadow:
        0 46px 100px rgba(0, 0, 0, 0.32);
}


.author-page-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform 900ms cubic-bezier(.2, .7, .2, 1);
}


.author-page-photo:hover img {
    transform: scale(1.02);
}


.author-page-photo-shade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 44%,
            rgba(4, 17, 30, 0.10) 60%,
            rgba(4, 17, 30, 0.88) 100%
        );

    pointer-events: none;
}


/* ==========================================================================
   SIGNATURE SUR PHOTO
   ========================================================================== */

.author-page-photo-signature {
    position: absolute;

    left: 42px;
    right: 32px;
    bottom: 38px;

    display: flex;
    flex-direction: column;

    gap: 8px;

    color: #ffffff;
}


.author-page-photo-signature span {
    color: #9ccbd8;

    font-size: 0.70rem;
    font-weight: 800;

    letter-spacing: 0.20em;
    text-transform: uppercase;
}


.author-page-photo-signature strong {
    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(2rem, 3vw, 3.1rem);

    font-weight: 400;
}


/* ==========================================================================
   MONOGRAMME
   ========================================================================== */

.author-page-monogram {
    position: absolute;

    z-index: 4;

    top: 38px;
    right: -42px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: clamp(100px, 7vw, 130px);
    aspect-ratio: 1;

    padding: 14px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.24);
}


.author-page-monogram img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* ==========================================================================
   MANIFESTE
   ========================================================================== */

.author-page-manifesto {
    max-width: 850px;
}


.author-page-manifesto .eyebrow {
    display: flex;
    align-items: center;

    gap: 16px;

    margin-bottom: 28px;

    color: #9ccbd8;

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.21em;
    text-transform: uppercase;
}


.author-page-manifesto .eyebrow::before {
    content: "";

    width: 42px;
    height: 1px;

    background: #d2b46f;
}


.author-page-manifesto h1 {
    margin:
        0
        0
        38px;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(4rem, 6vw, 7rem);

    font-weight: 400;

    line-height: 0.92;
    letter-spacing: -0.055em;

    color: #ffffff;
}


.author-page-manifesto h1 span {
    display: block;

    margin-top: 0.06em;

    color: #9ccbd8;

    font-style: italic;
}


/* ==========================================================================
   MOTS DE MARQUE
   ========================================================================== */

.author-page-manifesto-words {
    margin:
        0
        0
        26px;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(1.25rem, 1.7vw, 1.6rem);

    line-height: 1.65;

    color: rgba(255, 255, 255, 0.93);
}


.author-page-manifesto-lead {
    max-width: 720px;

    margin:
        0
        0
        18px;

    font-size:
        clamp(1.03rem, 1.3vw, 1.22rem);

    line-height: 1.8;

    color: rgba(255, 255, 255, 0.76);
}


.author-page-manifesto-text {
    max-width: 670px;

    margin:
        0
        0
        38px;

    line-height: 1.8;

    color: rgba(156, 203, 216, 0.83);
}


/* ==========================================================================
   LIEN HERO
   ========================================================================== */

.author-page-discover {
    display: inline-flex;
    align-items: center;

    gap: 14px;

    color: #ffffff;

    font-size: 0.78rem;
    font-weight: 800;

    text-decoration: none;
}


.author-page-discover span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border:
        1px solid
        rgba(255, 255, 255, 0.20);

    border-radius: 50%;
}


/* ==========================================================================
   HISTOIRES — SECTION
   ========================================================================== */

.author-stories {
    background: #f3efe7;
}


.author-stories-head {
    max-width: 1080px;

    margin-bottom:
        clamp(55px, 7vw, 90px);
}


.author-stories-head .eyebrow,
.author-biography-heading .eyebrow,
.author-territories-head .eyebrow {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 20px;

    color: #31586f;

    font-size: 0.70rem;
    font-weight: 800;

    letter-spacing: 0.20em;
    text-transform: uppercase;
}


.author-stories-head .eyebrow::before,
.author-biography-heading .eyebrow::before,
.author-territories-head .eyebrow::before {
    content: "";

    width: 38px;
    height: 1px;

    background: #d2b46f;
}


.author-stories-head h2,
.author-biography-heading h2,
.author-territories-head h2 {
    max-width: 880px;

    margin:
        0
        0
        26px;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(3.1rem, 5vw, 5.6rem);

    font-weight: 400;

    line-height: 0.95;
    letter-spacing: -0.045em;

    color: #071426;
}


.author-stories-head h2 span,
.author-biography-heading h2 span,
.author-territories-head h2 span {
    display: block;

    color: #6298aa;

    font-style: italic;
}


.author-stories-head > p {
    max-width: 720px;

    margin: 0;

    font-size: 1.02rem;
    line-height: 1.8;

    color: rgba(7, 20, 38, 0.62);
}


/* ==========================================================================
   HISTOIRES — GRILLE
   ========================================================================== */

.author-stories-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        clamp(22px, 3vw, 38px);
}


/* ==========================================================================
   CARTE PERSONNAGE
   ========================================================================== */

.author-story-card {
    --author-story-accent: #87bdcd;

    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 470px;

    padding:
        34px
        34px
        30px;

    overflow: hidden;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--author-story-accent) 26%,
            rgba(7, 20, 38, 0.08)
        );

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            color-mix(
                in srgb,
                var(--author-story-accent) 9%,
                white
            ),
            #fffaf2
        );

    box-shadow:
        0 24px 60px rgba(7, 20, 38, 0.065);

    transition:
        transform 420ms cubic-bezier(.2, .7, .2, 1),
        box-shadow 420ms ease;
}


.author-story-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background:
        var(--author-story-accent);
}


.author-story-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 36px 80px rgba(7, 20, 38, 0.11);
}


/* ==========================================================================
   CARTE — HAUT
   ========================================================================== */

.author-story-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 44px;
}


.author-story-number {
    font-family:
        var(--font-serif, Georgia, serif);

    font-style: italic;

    color:
        color-mix(
            in srgb,
            var(--author-story-accent) 58%,
            #071426
        );
}


.author-story-book {
    text-align: right;

    color: rgba(7, 20, 38, 0.48);

    font-size: 0.66rem;
    font-weight: 800;

    letter-spacing: 0.13em;
    text-transform: uppercase;
}


/* ==========================================================================
   CARTE — NOM
   ========================================================================== */

.author-story-card h3 {
    margin:
        0
        0
        24px;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(2.6rem, 3.7vw, 4.2rem);

    font-weight: 400;

    line-height: 0.95;

    color:
        color-mix(
            in srgb,
            var(--author-story-accent) 58%,
            #071426
        );
}


/* ==========================================================================
   CARTE — TEXTE
   ========================================================================== */

.author-story-card > p {
    margin:
        0
        0
        28px;

    font-size: 0.96rem;
    line-height: 1.72;

    color: rgba(7, 20, 38, 0.66);
}


/* ==========================================================================
   THÈMES
   ========================================================================== */

.author-story-themes {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-bottom: 28px;
}


.author-story-themes span {
    padding:
        7px
        10px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--author-story-accent) 28%,
            transparent
        );

    border-radius: 999px;

    background:
        color-mix(
            in srgb,
            var(--author-story-accent) 8%,
            white
        );

    color: #31586f;

    font-size: 0.60rem;
    font-weight: 800;

    letter-spacing: 0.09em;
    text-transform: uppercase;
}


/* ==========================================================================
   CTA CARTE
   ========================================================================== */

.author-story-link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: auto;

    padding-top: 20px;

    border-top:
        1px solid
        rgba(7, 20, 38, 0.09);

    color: #071426;

    font-size: 0.77rem;
    font-weight: 800;

    text-decoration: none;
}


.author-story-link-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background:
        color-mix(
            in srgb,
            var(--author-story-accent) 70%,
            #071426
        );

    color: #ffffff;

    transition:
        transform 240ms ease;
}


.author-story-link:hover
.author-story-link-arrow {
    transform: translateX(4px);
}


/* ==========================================================================
   MANIFESTE DE LA PLUME
   ========================================================================== */

.author-voice {
    padding:
        clamp(100px, 9vw, 155px)
        0;

    background: #071625;

    color: #ffffff;
}


.author-voice-grid {
    display: grid;

    grid-template-columns:
        minmax(220px, 0.45fr)
        minmax(0, 1.55fr);

    gap:
        clamp(50px, 8vw, 130px);
}


.author-voice-kicker {
    display: flex;
    flex-direction: column;

    gap: 8px;
}


.author-voice-kicker span {
    color: #9ccbd8;

    font-size: 0.69rem;
    font-weight: 800;

    letter-spacing: 0.20em;
    text-transform: uppercase;
}


.author-voice-kicker strong {
    font-family:
        var(--font-serif, Georgia, serif);

    font-size: 1.8rem;
    font-weight: 400;
}


.author-voice-message > p:first-child {
    margin:
        0
        0
        18px;

    color: #9ccbd8;

    font-size: 0.86rem;
    font-weight: 800;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


.author-voice-message h2 {
    max-width: 950px;

    margin:
        0
        0
        40px;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(3.2rem, 5vw, 5.8rem);

    font-weight: 400;

    line-height: 0.95;
    letter-spacing: -0.045em;
}


.author-voice-message h2 span {
    display: block;

    color: #9ccbd8;

    font-style: italic;
}


.author-voice-copy {
    max-width: 760px;

    margin: 0;

    font-size: 1.05rem;
    line-height: 1.85;

    color: rgba(255, 255, 255, 0.72);
}


/* ==========================================================================
   BIOGRAPHIE
   ========================================================================== */

.author-biography {
    background: #ffffff;
}


.author-biography-grid {
    display: grid;

    grid-template-columns:
        minmax(300px, 0.78fr)
        minmax(0, 1.22fr);

    gap:
        clamp(60px, 8vw, 130px);

    align-items: start;
}


.author-biography-heading {
    position: sticky;
    top: 120px;
}


.author-biography-copy {
    max-width: 760px;
}


.author-biography-copy p {
    margin:
        0
        0
        26px;

    font-size: 1.03rem;
    line-height: 1.9;

    color: rgba(7, 20, 38, 0.67);
}


.author-biography-intro {
    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(1.35rem, 1.8vw, 1.75rem) !important;

    line-height: 1.65 !important;

    color: #071426 !important;
}


.author-biography-intro strong {
    font-weight: 600;
}


.author-biography-signature {
    margin-top: 42px;

    font-family:
        "Snell Roundhand",
        "Segoe Script",
        cursive;

    font-size:
        clamp(2.4rem, 4vw, 4.2rem);

    font-style: italic;

    color: #31586f;
}


/* ==========================================================================
   TERRITOIRES
   ========================================================================== */

.author-territories {
    background: #f3efe7;
}


.author-territories-head {
    margin-bottom:
        clamp(50px, 6vw, 80px);
}


.author-territories-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    border-top:
        1px solid
        rgba(7, 20, 38, 0.10);

    border-left:
        1px solid
        rgba(7, 20, 38, 0.10);
}


.author-territory {
    min-height: 260px;

    padding:
        32px;

    border-right:
        1px solid
        rgba(7, 20, 38, 0.10);

    border-bottom:
        1px solid
        rgba(7, 20, 38, 0.10);

    transition:
        background 300ms ease,
        transform 300ms ease;
}


.author-territory:hover {
    background: #ffffff;
}


.author-territory > span {
    color: #b8995a;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size: 0.80rem;
    font-style: italic;
}


.author-territory h3 {
    margin:
        42px
        0
        16px;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(2rem, 3vw, 3rem);

    font-weight: 400;

    color: #071426;
}


.author-territory p {
    max-width: 330px;

    margin: 0;

    line-height: 1.7;

    color: rgba(7, 20, 38, 0.60);
}


/* ==========================================================================
   CHIFFRES
   ========================================================================== */

.author-numbers {
    padding:
        clamp(65px, 6vw, 90px)
        0;

    background: #ffffff;
}


.author-numbers-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}


.author-number {
    min-height: 150px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        18px
        34px;

    border-right:
        1px solid
        rgba(7, 20, 38, 0.10);
}


.author-number:first-child {
    border-left:
        1px solid
        rgba(7, 20, 38, 0.10);
}


.author-number strong {
    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(3rem, 5vw, 5rem);

    font-weight: 400;

    line-height: 1;

    color: #071426;
}


.author-number span {
    margin-top: 12px;

    color: #31586f;

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}


.author-number-signature strong {
    color: #6298aa;

    font-style: italic;
}


/* ==========================================================================
   CTA FINAL
   ========================================================================== */

.author-final {
    background: #ffffff;
}


.author-final-panel {
    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        auto;

    align-items: end;

    gap:
        clamp(40px, 7vw, 100px);

    padding:
        clamp(50px, 6vw, 80px);

    overflow: hidden;

    border-radius: 34px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(135, 189, 205, 0.15),
            transparent 32%
        ),
        #071625;

    color: #ffffff;
}


.author-final-copy {
    max-width: 850px;
}


.author-final-copy .eyebrow {
    color: #9ccbd8;
}


.author-final-copy h2 {
    margin:
        20px
        0
        24px;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(3rem, 4.8vw, 5.5rem);

    font-weight: 400;

    line-height: 0.95;
}


.author-final-copy h2 span {
    display: block;

    color: #9ccbd8;

    font-style: italic;
}


.author-final-copy p {
    max-width: 650px;

    margin: 0;

    line-height: 1.8;

    color: rgba(255, 255, 255, 0.70);
}


.author-final-actions {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: 18px;

    min-width: 190px;
}


.author-final-secondary {
    color: #9ccbd8;

    font-size: 0.76rem;
    font-weight: 800;

    text-decoration: none;
}


/* ==========================================================================
   TABLETTE LARGE
   ========================================================================== */

@media (max-width: 1100px) {

    .author-page-hero-grid {
        grid-template-columns:
            minmax(320px, 0.78fr)
            minmax(0, 1.22fr);

        gap: 60px;
    }


    .author-stories-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .author-story-card:last-child {
        grid-column:
            1 / -1;

        max-width: 650px;
    }

}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width: 900px) {

    .author-page-hero-grid,
    .author-biography-grid,
    .author-voice-grid,
    .author-final-panel {
        grid-template-columns: 1fr;
    }


    .author-page-photo {
        width: min(88%, 590px);

        margin: 0 auto;
    }


    .author-page-monogram {
        right: 3%;
    }


    .author-page-manifesto {
        max-width: 760px;
    }


    .author-biography-heading {
        position: static;
    }


    .author-territories-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .author-numbers-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .author-number:nth-child(3) {
        border-left:
            1px solid
            rgba(7, 20, 38, 0.10);
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 620px) {

    .author-page-hero {
        padding:
            105px
            0
            80px;
    }


    .author-page-photo {
        width:
            calc(100% - 16px);

        aspect-ratio: 0.80;

        border-radius:
            58px
            58px
            28px
            28px;
    }


    .author-page-monogram {
        top: 22px;
        right: -2px;

        width: 82px;

        padding: 10px;
    }


    .author-page-photo-signature {
        left: 26px;
        bottom: 26px;
    }


    .author-page-manifesto h1 {
        font-size:
            clamp(3.1rem, 14vw, 4.6rem);
    }


    .author-stories-grid {
        grid-template-columns: 1fr;
    }


    .author-story-card,
    .author-story-card:last-child {
        grid-column: auto;

        max-width: none;

        min-height: 0;
    }


    .author-voice-message h2,
    .author-stories-head h2,
    .author-biography-heading h2,
    .author-territories-head h2,
    .author-final-copy h2 {
        font-size:
            clamp(2.7rem, 12vw, 4rem);
    }


    .author-territories-grid {
        grid-template-columns: 1fr;
    }


    .author-numbers-grid {
        grid-template-columns: 1fr;
    }


    .author-number,
    .author-number:first-child,
    .author-number:nth-child(3) {
        border-left:
            1px solid
            rgba(7, 20, 38, 0.10);

        border-bottom:
            1px solid
            rgba(7, 20, 38, 0.10);
    }


    .author-number:last-child {
        border-bottom: 0;
    }


    .author-final-panel {
        padding:
            38px
            28px;

        border-radius: 26px;
    }

}
/* ==========================================================================
   PAGE AUTEUR — PORTRAIT DE MARQUE
   ========================================================================== */

.author-page-portrait {
    position: relative;

    width: 100%;
}


/* ==========================================================================
   CONTENEUR PHOTO
   ========================================================================== */

.author-page-photo {
    position: relative;

    width: min(100%, 560px);

    aspect-ratio: 0.77;

    overflow: hidden;

    border-radius:
        110px
        110px
        42px
        42px;

    background: #071625;

    box-shadow:
        0 48px 100px rgba(0, 0, 0, 0.32),
        0 14px 35px rgba(0, 0, 0, 0.20);
}


/* ==========================================================================
   IMAGE
   ========================================================================== */

.author-page-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
     * Important pour cette photographie :
     * on garde le visage et la suspension rouge
     * dans une composition équilibrée.
     */
    object-position: center 34%;

    transform: scale(1.015);

    transition:
        transform 900ms cubic-bezier(.2, .7, .2, 1);
}


@media (hover: hover) {

    .author-page-photo:hover img {
        transform: scale(1.035);
    }

}


/* ==========================================================================
   VOILE
   ========================================================================== */

.author-page-photo-shade {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(4, 17, 30, 0) 44%,
            rgba(4, 17, 30, 0.04) 58%,
            rgba(4, 17, 30, 0.28) 72%,
            rgba(4, 17, 30, 0.92) 100%
        );
}


/* ==========================================================================
   SIGNATURE SUR LA PHOTO
   ========================================================================== */

.author-page-photo-signature {
    position: absolute;

    z-index: 3;

    left: 42px;
    right: 34px;
    bottom: 38px;

    display: flex;
    flex-direction: column;

    gap: 9px;

    color: #ffffff;
}


.author-page-photo-signature span {
    color: #9ccbd8;

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.20em;
    text-transform: uppercase;
}


.author-page-photo-signature strong {
    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(2rem, 3vw, 3.15rem);

    font-weight: 400;

    line-height: 1;

    letter-spacing: -0.025em;

    color: #ffffff;
}


/* ==========================================================================
   MONOGRAMME
   ========================================================================== */

.author-page-monogram {
    position: absolute;

    z-index: 5;

    top: 38px;
    right: -40px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: clamp(100px, 7vw, 128px);
    aspect-ratio: 1;

    padding: 14px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.24),
        0 4px 12px rgba(0, 0, 0, 0.10);
}


.author-page-monogram img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transform: none;
}


/* ==========================================================================
   PETIT FILET DORÉ
   ========================================================================== */

.author-page-portrait::before {
    content: "";

    position: absolute;

    z-index: 0;

    top: -25px;
    right: -25px;

    width: 46%;
    height: 36%;

    border-top:
        1px solid
        rgba(210, 180, 111, 0.55);

    border-right:
        1px solid
        rgba(210, 180, 111, 0.55);

    pointer-events: none;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 900px) {

    .author-page-photo {
        width: min(88%, 570px);

        margin: 0 auto;
    }


    .author-page-monogram {
        right: 2%;
    }

}


@media (max-width: 620px) {

    .author-page-photo {
        width: calc(100% - 16px);

        aspect-ratio: 0.79;

        border-radius:
            58px
            58px
            28px
            28px;
    }


    .author-page-photo img {
        object-position: center 32%;
    }


    .author-page-photo-signature {
        left: 26px;
        right: 22px;
        bottom: 26px;
    }


    .author-page-photo-signature span {
        font-size: 0.60rem;
    }


    .author-page-photo-signature strong {
        font-size: 2rem;
    }


    .author-page-monogram {
        top: 20px;
        right: -2px;

        width: 82px;

        padding: 10px;
    }


    .author-page-portrait::before {
        display: none;
    }

}
/* ==========================================================================
   MANIFESTE — PHRASE DE CONCLUSION
   ========================================================================== */

.author-page-manifesto-text strong {
    display: block;

    max-width: 620px;

    margin-top: 20px;

    color: #d2b46f;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size: clamp(1.05rem, 1.35vw, 1.28rem);

    font-weight: 400;
    font-style: italic;

    line-height: 1.5;
}


/* ==========================================================================
   MANIFESTE — MOTS CLÉS
   ========================================================================== */

.author-page-manifesto-words {
    max-width: 720px;

    letter-spacing: 0.01em;
}


/* ==========================================================================
   MANIFESTE — TEXTE DES TENSIONS
   ========================================================================== */

.author-page-manifesto-text {
    max-width: 680px;

    line-height: 1.85;
}

/* ==========================================================================
   HERO AUTEUR — ALIGNEMENT GÉNÉRAL
   ========================================================================== */

.author-page-hero {
    position: relative;
    overflow: hidden;

    padding:
        clamp(110px, 9vw, 150px)
        0
        clamp(90px, 8vw, 130px);
}

.author-page-hero-grid {
    display: grid;
    grid-template-columns: minmax(320px, 520px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(48px, 6vw, 96px);
}


/* ==========================================================================
   PORTRAIT — ON LE FAIT REMONTER
   ========================================================================== */

.author-page-portrait {
    position: relative;
    align-self: start;

    /* Remonte visuellement le bloc photo */
    transform: translateY(-42px);
}


/* ==========================================================================
   PHOTO
   ========================================================================== */

.author-page-photo {
    position: relative;
    width: min(100%, 540px);
    margin: 0 auto;
}

.author-page-photo img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}


/* ==========================================================================
   MONOGRAMME
   ========================================================================== */

.author-page-monogram {
    position: absolute;
    top: 48px;
    right: -28px;
    z-index: 4;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {
    .author-page-portrait {
        transform: translateY(-24px);
    }
}

@media (max-width: 900px) {
    .author-page-hero-grid {
        grid-template-columns: 1fr;
    }

    .author-page-portrait {
        transform: none;
        order: 1;
    }

    .author-page-manifesto {
        order: 2;
    }

    .author-page-monogram {
        top: 28px;
        right: -16px;
    }
}

/* ==========================================================================
   HERO AUTEUR — WATERMARK TOUALI COMPLET
   ========================================================================== */

.author-page-hero::before {
    content: "TOUALI";

    position: absolute;
    z-index: 0;

    left: 50%;
    bottom: 8px;

    width: 100%;

    transform: translateX(-50%);

    text-align: center;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(7rem, 15vw, 17rem);

    font-weight: 700;

    line-height: 0.72;

    letter-spacing: -0.055em;

    white-space: nowrap;

    color: rgba(255, 255, 255, 0.032);

    pointer-events: none;
    user-select: none;
}


/* ========================================================================== 
   PAGE AUTHOR.PHP — STYLES ISOLÉS
   À COLLER TOUT EN BAS DE site.css
   Aucun sélecteur générique n'est redéfini globalement.
   ========================================================================== */

/* ========================================================================== 
   TOKENS LOCAUX — UNIQUEMENT LES SECTIONS DE LA PAGE AUTEUR
   ========================================================================== */

.author-page-hero,
.author-stories,
.author-voice,
.author-biography,
.author-territories,
.author-numbers,
.author-final {
    --author-navy: #071625;
    --author-navy-2: #0b2235;
    --author-navy-3: #103047;
    --author-blue: #95c6d4;
    --author-blue-soft: #b7d8e1;
    --author-gold: #d2b46f;
    --author-ivory: #f7f4ee;
    --author-ink: #102433;
    --author-muted: #6d7f8b;
    --author-line: rgba(10, 31, 50, 0.10);
    --author-serif: var(--serif, Georgia, "Times New Roman", serif);
}

/* ========================================================================== 
   EYEBROW — SCOPE PAGE AUTEUR UNIQUEMENT
   ========================================================================== */

.author-page-hero .eyebrow,
.author-stories .eyebrow,
.author-biography .eyebrow,
.author-territories .eyebrow,
.author-final .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.author-page-hero .eyebrow::before,
.author-stories .eyebrow::before,
.author-biography .eyebrow::before,
.author-territories .eyebrow::before,
.author-final .eyebrow::before {
    content: "";
    width: 42px;
    height: 1px;
    flex: 0 0 42px;
    background: var(--author-gold);
}

/* ========================================================================== 
   HERO AUTEUR
   ========================================================================== */

.author-page-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 790px;
    padding: clamp(118px, 9vw, 160px) 0 clamp(95px, 8vw, 135px);
    background:
        radial-gradient(circle at 18% 22%, rgba(149, 198, 212, 0.08), transparent 27%),
        radial-gradient(circle at 87% 80%, rgba(210, 180, 111, 0.04), transparent 25%),
        linear-gradient(145deg, #061321 0%, #071625 56%, #0b2235 100%);
    color: #fff;
}

/* grand TOUALI de marque — entièrement visible */
.author-page-hero::before {
    content: "TOUALI";
    position: absolute;
    z-index: 0;
    left: 50%;
    bottom: 10px;
    width: 100%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.027);
    font-family: var(--author-serif);
    font-size: clamp(7rem, 15vw, 17rem);
    font-weight: 700;
    line-height: 0.72;
    letter-spacing: -0.055em;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

.author-page-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(390px, 0.88fr) minmax(0, 1.22fr);
    align-items: center;
    gap: clamp(64px, 7vw, 120px);
}

/* ========================================================================== 
   HERO — PORTRAIT
   ========================================================================== */

.author-page-portrait {
    position: relative;
    align-self: start;
    transform: translateY(-42px);
}

.author-page-portrait::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -30px;
    right: -34px;
    width: 46%;
    height: 38%;
    border-top: 1px solid rgba(210, 180, 111, 0.72);
    border-right: 1px solid rgba(210, 180, 111, 0.72);
    pointer-events: none;
}

.author-page-photo {
    position: relative;
    z-index: 1;
    width: min(100%, 560px);
    aspect-ratio: 0.77;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 110px 110px 42px 42px;
    background: #0b1b2a;
    box-shadow:
        0 48px 100px rgba(0, 0, 0, 0.30),
        0 14px 35px rgba(0, 0, 0, 0.18);
}

.author-page-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 34%;
    transform: scale(1.015);
    transition: transform 0.9s cubic-bezier(.2, .7, .2, 1);
}

.author-page-photo:hover img {
    transform: scale(1.035);
}

.author-page-photo-shade {
    position: absolute;
    z-index: 2;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(4, 17, 30, 0) 42%,
        rgba(4, 17, 30, 0.04) 56%,
        rgba(4, 17, 30, 0.28) 72%,
        rgba(4, 17, 30, 0.93) 100%
    );
    pointer-events: none;
}

.author-page-photo-signature {
    position: absolute;
    z-index: 3;
    left: 34px;
    right: 34px;
    bottom: 34px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: calc(100% - 68px);
}

.author-page-photo-signature span {
    display: block;
    color: #a9cfdc;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.20em;
    text-transform: uppercase;
}

.author-page-photo-signature strong {
    display: block;
    max-width: 100%;
    color: #fff;
    font-family: var(--author-serif);
    font-size: clamp(2.15rem, 3vw, 3.35rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.035em;
    white-space: normal;
    overflow-wrap: break-word;
    text-wrap: balance;
}

.author-page-monogram {
    position: absolute;
    z-index: 5;
    top: 48px;
    right: -30px;
    width: clamp(96px, 7vw, 126px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    padding: 12px;
    border: 8px solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    background: #f8fafb;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.author-page-monogram img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ========================================================================== 
   HERO — MANIFESTE
   ========================================================================== */

.author-page-manifesto {
    position: relative;
    z-index: 3;
    max-width: 830px;
}

.author-page-manifesto .eyebrow {
    color: #a6cbd7;
}

.author-page-manifesto h1 {
    max-width: 840px;
    margin: 26px 0 0;
    color: #fff;
    font-family: var(--author-serif);
    font-size: clamp(4.1rem, 5.7vw, 7.1rem);
    font-weight: 500;
    line-height: 0.88;
    letter-spacing: -0.06em;
}

.author-page-manifesto h1 > span {
    display: block;
    margin-top: 0.08em;
    color: var(--author-blue);
    font-style: italic;
    font-weight: 500;
    line-height: 0.92;
}

.author-page-manifesto-words {
    max-width: 760px;
    margin: 42px 0 0;
    color: #f4f0e9;
    font-family: var(--author-serif);
    font-size: clamp(1.25rem, 1.45vw, 1.65rem);
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: -0.015em;
}

.author-page-manifesto-lead {
    max-width: 760px;
    margin: 35px 0 0;
    color: #c4ced5;
    font-size: clamp(1rem, 1.06vw, 1.13rem);
    line-height: 1.82;
}

.author-page-manifesto-text {
    max-width: 690px;
    margin: 30px 0 0;
    color: #8fb3c3;
    font-size: 0.96rem;
    line-height: 1.92;
}

.author-page-manifesto-text strong {
    display: block;
    max-width: 650px;
    margin-top: 20px;
    color: var(--author-gold);
    font-family: var(--author-serif);
    font-size: clamp(1.1rem, 1.35vw, 1.32rem);
    font-weight: 500;
    font-style: italic;
    line-height: 1.45;
}

.author-page-discover {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    margin-top: 38px;
    padding-bottom: 7px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.01em;
    transition: gap 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.author-page-discover > span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 50%;
    font-size: 14px;
}

.author-page-discover:hover {
    gap: 24px;
    color: var(--author-blue-soft);
    border-color: var(--author-blue-soft);
}

/* ========================================================================== 
   UNIVERS DES PERSONNAGES
   ========================================================================== */

.author-stories {
    position: relative;
    padding-top: clamp(100px, 9vw, 145px);
    padding-bottom: clamp(100px, 9vw, 145px);
    background: var(--author-ivory);
}

.author-stories-head {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 36px 90px;
    align-items: end;
    margin-bottom: 58px;
}

.author-stories-head .eyebrow {
    grid-column: 1 / -1;
    color: #6e9bac;
}

.author-stories-head h2 {
    margin: 0;
    max-width: 850px;
    color: var(--author-ink);
    font-family: var(--author-serif);
    font-size: clamp(3.45rem, 4.6vw, 5.7rem);
    font-weight: 500;
    line-height: 0.94;
    letter-spacing: -0.055em;
}

.author-stories-head h2 span {
    display: block;
    margin-top: 0.10em;
    color: #7ba9b8;
    font-style: italic;
    line-height: 0.98;
}

.author-stories-head > p {
    max-width: 560px;
    margin: 0;
    color: #697985;
    font-size: 15px;
    line-height: 1.82;
}

.author-stories-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.author-story-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    overflow: hidden;
    padding: 32px 30px 30px;
    border: 1px solid rgba(10, 31, 50, 0.09);
    border-radius: 28px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--author-story-accent, #87bdcd) 8%, #fff) 0%, #fff 30%),
        #fff;
    box-shadow: 0 20px 55px rgba(19, 40, 56, 0.07);
    transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease;
}

.author-story-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--author-story-accent, #87bdcd);
}

.author-story-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--author-story-accent, #87bdcd) 35%, rgba(10,31,50,.10));
    box-shadow: 0 28px 72px rgba(19, 40, 56, 0.11);
}

.author-story-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 38px;
}

.author-story-number {
    color: color-mix(in srgb, var(--author-story-accent, #87bdcd) 72%, #102433);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.18em;
}

.author-story-book {
    max-width: 70%;
    color: #75838d;
    font-size: 9px;
    font-weight: 900;
    line-height: 1.45;
    letter-spacing: 0.13em;
    text-align: right;
    text-transform: uppercase;
}

.author-story-card h3 {
    margin: 0;
    color: var(--author-ink);
    font-family: var(--author-serif);
    font-size: clamp(2rem, 2.5vw, 2.75rem);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.author-story-summary {
    min-height: 8.2em;
    margin: 22px 0 0;
    color: #62737f;
    font-size: 13px;
    line-height: 1.75;
}

/* distribution des personnages */
.author-story-cast {
    margin-top: 27px;
    padding-top: 23px;
    border-top: 1px solid rgba(10, 31, 50, 0.10);
}

.author-story-cast-group {
    display: grid;
    gap: 12px;
}

.author-story-cast-label {
    display: block;
    color: var(--author-story-accent, #87bdcd);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.author-story-character-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.author-story-character-list > span {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    padding: 6px 10px;
    border: 1px solid rgba(10, 31, 50, 0.11);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #20384a;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.25;
}

.author-story-more {
    margin-top: 15px;
}

.author-story-more summary {
    width: fit-content;
    cursor: pointer;
    list-style: none;
    color: #6c7c87;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.author-story-more summary::-webkit-details-marker {
    display: none;
}

.author-story-more summary::after {
    content: "+";
    display: inline-block;
    margin-left: 8px;
    color: var(--author-story-accent, #87bdcd);
    font-size: 15px;
    line-height: 1;
    transform-origin: center;
    transition: transform 0.2s ease;
}

.author-story-more[open] summary::after {
    transform: rotate(45deg);
}

.author-story-more summary:hover {
    color: var(--author-ink);
}

.author-story-character-list-secondary {
    margin-top: 14px;
}

.author-story-character-list-secondary > span {
    background: transparent;
    color: #72818b;
}

.author-story-themes {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 24px;
}

.author-story-themes > span {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 5px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--author-story-accent, #87bdcd) 12%, #fff);
    color: #536875;
    font-size: 9px;
    font-weight: 800;
}

.author-story-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: auto;
    padding-top: 28px;
    color: var(--author-ink);
    font-size: 11px;
    font-weight: 900;
}

.author-story-link-arrow {
    display: grid;
    place-items: center;
    width: 37px;
    height: 37px;
    flex: 0 0 37px;
    border: 1px solid rgba(10, 31, 50, 0.12);
    border-radius: 50%;
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.author-story-link:hover .author-story-link-arrow {
    transform: translateX(4px);
    border-color: var(--author-story-accent, #87bdcd);
    background: color-mix(in srgb, var(--author-story-accent, #87bdcd) 11%, #fff);
}

/* ========================================================================== 
   MANIFESTE DE LA PLUME
   ========================================================================== */

.author-voice {
    position: relative;
    overflow: hidden;
    padding: clamp(95px, 8vw, 130px) 0;
    background:
        radial-gradient(circle at 78% 30%, rgba(149, 198, 212, 0.08), transparent 28%),
        linear-gradient(145deg, #061321 0%, #091d2e 100%);
    color: #fff;
}

.author-voice::before {
    content: "T";
    position: absolute;
    right: -20px;
    bottom: -88px;
    color: rgba(255, 255, 255, 0.025);
    font-family: var(--author-serif);
    font-size: clamp(15rem, 30vw, 34rem);
    font-weight: 700;
    line-height: 0.75;
    pointer-events: none;
}

.author-voice-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1.45fr);
    gap: clamp(55px, 8vw, 130px);
    align-items: start;
}

.author-voice-kicker {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding-top: 8px;
}

.author-voice-kicker span {
    color: #7ea8b7;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.author-voice-kicker strong {
    color: #fff;
    font-family: var(--author-serif);
    font-size: clamp(1.8rem, 2.3vw, 2.65rem);
    font-weight: 500;
    line-height: 1;
}

.author-voice-message > p:first-child {
    margin: 0 0 16px;
    color: var(--author-gold);
    font-family: var(--author-serif);
    font-size: 1.06rem;
    font-style: italic;
}

.author-voice-message h2 {
    max-width: 900px;
    margin: 0;
    color: #fff;
    font-family: var(--author-serif);
    font-size: clamp(3.4rem, 5vw, 6.15rem);
    font-weight: 500;
    line-height: 0.95;
    letter-spacing: -0.055em;
}

.author-voice-message h2 span {
    display: block;
    margin-top: 0.08em;
    color: var(--author-blue);
    font-style: italic;
}

.author-voice-copy {
    max-width: 760px;
    margin: 32px 0 0;
    color: #aebdc7;
    font-size: 15px;
    line-height: 1.85;
}

/* ========================================================================== 
   BIOGRAPHIE
   ========================================================================== */

.author-biography {
    padding-top: clamp(105px, 9vw, 145px);
    padding-bottom: clamp(105px, 9vw, 145px);
    background: #fff;
}

.author-biography-grid {
    display: grid;
    grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(60px, 8vw, 135px);
    align-items: start;
}

.author-biography-heading {
    position: sticky;
    top: 120px;
}

.author-biography-heading .eyebrow {
    color: #6e9bac;
}

.author-biography-heading h2 {
    max-width: 600px;
    margin: 25px 0 0;
    color: var(--author-ink);
    font-family: var(--author-serif);
    font-size: clamp(3.2rem, 4.4vw, 5.2rem);
    font-weight: 500;
    line-height: 0.96;
    letter-spacing: -0.05em;
}

.author-biography-heading h2 span {
    display: block;
    margin-top: 0.08em;
    color: #7ba9b8;
    font-style: italic;
}

.author-biography-copy {
    max-width: 740px;
}

.author-biography-copy p {
    margin: 0;
    color: #667681;
    font-size: 15px;
    line-height: 1.9;
}

.author-biography-copy p + p {
    margin-top: 25px;
}

.author-biography-intro {
    padding-bottom: 32px;
    border-bottom: 1px solid var(--author-line);
    color: #334c5c !important;
    font-family: var(--author-serif);
    font-size: clamp(1.22rem, 1.55vw, 1.5rem) !important;
    line-height: 1.7 !important;
}

.author-biography-intro strong {
    color: var(--author-ink);
    font-weight: 600;
}

.author-biography-signature {
    margin-top: 42px;
    padding-top: 26px;
    border-top: 1px solid var(--author-line);
    color: #698e9d;
    font-family: var(--author-serif);
    font-size: 1.35rem;
    font-style: italic;
}

/* ========================================================================== 
   TERRITOIRES DE MARQUE
   ========================================================================== */

.author-territories {
    padding-top: clamp(95px, 8vw, 130px);
    padding-bottom: clamp(95px, 8vw, 130px);
    background: #f2f5f4;
}

.author-territories-head {
    max-width: 900px;
    margin-bottom: 54px;
}

.author-territories-head .eyebrow {
    color: #6e9bac;
}

.author-territories-head h2 {
    margin: 24px 0 0;
    color: var(--author-ink);
    font-family: var(--author-serif);
    font-size: clamp(3.3rem, 4.7vw, 5.6rem);
    font-weight: 500;
    line-height: 0.94;
    letter-spacing: -0.055em;
}

.author-territories-head h2 span {
    color: #7caaba;
    font-style: italic;
}

.author-territories-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(10, 31, 50, 0.11);
    border-left: 1px solid rgba(10, 31, 50, 0.11);
}

.author-territory {
    min-height: 260px;
    padding: 34px 32px 36px;
    border-right: 1px solid rgba(10, 31, 50, 0.11);
    border-bottom: 1px solid rgba(10, 31, 50, 0.11);
    background: rgba(255, 255, 255, 0.42);
    transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.author-territory:hover {
    position: relative;
    z-index: 2;
    transform: translateY(-5px);
    background: #fff;
    box-shadow: 0 22px 52px rgba(20, 44, 59, 0.08);
}

.author-territory > span {
    display: block;
    margin-bottom: 42px;
    color: #89aebb;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.18em;
}

.author-territory h3 {
    margin: 0;
    color: var(--author-ink);
    font-family: var(--author-serif);
    font-size: clamp(2rem, 2.35vw, 2.65rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.035em;
}

.author-territory p {
    max-width: 300px;
    margin: 17px 0 0;
    color: #71808a;
    font-size: 13px;
    line-height: 1.75;
}

/* ========================================================================== 
   CHIFFRES
   ========================================================================== */

.author-numbers {
    padding: 78px 0;
    background: #fff;
}

.author-numbers-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--author-line);
    border-bottom: 1px solid var(--author-line);
}

.author-number {
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px 32px;
    border-right: 1px solid var(--author-line);
}

.author-number:last-child {
    border-right: 0;
}

.author-number strong {
    color: var(--author-ink);
    font-family: var(--author-serif);
    font-size: clamp(3rem, 4vw, 4.5rem);
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -0.05em;
}

.author-number span {
    margin-top: 15px;
    color: #778690;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.4;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.author-number-signature {
    background: #f7f4ee;
}

.author-number-signature strong {
    color: #7caaba;
    font-style: italic;
}

/* ========================================================================== 
   CTA FINAL AUTEUR
   ========================================================================== */

.author-final {
    padding-top: 40px;
    padding-bottom: clamp(90px, 8vw, 125px);
    background: #fff;
}

.author-final-panel {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) auto;
    align-items: end;
    gap: 70px;
    padding: clamp(54px, 6vw, 78px);
    border-radius: 36px;
    background:
        radial-gradient(circle at 86% 18%, rgba(149, 198, 212, 0.15), transparent 29%),
        linear-gradient(145deg, #061321 0%, #0a2133 60%, #103247 100%);
    box-shadow: 0 34px 80px rgba(6, 19, 38, 0.14);
}

.author-final-panel::before {
    content: "TOUALI";
    position: absolute;
    right: -3%;
    bottom: -0.20em;
    color: rgba(255, 255, 255, 0.025);
    font-family: var(--author-serif);
    font-size: clamp(8rem, 15vw, 15rem);
    font-weight: 700;
    line-height: 0.75;
    letter-spacing: -0.06em;
    white-space: nowrap;
    pointer-events: none;
}

.author-final-copy,
.author-final-actions {
    position: relative;
    z-index: 2;
}

.author-final .eyebrow {
    color: #9ccbd8;
}

.author-final-copy h2 {
    max-width: 830px;
    margin: 20px 0 0;
    color: #fff;
    font-family: var(--author-serif);
    font-size: clamp(3.35rem, 4.9vw, 5.8rem);
    font-weight: 500;
    line-height: 0.94;
    letter-spacing: -0.055em;
}

.author-final-copy h2 span {
    display: block;
    margin-top: 0.08em;
    color: var(--author-blue);
    font-style: italic;
}

.author-final-copy > p {
    max-width: 650px;
    margin: 28px 0 0;
    color: #b6c6cf;
    font-size: 15px;
    line-height: 1.82;
}

.author-final-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 235px;
}

.author-final .btn-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--author-navy);
    font-size: 11px;
    font-weight: 900;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.17);
    transition: transform 0.25s ease, background 0.25s ease;
}

.author-final .btn-light:hover {
    transform: translateY(-3px);
    background: #e6f4f7;
}

.author-final-secondary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    min-height: 54px;
    padding: 0 22px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 11px;
    font-weight: 850;
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.author-final-secondary:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.30);
}

/* ========================================================================== 
   RESPONSIVE — 1200
   ========================================================================== */

@media (max-width: 1200px) {
    .author-page-hero-grid {
        grid-template-columns: minmax(340px, 0.82fr) minmax(0, 1.18fr);
        gap: 70px;
    }

    .author-page-portrait {
        transform: translateY(-28px);
    }

    .author-page-monogram {
        right: -18px;
    }

    .author-stories-grid {
        gap: 18px;
    }

    .author-story-card {
        padding: 28px 24px 26px;
    }
}

/* ========================================================================== 
   RESPONSIVE — 980
   ========================================================================== */

@media (max-width: 980px) {
    .author-page-hero {
        min-height: 0;
        padding-top: 115px;
    }

    .author-page-hero-grid {
        grid-template-columns: 1fr;
        gap: 72px;
    }

    .author-page-portrait {
        width: min(100%, 580px);
        margin: 0 auto;
        transform: none;
    }

    .author-page-manifesto {
        max-width: 850px;
        margin: 0 auto;
    }

    .author-page-hero::before {
        font-size: clamp(8rem, 22vw, 14rem);
    }

    .author-stories-head {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .author-stories-head .eyebrow {
        grid-column: auto;
    }

    .author-stories-head > p {
        max-width: 720px;
    }

    .author-stories-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .author-story-card {
        min-height: 0;
    }

    .author-story-summary {
        min-height: 0;
    }

    .author-voice-grid,
    .author-biography-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .author-biography-heading {
        position: static;
    }

    .author-territories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .author-numbers-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .author-number:nth-child(2) {
        border-right: 0;
    }

    .author-number:nth-child(-n+2) {
        border-bottom: 1px solid var(--author-line);
    }

    .author-final-panel {
        grid-template-columns: 1fr;
        align-items: start;
        gap: 42px;
    }

    .author-final-actions {
        flex-direction: row;
        min-width: 0;
    }

    .author-final .btn-light,
    .author-final-secondary {
        min-width: 220px;
    }
}

/* ========================================================================== 
   RESPONSIVE — 620
   ========================================================================== */

@media (max-width: 620px) {
    .author-page-hero {
        padding: 88px 0 82px;
    }

    .author-page-hero::before {
        bottom: 8px;
        font-size: clamp(5.5rem, 28vw, 8.5rem);
        opacity: 0.8;
    }

    .author-page-hero-grid {
        gap: 54px;
    }

    .author-page-portrait::before {
        display: none;
    }

    .author-page-photo {
        border-radius: 62px 62px 28px 28px;
    }

    .author-page-photo-signature {
        left: 22px;
        right: 22px;
        bottom: 22px;
        max-width: calc(100% - 44px);
    }

    .author-page-photo-signature span {
        font-size: 8px;
        letter-spacing: 0.15em;
    }

    .author-page-photo-signature strong {
        font-size: clamp(1.9rem, 9vw, 2.55rem);
    }

    .author-page-monogram {
        top: 24px;
        right: -8px;
        width: 82px;
        padding: 9px;
        border-width: 6px;
    }

    .author-page-manifesto h1 {
        font-size: clamp(3.15rem, 15vw, 4.55rem);
    }

    .author-page-manifesto-words {
        margin-top: 30px;
        font-size: 1.12rem;
    }

    .author-page-manifesto-lead {
        margin-top: 28px;
        font-size: 0.95rem;
    }

    .author-page-manifesto-text {
        margin-top: 24px;
        font-size: 0.9rem;
    }

    .author-page-discover {
        margin-top: 30px;
    }

    .author-stories,
    .author-biography,
    .author-territories {
        padding-top: 82px;
        padding-bottom: 82px;
    }

    .author-stories-head {
        margin-bottom: 38px;
    }

    .author-stories-head h2,
    .author-biography-heading h2,
    .author-territories-head h2 {
        font-size: clamp(2.7rem, 13vw, 3.8rem);
    }

    .author-story-card {
        padding: 27px 22px 24px;
        border-radius: 22px;
    }

    .author-story-top {
        margin-bottom: 28px;
    }

    .author-story-book {
        max-width: 66%;
    }

    .author-story-card h3 {
        font-size: 2.05rem;
    }

    .author-story-cast {
        margin-top: 22px;
        padding-top: 20px;
    }

    .author-story-character-list {
        gap: 7px;
    }

    .author-story-character-list > span {
        min-height: 29px;
        padding: 6px 9px;
        font-size: 9px;
    }

    .author-voice {
        padding: 82px 0;
    }

    .author-voice-grid {
        gap: 34px;
    }

    .author-voice-message h2 {
        font-size: clamp(2.9rem, 13vw, 4rem);
    }

    .author-voice-copy {
        font-size: 14px;
    }

    .author-biography-grid {
        gap: 38px;
    }

    .author-biography-copy p {
        font-size: 14px;
    }

    .author-biography-intro {
        font-size: 1.16rem !important;
    }

    .author-territories-head {
        margin-bottom: 40px;
    }

    .author-territories-grid {
        grid-template-columns: 1fr;
    }

    .author-territory {
        min-height: 0;
        padding: 28px 24px 30px;
    }

    .author-territory > span {
        margin-bottom: 25px;
    }

    .author-numbers {
        padding: 60px 0;
    }

    .author-numbers-grid {
        grid-template-columns: 1fr;
    }

    .author-number,
    .author-number:nth-child(2) {
        min-height: 130px;
        border-right: 0;
        border-bottom: 1px solid var(--author-line);
    }

    .author-number:last-child {
        border-bottom: 0;
    }

    .author-final {
        padding-top: 20px;
        padding-bottom: 78px;
    }

    .author-final-panel {
        gap: 34px;
        padding: 42px 26px;
        border-radius: 26px;
    }

    .author-final-copy h2 {
        font-size: clamp(2.9rem, 13vw, 4rem);
    }

    .author-final-copy > p {
        font-size: 14px;
    }

    .author-final-actions {
        flex-direction: column;
        width: 100%;
    }

    .author-final .btn-light,
    .author-final-secondary {
        width: 100%;
        min-width: 0;
    }
}

/* ========================================================================== 
   ACCESSIBILITÉ — RÉDUCTION DES ANIMATIONS
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .author-page-photo img,
    .author-page-discover,
    .author-story-card,
    .author-story-more summary::after,
    .author-story-link-arrow,
    .author-territory,
    .author-final .btn-light,
    .author-final-secondary {
        transition: none !important;
    }
}

/* ==========================================================================
   AUTHOR.PHP
   UNIVERS DES PERSONNAGES — EN-TÊTE ÉDITORIAL
   ========================================================================== */

.author-stories .author-stories-head {
    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(390px, .72fr);

    align-items: start;

    gap:
        clamp(
            70px,
            8vw,
            150px
        );

    margin-bottom:
        clamp(
            70px,
            8vw,
            120px
        );
}


/* ==========================================================================
   COLONNE GAUCHE
   ========================================================================== */

.author-stories .author-stories-heading {
    min-width: 0;
}


.author-stories .author-stories-heading .eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 18px;

    margin-bottom: 42px;
}


.author-stories .author-stories-heading .eyebrow::before {
    content: "";

    width: 54px;
    height: 1px;

    background: #c9a85e;
}


.author-stories .author-stories-heading h2 {
    max-width: 900px;

    margin: 0;

    color: #071426;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            4rem,
            5.8vw,
            6.7rem
        );

    font-weight: 400;

    line-height: .88;

    letter-spacing: -.055em;
}


.author-stories .author-stories-heading h2 > span {
    display: block;

    margin-top: 22px;

    color: #8eb6c4;

    font-style: italic;
    font-weight: 400;

    line-height: .92;
}


/* ==========================================================================
   COLONNE DROITE
   ========================================================================== */

.author-stories .author-stories-intro {
    position: relative;

    align-self: start;

    margin-top: 138px;

    padding:
        10px
        0
        12px
        40px;

    border-left:
        3px solid
        rgba(201, 168, 94, .78);
}


/* ==========================================================================
   PETIT TITRE
   ========================================================================== */

.author-stories .author-stories-intro-label {
    display: block;

    margin-bottom: 27px;

    color: #234a64;

    font-size: 12px;
    font-weight: 900;

    letter-spacing: .20em;

    text-transform: uppercase;
}


/* ==========================================================================
   TEXTE
   ========================================================================== */

.author-stories .author-stories-intro p {
    max-width: 570px;

    margin: 0;

    color: #465260;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            1.22rem,
            1.55vw,
            1.58rem
        );

    font-weight: 400;

    line-height: 1.6;

    letter-spacing: -.012em;
}


.author-stories .author-stories-intro p strong {
    color: #071426;

    font-weight: 500;
    font-style: italic;
}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width: 1100px) {

    .author-stories .author-stories-head {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(320px, .72fr);

        gap: 55px;
    }


    .author-stories .author-stories-intro {
        margin-top: 105px;

        padding-left: 30px;
    }


    .author-stories .author-stories-heading h2 {
        font-size:
            clamp(
                3.6rem,
                6vw,
                5.5rem
            );
    }

}


/* ==========================================================================
   MOBILE / PETITE TABLETTE
   ========================================================================== */

@media (max-width: 850px) {

    .author-stories .author-stories-head {
        grid-template-columns: 1fr;

        gap: 45px;

        margin-bottom: 70px;
    }


    .author-stories .author-stories-intro {
        margin-top: 0;

        padding:
            28px
            0
            0;

        border-left: 0;

        border-top:
            2px solid
            rgba(201, 168, 94, .72);
    }


    .author-stories .author-stories-intro-label {
        margin-bottom: 19px;
    }


    .author-stories .author-stories-intro p {
        max-width: 680px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    .author-stories .author-stories-heading .eyebrow {
        margin-bottom: 30px;
    }


    .author-stories .author-stories-heading h2 {
        font-size:
            clamp(
                3rem,
                13vw,
                4.5rem
            );
    }


    .author-stories .author-stories-heading h2 > span {
        margin-top: 16px;
    }


    .author-stories .author-stories-intro p {
        font-size: 1.12rem;

        line-height: 1.65;
    }

}

/* ==========================================================================
   AUTHOR.PHP — UNIVERS DES PERSONNAGES
   VERSION PLUS SOFT / ÉDITORIALE
   ========================================================================== */

.author-stories {
    padding-top: clamp(90px, 8vw, 125px);
    padding-bottom: clamp(95px, 9vw, 135px);
}


/* ==========================================================================
   EN-TÊTE
   ========================================================================== */

.author-stories .author-stories-head {
    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(340px, .62fr);

    align-items: start;

    gap: clamp(70px, 8vw, 130px);

    margin-bottom: clamp(70px, 7vw, 105px);
}


/* ==========================================================================
   COLONNE GAUCHE
   ========================================================================== */

.author-stories .author-stories-heading {
    min-width: 0;
}


.author-stories .author-stories-heading .eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 18px;

    margin-bottom: 34px;
}


.author-stories .author-stories-heading .eyebrow::before {
    content: "";

    width: 48px;
    height: 1px;

    background: rgba(190, 151, 75, .75);
}


/* ==========================================================================
   GRAND TITRE — PLUS CALME
   ========================================================================== */

.author-stories .author-stories-heading h2 {
    max-width: 770px;

    margin: 0;

    color: #0b1b2c;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(3.4rem, 4.5vw, 5.35rem);

    font-weight: 400;

    line-height: .96;

    letter-spacing: -.045em;
}


/* ==========================================================================
   PHRASE BLEUE
   ========================================================================== */

.author-stories .author-stories-heading h2 > span {
    display: block;

    max-width: 720px;

    margin-top: 22px;

    color: #98bcc8;

    font-size: .88em;

    font-style: italic;
    font-weight: 400;

    line-height: 1.02;

    letter-spacing: -.04em;
}


/* ==========================================================================
   COLONNE DROITE
   ========================================================================== */

.author-stories .author-stories-intro {
    position: relative;

    align-self: start;

    margin-top: 118px;

    max-width: 505px;

    padding:
        3px
        0
        4px
        30px;

    border-left:
        1px solid
        rgba(190, 151, 75, .62);
}


/* ==========================================================================
   LABEL
   ========================================================================== */

.author-stories .author-stories-intro-label {
    display: block;

    margin-bottom: 24px;

    color: #31516a;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .19em;

    text-transform: uppercase;
}


/* ==========================================================================
   TEXTE INTRO
   ========================================================================== */

.author-stories .author-stories-intro p {
    max-width: 470px;

    margin: 0;

    color: #65717c;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(1.05rem, 1.15vw, 1.22rem);

    font-weight: 400;

    line-height: 1.78;

    letter-spacing: -.008em;
}


.author-stories .author-stories-intro p strong {
    color: #263747;

    font-weight: 400;
    font-style: italic;
}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width: 1100px) {

    .author-stories .author-stories-head {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, .65fr);

        gap: 55px;
    }


    .author-stories .author-stories-intro {
        margin-top: 92px;
    }


    .author-stories .author-stories-heading h2 {
        font-size:
            clamp(3.2rem, 5vw, 4.6rem);
    }

}


/* ==========================================================================
   PETITE TABLETTE
   ========================================================================== */

@media (max-width: 850px) {

    .author-stories .author-stories-head {
        grid-template-columns: 1fr;

        gap: 42px;
    }


    .author-stories .author-stories-intro {
        margin-top: 0;

        max-width: 650px;

        padding:
            26px
            0
            0;

        border-left: 0;

        border-top:
            1px solid
            rgba(190, 151, 75, .55);
    }


    .author-stories .author-stories-intro p {
        max-width: 620px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    .author-stories {
        padding-top: 75px;
        padding-bottom: 85px;
    }


    .author-stories .author-stories-heading .eyebrow {
        margin-bottom: 26px;
    }


    .author-stories .author-stories-heading h2 {
        font-size:
            clamp(2.8rem, 12vw, 3.8rem);

        line-height: .98;
    }


    .author-stories .author-stories-heading h2 > span {
        margin-top: 17px;

        font-size: .9em;
    }


    .author-stories .author-stories-intro p {
        font-size: 1.04rem;

        line-height: 1.75;
    }

}

/* ==========================================================================
   AUTHOR.PHP — MANIFESTE DE LA PLUME
   VERSION ÉDITORIALE
   ========================================================================== */

.author-voice {
    position: relative;
    overflow: hidden;

    padding:
        clamp(95px, 9vw, 145px)
        0;

    background:
        linear-gradient(
            135deg,
            #071523 0%,
            #0a1b2b 55%,
            #0d2233 100%
        );

    color: #fff;
}


/* ==========================================================================
   COMPOSITION
   ========================================================================== */

.author-voice .author-voice-shell {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(340px, .78fr)
        minmax(0, 1.12fr);

    align-items: center;

    gap:
        clamp(
            65px,
            8vw,
            140px
        );
}


/* ==========================================================================
   PORTRAIT
   ========================================================================== */

.author-voice .author-voice-portrait {
    position: relative;

    max-width: 520px;
}


.author-voice .author-voice-photo {
    position: relative;

    aspect-ratio: .80;

    overflow: hidden;

    border-radius:
        110px
        110px
        34px
        34px;

    background: #0b1b2a;

    box-shadow:
        0 35px 85px
        rgba(0, 0, 0, .28);
}


.author-voice .author-voice-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
     * La photo est cadrée légèrement vers le haut
     * pour conserver le visage tout en montrant le costume.
     */
    object-position: center 24%;

    transform: scale(1.015);

    transition:
        transform .9s
        cubic-bezier(.2, .7, .2, 1);
}


.author-voice .author-voice-photo:hover img {
    transform: scale(1.035);
}


/* ==========================================================================
   DÉGRADÉ PHOTO
   ========================================================================== */

.author-voice .author-voice-photo-shade {
    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(4, 15, 26, 0) 48%,
            rgba(4, 15, 26, .10) 62%,
            rgba(4, 15, 26, .88) 100%
        );
}


/* ==========================================================================
   LÉGENDE SUR PHOTO
   ========================================================================== */

.author-voice .author-voice-photo-caption {
    position: absolute;
    z-index: 3;

    left: 34px;
    right: 28px;
    bottom: 31px;
}


.author-voice .author-voice-photo-caption span {
    display: block;

    margin-bottom: 8px;

    color: #9fc9d6;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .20em;

    text-transform: uppercase;
}


.author-voice .author-voice-photo-caption strong {
    display: block;

    color: #fff;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            1.75rem,
            2.4vw,
            2.7rem
        );

    font-weight: 400;

    line-height: 1;

    letter-spacing: -.035em;
}


/* ==========================================================================
   MANIFESTE
   ========================================================================== */

.author-voice .author-voice-message {
    position: relative;

    max-width: 780px;
}


/* ==========================================================================
   EYEBROW
   ========================================================================== */

.author-voice .author-voice-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 16px;

    margin-bottom: 39px;

    color: #9bc5d2;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .22em;

    text-transform: uppercase;
}


.author-voice .author-voice-eyebrow::before {
    content: "";

    width: 42px;
    height: 1px;

    background:
        rgba(210, 180, 111, .78);
}


/* ==========================================================================
   PREMIÈRE PHRASE
   ========================================================================== */

.author-voice .author-voice-opening {
    margin:
        0
        0
        17px;

    color:
        rgba(255, 255, 255, .66);

    font-size: 14px;

    line-height: 1.6;
}


/* ==========================================================================
   TITRE
   ========================================================================== */

.author-voice .author-voice-message h2 {
    max-width: 760px;

    margin: 0;

    color: #fff;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            3.5rem,
            5vw,
            6rem
        );

    font-weight: 400;

    line-height: .96;

    letter-spacing: -.052em;
}


.author-voice .author-voice-message h2 span {
    display: block;

    margin-top: 7px;

    color: #97c1ce;

    font-style: italic;
    font-weight: 400;
}


/* ==========================================================================
   TEXTE
   ========================================================================== */

.author-voice .author-voice-copy {
    max-width: 625px;

    margin:
        34px
        0
        0;

    color:
        rgba(223, 232, 237, .71);

    font-size:
        clamp(
            .98rem,
            1.1vw,
            1.08rem
        );

    line-height: 1.85;
}


/* ==========================================================================
   SIGNATURE DÉCORATIVE
   ========================================================================== */

.author-voice .author-voice-signature {
    margin-top: 38px;

    color:
        rgba(210, 180, 111, .82);

    font-family:
        var(--font-serif, Georgia, serif);

    font-size: 1rem;

    font-style: italic;

    letter-spacing: .02em;
}


/* ==========================================================================
   MOT DÉCORATIF DE FOND
   ========================================================================== */

.author-voice::after {
    content: "ÉCRIRE";

    position: absolute;

    right: -1vw;
    bottom: -4vw;

    color:
        rgba(255, 255, 255, .018);

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            8rem,
            17vw,
            19rem
        );

    font-weight: 700;

    line-height: .75;

    letter-spacing: -.07em;

    white-space: nowrap;

    pointer-events: none;
}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width: 1050px) {

    .author-voice .author-voice-shell {
        grid-template-columns:
            minmax(290px, .72fr)
            minmax(0, 1fr);

        gap: 55px;
    }


    .author-voice .author-voice-message h2 {
        font-size:
            clamp(
                3.2rem,
                5.5vw,
                4.8rem
            );
    }

}


/* ==========================================================================
   TABLETTE VERTICALE
   ========================================================================== */

@media (max-width: 820px) {

    .author-voice .author-voice-shell {
        grid-template-columns: 1fr;

        gap: 58px;
    }


    .author-voice .author-voice-portrait {
        width: min(100%, 500px);

        margin: 0 auto;
    }


    .author-voice .author-voice-message {
        max-width: 680px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    .author-voice {
        padding:
            75px
            0
            85px;
    }


    .author-voice .author-voice-photo {
        border-radius:
            70px
            70px
            28px
            28px;
    }


    .author-voice .author-voice-photo-caption {
        left: 24px;
        right: 20px;
        bottom: 24px;
    }


    .author-voice .author-voice-eyebrow {
        margin-bottom: 30px;
    }


    .author-voice .author-voice-message h2 {
        font-size:
            clamp(
                2.8rem,
                12vw,
                4rem
            );
    }


    .author-voice .author-voice-copy {
        margin-top: 27px;

        font-size: .98rem;

        line-height: 1.78;
    }

}


/* ==========================================================================
   ACCESSIBILITÉ
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .author-voice .author-voice-photo img {
        transition: none;
    }

    .author-voice .author-voice-photo:hover img {
        transform: scale(1.015);
    }

}

.author-voice .author-voice-message h2 {
    max-width: 760px;

    margin: 0;

    color: #fff;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(3.25rem, 4.45vw, 5.35rem);

    font-weight: 400;

    line-height: .98;

    letter-spacing: -.048em;
}

.author-voice .author-voice-message h2 span {
    display: block;

    margin-top: 8px;

    color: #8fb5c2;

    font-style: italic;
    font-weight: 400;
}

.author-voice .author-voice-copy {
    max-width: 650px;

    margin: 34px 0 0;

    color: rgba(223, 232, 237, .67);

    font-size: 1rem;

    line-height: 1.9;
}

/* ==========================================================================
   AUTHOR.PHP — DERRIÈRE L'ÉCRITURE
   ========================================================================== */

.author-writing {
    position: relative;

    padding:
        clamp(100px, 9vw, 145px)
        0;

    background: #f4f1ea;
}


/* ==========================================================================
   STRUCTURE
   ========================================================================== */

.author-writing .author-writing-shell {
    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(300px, .65fr);

    gap:
        55px
        clamp(70px, 8vw, 140px);
}


/* ==========================================================================
   TITRE
   ========================================================================== */

.author-writing .author-writing-head h2 {
    max-width: 780px;

    margin:
        28px
        0
        0;

    color: #0a1929;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(3.5rem, 4.7vw, 5.7rem);

    font-weight: 400;

    line-height: .94;

    letter-spacing: -.05em;
}


.author-writing .author-writing-head h2 span {
    display: block;

    margin-top: 11px;

    color: #8eb5c2;

    font-style: italic;
}


/* ==========================================================================
   INTRO
   ========================================================================== */

.author-writing .author-writing-intro {
    align-self: end;

    padding-left: 30px;

    border-left:
        1px solid
        rgba(190, 151, 75, .65);
}


.author-writing .author-writing-intro p {
    max-width: 450px;

    margin: 0;

    color: #66717b;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(1.08rem, 1.25vw, 1.3rem);

    line-height: 1.7;
}


/* ==========================================================================
   GRILLE
   ========================================================================== */

.author-writing .author-writing-grid {
    grid-column:
        1 / -1;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    margin-top: 30px;

    border-top:
        1px solid
        rgba(10, 25, 41, .12);

    border-bottom:
        1px solid
        rgba(10, 25, 41, .12);
}


/* ==========================================================================
   ITEM
   ========================================================================== */

.author-writing .author-writing-item {
    min-height: 300px;

    padding:
        38px
        30px
        42px;

    border-right:
        1px solid
        rgba(10, 25, 41, .10);
}


.author-writing .author-writing-item:first-child {
    padding-left: 0;
}


.author-writing .author-writing-item:last-child {
    border-right: 0;
}


.author-writing .author-writing-number {
    display: block;

    margin-bottom: 42px;

    color:
        rgba(54, 93, 116, .55);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .18em;
}


.author-writing .author-writing-item h3 {
    margin:
        0
        0
        18px;

    color: #0a1929;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(1.7rem, 2vw, 2.15rem);

    font-weight: 400;

    line-height: 1;
}


.author-writing .author-writing-item p {
    max-width: 260px;

    margin: 0;

    color: #75808a;

    font-size: .92rem;

    line-height: 1.75;
}


/* ==========================================================================
   SIGNATURE
   ========================================================================== */

.author-writing .author-writing-signature {
    grid-column:
        1 / -1;

    display: flex;

    align-items: baseline;
    justify-content: space-between;

    gap: 35px;

    padding-top: 13px;
}


.author-writing .author-writing-signature span {
    color: #75808a;

    font-size: .82rem;

    letter-spacing: .04em;
}


.author-writing .author-writing-signature strong {
    max-width: 620px;

    color: #0a1929;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(1.25rem, 1.7vw, 1.7rem);

    font-style: italic;
    font-weight: 400;

    text-align: right;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1000px) {

    .author-writing .author-writing-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .author-writing .author-writing-item:nth-child(2) {
        border-right: 0;
    }


    .author-writing .author-writing-item:nth-child(-n + 2) {
        border-bottom:
            1px solid
            rgba(10, 25, 41, .10);
    }

}


@media (max-width: 800px) {

    .author-writing .author-writing-shell {
        grid-template-columns: 1fr;
    }


    .author-writing .author-writing-intro {
        padding:
            25px
            0
            0;

        border-left: 0;

        border-top:
            1px solid
            rgba(190, 151, 75, .65);
    }


    .author-writing .author-writing-signature {
        align-items: flex-start;
        flex-direction: column;
    }


    .author-writing .author-writing-signature strong {
        text-align: left;
    }

}


@media (max-width: 600px) {

    .author-writing {
        padding:
            80px
            0;
    }


    .author-writing .author-writing-grid {
        grid-template-columns: 1fr;
    }


    .author-writing .author-writing-item,
    .author-writing .author-writing-item:first-child {
        min-height: 0;

        padding:
            30px
            0;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(10, 25, 41, .10);
    }


    .author-writing .author-writing-item:last-child {
        border-bottom: 0;
    }


    .author-writing .author-writing-number {
        margin-bottom: 24px;
    }

}
/* ==========================================================================
   CONTACT.PHP — PAGE CONTACT
   ========================================================================== */

.contact-page {
    background: #f7f5f0;
}


/* ==========================================================================
   HERO
   ========================================================================== */

.contact-page .contact-page-hero {
    padding:
        clamp(110px, 9vw, 155px)
        0
        clamp(70px, 6vw, 100px);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f5f0 100%
        );
}


.contact-page .contact-page-hero-inner {
    max-width: 1100px;
}


.contact-page .contact-page-hero .eyebrow {
    margin-bottom: 30px;
}


.contact-page .contact-page-hero h1 {
    max-width: 1050px;

    margin: 0;

    color: #081728;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            4.3rem,
            6.4vw,
            7.5rem
        );

    font-weight: 400;

    line-height: .91;

    letter-spacing: -.057em;
}


.contact-page .contact-page-hero h1 span {
    display: block;

    color: #8db4c1;

    font-style: italic;
    font-weight: 400;
}


.contact-page .contact-page-hero p {
    max-width: 680px;

    margin:
        34px
        0
        0;

    color: #68737c;

    font-size:
        clamp(
            1rem,
            1.15vw,
            1.1rem
        );

    line-height: 1.8;
}


/* ==========================================================================
   SECTION PRINCIPALE
   ========================================================================== */

.contact-page .contact-page-section {
    padding-top: 30px;
    padding-bottom:
        clamp(100px, 9vw, 150px);
}


.contact-page .contact-page-grid {
    display: grid;

    grid-template-columns:
        minmax(360px, .82fr)
        minmax(0, 1.08fr);

    align-items: stretch;

    gap:
        clamp(
            55px,
            7vw,
            110px
        );
}


/* ==========================================================================
   PHOTO
   ========================================================================== */

.contact-page .contact-page-visual {
    min-width: 0;
}


.contact-page .contact-page-photo {
    position: relative;

    overflow: hidden;

    min-height: 680px;

    border-radius:
        100px
        100px
        36px
        36px;

    background: #091827;

    box-shadow:
        0 35px 85px
        rgba(14, 27, 39, .17);
}


.contact-page .contact-page-photo img {
    display: block;

    width: 100%;
    height: 100%;

    position: absolute;
    inset: 0;

    object-fit: cover;

    /*
     * On garde le visage et le livre
     * comme points principaux.
     */
    object-position: 54% center;
}


.contact-page .contact-page-photo-shade {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(4, 17, 30, .02) 38%,
            rgba(4, 17, 30, .14) 58%,
            rgba(4, 17, 30, .92) 100%
        );

    pointer-events: none;
}


/* ==========================================================================
   TEXTE SUR PHOTO
   ========================================================================== */

.contact-page .contact-page-photo-content {
    position: absolute;
    z-index: 2;

    left: 42px;
    right: 38px;
    bottom: 40px;
}


.contact-page .contact-page-photo-content > span {
    display: block;

    margin-bottom: 14px;

    color: #afd0da;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .20em;

    text-transform: uppercase;
}


.contact-page .contact-page-photo-content h2 {
    max-width: 430px;

    margin: 0;

    color: #ffffff;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            2.3rem,
            3.4vw,
            3.7rem
        );

    font-weight: 400;

    line-height: 1;

    letter-spacing: -.045em;
}


.contact-page .contact-page-photo-content h2 em {
    display: block;

    color: #d4b66e;

    font-weight: 400;
}


/* ==========================================================================
   NOTE SOUS PHOTO
   ========================================================================== */

.contact-page .contact-page-note {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 30px;

    padding:
        28px
        10px
        0;
}


.contact-page .contact-page-note-label {
    display: block;

    margin-bottom: 8px;

    color: #17364c;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .17em;

    text-transform: uppercase;
}


.contact-page .contact-page-note p {
    max-width: 410px;

    margin: 0;

    color: #7a838a;

    font-size: .9rem;

    line-height: 1.7;
}


.contact-page .contact-page-email {
    flex: 0 0 auto;

    color: #17364c;

    font-size: .88rem;
    font-weight: 700;

    text-decoration: none;

    border-bottom:
        1px solid
        rgba(23, 54, 76, .25);
}


/* ==========================================================================
   FORMULAIRE
   ========================================================================== */

.contact-page .contact-page-form {
    padding:
        clamp(45px, 5vw, 72px);

    border:
        1px solid
        rgba(8, 23, 40, .08);

    border-radius: 42px;

    background: #ffffff;

    box-shadow:
        0 28px 70px
        rgba(23, 37, 48, .08);
}


/* ==========================================================================
   FORMULAIRE — TITRE
   ========================================================================== */

.contact-page .contact-page-form-head {
    margin-bottom: 42px;
}


.contact-page .contact-page-form-kicker {
    display: block;

    margin-bottom: 17px;

    color: #a8833f;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .20em;

    text-transform: uppercase;
}


.contact-page .contact-page-form-head h2 {
    margin: 0;

    color: #091827;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            3rem,
            4vw,
            4.5rem
        );

    font-weight: 400;

    line-height: .95;

    letter-spacing: -.05em;
}


.contact-page .contact-page-form-head p {
    max-width: 540px;

    margin:
        19px
        0
        0;

    color: #79828a;

    font-size: .92rem;

    line-height: 1.7;
}


/* ==========================================================================
   GRILLE DU FORMULAIRE
   ========================================================================== */

.contact-page .contact-page-form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        28px
        22px;
}


.contact-page .contact-page-field-full {
    grid-column:
        1 / -1;
}


/* ==========================================================================
   LABEL
   ========================================================================== */

.contact-page .contact-page-field label {
    display: flex;

    align-items: baseline;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 10px;

    color: #1a2e3e;

    font-size: .78rem;
    font-weight: 800;

    letter-spacing: .025em;
}


.contact-page .contact-page-field label span {
    color: #a3a8ac;

    font-size: .7rem;
    font-weight: 500;
}


/* ==========================================================================
   INPUTS
   ========================================================================== */

.contact-page .contact-page-field .input {
    width: 100%;

    min-height: 58px;

    padding:
        15px
        17px;

    border:
        1px solid
        rgba(8, 23, 40, .13);

    border-radius: 13px;

    outline: none;

    background: #fbfaf7;

    color: #091827;

    font: inherit;

    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        background .22s ease;
}


.contact-page .contact-page-field textarea.input {
    min-height: 190px;

    resize: vertical;

    line-height: 1.7;
}


.contact-page .contact-page-field .input::placeholder {
    color: #a0a6aa;
}


.contact-page .contact-page-field .input:focus {
    border-color:
        rgba(137, 180, 195, .9);

    background: #ffffff;

    box-shadow:
        0 0 0 4px
        rgba(137, 180, 195, .11);
}


/* ==========================================================================
   BOUTON
   ========================================================================== */

.contact-page .contact-page-submit {
    display: flex;

    align-items: center;

    gap: 22px;

    margin-top: 4px;
}


.contact-page .contact-page-submit .btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 35px;

    min-width: 230px;

    padding:
        17px
        24px;

    border-radius: 999px;

    background: #091827;

    color: #ffffff;
}


.contact-page .contact-page-submit .btn span {
    transition:
        transform .2s ease;
}


.contact-page .contact-page-submit .btn:hover span {
    transform:
        translateX(4px);
}


.contact-page .contact-page-submit p {
    margin: 0;

    color: #92989d;

    font-size: .78rem;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1050px) {

    .contact-page .contact-page-grid {
        grid-template-columns:
            minmax(310px, .72fr)
            minmax(0, 1fr);

        gap: 45px;
    }


    .contact-page .contact-page-photo {
        min-height: 620px;
    }

}


@media (max-width: 850px) {

    .contact-page .contact-page-grid {
        grid-template-columns: 1fr;
    }


    .contact-page .contact-page-visual {
        width: min(100%, 620px);

        margin: 0 auto;
    }


    .contact-page .contact-page-photo {
        min-height: 720px;
    }

}


@media (max-width: 600px) {

    .contact-page .contact-page-hero {
        padding:
            85px
            0
            60px;
    }


    .contact-page .contact-page-hero h1 {
        font-size:
            clamp(
                3.2rem,
                14vw,
                4.6rem
            );
    }


    .contact-page .contact-page-photo {
        min-height: 560px;

        border-radius:
            60px
            60px
            28px
            28px;
    }


    .contact-page .contact-page-photo-content {
        left: 25px;
        right: 22px;
        bottom: 27px;
    }


    .contact-page .contact-page-note {
        flex-direction: column;
    }


    .contact-page .contact-page-form {
        padding:
            36px
            24px;

        border-radius: 28px;
    }


    .contact-page .contact-page-form-grid {
        grid-template-columns: 1fr;
    }


    .contact-page .contact-page-field {
        grid-column:
            1 / -1;
    }


    .contact-page .contact-page-submit {
        align-items: stretch;
        flex-direction: column;
    }


    .contact-page .contact-page-submit .btn {
        width: 100%;
    }

}

/* ==========================================================================
   CONTACT.PHP — VERSION ÉDITORIALE PREMIUM
   ========================================================================== */

.contact-editorial {
    background: #f5f1e9;
}


/* ==========================================================================
   HERO GLOBAL
   ========================================================================== */

.contact-editorial-hero {
    position: relative;
    overflow: hidden;

    padding:
        clamp(100px, 8vw, 145px)
        0
        clamp(105px, 9vw, 155px);

    background:
        radial-gradient(
            circle at 85% 12%,
            rgba(91, 145, 164, .17),
            transparent 31%
        ),
        linear-gradient(
            130deg,
            #061523 0%,
            #091b2a 57%,
            #102b3c 100%
        );
}


/* ==========================================================================
   COMPOSITION
   ========================================================================== */

.contact-editorial .contact-editorial-shell {
    position: relative;
    z-index: 3;

    display: grid;

    grid-template-columns:
        minmax(0, 1.03fr)
        minmax(400px, .72fr);

    align-items: center;

    gap:
        clamp(
            70px,
            8vw,
            145px
        );
}


/* ==========================================================================
   COLONNE GAUCHE
   ========================================================================== */

.contact-editorial .contact-editorial-story {
    min-width: 0;
}


/* ==========================================================================
   EYEBROW
   ========================================================================== */

.contact-editorial .contact-editorial-eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 18px;

    margin-bottom: 36px;

    color: #b5d2dc;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: .22em;

    text-transform: uppercase;
}


.contact-editorial .contact-editorial-eyebrow::before {
    content: "";

    width: 52px;
    height: 1px;

    background: #d0ad62;
}


/* ==========================================================================
   TITRE
   ========================================================================== */

.contact-editorial .contact-editorial-story h1 {
    position: relative;
    z-index: 4;

    max-width: 940px;

    margin: 0;

    color: #fffdf8;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            4rem,
            5.8vw,
            7rem
        );

    font-weight: 400;

    line-height: .9;

    letter-spacing: -.06em;
}


.contact-editorial .contact-editorial-story h1 span {
    display: block;

    margin-top: 7px;

    color: #9bc1cd;

    font-style: italic;
    font-weight: 400;
}


/* ==========================================================================
   INTRO
   ========================================================================== */

.contact-editorial .contact-editorial-lead {
    max-width: 690px;

    margin:
        34px
        0
        46px;

    color:
        rgba(234, 240, 242, .68);

    font-size:
        clamp(
            .98rem,
            1.05vw,
            1.08rem
        );

    line-height: 1.9;
}


/* ==========================================================================
   PHOTO
   ========================================================================== */

.contact-editorial .contact-editorial-photo {
    position: relative;

    width: min(100%, 790px);
    aspect-ratio: 1.22;

    overflow: hidden;

    border-radius:
        95px
        95px
        32px
        32px;

    background: #071726;

    box-shadow:
        0 42px 90px
        rgba(0, 0, 0, .33);
}


.contact-editorial .contact-editorial-photo::before {
    content: "";

    position: absolute;

    top: -15px;
    right: -15px;

    z-index: 3;

    width: 110px;
    height: 110px;

    border-top:
        1px solid
        rgba(210, 180, 111, .85);

    border-right:
        1px solid
        rgba(210, 180, 111, .85);

    pointer-events: none;
}


.contact-editorial .contact-editorial-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
     * On privilégie le visage + le livre.
     */
    object-position: 53% 38%;

    transform: scale(1.025);

    transition:
        transform .9s
        cubic-bezier(.2, .7, .2, 1);
}


.contact-editorial .contact-editorial-photo:hover img {
    transform: scale(1.05);
}


/* ==========================================================================
   DÉGRADÉ PHOTO
   ========================================================================== */

.contact-editorial .contact-editorial-photo-shade {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(4, 15, 25, 0) 42%,
            rgba(4, 15, 25, .09) 57%,
            rgba(4, 15, 25, .92) 100%
        );

    pointer-events: none;
}


/* ==========================================================================
   TEXTE SUR PHOTO
   ========================================================================== */

.contact-editorial .contact-editorial-photo-caption {
    position: absolute;

    z-index: 2;

    left: 39px;
    right: 38px;
    bottom: 34px;
}


.contact-editorial .contact-editorial-photo-caption > span {
    display: block;

    margin-bottom: 10px;

    color: #d1b36c;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .21em;

    text-transform: uppercase;
}


.contact-editorial .contact-editorial-photo-caption strong {
    display: block;

    max-width: 500px;

    color: #ffffff;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            1.8rem,
            2.5vw,
            2.7rem
        );

    font-weight: 400;

    line-height: 1.04;

    letter-spacing: -.035em;
}


/* ==========================================================================
   META SOUS PHOTO
   ========================================================================== */

.contact-editorial .contact-editorial-meta {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    max-width: 790px;

    padding:
        24px
        5px
        0;
}


.contact-editorial .contact-editorial-meta > div > span {
    display: block;

    color: #fff;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size: 1.1rem;
}


.contact-editorial .contact-editorial-meta p {
    margin:
        5px
        0
        0;

    color:
        rgba(213, 226, 231, .52);

    font-size: .76rem;

    letter-spacing: .08em;
}


.contact-editorial .contact-editorial-meta > a {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: #d5b96f;

    font-size: .82rem;
    font-weight: 700;

    text-decoration: none;
}


.contact-editorial .contact-editorial-meta > a span {
    transition:
        transform .2s ease;
}


.contact-editorial .contact-editorial-meta > a:hover span {
    transform:
        translate(3px, -3px);
}


/* ==========================================================================
   FORM CARD
   ========================================================================== */

.contact-editorial .contact-editorial-form-card {
    position: relative;

    padding:
        clamp(
            48px,
            5vw,
            72px
        );

    border-radius:
        48px;

    background: #faf7f0;

    box-shadow:
        0 40px 100px
        rgba(0, 0, 0, .25);

    transform:
        translateY(44px);
}


/* Petit accent décoratif */

.contact-editorial .contact-editorial-form-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 52px;

    width: 82px;
    height: 3px;

    background: #d0ad62;
}


/* ==========================================================================
   FORM HEAD
   ========================================================================== */

.contact-editorial .contact-editorial-form-head {
    margin-bottom: 38px;
}


.contact-editorial .contact-editorial-form-head > span {
    display: block;

    margin-bottom: 14px;

    color: #a17e3e;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .2em;

    text-transform: uppercase;
}


.contact-editorial .contact-editorial-form-head h2 {
    margin: 0;

    color: #071625;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            3.3rem,
            4vw,
            4.8rem
        );

    font-weight: 400;

    line-height: .9;

    letter-spacing: -.055em;
}


.contact-editorial .contact-editorial-form-head p {
    max-width: 440px;

    margin:
        20px
        0
        0;

    color: #788087;

    font-size: .9rem;

    line-height: 1.7;
}


/* ==========================================================================
   FORM GRID
   ========================================================================== */

.contact-editorial .contact-editorial-form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        25px
        19px;
}


.contact-editorial .contact-editorial-field-full {
    grid-column:
        1 / -1;
}


/* ==========================================================================
   LABELS
   ========================================================================== */

.contact-editorial .contact-editorial-field label {
    display: flex;

    align-items: baseline;
    justify-content: space-between;

    gap: 10px;

    margin-bottom: 9px;

    color: #142b3b;

    font-size: .74rem;
    font-weight: 800;

    letter-spacing: .04em;
}


.contact-editorial .contact-editorial-field label span {
    color: #a2a5a7;

    font-size: .66rem;
    font-weight: 500;
}


/* ==========================================================================
   INPUTS
   ========================================================================== */

.contact-editorial .contact-editorial-field .input {
    width: 100%;

    min-height: 57px;

    padding:
        15px
        16px;

    border:
        1px solid
        rgba(7, 22, 37, .13);

    border-radius: 12px;

    outline: 0;

    background:
        rgba(255, 255, 255, .62);

    color: #081827;

    font: inherit;

    transition:
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}


.contact-editorial .contact-editorial-field textarea.input {
    min-height: 180px;

    resize: vertical;

    line-height: 1.7;
}


.contact-editorial .contact-editorial-field .input::placeholder {
    color: #aaa9a5;
}


.contact-editorial .contact-editorial-field .input:focus {
    border-color: #91b8c5;

    background: #fff;

    box-shadow:
        0 0 0 4px
        rgba(145, 184, 197, .11);
}


/* ==========================================================================
   SUBMIT
   ========================================================================== */

.contact-editorial .contact-editorial-submit {
    margin-top: 5px;
}


.contact-editorial .contact-editorial-submit .btn {
    display: flex;

    align-items: center;
    justify-content: space-between;

    width: 100%;

    padding:
        18px
        23px;

    border-radius: 999px;

    background: #071625;

    color: #fff;
}


.contact-editorial .contact-editorial-submit .btn > span:last-child {
    width: 36px;
    height: 36px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .08);

    transition:
        transform .2s ease,
        background .2s ease;
}


.contact-editorial .contact-editorial-submit .btn:hover > span:last-child {
    transform:
        translateX(4px);

    background:
        rgba(210, 180, 111, .25);
}


.contact-editorial .contact-editorial-submit p {
    margin:
        13px
        0
        0;

    color: #9a9b98;

    font-size: .72rem;

    text-align: center;
}


/* ==========================================================================
   WATERMARK
   ========================================================================== */

.contact-editorial .contact-editorial-watermark {
    position: absolute;

    z-index: 0;

    left: 50%;
    bottom: -42px;

    transform:
        translateX(-50%);

    color:
        rgba(255, 255, 255, .018);

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            10rem,
            19vw,
            22rem
        );

    font-weight: 700;

    line-height: .72;

    letter-spacing: -.075em;

    white-space: nowrap;

    pointer-events: none;
}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width: 1100px) {

    .contact-editorial .contact-editorial-shell {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(350px, .72fr);

        gap: 50px;
    }


    .contact-editorial .contact-editorial-form-card {
        transform: translateY(20px);
    }

}


/* ==========================================================================
   MOBILE / TABLETTE VERTICALE
   ========================================================================== */

@media (max-width: 850px) {

    .contact-editorial .contact-editorial-shell {
        grid-template-columns: 1fr;

        gap: 65px;
    }


    .contact-editorial .contact-editorial-form-card {
        width: min(100%, 680px);

        margin: 0 auto;

        transform: none;
    }


    .contact-editorial .contact-editorial-photo {
        width: 100%;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    .contact-editorial-hero {
        padding:
            80px
            0;
    }


    .contact-editorial .contact-editorial-story h1 {
        font-size:
            clamp(
                3.2rem,
                14vw,
                4.5rem
            );
    }


    .contact-editorial .contact-editorial-photo {
        aspect-ratio: .84;

        border-radius:
            60px
            60px
            25px
            25px;
    }


    .contact-editorial .contact-editorial-photo-caption {
        left: 24px;
        right: 24px;
        bottom: 25px;
    }


    .contact-editorial .contact-editorial-meta {
        align-items: flex-start;
        flex-direction: column;
    }


    .contact-editorial .contact-editorial-form-card {
        padding:
            42px
            24px;

        border-radius: 30px;
    }


    .contact-editorial .contact-editorial-form-grid {
        grid-template-columns: 1fr;
    }


    .contact-editorial .contact-editorial-field {
        grid-column:
            1 / -1;
    }

}


/* ==========================================================================
   ACCESSIBILITÉ
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .contact-editorial .contact-editorial-photo img,
    .contact-editorial .contact-editorial-submit .btn span,
    .contact-editorial .contact-editorial-meta a span {
        transition: none;
    }

}
/* ==========================================================================
   CONTACT.PHP — VERSION PREMIUM CLAIRE
   ========================================================================== */

.contact-premium {
    background: #f6f3ed;
}


/* ==========================================================================
   HERO
   ========================================================================== */

.contact-premium .contact-premium-hero {
    position: relative;

    padding:
        clamp(105px, 8vw, 150px)
        0
        clamp(95px, 8vw, 135px);

    overflow: hidden;

    background:
        radial-gradient(
            circle at 83% 19%,
            rgba(136, 181, 196, .13),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #fbfaf7 0%,
            #f3efe7 100%
        );
}


/* ==========================================================================
   HERO GRID
   ========================================================================== */

.contact-premium .contact-premium-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, .92fr)
        minmax(430px, .78fr);

    align-items: center;

    gap:
        clamp(
            70px,
            8vw,
            140px
        );
}


/* ==========================================================================
   INTRO
   ========================================================================== */

.contact-premium .contact-premium-intro {
    min-width: 0;
}


.contact-premium .contact-premium-intro .eyebrow {
    margin-bottom: 33px;
}


.contact-premium .contact-premium-intro h1 {
    max-width: 830px;

    margin: 0;

    color: #071625;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            4rem,
            5.7vw,
            6.7rem
        );

    font-weight: 400;

    line-height: .92;

    letter-spacing: -.056em;
}


.contact-premium .contact-premium-intro h1 span {
    display: block;

    margin-top: 5px;

    color: #8eb5c2;

    font-style: italic;
    font-weight: 400;
}


.contact-premium .contact-premium-intro > p {
    max-width: 650px;

    margin:
        34px
        0
        0;

    color: #66727b;

    font-size:
        clamp(
            .98rem,
            1.08vw,
            1.08rem
        );

    line-height: 1.85;
}


/* ==========================================================================
   MOTS CLÉS
   ========================================================================== */

.contact-premium .contact-premium-reasons {
    display: flex;
    flex-wrap: wrap;

    gap:
        9px
        10px;

    margin-top: 35px;
}


.contact-premium .contact-premium-reasons span {
    padding:
        9px
        14px;

    border:
        1px solid
        rgba(7, 22, 37, .1);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .52);

    color: #425563;

    font-size: .73rem;
}


/* ==========================================================================
   PHOTO
   ========================================================================== */

.contact-premium .contact-premium-visual {
    position: relative;
}


.contact-premium .contact-premium-photo-frame {
    position: relative;

    aspect-ratio: .83;

    overflow: hidden;

    border-radius:
        110px
        110px
        34px
        34px;

    background: #d8d4cb;

    box-shadow:
        0 36px 90px
        rgba(19, 34, 45, .16);
}


.contact-premium .contact-premium-photo-frame img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center center;

    transition:
        transform .9s
        cubic-bezier(.2, .7, .2, 1);
}


.contact-premium .contact-premium-photo-frame:hover img {
    transform: scale(1.025);
}


/* ==========================================================================
   PETIT DÉTAIL DORÉ
   ========================================================================== */

.contact-premium .contact-premium-corner {
    position: absolute;

    z-index: 3;

    top: 30px;
    right: 30px;

    width: 62px;
    height: 62px;

    border-top:
        1px solid
        rgba(194, 157, 83, .82);

    border-right:
        1px solid
        rgba(194, 157, 83, .82);

    pointer-events: none;
}


/* ==========================================================================
   SOUS-TEXTE PHOTO
   ========================================================================== */

.contact-premium .contact-premium-photo-meta {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 25px;

    padding:
        24px
        10px
        0;
}


.contact-premium .contact-premium-photo-meta span {
    display: block;

    margin-bottom: 7px;

    color: #967339;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .18em;

    text-transform: uppercase;
}


.contact-premium .contact-premium-photo-meta strong {
    display: block;

    max-width: 340px;

    color: #162939;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            1.1rem,
            1.35vw,
            1.4rem
        );

    font-weight: 400;

    line-height: 1.35;
}


.contact-premium .contact-premium-photo-meta > img {
    flex: 0 0 auto;

    width: 62px;
    height: 62px;

    padding: 8px;

    border:
        1px solid
        rgba(7, 22, 37, .08);

    border-radius: 50%;

    background: #fff;

    object-fit: contain;
}


/* ==========================================================================
   FORM SECTION
   ========================================================================== */

.contact-premium .contact-premium-form-section {
    padding:
        clamp(95px, 9vw, 145px)
        0;

    background: #ffffff;
}


/* ==========================================================================
   FORM SHELL
   ========================================================================== */

.contact-premium .contact-premium-form-shell {
    display: grid;

    grid-template-columns:
        minmax(300px, .62fr)
        minmax(0, 1.1fr);

    overflow: hidden;

    border:
        1px solid
        rgba(7, 22, 37, .08);

    border-radius: 44px;

    background: #faf8f3;

    box-shadow:
        0 30px 80px
        rgba(23, 34, 43, .08);
}


/* ==========================================================================
   COLONNE GAUCHE
   ========================================================================== */

.contact-premium .contact-premium-side {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 100%;

    padding:
        clamp(45px, 5vw, 68px);

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #071625 0%,
            #102a3b 100%
        );

    color: #ffffff;
}


.contact-premium .contact-premium-side-label {
    display: block;

    margin-bottom: 38px;

    color: #d1b16b;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .2em;

    text-transform: uppercase;
}


.contact-premium .contact-premium-side h2 {
    max-width: 420px;

    margin: 0;

    color: #fff;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            2.7rem,
            3.5vw,
            4.3rem
        );

    font-weight: 400;

    line-height: .96;

    letter-spacing: -.05em;
}


.contact-premium .contact-premium-side h2 span {
    display: block;

    margin-top: 7px;

    color: #9bc0cc;

    font-style: italic;
}


.contact-premium .contact-premium-side > p {
    max-width: 400px;

    margin:
        31px
        0
        0;

    color:
        rgba(227, 235, 239, .66);

    font-size: .9rem;

    line-height: 1.8;
}


/* ==========================================================================
   CONTACT DIRECT
   ========================================================================== */

.contact-premium .contact-premium-direct {
    margin-top: 46px;

    padding-top: 24px;

    border-top:
        1px solid
        rgba(255, 255, 255, .1);
}


.contact-premium .contact-premium-direct span {
    display: block;

    margin-bottom: 7px;

    color:
        rgba(220, 231, 236, .46);

    font-size: .68rem;

    letter-spacing: .12em;

    text-transform: uppercase;
}


.contact-premium .contact-premium-direct a {
    color: #d8bd7a;

    font-size: .88rem;
    font-weight: 700;

    text-decoration: none;
}


/* ==========================================================================
   MONOGRAMME
   ========================================================================== */

.contact-premium .contact-premium-side-mark {
    position: absolute;

    right: -42px;
    bottom: -42px;

    width: 170px;
    height: 170px;

    opacity: .055;
}


.contact-premium .contact-premium-side-mark img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* ==========================================================================
   FORMULAIRE
   ========================================================================== */

.contact-premium .contact-premium-form {
    padding:
        clamp(50px, 6vw, 78px);
}


/* ==========================================================================
   TITRE FORM
   ========================================================================== */

.contact-premium .contact-premium-form-head {
    margin-bottom: 41px;
}


.contact-premium .contact-premium-form-head > span {
    display: block;

    margin-bottom: 13px;

    color: #a17d39;

    font-size: 9px;
    font-weight: 900;

    letter-spacing: .19em;

    text-transform: uppercase;
}


.contact-premium .contact-premium-form-head h2 {
    margin: 0;

    color: #071625;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            3rem,
            3.8vw,
            4.5rem
        );

    font-weight: 400;

    line-height: .94;

    letter-spacing: -.05em;
}


/* ==========================================================================
   GRID FORM
   ========================================================================== */

.contact-premium .contact-premium-form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        27px
        20px;
}


.contact-premium .contact-premium-field-full {
    grid-column:
        1 / -1;
}


/* ==========================================================================
   LABEL
   ========================================================================== */

.contact-premium .contact-premium-field label {
    display: flex;

    align-items: baseline;
    justify-content: space-between;

    margin-bottom: 9px;

    color: #193044;

    font-size: .75rem;
    font-weight: 800;
}


.contact-premium .contact-premium-field label span {
    color: #aaa8a2;

    font-size: .67rem;
    font-weight: 500;
}


/* ==========================================================================
   INPUT
   ========================================================================== */

.contact-premium .contact-premium-field .input {
    width: 100%;

    min-height: 58px;

    padding:
        15px
        17px;

    border:
        1px solid
        rgba(7, 22, 37, .12);

    border-radius: 12px;

    outline: none;

    background: #ffffff;

    color: #071625;

    font: inherit;

    transition:
        border-color .22s ease,
        box-shadow .22s ease;
}


.contact-premium .contact-premium-field textarea.input {
    min-height: 185px;

    resize: vertical;

    line-height: 1.7;
}


.contact-premium .contact-premium-field .input::placeholder {
    color: #aaa9a5;
}


.contact-premium .contact-premium-field .input:focus {
    border-color: #8db5c1;

    box-shadow:
        0 0 0 4px
        rgba(141, 181, 193, .11);
}


/* ==========================================================================
   BOUTON
   ========================================================================== */

.contact-premium .contact-premium-submit {
    margin-top: 3px;
}


.contact-premium .contact-premium-submit .btn {
    display: inline-flex;

    align-items: center;
    justify-content: space-between;

    min-width: 260px;

    gap: 35px;

    padding:
        13px
        14px
        13px
        24px;

    border-radius: 999px;

    background: #071625;

    color: #fff;
}


.contact-premium .contact-premium-submit-arrow {
    width: 38px;
    height: 38px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .09);

    transition:
        transform .2s ease,
        background .2s ease;
}


.contact-premium .contact-premium-submit .btn:hover
.contact-premium-submit-arrow {
    transform: translateX(3px);

    background:
        rgba(210, 180, 111, .25);
}


.contact-premium .contact-premium-submit > p {
    margin:
        12px
        0
        0;

    color: #999b9b;

    font-size: .72rem;
}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width: 1000px) {

    .contact-premium .contact-premium-hero-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(350px, .75fr);

        gap: 50px;
    }


    .contact-premium .contact-premium-form-shell {
        grid-template-columns:
            minmax(280px, .55fr)
            minmax(0, 1fr);
    }

}


/* ==========================================================================
   PETITE TABLETTE
   ========================================================================== */

@media (max-width: 820px) {

    .contact-premium .contact-premium-hero-grid {
        grid-template-columns: 1fr;

        gap: 60px;
    }


    .contact-premium .contact-premium-visual {
        width: min(100%, 620px);

        margin: 0 auto;
    }


    .contact-premium .contact-premium-form-shell {
        grid-template-columns: 1fr;
    }


    .contact-premium .contact-premium-side {
        min-height: 430px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    .contact-premium .contact-premium-hero {
        padding:
            80px
            0;
    }


    .contact-premium .contact-premium-intro h1 {
        font-size:
            clamp(
                3.2rem,
                14vw,
                4.5rem
            );
    }


    .contact-premium .contact-premium-photo-frame {
        border-radius:
            65px
            65px
            26px
            26px;
    }


    .contact-premium .contact-premium-photo-meta {
        align-items: flex-start;
    }


    .contact-premium .contact-premium-photo-meta > img {
        width: 52px;
        height: 52px;
    }


    .contact-premium .contact-premium-form-shell {
        border-radius: 30px;
    }


    .contact-premium .contact-premium-side {
        min-height: 0;

        padding:
            44px
            27px
            65px;
    }


    .contact-premium .contact-premium-form {
        padding:
            44px
            25px;
    }


    .contact-premium .contact-premium-form-grid {
        grid-template-columns: 1fr;
    }


    .contact-premium .contact-premium-field {
        grid-column:
            1 / -1;
    }


    .contact-premium .contact-premium-submit .btn {
        width: 100%;
    }

}


/* ==========================================================================
   ACCESSIBILITÉ
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .contact-premium .contact-premium-photo-frame img,
    .contact-premium .contact-premium-submit-arrow {
        transition: none;
    }

}
/* ==========================================================================
   CONTACT.PHP
   SIGNATURE THÉOPHILE TOUALI
   ========================================================================== */

.contact-signature {
    background: #f7f4ed;
}


/* ==========================================================================
   HERO
   ========================================================================== */

.contact-signature .contact-signature-hero {
    position: relative;

    overflow: hidden;

    padding:
        clamp(95px, 8vw, 145px)
        0
        clamp(90px, 8vw, 135px);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8f6f1 72%,
            #f4f0e8 100%
        );
}


/* ==========================================================================
   HERO GRID
   ========================================================================== */

.contact-signature .contact-signature-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.04fr)
        minmax(420px, .72fr);

    align-items: center;

    gap:
        clamp(
            80px,
            8vw,
            140px
        );
}


/* ==========================================================================
   INTRO
   ========================================================================== */

.contact-signature .contact-signature-intro {
    position: relative;

    z-index: 2;
}


.contact-signature .contact-signature-intro .eyebrow {
    margin-bottom: 31px;
}


/* ==========================================================================
   HERO TITLE
   ========================================================================== */

.contact-signature .contact-signature-intro h1 {
    max-width: 900px;

    margin: 0;

    color: #071625;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            4.2rem,
            5.8vw,
            6.8rem
        );

    font-weight: 400;

    line-height: .91;

    letter-spacing: -.058em;
}


.contact-signature .contact-signature-intro h1 span {
    display: block;

    margin-top: 5px;

    color: #85adbb;

    font-style: italic;

    font-weight: 400;
}


/* ==========================================================================
   HERO LEAD
   ========================================================================== */

.contact-signature .contact-signature-lead {
    max-width: 620px;

    margin:
        35px
        0
        0;

    color: #69747c;

    font-size:
        clamp(
            .98rem,
            1.08vw,
            1.08rem
        );

    line-height: 1.85;
}


/* ==========================================================================
   SCROLL LINK
   ========================================================================== */

.contact-signature .contact-signature-scroll {
    display: inline-flex;

    align-items: center;

    gap: 16px;

    margin-top: 37px;

    color: #17364b;

    font-size: .8rem;

    font-weight: 800;

    letter-spacing: .04em;

    text-decoration: none;
}


.contact-signature .contact-signature-scroll > span {
    width: 37px;
    height: 37px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(23, 54, 75, .2);

    border-radius: 50%;

    color: #a5803e;

    transition:
        transform .25s ease,
        border-color .25s ease;
}


.contact-signature .contact-signature-scroll:hover > span {
    transform: translateY(4px);

    border-color:
        rgba(165, 128, 62, .65);
}


/* ==========================================================================
   PHOTO
   ========================================================================== */

.contact-signature .contact-signature-visual {
    position: relative;

    padding-bottom: 88px;
}


.contact-signature .contact-signature-photo {
    position: relative;

    z-index: 2;

    overflow: hidden;

    aspect-ratio: .82;

    border-radius:
        110px
        110px
        34px
        34px;

    background: #ded8cf;

    box-shadow:
        0 38px 90px
        rgba(18, 34, 45, .15);
}


/* Petit filet doré */

.contact-signature .contact-signature-photo::after {
    content: "";

    position: absolute;

    inset:
        16px
        16px
        auto
        auto;

    width: 72px;
    height: 72px;

    border-top:
        1px solid
        rgba(190, 153, 78, .65);

    border-right:
        1px solid
        rgba(190, 153, 78, .65);

    pointer-events: none;
}


.contact-signature .contact-signature-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center center;

    transition:
        transform .9s
        cubic-bezier(.2, .7, .2, 1);
}


.contact-signature .contact-signature-photo:hover img {
    transform: scale(1.025);
}


/* ==========================================================================
   MONOGRAMME
   ========================================================================== */

.contact-signature .contact-signature-mark {
    position: absolute;

    z-index: 4;

    right: -28px;
    bottom: 55px;

    width: 94px;
    height: 94px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 11px;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 16px 38px
        rgba(17, 32, 43, .14);
}


.contact-signature .contact-signature-mark img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* ==========================================================================
   LÉGENDE
   ========================================================================== */

.contact-signature .contact-signature-caption {
    position: absolute;

    left: 9px;
    right: 85px;
    bottom: 4px;
}


.contact-signature .contact-signature-caption > span {
    display: block;

    margin-bottom: 7px;

    color: #9d7b3c;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .19em;

    text-transform: uppercase;
}


.contact-signature .contact-signature-caption p {
    max-width: 390px;

    margin: 0;

    color: #173145;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            1.05rem,
            1.25vw,
            1.3rem
        );

    line-height: 1.45;
}


/* ==========================================================================
   SECTION FORMULAIRE
   ========================================================================== */

.contact-signature .contact-signature-form-section {
    padding:
        clamp(105px, 9vw, 150px)
        0;

    background: #ffffff;
}


/* ==========================================================================
   HEADER FORM
   ========================================================================== */

.contact-signature .contact-signature-form-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, .55fr);

    align-items: end;

    gap:
        clamp(
            70px,
            8vw,
            130px
        );

    margin-bottom:
        clamp(
            55px,
            6vw,
            80px
        );
}


.contact-signature .contact-signature-form-heading h2 {
    max-width: 780px;

    margin:
        24px
        0
        0;

    color: #071625;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            3.5rem,
            4.8vw,
            5.5rem
        );

    font-weight: 400;

    line-height: .95;

    letter-spacing: -.052em;
}


.contact-signature .contact-signature-form-heading h2 span {
    display: block;

    color: #8db4c1;

    font-style: italic;
}


.contact-signature .contact-signature-form-heading > p {
    max-width: 450px;

    margin:
        0
        0
        8px;

    padding-left: 27px;

    border-left:
        1px solid
        #c7a45b;

    color: #727c83;

    font-size: .94rem;

    line-height: 1.8;
}


/* ==========================================================================
   SHELL
   ========================================================================== */

.contact-signature .contact-signature-shell {
    display: grid;

    grid-template-columns:
        minmax(300px, .59fr)
        minmax(0, 1.15fr);

    overflow: hidden;

    border-radius: 42px;

    background: #f7f4ed;

    box-shadow:
        0 32px 85px
        rgba(18, 32, 43, .08);
}


/* ==========================================================================
   SIDE
   ========================================================================== */

.contact-signature .contact-signature-side {
    position: relative;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    padding:
        clamp(
            48px,
            5vw,
            70px
        );

    background:
        linear-gradient(
            145deg,
            #071625 0%,
            #102b3d 100%
        );

    color: #fff;
}


.contact-signature .contact-signature-side-kicker {
    display: block;

    margin-bottom: 32px;

    color: #d0b069;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .2em;

    text-transform: uppercase;
}


.contact-signature .contact-signature-side h3 {
    max-width: 410px;

    margin: 0;

    color: #fff;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            2.6rem,
            3.1vw,
            3.8rem
        );

    font-weight: 400;

    line-height: .98;

    letter-spacing: -.045em;
}


.contact-signature .contact-signature-side h3 span {
    display: block;

    margin-top: 5px;

    color: #99bdc9;

    font-style: italic;
}


.contact-signature .contact-signature-side > div > p {
    max-width: 380px;

    margin:
        29px
        0
        0;

    color:
        rgba(230, 237, 240, .66);

    font-size: .88rem;

    line-height: 1.82;
}


/* ==========================================================================
   DIRECT EMAIL
   ========================================================================== */

.contact-signature .contact-signature-direct {
    position: relative;

    z-index: 2;

    margin-top: 55px;

    padding-top: 24px;

    border-top:
        1px solid
        rgba(255, 255, 255, .1);
}


.contact-signature .contact-signature-direct > span {
    display: block;

    margin-bottom: 9px;

    color:
        rgba(224, 232, 236, .46);

    font-size: 9px;

    letter-spacing: .17em;

    text-transform: uppercase;
}


.contact-signature .contact-signature-direct a {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #d7bb76;

    font-size: .83rem;

    font-weight: 700;

    text-decoration: none;
}


/* ==========================================================================
   SIDE LOGO
   ========================================================================== */

.contact-signature .contact-signature-side-logo {
    position: absolute;

    right: -55px;
    bottom: -55px;

    width: 210px;
    height: 210px;

    opacity: .045;

    pointer-events: none;
}


.contact-signature .contact-signature-side-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* ==========================================================================
   FORM
   ========================================================================== */

.contact-signature .contact-signature-form {
    padding:
        clamp(
            50px,
            6vw,
            78px
        );
}


/* ==========================================================================
   FORM GRID
   ========================================================================== */

.contact-signature .contact-signature-form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        28px
        22px;
}


.contact-signature .contact-signature-field-full {
    grid-column:
        1 / -1;
}


/* ==========================================================================
   LABEL
   ========================================================================== */

.contact-signature .contact-signature-field label {
    display: flex;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 10px;

    color: #183043;

    font-size: .74rem;

    font-weight: 800;
}


.contact-signature .contact-signature-field label span {
    color: #a1a19d;

    font-size: .65rem;

    font-weight: 500;
}


/* ==========================================================================
   INPUTS
   ========================================================================== */

.contact-signature .contact-signature-field .input {
    width: 100%;

    min-height: 60px;

    padding:
        15px
        18px;

    border:
        1px solid
        rgba(7, 22, 37, .12);

    border-radius: 13px;

    outline: 0;

    background: #fff;

    color: #071625;

    font: inherit;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


.contact-signature .contact-signature-field textarea.input {
    min-height: 205px;

    resize: vertical;

    line-height: 1.7;
}


.contact-signature .contact-signature-field .input::placeholder {
    color: #aaa9a4;
}


.contact-signature .contact-signature-field .input:focus {
    border-color: #88b0bd;

    background: #fff;

    box-shadow:
        0 0 0 4px
        rgba(136, 176, 189, .11);
}


/* ==========================================================================
   SUBMIT
   ========================================================================== */

.contact-signature .contact-signature-submit {
    display: flex;

    align-items: center;

    gap: 26px;

    margin-top: 4px;
}


.contact-signature .contact-signature-submit .btn {
    display: inline-flex;

    align-items: center;
    justify-content: space-between;

    gap: 28px;

    min-width: 260px;

    padding:
        11px
        11px
        11px
        24px;

    border-radius: 999px;

    background: #071625;

    color: #fff;
}


.contact-signature .contact-signature-submit-icon {
    width: 41px;
    height: 41px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .09);

    color: #d7b76c;

    transition:
        transform .2s ease,
        background .2s ease;
}


.contact-signature .contact-signature-submit .btn:hover
.contact-signature-submit-icon {
    transform: translateX(3px);

    background:
        rgba(207, 173, 98, .22);
}


.contact-signature .contact-signature-submit > p {
    max-width: 170px;

    margin: 0;

    color: #979b9c;

    font-size: .7rem;

    line-height: 1.55;
}


/* ==========================================================================
   CONTEXTES
   ========================================================================== */

.contact-signature .contact-signature-contexts {
    padding:
        clamp(100px, 9vw, 145px)
        0;

    background: #f6f3ec;
}


/* ==========================================================================
   CONTEXT HEADER
   ========================================================================== */

.contact-signature .contact-signature-contexts-head {
    max-width: 850px;

    margin-bottom:
        clamp(
            55px,
            6vw,
            80px
        );
}


.contact-signature .contact-signature-contexts-head h2 {
    margin:
        24px
        0
        0;

    color: #071625;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            3.2rem,
            4.5vw,
            5.2rem
        );

    font-weight: 400;

    line-height: .95;

    letter-spacing: -.05em;
}


.contact-signature .contact-signature-contexts-head h2 span {
    display: block;

    color: #8aaebb;

    font-style: italic;
}


/* ==========================================================================
   CONTEXT GRID
   ========================================================================== */

.contact-signature .contact-signature-contexts-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    border-top:
        1px solid
        rgba(7, 22, 37, .11);
}


/* ==========================================================================
   CONTEXT
   ========================================================================== */

.contact-signature .contact-signature-context {
    display: flex;

    flex-direction: column;

    min-height: 330px;

    padding:
        32px
        30px
        5px;

    border-right:
        1px solid
        rgba(7, 22, 37, .09);
}


.contact-signature .contact-signature-context:first-child {
    padding-left: 0;
}


.contact-signature .contact-signature-context:last-child {
    border-right: 0;
}


.contact-signature .contact-signature-context-number {
    display: block;

    margin-bottom: 50px;

    color: #ad8c50;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .16em;
}


.contact-signature .contact-signature-context h3 {
    margin:
        0
        0
        16px;

    color: #071625;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            1.55rem,
            1.8vw,
            2rem
        );

    font-weight: 400;
}


.contact-signature .contact-signature-context p {
    max-width: 250px;

    margin:
        0
        0
        32px;

    color: #717b82;

    font-size: .84rem;

    line-height: 1.75;
}


.contact-signature .contact-signature-context a {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    margin-top: auto;

    color: #264b61;

    font-size: .74rem;

    font-weight: 800;

    text-decoration: none;
}


.contact-signature .contact-signature-context a span {
    color: #ad8844;

    transition:
        transform .2s ease;
}


.contact-signature .contact-signature-context a:hover span {
    transform: translateX(4px);
}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width: 1050px) {

    .contact-signature .contact-signature-hero-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(350px, .72fr);

        gap: 55px;
    }


    .contact-signature .contact-signature-shell {
        grid-template-columns:
            minmax(280px, .55fr)
            minmax(0, 1fr);
    }


    .contact-signature .contact-signature-contexts-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .contact-signature .contact-signature-context:nth-child(2) {
        border-right: 0;
    }


    .contact-signature .contact-signature-context:nth-child(-n + 2) {
        padding-bottom: 35px;

        border-bottom:
            1px solid
            rgba(7, 22, 37, .09);
    }

}


/* ==========================================================================
   PETITE TABLETTE
   ========================================================================== */

@media (max-width: 820px) {

    .contact-signature .contact-signature-hero-grid,
    .contact-signature .contact-signature-form-heading,
    .contact-signature .contact-signature-shell {
        grid-template-columns: 1fr;
    }


    .contact-signature .contact-signature-visual {
        width: min(100%, 600px);

        margin: 0 auto;
    }


    .contact-signature .contact-signature-form-heading {
        gap: 35px;
    }


    .contact-signature .contact-signature-form-heading > p {
        margin: 0;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    .contact-signature .contact-signature-hero {
        padding:
            80px
            0
            65px;
    }


    .contact-signature .contact-signature-intro h1 {
        font-size:
            clamp(
                3.2rem,
                14vw,
                4.6rem
            );
    }


    .contact-signature .contact-signature-photo {
        border-radius:
            65px
            65px
            26px
            26px;
    }


    .contact-signature .contact-signature-mark {
        right: -5px;

        width: 74px;
        height: 74px;
    }


    .contact-signature .contact-signature-caption {
        right: 55px;
    }


    .contact-signature .contact-signature-shell {
        border-radius: 29px;
    }


    .contact-signature .contact-signature-side,
    .contact-signature .contact-signature-form {
        padding:
            42px
            24px;
    }


    .contact-signature .contact-signature-form-grid {
        grid-template-columns: 1fr;
    }


    .contact-signature .contact-signature-field {
        grid-column:
            1 / -1;
    }


    .contact-signature .contact-signature-submit {
        flex-direction: column;

        align-items: stretch;
    }


    .contact-signature .contact-signature-submit .btn {
        width: 100%;
    }


    .contact-signature .contact-signature-submit > p {
        max-width: none;

        text-align: center;
    }


    .contact-signature .contact-signature-contexts-grid {
        grid-template-columns: 1fr;
    }


    .contact-signature .contact-signature-context,
    .contact-signature .contact-signature-context:first-child {
        min-height: 0;

        padding:
            31px
            0;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(7, 22, 37, .09);
    }


    .contact-signature .contact-signature-context:last-child {
        border-bottom: 0;
    }


    .contact-signature .contact-signature-context-number {
        margin-bottom: 25px;
    }

}


/* ==========================================================================
   ACCESSIBILITÉ
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .contact-signature .contact-signature-photo img,
    .contact-signature .contact-signature-scroll span,
    .contact-signature .contact-signature-submit-icon,
    .contact-signature .contact-signature-context a span {
        transition: none;
    }

}

/* ==========================================================================
   CONTACT — CORRECTION HERO
   Resserrement vertical + rapprochement photo
   ========================================================================== */


/* --------------------------------------------------------------------------
   HERO : supprimer le grand vide supérieur
   -------------------------------------------------------------------------- */

.contact-signature .contact-signature-hero {
    padding:
        clamp(55px, 4.5vw, 78px)
        0
        clamp(75px, 6vw, 105px) !important;
}


/* --------------------------------------------------------------------------
   GRILLE : rapprocher fortement texte et photo
   -------------------------------------------------------------------------- */

.contact-signature .contact-signature-hero-grid {
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(440px, .82fr) !important;

    gap:
        clamp(36px, 4vw, 68px) !important;

    align-items: center;
}


/* --------------------------------------------------------------------------
   COLONNE TEXTE
   -------------------------------------------------------------------------- */

.contact-signature .contact-signature-intro {
    max-width: 860px;
}


/* Eyebrow plus proche du haut */

.contact-signature .contact-signature-intro .eyebrow {
    margin-bottom: 27px !important;
}


/* --------------------------------------------------------------------------
   TITRE
   Un peu moins massif afin de mieux respirer avec la photo
   -------------------------------------------------------------------------- */

.contact-signature .contact-signature-intro h1 {
    max-width: 820px !important;

    font-size:
        clamp(
            3.9rem,
            5.15vw,
            6.15rem
        ) !important;

    line-height: .91 !important;

    letter-spacing: -.055em;
}


/* La partie bleue reste spectaculaire sans prendre toute la largeur */

.contact-signature .contact-signature-intro h1 span {
    display: block;

    max-width: 720px;

    margin-top: 4px;
}


/* --------------------------------------------------------------------------
   TEXTE INTRO
   -------------------------------------------------------------------------- */

.contact-signature .contact-signature-lead {
    max-width: 650px !important;

    margin-top: 30px !important;
}


/* --------------------------------------------------------------------------
   PHOTO
   On la rapproche visuellement du titre et on lui donne un peu plus de poids
   -------------------------------------------------------------------------- */

.contact-signature .contact-signature-visual {
    width: 100%;

    max-width: 570px;

    justify-self: end;

    padding-bottom: 82px;
}


.contact-signature .contact-signature-photo {
    width: 100%;

    aspect-ratio: .84 !important;
}


/* --------------------------------------------------------------------------
   GRAND ÉCRAN
   Sur les très grands écrans, éviter que les deux blocs s'éloignent à nouveau
   -------------------------------------------------------------------------- */

@media (min-width: 1450px) {

    .contact-signature .contact-signature-hero-grid {
        grid-template-columns:
            minmax(0, 880px)
            minmax(440px, 570px) !important;

        justify-content: space-between;

        gap: 50px !important;
    }


    .contact-signature .contact-signature-intro h1 {
        font-size:
            clamp(
                4.3rem,
                5vw,
                6.25rem
            ) !important;
    }

}


/* --------------------------------------------------------------------------
   TABLETTE
   -------------------------------------------------------------------------- */

@media (max-width: 1050px) {

    .contact-signature .contact-signature-hero {
        padding:
            65px
            0
            85px !important;
    }


    .contact-signature .contact-signature-hero-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(340px, .72fr) !important;

        gap: 42px !important;
    }


    .contact-signature .contact-signature-intro h1 {
        font-size:
            clamp(
                3.7rem,
                6vw,
                5rem
            ) !important;
    }

}


/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 820px) {

    .contact-signature .contact-signature-hero {
        padding:
            55px
            0
            75px !important;
    }


    .contact-signature .contact-signature-hero-grid {
        grid-template-columns: 1fr !important;

        gap: 55px !important;
    }


    .contact-signature .contact-signature-visual {
        justify-self: center;

        width: min(100%, 570px);
    }

}


@media (max-width: 600px) {

    .contact-signature .contact-signature-hero {
        padding:
            45px
            0
            65px !important;
    }


    .contact-signature .contact-signature-intro h1 {
        font-size:
            clamp(
                3.15rem,
                13vw,
                4.4rem
            ) !important;
    }

}

/* ==========================================================================
   CONTACT — CORRECTION INTRO FORMULAIRE
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. REMONTER TOUTE LA SECTION
   -------------------------------------------------------------------------- */

.contact-signature .contact-signature-form-section {
    padding-top:
        clamp(48px, 4vw, 68px) !important;
}


/* --------------------------------------------------------------------------
   2. RESSERRER LA COMPOSITION TITRE / TEXTE
   -------------------------------------------------------------------------- */

.contact-signature .contact-signature-form-heading {
    display: grid !important;

    grid-template-columns:
        minmax(0, 700px)
        minmax(320px, 440px) !important;

    justify-content: start !important;

    align-items: end !important;

    gap:
        clamp(45px, 5vw, 75px) !important;

    margin-bottom:
        clamp(48px, 5vw, 68px) !important;
}


/* --------------------------------------------------------------------------
   3. TITRE
   -------------------------------------------------------------------------- */

.contact-signature .contact-signature-form-heading h2 {
    max-width: 700px !important;

    margin-top: 20px !important;

    font-size:
        clamp(
            3.45rem,
            4.35vw,
            5.1rem
        ) !important;

    line-height: .94 !important;
}


/* --------------------------------------------------------------------------
   4. TEXTE DE DROITE
   -------------------------------------------------------------------------- */

.contact-signature .contact-signature-form-heading > p {
    max-width: 410px !important;

    margin:
        0
        0
        7px !important;

    padding-left: 25px !important;

    border-left:
        1px solid
        #c7a45b;

    font-size: .96rem !important;

    line-height: 1.8 !important;
}


/* ==========================================================================
   TRÈS GRANDS ÉCRANS
   On évite que le layout se ré-écarte sur un écran large
   ========================================================================== */

@media (min-width: 1450px) {

    .contact-signature .contact-signature-form-heading {
        grid-template-columns:
            700px
            440px !important;

        gap: 70px !important;
    }

}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width: 950px) {

    .contact-signature .contact-signature-form-section {
        padding-top: 55px !important;
    }


    .contact-signature .contact-signature-form-heading {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(280px, .7fr) !important;

        gap: 40px !important;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 760px) {

    .contact-signature .contact-signature-form-section {
        padding-top: 42px !important;
    }


    .contact-signature .contact-signature-form-heading {
        grid-template-columns: 1fr !important;

        gap: 28px !important;
    }


    .contact-signature .contact-signature-form-heading > p {
        max-width: 560px !important;

        margin: 0 !important;
    }

}
/* ==========================================================================
   CONTACT — FINITIONS
   ========================================================================== */


/* 1. Accent plus élégant sous le titre */

.contact-signature .contact-signature-form-heading h2 span {
    position: relative;
    display: inline-block;
}

.contact-signature .contact-signature-form-heading h2 span::after {
    content: "";

    position: absolute;

    left: 4px;
    bottom: -10px;

    width: 72px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #c8a45b,
            rgba(200, 164, 91, 0)
        );
}


/* 2. Carte générale légèrement plus premium */

.contact-signature .contact-signature-shell {
    border:
        1px solid
        rgba(7, 22, 37, .055);

    box-shadow:
        0 30px 80px
        rgba(17, 31, 42, .085);
}


/* 3. Partie marine : un peu plus de profondeur */

.contact-signature .contact-signature-side {
    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(121, 169, 186, .10),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #061522 0%,
            #0a2030 58%,
            #102b3d 100%
        );
}


/* 4. Petit filet doré en haut de la colonne marine */

.contact-signature .contact-signature-side::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 95px;
    height: 3px;

    background: #c8a45b;
}


/* 5. Champs légèrement moins "administratifs" */

.contact-signature .contact-signature-field .input {
    border-color:
        rgba(7, 22, 37, .10);

    background:
        rgba(255, 255, 255, .88);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .85);
}


/* 6. Léger hover avant même le focus */

.contact-signature .contact-signature-field .input:hover {
    border-color:
        rgba(74, 120, 140, .28);
}


/* 7. Focus plus raffiné */

.contact-signature .contact-signature-field .input:focus {
    border-color: #86afbd !important;

    box-shadow:
        0 0 0 4px
        rgba(134, 175, 189, .10),
        0 8px 22px
        rgba(20, 48, 65, .055) !important;
}


/* 8. Bouton principal légèrement plus qualitatif */

.contact-signature .contact-signature-submit .btn {
    box-shadow:
        0 13px 30px
        rgba(7, 22, 37, .15);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        background .22s ease;
}


.contact-signature .contact-signature-submit .btn:hover {
    transform: translateY(-2px);

    background: #0b2030;

    box-shadow:
        0 17px 38px
        rgba(7, 22, 37, .20);
}


/* 9. Texte de droite légèrement plus doux */

.contact-signature .contact-signature-form-heading > p {
    color: #69767e !important;
}


/* 10. Animation très discrète du lien email */

.contact-signature .contact-signature-direct a span {
    transition:
        transform .2s ease;
}


.contact-signature .contact-signature-direct a:hover span {
    transform:
        translate(3px, -3px);
}


/* 11. Respect préférence utilisateur */

@media (prefers-reduced-motion: reduce) {

    .contact-signature .contact-signature-submit .btn,
    .contact-signature .contact-signature-direct a span {
        transition: none;
    }

}

/* ==========================================================================
   NEWS.PHP — JOURNAL THÉOPHILE TOUALI
   ========================================================================== */

.news-page {
    background: #f7f4ed;
}


/* ==========================================================================
   HERO
   ========================================================================== */

.news-page .news-page-hero {
    padding:
        clamp(70px, 5.5vw, 100px)
        0
        clamp(75px, 6vw, 105px);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f4ed 100%
        );
}


.news-page .news-page-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 780px)
        minmax(300px, 430px);

    align-items: end;

    justify-content: space-between;

    gap:
        clamp(
            55px,
            6vw,
            95px
        );
}


/* ==========================================================================
   HERO TITRE
   ========================================================================== */

.news-page .news-page-hero-copy .eyebrow {
    margin-bottom: 27px;
}


.news-page .news-page-hero h1 {
    margin: 0;

    color: #071625;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            4rem,
            5.5vw,
            6.5rem
        );

    font-weight: 400;

    line-height: .91;

    letter-spacing: -.057em;
}


.news-page .news-page-hero h1 span {
    display: block;

    margin-top: 5px;

    color: #8db4c1;

    font-style: italic;

    font-weight: 400;
}


/* ==========================================================================
   HERO TEXTE
   ========================================================================== */

.news-page .news-page-hero-intro {
    padding-left: 26px;

    border-left:
        1px solid
        #c5a158;
}


.news-page .news-page-hero-intro p {
    max-width: 420px;

    margin: 0;

    color: #6d7880;

    font-size: .96rem;

    line-height: 1.85;
}


/* ==========================================================================
   À LA UNE
   ========================================================================== */

.news-page .news-featured {
    padding:
        10px
        0
        clamp(100px, 9vw, 145px);

    background: #f7f4ed;
}


.news-page .news-featured-card {
    display: grid;

    grid-template-columns:
        minmax(0, 1.13fr)
        minmax(360px, .87fr);

    min-height: 570px;

    overflow: hidden;

    border-radius: 48px;

    background: #071625;

    box-shadow:
        0 35px 90px
        rgba(15, 30, 42, .14);
}


/* ==========================================================================
   FEATURED IMAGE
   ========================================================================== */

.news-page .news-featured-visual {
    position: relative;

    display: block;

    min-height: 570px;

    overflow: hidden;

    background: #102636;
}


.news-page .news-featured-visual > img {
    display: block;

    width: 100%;
    height: 100%;

    position: absolute;

    inset: 0;

    object-fit: cover;

    transition:
        transform .9s
        cubic-bezier(.2, .7, .2, 1);
}


.news-page .news-featured-visual:hover > img {
    transform: scale(1.035);
}


/* ==========================================================================
   PLACEHOLDER
   ========================================================================== */

.news-page .news-featured-placeholder {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at 25% 20%,
            rgba(126, 176, 193, .20),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            #0b1d2d,
            #16384c
        );
}


.news-page .news-featured-placeholder img {
    width: 145px;

    opacity: .15;
}


/* ==========================================================================
   BADGE
   ========================================================================== */

.news-page .news-featured-badge {
    position: absolute;

    top: 30px;
    left: 30px;

    z-index: 4;

    padding:
        10px
        15px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .93);

    color: #071625;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .15em;

    text-transform: uppercase;
}


/* ==========================================================================
   FEATURED CONTENT
   ========================================================================== */

.news-page .news-featured-content {
    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
        clamp(
            50px,
            6vw,
            85px
        );
}


.news-page .news-featured-meta,
.news-page .news-editorial-meta {
    display: flex;

    align-items: center;

    gap: 18px;
}


.news-page .news-featured-meta span {
    color: #d2b36d;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .18em;

    text-transform: uppercase;
}


.news-page .news-featured-meta time {
    color:
        rgba(219, 230, 235, .48);

    font-size: .72rem;
}


/* ==========================================================================
   FEATURED TITLE
   ========================================================================== */

.news-page .news-featured-content h2 {
    margin:
        27px
        0
        24px;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            2.7rem,
            3.7vw,
            4.6rem
        );

    font-weight: 400;

    line-height: .97;

    letter-spacing: -.046em;
}


.news-page .news-featured-content h2 a {
    color: #ffffff;

    text-decoration: none;
}


/* ==========================================================================
   FEATURED EXCERPT
   ========================================================================== */

.news-page .news-featured-content > p {
    max-width: 520px;

    margin: 0;

    color:
        rgba(225, 234, 238, .66);

    font-size: .94rem;

    line-height: 1.85;
}


/* ==========================================================================
   FEATURED LINK
   ========================================================================== */

.news-page .news-featured-link {
    display: inline-flex;

    align-items: center;

    gap: 13px;

    width: max-content;

    margin-top: 33px;

    color: #d3b56e;

    font-size: .77rem;

    font-weight: 800;

    text-decoration: none;
}


.news-page .news-featured-link span {
    transition:
        transform .2s ease;
}


.news-page .news-featured-link:hover span {
    transform: translateX(4px);
}


/* ==========================================================================
   DERNIÈRES ACTUALITÉS
   ========================================================================== */

.news-page .news-latest {
    padding:
        clamp(105px, 9vw, 145px)
        0;

    background: #ffffff;
}


/* ==========================================================================
   SECTION HEADING
   ========================================================================== */

.news-page .news-section-heading,
.news-page .news-gallery-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 760px)
        minmax(300px, 430px);

    justify-content: space-between;

    align-items: end;

    gap:
        clamp(
            55px,
            7vw,
            110px
        );

    margin-bottom:
        clamp(
            55px,
            6vw,
            80px
        );
}


.news-page .news-section-heading h2,
.news-page .news-gallery-heading h2 {
    margin:
        23px
        0
        0;

    color: #071625;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            3.4rem,
            4.6vw,
            5.4rem
        );

    font-weight: 400;

    line-height: .94;

    letter-spacing: -.052em;
}


.news-page .news-section-heading h2 span,
.news-page .news-gallery-heading h2 span {
    display: block;

    color: #8cb2bf;

    font-style: italic;
}


.news-page .news-section-heading > p,
.news-page .news-gallery-heading > p {
    max-width: 420px;

    margin: 0;

    padding-left: 25px;

    border-left:
        1px solid
        #c6a45d;

    color: #727c83;

    font-size: .91rem;

    line-height: 1.8;
}


/* ==========================================================================
   NEWS GRID
   ========================================================================== */

.news-page .news-editorial-grid {
    display: grid;

    grid-template-columns:
        repeat(12, minmax(0, 1fr));

    gap:
        55px
        28px;
}


/* Trois cartes sur desktop */

.news-page .news-editorial-card {
    grid-column:
        span 4;
}


/* ==========================================================================
   NEWS IMAGE
   ========================================================================== */

.news-page .news-editorial-image {
    position: relative;

    display: block;

    overflow: hidden;

    aspect-ratio: 1.14;

    border-radius:
        30px
        30px
        15px
        15px;

    background: #eef0ec;
}


.news-page .news-editorial-image > img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .75s
        cubic-bezier(.2, .7, .2, 1);
}


.news-page .news-editorial-card:hover
.news-editorial-image > img {
    transform: scale(1.035);
}


/* ==========================================================================
   PLACEHOLDER CARD
   ========================================================================== */

.news-page .news-editorial-placeholder {
    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 18px;

    background:
        linear-gradient(
            145deg,
            #edf1ee,
            #e9e4da
        );
}


.news-page .news-editorial-placeholder span {
    color: #9c7d45;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .20em;

    text-transform: uppercase;
}


.news-page .news-editorial-placeholder img {
    width: 70px;

    opacity: .17;
}


/* ==========================================================================
   NEWS CONTENT
   ========================================================================== */

.news-page .news-editorial-content {
    padding:
        23px
        4px
        0;
}


.news-page .news-editorial-meta span {
    color: #9e7b3e;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .16em;

    text-transform: uppercase;
}


.news-page .news-editorial-meta time {
    color: #a0a5a8;

    font-size: .69rem;
}


.news-page .news-editorial-content h3 {
    margin:
        17px
        0
        14px;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            1.65rem,
            2vw,
            2.15rem
        );

    font-weight: 400;

    line-height: 1.06;

    letter-spacing: -.035em;
}


.news-page .news-editorial-content h3 a {
    color: #071625;

    text-decoration: none;
}


.news-page .news-editorial-content > p {
    margin: 0;

    color: #737d84;

    font-size: .85rem;

    line-height: 1.72;
}


/* ==========================================================================
   CARD LINK
   ========================================================================== */

.news-page .news-editorial-link {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 20px;

    color: #31566b;

    font-size: .73rem;

    font-weight: 800;

    text-decoration: none;
}


.news-page .news-editorial-link span {
    color: #b18b48;

    transition:
        transform .2s ease;
}


.news-page .news-editorial-link:hover span {
    transform: translateX(4px);
}


/* ==========================================================================
   GALLERY
   ========================================================================== */

.news-page .news-gallery {
    padding:
        clamp(105px, 9vw, 150px)
        0;

    background: #f5f1e9;
}


/* ==========================================================================
   GALLERY GRID
   ========================================================================== */

.news-page .news-gallery-grid {
    display: grid;

    grid-template-columns:
        repeat(12, minmax(0, 1fr));

    grid-auto-rows:
        250px;

    gap: 17px;
}


.news-page .news-gallery-item {
    position: relative;

    grid-column:
        span 4;

    overflow: hidden;

    border-radius: 22px;

    background: #dcdad5;
}


.news-page .news-gallery-item-large {
    grid-column:
        span 8;

    grid-row:
        span 2;
}


.news-page .news-gallery-item img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .8s
        cubic-bezier(.2, .7, .2, 1);
}


.news-page .news-gallery-item:hover img {
    transform: scale(1.045);
}


/* ==========================================================================
   GALLERY OVERLAY
   ========================================================================== */

.news-page .news-gallery-overlay {
    position: absolute;

    inset:
        auto
        0
        0;

    padding:
        55px
        25px
        23px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(4, 17, 27, .78)
        );
}


.news-page .news-gallery-overlay span {
    display: block;

    margin-bottom: 7px;

    color: #d9bb76;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .16em;

    text-transform: uppercase;
}


.news-page .news-gallery-overlay strong {
    display: block;

    max-width: 430px;

    color: #ffffff;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size: 1.2rem;

    font-weight: 400;

    line-height: 1.15;
}


/* ==========================================================================
   EMPTY
   ========================================================================== */

.news-page .news-page-empty {
    max-width: 700px;

    padding:
        60px
        0;

    border-top:
        1px solid
        rgba(7, 22, 37, .1);
}


.news-page .news-page-empty > span {
    color: #a48449;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .18em;

    text-transform: uppercase;
}


.news-page .news-page-empty h2 {
    margin:
        20px
        0;

    color: #071625;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            2.6rem,
            4vw,
            4.5rem
        );

    font-weight: 400;

    line-height: .98;
}


.news-page .news-page-empty p {
    max-width: 520px;

    color: #737d84;

    line-height: 1.8;
}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width: 1050px) {

    .news-page .news-page-hero-grid,
    .news-page .news-section-heading,
    .news-page .news-gallery-heading {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(280px, .58fr);

        gap: 45px;
    }


    .news-page .news-featured-card {
        grid-template-columns:
            1fr
            .78fr;
    }


    .news-page .news-editorial-card {
        grid-column:
            span 6;
    }

}


/* ==========================================================================
   PETITE TABLETTE
   ========================================================================== */

@media (max-width: 820px) {

    .news-page .news-page-hero-grid,
    .news-page .news-section-heading,
    .news-page .news-gallery-heading,
    .news-page .news-featured-card {
        grid-template-columns: 1fr;
    }


    .news-page .news-page-hero-intro,
    .news-page .news-section-heading > p,
    .news-page .news-gallery-heading > p {
        max-width: 600px;
    }


    .news-page .news-featured-visual {
        min-height: 500px;
    }


    .news-page .news-featured-content {
        padding:
            50px
            38px
            60px;
    }


    .news-page .news-gallery-item,
    .news-page .news-gallery-item-large {
        grid-column:
            span 6;

        grid-row:
            span 1;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    .news-page .news-page-hero {
        padding:
            55px
            0
            70px;
    }


    .news-page .news-page-hero h1 {
        font-size:
            clamp(
                3.2rem,
                14vw,
                4.6rem
            );
    }


    .news-page .news-featured-card {
        border-radius: 28px;
    }


    .news-page .news-featured-visual {
        min-height: 400px;
    }


    .news-page .news-featured-content {
        padding:
            38px
            25px
            45px;
    }


    .news-page .news-editorial-grid {
        display: block;
    }


    .news-page .news-editorial-card {
        margin-bottom: 50px;
    }


    .news-page .news-gallery-grid {
        display: grid;

        grid-template-columns: 1fr;

        grid-auto-rows: 330px;
    }


    .news-page .news-gallery-item,
    .news-page .news-gallery-item-large {
        grid-column: 1;

        grid-row: auto;
    }

}


/* ==========================================================================
   ACCESSIBILITÉ
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .news-page .news-featured-visual > img,
    .news-page .news-editorial-image > img,
    .news-page .news-gallery-item img,
    .news-page .news-featured-link span,
    .news-page .news-editorial-link span {
        transition: none;
    }

}

/* ==========================================================================
   ARTICLE.PHP — ACTUALITÉ
   ========================================================================== */

.article-page {
    background: #f7f4ed;
}


/* ==========================================================================
   HERO
   ========================================================================== */

.article-page .article-page-hero {
    padding:
        clamp(65px, 5vw, 90px)
        0
        clamp(60px, 5vw, 85px);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f4ed 100%
        );
}


.article-page .article-page-heading {
    max-width: 1050px;
}


.article-page .article-page-heading .eyebrow {
    margin-bottom: 24px;
}


/* ==========================================================================
   META
   ========================================================================== */

.article-page .article-page-meta {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 24px;

    color: #8b959b;

    font-size: .72rem;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.article-page .article-page-meta span::before {
    content: "·";

    margin-right: 14px;

    color: #c29f59;
}


/* ==========================================================================
   TITRE
   ========================================================================== */

.article-page .article-page-heading h1 {
    max-width: 1000px;

    margin: 0;

    color: #071625;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            3.8rem,
            5.4vw,
            6.5rem
        );

    font-weight: 400;

    line-height: .94;

    letter-spacing: -.055em;
}


/* ==========================================================================
   RÉSUMÉ
   ========================================================================== */

.article-page .article-page-lead {
    max-width: 760px;

    margin:
        32px
        0
        0;

    color: #68747c;

    font-size:
        clamp(
            1rem,
            1.15vw,
            1.12rem
        );

    line-height: 1.8;
}


/* ==========================================================================
   IMAGE PRINCIPALE
   ========================================================================== */

.article-page .article-page-cover-section {
    padding:
        0
        0
        clamp(75px, 7vw, 110px);
}


.article-page .article-page-cover {
    position: relative;

    overflow: hidden;

    width: 100%;
    max-width: 1320px;

    margin: 0 auto;

    aspect-ratio: 16 / 9;

    border-radius:
        42px
        42px
        20px
        20px;

    background: #e6e0d7;

    box-shadow:
        0 32px 85px
        rgba(17, 32, 43, .12);
}


.article-page .article-page-cover::after {
    content: "";

    position: absolute;

    top: 22px;
    right: 22px;

    width: 75px;
    height: 75px;

    border-top:
        1px solid
        rgba(199, 164, 91, .65);

    border-right:
        1px solid
        rgba(199, 164, 91, .65);

    pointer-events: none;
}


.article-page .article-page-cover img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
     * Pour votre photo de dédicace :
     * on garde le geste d’écriture + les livres.
     */
    object-position: center 54%;
}


/* ==========================================================================
   CONTENU
   ========================================================================== */

.article-page .article-page-content-section {
    padding:
        clamp(80px, 7vw, 115px)
        0
        clamp(100px, 9vw, 145px);

    background: #ffffff;
}


.article-page .article-page-article {
    max-width: 980px;
}


/* ==========================================================================
   CORPS
   ========================================================================== */

.article-page .article-page-body {
    max-width: 780px;

    margin: 0 auto;
}


.article-page .article-page-body p {
    margin:
        0
        0
        1.65em;

    color: #263947;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            1.08rem,
            1.2vw,
            1.2rem
        );

    line-height: 1.9;
}


/* Premier paragraphe légèrement plus fort */

.article-page .article-page-body p:first-child {
    color: #102737;

    font-size:
        clamp(
            1.22rem,
            1.45vw,
            1.4rem
        );

    line-height: 1.75;
}


/* ==========================================================================
   RETOUR
   ========================================================================== */

.article-page .article-page-back {
    max-width: 780px;

    margin:
        65px
        auto
        0;

    padding-top: 28px;

    border-top:
        1px solid
        rgba(7, 22, 37, .09);
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .article-page .article-page-hero {
        padding:
            50px
            0
            55px;
    }


    .article-page .article-page-heading h1 {
        font-size:
            clamp(
                3rem,
                13vw,
                4.4rem
            );
    }


    .article-page .article-page-cover {
        aspect-ratio: 4 / 3;

        border-radius:
            28px
            28px
            16px
            16px;
    }


    .article-page .article-page-cover img {
        object-position: center center;
    }


    .article-page .article-page-body p {
        font-size: 1.05rem;

        line-height: 1.8;
    }

}

/* ==========================================================================
   ARTICLE.PHP — JOURNAL THÉOPHILE TOUALI
   ========================================================================== */

.article-page {
    position: relative;

    background: #f7f4ed;
}


/* ==========================================================================
   HERO
   ========================================================================== */

.article-page .article-page-hero {
    padding:
        clamp(55px, 4.5vw, 80px)
        0
        clamp(55px, 5vw, 82px);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8f6f1 100%
        );
}


.article-page .article-page-heading {
    width: 100%;
    max-width: 1080px;
}


.article-page .article-page-heading .eyebrow {
    margin-bottom: 22px;
}


/* ==========================================================================
   META
   ========================================================================== */

.article-page .article-page-meta {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 24px;

    color: #8a959c;

    font-size: .7rem;

    font-weight: 700;

    letter-spacing: .10em;

    text-transform: uppercase;
}


.article-page .article-page-meta span::before {
    content: "·";

    margin-right: 13px;

    color: #bd9650;
}


/* ==========================================================================
   TITRE
   ========================================================================== */

.article-page .article-page-heading h1 {
    width: 100%;
    max-width: 1050px;

    margin: 0;

    color: #071625;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            3.6rem,
            5.2vw,
            6.2rem
        );

    font-weight: 400;

    line-height: .94;

    letter-spacing: -.055em;
}


/* ==========================================================================
   CHAPÔ
   ========================================================================== */

.article-page .article-page-lead {
    width: 100%;
    max-width: 790px;

    margin:
        31px
        0
        0;

    color: #66737c;

    font-size:
        clamp(
            1.02rem,
            1.15vw,
            1.13rem
        );

    line-height: 1.82;
}


/* ==========================================================================
   IMAGE PRINCIPALE
   ========================================================================== */

.article-page .article-page-cover-section {
    padding:
        0
        0
        clamp(70px, 7vw, 105px);

    background: #f8f6f1;
}


.article-page .article-page-cover {
    position: relative;

    overflow: hidden;

    width: 100%;

    margin: 0;

    aspect-ratio: 16 / 9;

    border-radius:
        46px
        46px
        22px
        22px;

    background: #dedbd4;

    box-shadow:
        0 35px 90px
        rgba(17, 31, 42, .13);
}


/* Accent doré discret */

.article-page .article-page-cover::after {
    content: "";

    position: absolute;

    z-index: 2;

    top: 25px;
    right: 25px;

    width: 78px;
    height: 78px;

    border-top:
        1px solid
        rgba(201, 166, 91, .7);

    border-right:
        1px solid
        rgba(201, 166, 91, .7);

    pointer-events: none;
}


.article-page .article-page-cover img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
     * Bon cadrage pour votre photo
     * de dédicace.
     */
    object-position: center 54%;
}


/* ==========================================================================
   SECTION TEXTE
   ========================================================================== */

.article-page .article-page-content-section {
    position: relative;

    z-index: 3;

    display: block !important;

    padding:
        clamp(80px, 7vw, 115px)
        0
        clamp(100px, 9vw, 145px);

    background: #ffffff;
}


.article-page .article-page-article {
    display: block !important;

    width: 100%;
    max-width: 1000px;

    margin: 0 auto;
}


/* ==========================================================================
   CORPS DE TEXTE
   ========================================================================== */

.article-page .article-page-body {
    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

    transform: none !important;

    width: 100%;
    max-width: 790px;

    margin: 0 auto;
}


/* ==========================================================================
   PARAGRAPHES
   ========================================================================== */

.article-page .article-page-body p {
    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

    margin:
        0
        0
        1.55em;

    color: #293d4a !important;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            1.07rem,
            1.18vw,
            1.18rem
        );

    font-weight: 400;

    line-height: 1.92;
}


/* ==========================================================================
   PREMIER PARAGRAPHE
   ========================================================================== */

.article-page .article-page-body .article-page-first-paragraph {
    margin-bottom: 1.8em;

    color: #102837 !important;

    font-size:
        clamp(
            1.22rem,
            1.42vw,
            1.4rem
        );

    line-height: 1.78;
}


/* Lettrine discrète */

.article-page
.article-page-body
.article-page-first-paragraph::first-letter {
    float: left;

    margin:
        .08em
        .11em
        0
        0;

    color: #9e7a3d;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size: 4.4em;

    line-height: .72;
}


/* ==========================================================================
   INTERTITRES
   ========================================================================== */

.article-page .article-page-subtitle {
    position: relative;

    margin:
        clamp(65px, 6vw, 90px)
        0
        30px;

    padding-top: 25px;

    color: #071625;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            2rem,
            2.6vw,
            2.9rem
        );

    font-weight: 400;

    line-height: 1.05;

    letter-spacing: -.035em;

    text-transform: none;
}


/* Trait doré */

.article-page .article-page-subtitle::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 58px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #c5a05a,
            rgba(197, 160, 90, 0)
        );
}


/* ==========================================================================
   GALERIE
   ========================================================================== */

.article-page .article-page-gallery {
    width: 100%;

    margin:
        clamp(90px, 8vw, 125px)
        auto
        0;

    padding-top:
        clamp(65px, 6vw, 90px);

    border-top:
        1px solid
        rgba(7, 22, 37, .08);
}


/* ==========================================================================
   GALERIE HEAD
   ========================================================================== */

.article-page .article-page-gallery-head {
    max-width: 760px;

    margin-bottom:
        clamp(45px, 5vw, 65px);
}


.article-page .article-page-gallery-head h2 {
    margin:
        22px
        0
        0;

    color: #071625;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            2.9rem,
            4vw,
            4.6rem
        );

    font-weight: 400;

    line-height: .96;

    letter-spacing: -.05em;
}


.article-page .article-page-gallery-head h2 span {
    display: block;

    color: #89afbc;

    font-style: italic;
}


/* ==========================================================================
   GALERIE GRID
   ========================================================================== */

.article-page .article-page-gallery-grid {
    display: grid;

    grid-template-columns:
        repeat(12, minmax(0, 1fr));

    grid-auto-rows: 270px;

    gap: 16px;
}


.article-page .article-page-gallery-item {
    grid-column:
        span 4;

    position: relative;

    overflow: hidden;

    margin: 0;

    border-radius: 20px;

    background: #ebe7df;
}


.article-page .article-page-gallery-item-large {
    grid-column:
        span 8;

    grid-row:
        span 2;
}


.article-page .article-page-gallery-item img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .8s
        cubic-bezier(.2, .7, .2, 1);
}


.article-page .article-page-gallery-item:hover img {
    transform: scale(1.035);
}


/* ==========================================================================
   SIGNATURE
   ========================================================================== */

.article-page .article-page-ending {
    display: flex;

    align-items: center;

    gap: 20px;

    width: 100%;
    max-width: 790px;

    margin:
        clamp(75px, 7vw, 105px)
        auto
        0;
}


.article-page .article-page-ending-line {
    width: 48px;
    height: 1px;

    background: #c5a15a;
}


.article-page .article-page-ending div {
    display: flex;

    flex-direction: column;
}


.article-page .article-page-ending div > span {
    color: #132c3e;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size: 1.08rem;
}


.article-page .article-page-ending strong {
    margin-top: 2px;

    color: #91999d;

    font-size: .66rem;

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;
}


/* ==========================================================================
   RETOUR
   ========================================================================== */

.article-page .article-page-back {
    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

    width: 100%;
    max-width: 790px;

    margin:
        38px
        auto
        0;

    padding-top: 27px;

    border-top:
        1px solid
        rgba(7, 22, 37, .08);
}


/* ==========================================================================
   CONTENU VIDE
   ========================================================================== */

.article-page .article-page-empty-content {
    padding:
        45px;

    border-radius: 24px;

    background: #f7f4ed;
}


.article-page .article-page-empty-content p {
    margin: 0 !important;
}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width: 900px) {

    .article-page .article-page-gallery-item,
    .article-page .article-page-gallery-item-large {
        grid-column:
            span 6;

        grid-row:
            span 1;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 650px) {

    .article-page .article-page-hero {
        padding:
            48px
            0
            52px;
    }


    .article-page .article-page-heading h1 {
        font-size:
            clamp(
                3rem,
                13vw,
                4.4rem
            );
    }


    .article-page .article-page-cover {
        aspect-ratio: 4 / 3;

        border-radius:
            28px
            28px
            15px
            15px;
    }


    .article-page .article-page-cover img {
        object-position: center center;
    }


    .article-page .article-page-body p {
        font-size: 1.04rem;

        line-height: 1.82;
    }


    .article-page
    .article-page-body
    .article-page-first-paragraph {
        font-size: 1.18rem;
    }


    .article-page
    .article-page-body
    .article-page-first-paragraph::first-letter {
        font-size: 3.7em;
    }


    .article-page .article-page-subtitle {
        margin-top: 58px;

        font-size:
            clamp(
                1.8rem,
                8vw,
                2.5rem
            );
    }


    .article-page .article-page-gallery-grid {
        grid-template-columns: 1fr;

        grid-auto-rows: 320px;
    }


    .article-page .article-page-gallery-item,
    .article-page .article-page-gallery-item-large {
        grid-column: 1;

        grid-row: auto;
    }

}


/* ==========================================================================
   ACCESSIBILITÉ
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .article-page .article-page-gallery-item img {
        transition: none;
    }

}

/* ==========================================================================
   ARTICLE — CORRECTION FINALE IMAGE PRINCIPALE
   À CONSERVER TOUT EN BAS DE SITE.CSS
   ========================================================================== */


/* --------------------------------------------------------------------------
   Zone de la photo
   -------------------------------------------------------------------------- */

.article-page .article-page-cover-section {
    padding:
        0
        0
        70px !important;
}


/* --------------------------------------------------------------------------
   Photo : format naturel, taille éditoriale
   -------------------------------------------------------------------------- */

.article-page .article-page-cover {
    position: relative !important;

    display: block !important;

    width: min(100%, 560px) !important;
    max-width: 560px !important;

    height: auto !important;

    margin:
        0
        auto !important;

    aspect-ratio: auto !important;

    overflow: hidden !important;

    border-radius:
        30px
        30px
        16px
        16px !important;

    background: #e7e1d8;

    box-shadow:
        0 22px 55px
        rgba(7, 22, 37, .11) !important;
}


/* --------------------------------------------------------------------------
   L'image elle-même
   IMPORTANT : aucune découpe
   -------------------------------------------------------------------------- */

.article-page .article-page-cover img {
    position: static !important;

    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;
    max-height: none !important;

    aspect-ratio: auto !important;

    object-fit: contain !important;
    object-position: center !important;

    transform: none !important;
}


/* --------------------------------------------------------------------------
   Petit détail doré proportionné à la nouvelle taille
   -------------------------------------------------------------------------- */

.article-page .article-page-cover::after {
    top: 17px !important;
    right: 17px !important;

    width: 45px !important;
    height: 45px !important;

    border-top:
        1px solid
        rgba(198, 160, 83, .7) !important;

    border-right:
        1px solid
        rgba(198, 160, 83, .7) !important;
}


/* ==========================================================================
   TEXTE — LÉGÈRE MISE À NIVEAU
   ========================================================================== */

.article-page .article-page-body {
    max-width: 760px !important;
}


.article-page .article-page-body p {
    font-size:
        clamp(
            1.08rem,
            1.15vw,
            1.18rem
        ) !important;

    line-height: 1.9 !important;
}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width: 800px) {

    .article-page .article-page-cover {
        width: min(100%, 500px) !important;
        max-width: 500px !important;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    .article-page .article-page-cover-section {
        padding-bottom: 55px !important;
    }


    .article-page .article-page-cover {
        width: min(100%, 390px) !important;
        max-width: 390px !important;

        border-radius:
            24px
            24px
            13px
            13px !important;
    }

}
/* ==========================================================================
   ARTICLE.PHP — HERO ÉDITORIAL FINAL
   TITRE + PHOTO INTÉGRÉE
   ========================================================================== */


/* ==========================================================================
   PAGE
   ========================================================================== */

.article-page {
    background: #f7f4ed;
}


/* ==========================================================================
   HERO
   ========================================================================== */

.article-page .article-page-hero {
    position: relative;

    overflow: hidden;

    padding:
        clamp(60px, 5vw, 88px)
        0
        clamp(75px, 6vw, 105px) !important;

    background:
        radial-gradient(
            circle at 88% 14%,
            rgba(141, 180, 193, .12),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7f4ed 100%
        );
}


/* ==========================================================================
   HERO GRID
   ========================================================================== */

.article-page .article-page-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(330px, 430px);

    align-items: center;

    gap:
        clamp(
            55px,
            7vw,
            110px
        );
}


/* Sans image */

.article-page .article-page-hero-grid-single {
    grid-template-columns: 1fr;
}


.article-page
.article-page-hero-grid-single
.article-page-heading {
    max-width: 1000px;
}


/* ==========================================================================
   COLONNE TEXTE
   ========================================================================== */

.article-page .article-page-heading {
    width: 100%;
    max-width: 760px;
}


/* ==========================================================================
   EYEBROW
   ========================================================================== */

.article-page .article-page-heading .eyebrow {
    margin-bottom: 23px;

    color: #476678;
}


/* ==========================================================================
   META
   ========================================================================== */

.article-page .article-page-meta {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 25px;

    color: #8b959b;

    font-size: .7rem;

    font-weight: 800;

    letter-spacing: .11em;

    text-transform: uppercase;
}


.article-page .article-page-meta span::before {
    content: "·";

    margin-right: 13px;

    color: #c19c54;
}


/* ==========================================================================
   TITRE
   ========================================================================== */

.article-page .article-page-heading h1 {
    width: 100%;
    max-width: 760px;

    margin: 0;

    color: #071625;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            3.7rem,
            5vw,
            6.1rem
        );

    font-weight: 400;

    line-height: .93;

    letter-spacing: -.057em;
}


/* ==========================================================================
   CHAPÔ
   ========================================================================== */

.article-page .article-page-lead {
    width: 100%;
    max-width: 660px;

    margin:
        31px
        0
        0;

    color: #68757d;

    font-size:
        clamp(
            1rem,
            1.1vw,
            1.08rem
        );

    line-height: 1.85;
}


/* ==========================================================================
   PETITE SIGNATURE HERO
   ========================================================================== */

.article-page .article-page-hero-signature {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 34px;

    color: #9b7c42;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size: .9rem;

    font-style: italic;
}


.article-page .article-page-hero-signature span {
    width: 42px;
    height: 1px;

    background: #c5a05b;
}


/* ==========================================================================
   PHOTO HERO
   ========================================================================== */

.article-page .article-page-hero-visual {
    position: relative;

    width: 100%;
    max-width: 430px;

    justify-self: end;

    padding:
        0
        19px
        23px
        0;
}


/* ==========================================================================
   PHOTO
   ========================================================================== */

.article-page .article-page-hero-photo {
    position: relative;

    z-index: 2;

    display: block;

    width: 100%;

    margin: 0;

    overflow: hidden;

    border-radius:
        86px
        86px
        28px
        28px;

    background: #e2ddd4;

    box-shadow:
        0 35px 75px
        rgba(11, 27, 39, .15);
}


/* Liseré arrière */

.article-page .article-page-hero-photo::before {
    content: "";

    position: absolute;

    z-index: 2;

    inset:
        19px
        19px
        auto
        auto;

    width: 62px;
    height: 62px;

    border-top:
        1px solid
        rgba(201, 165, 89, .72);

    border-right:
        1px solid
        rgba(201, 165, 89, .72);

    pointer-events: none;
}


/* ==========================================================================
   IMAGE NATURELLE — AUCUNE DÉCOUPE
   ========================================================================== */

.article-page .article-page-hero-photo img {
    position: static !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: none !important;

    aspect-ratio: auto !important;

    object-fit: contain !important;

    transform: none !important;
}


/* ==========================================================================
   CONTOUR DÉCALÉ DERRIÈRE
   ========================================================================== */

.article-page .article-page-hero-visual::before {
    content: "";

    position: absolute;

    z-index: 0;

    top: 23px;
    right: 0;

    width: calc(100% - 19px);
    height: calc(100% - 23px);

    border:
        1px solid
        rgba(191, 153, 77, .36);

    border-radius:
        86px
        86px
        28px
        28px;

    pointer-events: none;
}


/* ==========================================================================
   MONOGRAMME
   ========================================================================== */

.article-page .article-page-hero-mark {
    position: absolute;

    z-index: 5;

    right: -10px;
    bottom: 0;

    width: 76px;
    height: 76px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 8px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 14px 35px
        rgba(10, 27, 39, .13);
}


.article-page .article-page-hero-mark img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* ==========================================================================
   ANCIENNE SECTION COVER
   SÉCURITÉ : ne doit plus apparaître
   ========================================================================== */

.article-page .article-page-cover-section {
    display: none !important;
}


/* ==========================================================================
   CONTENU
   ========================================================================== */

.article-page .article-page-content-section {
    position: relative;

    z-index: 2;

    display: block !important;

    padding:
        clamp(85px, 7vw, 115px)
        0
        clamp(105px, 9vw, 145px);

    background: #ffffff;
}


.article-page .article-page-article {
    width: 100%;
    max-width: 1000px;

    margin: 0 auto;
}


/* ==========================================================================
   CORPS
   ========================================================================== */

.article-page .article-page-body {
    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

    transform: none !important;

    width: 100%;
    max-width: 760px !important;

    margin: 0 auto;
}


/* ==========================================================================
   PARAGRAPHES
   ========================================================================== */

.article-page .article-page-body p {
    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

    margin:
        0
        0
        1.6em;

    color: #293d4a !important;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            1.08rem,
            1.16vw,
            1.18rem
        );

    font-weight: 400;

    line-height: 1.92;
}


/* ==========================================================================
   PREMIER PARAGRAPHE
   ========================================================================== */

.article-page .article-page-first-paragraph {
    margin-bottom: 1.85em !important;

    color: #102837 !important;

    font-size:
        clamp(
            1.2rem,
            1.4vw,
            1.37rem
        ) !important;

    line-height: 1.78 !important;
}


/* Lettrine */

.article-page
.article-page-first-paragraph::first-letter {
    float: left;

    margin:
        .08em
        .11em
        0
        0;

    color: #9e7a3d;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size: 4.2em;

    line-height: .72;
}


/* ==========================================================================
   INTERTITRES
   ========================================================================== */

.article-page .article-page-subtitle {
    position: relative;

    margin:
        clamp(65px, 6vw, 88px)
        0
        29px;

    padding-top: 24px;

    color: #071625;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            2rem,
            2.6vw,
            2.85rem
        );

    font-weight: 400;

    line-height: 1.05;

    letter-spacing: -.035em;

    text-transform: none;
}


.article-page .article-page-subtitle::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 58px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #c5a05a,
            rgba(197, 160, 90, 0)
        );
}


/* ==========================================================================
   GALERIE
   ========================================================================== */

.article-page .article-page-gallery {
    width: 100%;

    margin:
        clamp(90px, 8vw, 125px)
        auto
        0;

    padding-top:
        clamp(65px, 6vw, 90px);

    border-top:
        1px solid
        rgba(7, 22, 37, .08);
}


.article-page .article-page-gallery-head {
    max-width: 760px;

    margin-bottom:
        clamp(45px, 5vw, 65px);
}


.article-page .article-page-gallery-head h2 {
    margin:
        22px
        0
        0;

    color: #071625;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            2.9rem,
            4vw,
            4.5rem
        );

    font-weight: 400;

    line-height: .96;

    letter-spacing: -.05em;
}


.article-page .article-page-gallery-head h2 span {
    display: block;

    color: #89afbc;

    font-style: italic;
}


.article-page .article-page-gallery-grid {
    display: grid;

    grid-template-columns:
        repeat(12, minmax(0, 1fr));

    grid-auto-rows: 270px;

    gap: 16px;
}


.article-page .article-page-gallery-item {
    position: relative;

    grid-column:
        span 4;

    overflow: hidden;

    margin: 0;

    border-radius: 20px;

    background: #ebe7df;
}


.article-page .article-page-gallery-item-large {
    grid-column:
        span 8;

    grid-row:
        span 2;
}


.article-page .article-page-gallery-item img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .8s
        cubic-bezier(.2, .7, .2, 1);
}


.article-page .article-page-gallery-item:hover img {
    transform: scale(1.035);
}


/* ==========================================================================
   SIGNATURE
   ========================================================================== */

.article-page .article-page-ending {
    display: flex;

    align-items: center;

    gap: 20px;

    max-width: 760px;

    margin:
        clamp(75px, 7vw, 105px)
        auto
        0;
}


.article-page .article-page-ending-line {
    width: 48px;
    height: 1px;

    background: #c5a15a;
}


.article-page .article-page-ending div {
    display: flex;

    flex-direction: column;
}


.article-page .article-page-ending div > span {
    color: #132c3e;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size: 1.08rem;
}


.article-page .article-page-ending strong {
    margin-top: 2px;

    color: #91999d;

    font-size: .66rem;

    font-weight: 700;

    letter-spacing: .12em;

    text-transform: uppercase;
}


/* ==========================================================================
   RETOUR
   ========================================================================== */

.article-page .article-page-back {
    max-width: 760px;

    margin:
        38px
        auto
        0;

    padding-top: 27px;

    border-top:
        1px solid
        rgba(7, 22, 37, .08);
}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width: 950px) {

    .article-page .article-page-hero-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, 360px);

        gap: 45px;
    }


    .article-page .article-page-heading h1 {
        font-size:
            clamp(
                3.3rem,
                6vw,
                5rem
            );
    }


    .article-page .article-page-hero-visual {
        max-width: 360px;
    }

}


/* ==========================================================================
   PETITE TABLETTE
   ========================================================================== */

@media (max-width: 760px) {

    .article-page .article-page-hero-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }


    .article-page .article-page-hero-visual {
        width: min(100%, 440px);

        max-width: 440px;

        justify-self: center;
    }


    .article-page .article-page-heading {
        max-width: 700px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    .article-page .article-page-hero {
        padding:
            48px
            0
            65px !important;
    }


    .article-page .article-page-heading h1 {
        font-size:
            clamp(
                3rem,
                13vw,
                4.3rem
            );
    }


    .article-page .article-page-hero-photo,
    .article-page .article-page-hero-visual::before {
        border-radius:
            55px
            55px
            22px
            22px;
    }


    .article-page .article-page-hero-mark {
        right: 0;

        width: 65px;
        height: 65px;
    }


    .article-page .article-page-body p {
        font-size: 1.04rem;

        line-height: 1.82;
    }


    .article-page .article-page-gallery-grid {
        grid-template-columns: 1fr;

        grid-auto-rows: 320px;
    }


    .article-page .article-page-gallery-item,
    .article-page .article-page-gallery-item-large {
        grid-column: 1;

        grid-row: auto;
    }

}

/* ==========================================================================
   ARTICLE — FINITION PLUS RICHE / MOINS BLANCHE
   ========================================================================== */


/* ==========================================================================
   HERO
   ========================================================================== */

.article-page .article-page-hero {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 83% 18%,
            rgba(143, 196, 213, .30),
            transparent 29%
        ),
        radial-gradient(
            circle at 12% 82%,
            rgba(214, 169, 75, .10),
            transparent 28%
        ),
        linear-gradient(
            115deg,
            #f6f0e7 0%,
            #fbfaf6 56%,
            #e9f3f5 100%
        ) !important;
}


/* Grand mot décoratif très discret */

.article-page .article-page-hero::after {
    content: "JOURNAL";

    position: absolute;

    left: 3%;
    bottom: -55px;

    color: rgba(6, 19, 38, .028);

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(8rem, 17vw, 18rem);

    font-weight: 700;

    line-height: .7;

    letter-spacing: -.07em;

    pointer-events: none;
}


/* Le contenu reste au-dessus */

.article-page .article-page-hero-grid {
    position: relative;

    z-index: 2;
}


/* ==========================================================================
   TITRE
   ========================================================================== */

.article-page .article-page-heading h1 {
    color: #071625 !important;
}


/* Petit accent bleu sous le titre */

.article-page .article-page-heading h1::after {
    content: "";

    display: block;

    width: 88px;
    height: 2px;

    margin-top: 27px;

    background:
        linear-gradient(
            90deg,
            #6fa6b8,
            #d0a95d
        );
}


/* ==========================================================================
   MÉTA
   ========================================================================== */

.article-page .article-page-meta time {
    color: #6a8797;
}


.article-page .article-page-meta span {
    color: #9a793e;
}


/* ==========================================================================
   PHOTO
   ========================================================================== */

.article-page .article-page-hero-visual {
    position: relative;
}


/* Bloc marine derrière la photo */

.article-page .article-page-hero-visual::after {
    content: "";

    position: absolute;

    z-index: 0;

    right: -24px;
    bottom: -24px;

    width: 74%;
    height: 54%;

    border-radius:
        40px
        40px
        24px
        24px;

    background:
        linear-gradient(
            145deg,
            #0a1a2a,
            #16394d
        );

    opacity: .94;
}


/* Photo au-dessus */

.article-page .article-page-hero-photo {
    position: relative;

    z-index: 2;

    box-shadow:
        0 34px 80px
        rgba(6, 19, 38, .20) !important;
}


/* ==========================================================================
   CORPS DE L'ARTICLE
   ========================================================================== */

.article-page .article-page-content-section {
    background:
        linear-gradient(
            180deg,
            #f1ece3 0%,
            #f7f4ed 100%
        ) !important;
}


/* Le texte devient une vraie page éditoriale */

.article-page .article-page-body {
    position: relative;

    max-width: 820px !important;

    padding:
        clamp(42px, 5vw, 70px)
        clamp(30px, 5vw, 68px);

    border:
        1px solid
        rgba(6, 19, 38, .055);

    border-radius:
        36px;

    background:
        linear-gradient(
            180deg,
            #fffefa 0%,
            #ffffff 100%
        );

    box-shadow:
        0 26px 65px
        rgba(6, 19, 38, .07);
}


/* Petit détail doré en haut de la page */

.article-page .article-page-body::before {
    content: "";

    position: absolute;

    top: 0;
    left: 68px;

    width: 72px;
    height: 3px;

    background: #d0a95d;
}


/* ==========================================================================
   TEXTE
   ========================================================================== */

.article-page .article-page-body p {
    color: #263b49 !important;
}


/* Premier paragraphe plus affirmé */

.article-page .article-page-first-paragraph {
    color: #102737 !important;
}


/* ==========================================================================
   INTERTITRES
   ========================================================================== */

.article-page .article-page-subtitle {
    color: #173e54 !important;
}


.article-page .article-page-subtitle::before {
    width: 72px !important;

    background:
        linear-gradient(
            90deg,
            #d0a95d,
            #8db4c1,
            transparent
        ) !important;
}


/* ==========================================================================
   SIGNATURE DE FIN
   ========================================================================== */

.article-page .article-page-ending {
    padding:
        28px
        32px;

    border-radius: 20px;

    background: #0a1a2a;
}


.article-page .article-page-ending div > span {
    color: #ffffff !important;
}


.article-page .article-page-ending strong {
    color: #91b7c4 !important;
}


.article-page .article-page-ending-line {
    background: #d2ae64 !important;
}


/* ==========================================================================
   RETOUR
   ========================================================================== */

.article-page .article-page-back {
    border-top-color:
        rgba(6, 19, 38, .12) !important;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 760px) {

    .article-page .article-page-hero::after {
        font-size: 8rem;
        bottom: -25px;
    }


    .article-page .article-page-hero-visual::after {
        right: -10px;
        bottom: -12px;
    }


    .article-page .article-page-body {
        padding:
            38px
            24px;

        border-radius: 26px;
    }


    .article-page .article-page-body::before {
        left: 24px;
    }

}
/* ==========================================================================
   ARTICLE — CORPS ÉDITORIAL LARGE
   ========================================================================== */


/* ==========================================================================
   SECTION
   ========================================================================== */

.article-page .article-page-content-section {
    padding:
        clamp(85px, 7vw, 120px)
        0
        clamp(110px, 9vw, 150px) !important;

    background:
        linear-gradient(
            180deg,
            #eee8de 0%,
            #f5f1e9 100%
        ) !important;
}


/* ==========================================================================
   ARTICLE GLOBAL
   ========================================================================== */

.article-page .article-page-article {
    width: min(1180px, calc(100% - 36px)) !important;
    max-width: 1180px !important;

    margin: 0 auto !important;
}


/* ==========================================================================
   GRANDE CARTE ÉDITORIALE
   ========================================================================== */

.article-page .article-page-content-grid {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(230px, 285px);

    align-items: start;

    gap:
        clamp(
            55px,
            6vw,
            95px
        );

    padding:
        clamp(55px, 6vw, 85px)
        clamp(55px, 6vw, 90px);

    border:
        1px solid
        rgba(6, 19, 38, .06);

    border-radius: 42px;

    background:
        linear-gradient(
            135deg,
            #fffefa 0%,
            #ffffff 72%,
            #f5f8f8 100%
        );

    box-shadow:
        0 34px 85px
        rgba(6, 19, 38, .09);
}


/* Trait doré supérieur */

.article-page .article-page-content-grid::before {
    content: "";

    position: absolute;

    top: 0;
    left: clamp(55px, 6vw, 90px);

    width: 92px;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            #cba65c,
            #8fb8c5
        );
}


/* ==========================================================================
   CORPS DE TEXTE
   ========================================================================== */

.article-page .article-page-body {
    display: block !important;

    visibility: visible !important;

    opacity: 1 !important;

    transform: none !important;

    width: 100% !important;
    max-width: 760px !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
}


/* Supprime l'ancien filet de la carte */

.article-page .article-page-body::before {
    content: none !important;
    display: none !important;
}


/* ==========================================================================
   TEXTE
   ========================================================================== */

.article-page .article-page-body p {
    margin:
        0
        0
        1.55em !important;

    color: #263b49 !important;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            1.08rem,
            1.16vw,
            1.18rem
        ) !important;

    line-height: 1.92 !important;
}


/* ==========================================================================
   PREMIER PARAGRAPHE
   ========================================================================== */

.article-page .article-page-first-paragraph {
    margin-bottom: 1.8em !important;

    color: #102737 !important;

    font-size:
        clamp(
            1.2rem,
            1.38vw,
            1.36rem
        ) !important;

    line-height: 1.78 !important;
}


.article-page
.article-page-first-paragraph::first-letter {
    float: left;

    margin:
        .08em
        .12em
        0
        0;

    color: #a27d3b;

    font-size: 4.15em;

    line-height: .72;
}


/* ==========================================================================
   INTERTITRES
   ========================================================================== */

.article-page .article-page-subtitle {
    position: relative;

    margin:
        clamp(62px, 5vw, 82px)
        0
        29px !important;

    padding-top: 23px;

    color: #173d53 !important;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            2rem,
            2.5vw,
            2.8rem
        );

    font-weight: 400;

    line-height: 1.05;

    letter-spacing: -.035em;
}


.article-page .article-page-subtitle::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 65px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            #c6a05a,
            #91b7c4,
            transparent
        );
}


/* ==========================================================================
   COLONNE DE DROITE
   ========================================================================== */

.article-page .article-page-rail {
    position: relative;

    min-width: 0;
}


/* ==========================================================================
   CARTE RAIL
   ========================================================================== */

.article-page .article-page-rail-inner {
    position: sticky;

    top: 125px;

    overflow: hidden;

    padding:
        34px
        30px
        30px;

    border-radius:
        26px;

    background:
        linear-gradient(
            150deg,
            #071625 0%,
            #102d40 100%
        );

    color: #ffffff;

    box-shadow:
        0 22px 55px
        rgba(7, 22, 37, .14);
}


/* ==========================================================================
   SURTITRE RAIL
   ========================================================================== */

.article-page .article-page-rail-kicker {
    display: block;

    margin-bottom: 34px;

    color: #d2b36b;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: .20em;

    text-transform: uppercase;
}


/* ==========================================================================
   DATE
   ========================================================================== */

.article-page .article-page-rail-date {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.article-page .article-page-rail-date span {
    color:
        rgba(222, 232, 237, .45);

    font-size: .65rem;

    text-transform: uppercase;

    letter-spacing: .13em;
}


.article-page .article-page-rail-date strong {
    color: #ffffff;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size: 1.45rem;

    font-weight: 400;
}


/* ==========================================================================
   SÉPARATEUR
   ========================================================================== */

.article-page .article-page-rail-separator {
    width: 45px;
    height: 1px;

    margin:
        27px
        0;

    background: #c7a158;
}


/* ==========================================================================
   TEXTE RAIL
   ========================================================================== */

.article-page .article-page-rail p {
    position: relative;

    z-index: 2;

    margin: 0;

    color:
        rgba(224, 233, 237, .65);

    font-size: .82rem;

    line-height: 1.75;
}


.article-page .article-page-rail p strong {
    color: #ffffff;

    font-weight: 700;
}


/* ==========================================================================
   MONOGRAMME RAIL
   ========================================================================== */

.article-page .article-page-rail-mark {
    width: 95px;
    height: 95px;

    margin:
        38px
        0
        -9px
        auto;

    opacity: .14;
}


.article-page .article-page-rail-mark img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* ==========================================================================
   GALERIE / SIGNATURE / RETOUR
   Alignés avec la nouvelle grande composition
   ========================================================================== */

.article-page .article-page-gallery,
.article-page .article-page-ending,
.article-page .article-page-back {
    width: 100%;
    max-width: 1180px !important;
}


/* Signature */

.article-page .article-page-ending {
    margin-top:
        clamp(75px, 7vw, 105px);
}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width: 950px) {

    .article-page .article-page-content-grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(200px, 235px);

        gap: 45px;

        padding:
            55px
            48px;
    }

}


/* ==========================================================================
   PETITE TABLETTE
   ========================================================================== */

@media (max-width: 760px) {

    .article-page .article-page-content-grid {
        grid-template-columns: 1fr;

        gap: 55px;

        padding:
            48px
            34px;
    }


    .article-page .article-page-rail-inner {
        position: relative;

        top: auto;

        max-width: 520px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    .article-page .article-page-article {
        width: min(100% - 24px, 1180px) !important;
    }


    .article-page .article-page-content-grid {
        padding:
            40px
            24px;

        border-radius: 28px;
    }


    .article-page .article-page-content-grid::before {
        left: 24px;
    }


    .article-page .article-page-rail-inner {
        padding:
            30px
            25px;
    }

}

/* ==========================================================================
   GALERIE ARTICLE — VERSION FINALE
   GRANDES IMAGES / FORMAT NATUREL / AUCUN CROP
   ========================================================================== */


/* ==========================================================================
   CONTENEUR GLOBAL
   ========================================================================== */

.article-page .article-page-gallery {
    width: 100% !important;
    max-width: 1180px !important;

    margin:
        clamp(80px, 8vw, 120px)
        auto
        0 !important;

    padding:
        clamp(36px, 5vw, 64px) !important;

    border:
        1px solid
        rgba(7, 22, 37, .07) !important;

    border-radius: 36px !important;

    background:
        linear-gradient(
            145deg,
            #faf7f0 0%,
            #f3eee5 100%
        ) !important;

    box-sizing: border-box;
}


/* ==========================================================================
   TITRE
   ========================================================================== */

.article-page .article-page-gallery-head {
    width: 100%;
    max-width: 850px;

    margin:
        0
        0
        clamp(42px, 5vw, 65px) !important;
}


.article-page .article-page-gallery-head h2 {
    margin:
        18px
        0
        0 !important;

    color: #071625;

    font-family:
        var(--font-serif, Georgia, serif);

    font-size:
        clamp(
            3rem,
            5vw,
            5.2rem
        ) !important;

    font-weight: 400;

    line-height: .93;

    letter-spacing: -.055em;
}


.article-page .article-page-gallery-head h2 span {
    display: block;

    color: #8fb4c1;

    font-style: italic;
}


/* ==========================================================================
   GALERIE MASONRY
   ========================================================================== */

/*
 * On abandonne complètement l'ancienne grille 12 colonnes.
 *
 * Chaque colonne fait environ 330 à 380 px sur desktop.
 * Les photos gardent leur hauteur naturelle.
 */

.article-page .article-page-gallery-grid {
    display: block !important;

    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-auto-columns: auto !important;
    grid-auto-rows: auto !important;

    columns: 3 !important;
    column-gap: 20px !important;

    width: 100% !important;
}


/* ==========================================================================
   CHAQUE PHOTO
   ========================================================================== */

.article-page .article-page-gallery-item,
.article-page .article-page-gallery-item-large {
    display: inline-block !important;

    width: 100% !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: none !important;
    max-height: none !important;

    margin:
        0
        0
        20px !important;

    padding: 0 !important;

    break-inside: avoid !important;
    page-break-inside: avoid;

    grid-column: auto !important;
    grid-row: auto !important;

    aspect-ratio: auto !important;

    overflow: hidden;

    vertical-align: top;

    border:
        1px solid
        rgba(7, 22, 37, .07);

    border-radius: 22px !important;

    background: #ffffff;

    box-shadow:
        0 16px 38px
        rgba(7, 22, 37, .08);

    box-sizing: border-box;
}


/* ==========================================================================
   IMAGE
   ========================================================================== */

.article-page .article-page-gallery-item img,
.article-page .article-page-gallery-item-large img {
    position: static !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    max-width: 100% !important;
    max-height: none !important;

    margin: 0 !important;

    aspect-ratio: auto !important;

    object-fit: initial !important;
    object-position: initial !important;

    transform: none !important;

    border-radius: 0 !important;
}


/* ==========================================================================
   SURVOL
   ========================================================================== */

.article-page .article-page-gallery-item {
    transition:
        transform .28s ease,
        box-shadow .28s ease;
}


.article-page .article-page-gallery-item:hover {
    transform: translateY(-4px) !important;

    box-shadow:
        0 22px 48px
        rgba(7, 22, 37, .12);
}


.article-page .article-page-gallery-item:hover img {
    transform: none !important;
}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width: 950px) {

    .article-page .article-page-gallery-grid {
        columns: 2 !important;
        column-gap: 18px !important;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    .article-page .article-page-gallery {
        padding:
            30px
            18px !important;

        border-radius: 26px !important;
    }


    .article-page .article-page-gallery-grid {
        columns: 1 !important;
    }


    .article-page .article-page-gallery-item,
    .article-page .article-page-gallery-item-large {
        margin-bottom: 16px !important;

        border-radius: 18px !important;
    }

}

/* ==========================================================================
   GALERIE ARTICLE — LIGHTBOX
   ========================================================================== */


/* ==========================================================================
   PHOTO CLIQUABLE
   ========================================================================== */

.article-page .article-page-gallery-open {
    position: relative;

    display: block;

    width: 100%;

    margin: 0;
    padding: 0;

    border: 0;

    background: transparent;

    color: inherit;

    font: inherit;

    text-align: inherit;

    cursor: zoom-in;

    appearance: none;
}


.article-page .article-page-gallery-open img {
    display: block;

    width: 100%;
    height: auto;

    transition:
        transform .45s cubic-bezier(.2, .7, .2, 1),
        filter .35s ease;
}


/* ==========================================================================
   ICÔNE ZOOM
   ========================================================================== */

.article-page .article-page-gallery-zoom {
    position: absolute;

    z-index: 3;

    right: 16px;
    bottom: 16px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    border:
        1px solid
        rgba(255, 255, 255, .55);

    border-radius: 50%;

    background:
        rgba(6, 19, 38, .72);

    color: #ffffff;

    opacity: 0;

    transform:
        translateY(7px)
        scale(.94);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    transition:
        opacity .25s ease,
        transform .25s ease,
        background .25s ease;
}


/* ==========================================================================
   HOVER
   ========================================================================== */

.article-page
.article-page-gallery-open:hover
.article-page-gallery-zoom {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


.article-page
.article-page-gallery-open:hover
img {
    transform: scale(1.015);
}


.article-page
.article-page-gallery-open:focus-visible {
    outline:
        3px solid
        rgba(198, 160, 83, .75);

    outline-offset: 4px;

    border-radius: 22px;
}


/* ==========================================================================
   LIGHTBOX PLEIN ÉCRAN
   ========================================================================== */

.article-lightbox {
    position: fixed;

    z-index: 99999;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    padding:
        clamp(20px, 4vw, 54px)
        clamp(60px, 7vw, 115px);

    background:
        rgba(3, 11, 20, .94);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    opacity: 1;

    transition:
        opacity .25s ease;
}


.article-lightbox[hidden] {
    display: none !important;
}


/* ==========================================================================
   SCÈNE
   ========================================================================== */

.article-lightbox-stage {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;
}


/* ==========================================================================
   GRANDE IMAGE
   ========================================================================== */

.article-lightbox-image {
    display: block;

    width: auto !important;
    height: auto !important;

    max-width: 100% !important;
    max-height:
        calc(100vh - 110px) !important;

    object-fit: contain !important;

    object-position: center !important;

    border-radius: 10px;

    background: transparent;

    box-shadow:
        0 30px 90px
        rgba(0, 0, 0, .38);

    user-select: none;

    -webkit-user-drag: none;
}


/* ==========================================================================
   CROIX
   ========================================================================== */

.article-lightbox-close {
    position: absolute;

    z-index: 6;

    top: 22px;
    right: 27px;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    padding: 0;

    border:
        1px solid
        rgba(255, 255, 255, .19);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .08);

    color: #ffffff;

    font-family:
        Arial,
        sans-serif;

    font-size: 2rem;

    font-weight: 300;

    line-height: 1;

    cursor: pointer;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    transition:
        background .2s ease,
        transform .2s ease;
}


.article-lightbox-close:hover {
    background:
        rgba(255, 255, 255, .16);

    transform: rotate(4deg);
}


/* ==========================================================================
   FLÈCHES
   ========================================================================== */

.article-lightbox-nav {
    position: absolute;

    z-index: 6;

    top: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 58px;
    height: 74px;

    padding: 0;

    border:
        1px solid
        rgba(255, 255, 255, .17);

    border-radius: 30px;

    background:
        rgba(255, 255, 255, .07);

    color: #ffffff;

    font-family:
        Arial,
        sans-serif;

    font-size: 3rem;

    font-weight: 200;

    line-height: 1;

    cursor: pointer;

    transform:
        translateY(-50%);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    transition:
        background .2s ease,
        border-color .2s ease;
}


.article-lightbox-nav:hover {
    background:
        rgba(198, 160, 83, .22);

    border-color:
        rgba(198, 160, 83, .55);
}


.article-lightbox-prev {
    left: 25px;
}


.article-lightbox-next {
    right: 25px;
}


/* ==========================================================================
   COMPTEUR
   ========================================================================== */

.article-lightbox-bottom {
    position: absolute;

    z-index: 5;

    left: 50%;
    bottom: -2px;

    transform:
        translateX(-50%);
}


.article-lightbox-counter {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 76px;

    padding:
        9px
        17px;

    border:
        1px solid
        rgba(255, 255, 255, .16);

    border-radius: 999px;

    background:
        rgba(6, 19, 38, .76);

    color:
        rgba(255, 255, 255, .82);

    font-size: .7rem;

    font-weight: 800;

    letter-spacing: .12em;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


/* ==========================================================================
   EMPÊCHE LE SCROLL DERRIÈRE LA LIGHTBOX
   ========================================================================== */

body.article-lightbox-open {
    overflow: hidden !important;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .article-lightbox {
        padding:
            70px
            14px
            72px;
    }


    .article-lightbox-image {
        max-height:
            calc(100vh - 155px) !important;

        border-radius: 7px;
    }


    .article-lightbox-close {
        top: 12px;
        right: 14px;

        width: 46px;
        height: 46px;
    }


    .article-lightbox-nav {
        top: auto;
        bottom: 13px;

        width: 52px;
        height: 44px;

        border-radius: 999px;

        font-size: 2.2rem;

        transform: none;
    }


    .article-lightbox-prev {
        left: 14px;
    }


    .article-lightbox-next {
        right: 14px;
    }


    .article-lightbox-bottom {
        bottom: 17px;
    }


    /* Toujours montrer le zoom sur mobile */

    .article-page .article-page-gallery-zoom {
        width: 40px;
        height: 40px;

        right: 12px;
        bottom: 12px;

        opacity: .86;

        transform: none;
    }

}

/* ==========================================================================
   LIGHTBOX — OVERLAY TRANSPARENT DIRECTEMENT SUR LA GALERIE
   VERSION FINALE
   ========================================================================== */


/* ==========================================================================
   OVERLAY
   La galerie reste visible derrière
   ========================================================================== */

.article-lightbox {
    position: fixed !important;

    z-index: 999999 !important;

    inset: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    padding:
        28px
        90px !important;

    /*
     * IMPORTANT :
     * fond semi-transparent.
     * On continue donc à voir la galerie derrière.
     */
    background:
        rgba(6, 19, 38, .58) !important;

    /*
     * Pas de gros flou :
     * on veut reconnaître la galerie derrière.
     */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


.article-lightbox[hidden] {
    display: none !important;
}


/* ==========================================================================
   SUPPRESSION DE TOUTE CARTE / FENÊTRE
   ========================================================================== */

.article-lightbox-shell {
    display: contents !important;
}


/* ==========================================================================
   ZONE PHOTO
   ========================================================================== */

.article-lightbox-stage {
    position: relative !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: auto !important;
    height: auto !important;

    max-width:
        calc(100vw - 190px) !important;

    max-height:
        calc(100vh - 70px) !important;

    min-width: 0 !important;
    min-height: 0 !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: visible !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
}


/* ==========================================================================
   GRANDE PHOTO
   ========================================================================== */

.article-lightbox-image {
    position: relative !important;

    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width:
        min(
            88vw,
            1280px
        ) !important;

    max-height:
        88vh !important;

    margin: 0 !important;

    object-fit: contain !important;
    object-position: center !important;

    border:
        1px solid
        rgba(255, 255, 255, .55);

    border-radius: 16px !important;

    background: #ffffff;

    box-shadow:
        0 32px 100px
        rgba(0, 0, 0, .55) !important;

    user-select: none;
    -webkit-user-drag: none;
}


/* ==========================================================================
   FERMER
   ========================================================================== */

.article-lightbox-close {
    position: fixed !important;

    z-index: 1000001 !important;

    top: 25px !important;
    right: 28px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 48px !important;
    height: 48px !important;

    padding: 0 !important;

    border:
        1px solid
        rgba(255, 255, 255, .40) !important;

    border-radius: 50% !important;

    background:
        rgba(6, 19, 38, .60) !important;

    color: #ffffff !important;

    font-family:
        Arial,
        sans-serif;

    font-size: 1.9rem !important;
    font-weight: 300;

    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 8px 25px
        rgba(0, 0, 0, .18);

    backdrop-filter:
        blur(6px);

    -webkit-backdrop-filter:
        blur(6px);

    transition:
        background .2s ease,
        transform .2s ease;
}


.article-lightbox-close:hover {
    background:
        rgba(214, 169, 75, .92) !important;

    color: #061326 !important;

    transform:
        scale(1.06) !important;
}


/* ==========================================================================
   FLÈCHES
   ========================================================================== */

.article-lightbox-nav {
    position: fixed !important;

    z-index: 1000001 !important;

    top: 50% !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 52px !important;
    height: 52px !important;

    padding: 0 !important;

    border:
        1px solid
        rgba(255, 255, 255, .38) !important;

    border-radius: 50% !important;

    background:
        rgba(6, 19, 38, .55) !important;

    color: #ffffff !important;

    font-family:
        Arial,
        sans-serif;

    font-size: 2.3rem !important;
    font-weight: 300;

    line-height: 1;

    cursor: pointer;

    transform:
        translateY(-50%) !important;

    box-shadow:
        0 10px 28px
        rgba(0, 0, 0, .20);

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);

    transition:
        background .2s ease,
        transform .2s ease;
}


.article-lightbox-nav:hover {
    background:
        rgba(214, 169, 75, .92) !important;

    color: #061326 !important;

    transform:
        translateY(-50%)
        scale(1.07) !important;
}


/* Gauche */

.article-lightbox-prev {
    left: 25px !important;
}


/* Droite */

.article-lightbox-next {
    right: 25px !important;
}


/* ==========================================================================
   COMPTEUR
   ========================================================================== */

.article-lightbox-bottom {
    position: absolute !important;

    z-index: 5 !important;

    left: 50% !important;
    bottom: 17px !important;

    transform:
        translateX(-50%) !important;
}


.article-lightbox-counter {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    min-width: 72px;

    padding:
        8px
        15px !important;

    border:
        1px solid
        rgba(255, 255, 255, .40) !important;

    border-radius: 999px !important;

    background:
        rgba(6, 19, 38, .72) !important;

    color: #ffffff !important;

    font-size: .68rem !important;

    font-weight: 800 !important;

    letter-spacing: .10em;

    box-shadow:
        0 8px 22px
        rgba(0, 0, 0, .15);

    backdrop-filter:
        blur(6px);

    -webkit-backdrop-filter:
        blur(6px);
}


/* ==========================================================================
   LA PAGE RESTE EXACTEMENT À SA POSITION
   ========================================================================== */

body.article-lightbox-open {
    overflow: hidden !important;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 700px) {

    .article-lightbox {
        padding:
            65px
            12px
            72px !important;

        background:
            rgba(6, 19, 38, .64) !important;
    }


    .article-lightbox-stage {
        max-width: 100% !important;

        max-height:
            calc(100dvh - 135px) !important;
    }


    .article-lightbox-image {
        max-width: 100% !important;

        max-height:
            calc(100dvh - 145px) !important;

        border-radius: 11px !important;
    }


    .article-lightbox-close {
        top: 12px !important;
        right: 12px !important;

        width: 43px !important;
        height: 43px !important;
    }


    .article-lightbox-nav {
        top: auto !important;
        bottom: 14px !important;

        width: 46px !important;
        height: 46px !important;

        transform: none !important;
    }


    .article-lightbox-nav:hover {
        transform:
            scale(1.06) !important;
    }


    .article-lightbox-prev {
        left: 14px !important;
    }


    .article-lightbox-next {
        right: 14px !important;
    }


    .article-lightbox-bottom {
        bottom: 19px !important;
    }

}

/* ==========================================================================
   NEWS.PHP — EN IMAGES
   GALERIE ÉDITORIALE EN PROPORTIONS NATURELLES
   ========================================================================== */


/* ==========================================================================
   SECTION
   ========================================================================== */

.news-page .news-gallery {
    position: relative;

    overflow: hidden;

    padding:
        clamp(100px, 9vw, 145px)
        0
        clamp(105px, 9vw, 150px) !important;

    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(143, 196, 213, .18),
            transparent 29%
        ),
        linear-gradient(
            180deg,
            #f3eee5 0%,
            #f8f5ef 100%
        ) !important;
}


/* Grand mot décoratif */

.news-page .news-gallery::before {
    content: "IMAGES";

    position: absolute;

    right: -25px;
    top: 30px;

    color:
        rgba(6, 19, 38, .025);

    font-family:
        var(--serif, Georgia, serif);

    font-size:
        clamp(
            8rem,
            17vw,
            17rem
        );

    font-weight: 700;

    line-height: .8;

    letter-spacing: -.08em;

    pointer-events: none;
}


/* Contenu devant */

.news-page .news-gallery .container {
    position: relative;

    z-index: 2;
}


/* ==========================================================================
   TITRE
   ========================================================================== */

.news-page .news-gallery-heading {
    margin-bottom:
        clamp(
            50px,
            6vw,
            76px
        ) !important;
}


/* ==========================================================================
   MASONRY
   ========================================================================== */

.news-page .news-gallery-grid {
    display: block !important;

    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-auto-columns: auto !important;
    grid-auto-rows: auto !important;

    width: 100%;

    columns: 4;

    column-gap: 18px;
}


/* ==========================================================================
   PHOTO
   ========================================================================== */

.news-page .news-gallery-item,
.news-page .news-gallery-item-large {
    position: relative;

    display: inline-block !important;

    width: 100% !important;
    height: auto !important;

    margin:
        0
        0
        18px !important;

    padding: 0;

    break-inside: avoid;

    grid-column: auto !important;
    grid-row: auto !important;

    aspect-ratio: auto !important;

    overflow: hidden;

    vertical-align: top;

    border:
        1px solid
        rgba(7, 22, 37, .07);

    border-radius: 22px;

    background: #e8e3db;

    box-shadow:
        0 16px 38px
        rgba(7, 22, 37, .08);

    transition:
        transform .28s ease,
        box-shadow .28s ease;
}


/* ==========================================================================
   IMAGE NATURELLE
   ========================================================================== */

.news-page .news-gallery-item img,
.news-page .news-gallery-item-large img {
    position: static !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;

    min-height: 0 !important;

    max-width: 100% !important;
    max-height: none !important;

    aspect-ratio: auto !important;

    object-fit: initial !important;
    object-position: initial !important;

    transform: none !important;

    transition:
        transform .55s
        cubic-bezier(.2, .7, .2, 1) !important;
}


/* ==========================================================================
   SURVOL
   ========================================================================== */

.news-page .news-gallery-item:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 24px 48px
        rgba(7, 22, 37, .13);
}


.news-page .news-gallery-item:hover img {
    transform:
        scale(1.018) !important;
}


/* ==========================================================================
   OVERLAY
   ========================================================================== */

.news-page .news-gallery-overlay {
    position: absolute;

    inset:
        auto
        0
        0;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    padding:
        70px
        22px
        20px !important;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(5, 18, 30, .15) 25%,
            rgba(5, 18, 30, .86) 100%
        ) !important;

    opacity: 0;

    transform:
        translateY(8px);

    transition:
        opacity .28s ease,
        transform .28s ease;

    pointer-events: none;
}


.news-page
.news-gallery-item:hover
.news-gallery-overlay {
    opacity: 1;

    transform: none;
}


/* ==========================================================================
   CATÉGORIE
   ========================================================================== */

.news-page .news-gallery-overlay > span {
    display: block;

    margin-bottom: 7px;

    color: #e0bf73;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .17em;

    text-transform: uppercase;
}


/* ==========================================================================
   TITRE
   ========================================================================== */

.news-page .news-gallery-overlay strong {
    display: block;

    max-width: 95%;

    color: #ffffff;

    font-family:
        var(--serif, Georgia, serif);

    font-size:
        clamp(
            1rem,
            1.2vw,
            1.22rem
        );

    font-style: normal;

    font-weight: 400;

    line-height: 1.17;
}


/* ==========================================================================
   DÉCOUVRIR
   ========================================================================== */

.news-page .news-gallery-overlay em {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 13px;

    color:
        rgba(255, 255, 255, .68);

    font-family:
        var(--sans, Arial, sans-serif);

    font-size: .67rem;

    font-style: normal;

    font-weight: 700;
}


.news-page .news-gallery-overlay em span {
    color: #d6a94b;

    transition:
        transform .2s ease;
}


.news-page
.news-gallery-item:hover
.news-gallery-overlay
em span {
    transform:
        translateX(4px);
}


/* ==========================================================================
   FIN DE SECTION
   ========================================================================== */

.news-page .news-gallery-ending {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 17px;

    margin-top:
        clamp(
            35px,
            4vw,
            55px
        );
}


.news-page .news-gallery-ending > span {
    width: 54px;
    height: 1px;

    background: #c49c4d;
}


.news-page .news-gallery-ending p {
    max-width: 340px;

    margin: 0;

    color: #7a8388;

    font-family:
        var(--serif, Georgia, serif);

    font-size: .9rem;

    font-style: italic;

    line-height: 1.55;
}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width: 1050px) {

    .news-page .news-gallery-grid {
        columns: 3;
    }

}


/* ==========================================================================
   PETITE TABLETTE
   ========================================================================== */

@media (max-width: 760px) {

    .news-page .news-gallery-grid {
        columns: 2;
        column-gap: 14px;
    }


    /*
     * Sur écran tactile :
     * les informations restent visibles.
     */
    .news-page .news-gallery-overlay {
        padding:
            55px
            16px
            15px !important;

        opacity: 1;

        transform: none;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 520px) {

    .news-page .news-gallery {
        padding:
            75px
            0
            90px !important;
    }


    .news-page .news-gallery-grid {
        columns: 1;

        column-gap: 0;
    }


    .news-page .news-gallery-item {
        margin-bottom:
            14px !important;

        border-radius: 18px;
    }


    .news-page .news-gallery-ending {
        justify-content:
            flex-start;
    }

}

/* ==========================================================================
   ACCUEIL — ACTUALITÉS AVEC PHOTOS
   ========================================================================== */

.home-news-grid {
    align-items: stretch;
}


/* ==========================================================================
   CARTE
   ========================================================================== */

.home-news-card {
    padding: 0 !important;

    min-height: 0 !important;

    overflow: hidden;

    border-radius: 28px !important;

    background: #ffffff;

    box-shadow:
        0 16px 45px
        rgba(6, 19, 38, .07);

    transition:
        transform .3s ease,
        box-shadow .3s ease !important;
}


.home-news-card:hover {
    transform:
        translateY(-7px) !important;

    box-shadow:
        0 28px 65px
        rgba(6, 19, 38, .13) !important;
}


/* ==========================================================================
   IMAGE
   ========================================================================== */

.home-news-card-media {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background: #e9ece9;
}


.home-news-card-media > img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform .7s
        cubic-bezier(.2, .7, .2, 1);
}


.home-news-card:hover
.home-news-card-media > img {
    transform:
        scale(1.035);
}


/* ==========================================================================
   PLACEHOLDER SI AUCUNE PHOTO
   ========================================================================== */

.home-news-card-placeholder {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    background:
        radial-gradient(
            circle at 25% 20%,
            rgba(143, 196, 213, .30),
            transparent 40%
        ),
        linear-gradient(
            145deg,
            #edf2f1,
            #e7e1d7
        );
}


.home-news-card-placeholder img {
    width: 82px;

    opacity: .18;
}


/* ==========================================================================
   BADGE JOURNAL
   ========================================================================== */

.home-news-card-category {
    position: absolute;

    left: 20px;
    bottom: 18px;

    padding:
        7px
        11px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .92);

    color: #071625;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .16em;

    text-transform: uppercase;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


/* ==========================================================================
   CONTENU
   ========================================================================== */

.home-news-card-content {
    display: flex;

    flex: 1;

    flex-direction: column;

    padding:
        30px
        30px
        28px;
}


.home-news-card-content time {
    margin-bottom: 18px;

    color: #689eaf !important;

    font-size: .70rem !important;

    font-weight: 900;

    letter-spacing: .16em;
}


/* ==========================================================================
   TITRE
   ========================================================================== */

.home-news-card-content h3 {
    margin:
        0
        0
        17px !important;

    color: #071625;

    font-family:
        var(--serif, Georgia, serif);

    font-size:
        clamp(
            1.8rem,
            2.2vw,
            2.5rem
        ) !important;

    font-weight: 600;

    line-height: 1.03 !important;

    letter-spacing: -.035em;
}


/* ==========================================================================
   EXTRAIT
   ========================================================================== */

.home-news-card-content > p {
    margin:
        0
        0
        25px !important;

    color: #6d7880 !important;

    font-size: .91rem !important;

    line-height: 1.75;
}


/* ==========================================================================
   LIEN
   ========================================================================== */

.home-news-card-content .link-arrow {
    margin-top: auto;

    padding-top: 4px;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 620px) {

    .home-news-card {
        border-radius:
            22px !important;
    }


    .home-news-card-content {
        padding:
            25px
            22px
            24px;
    }


    .home-news-card-content h3 {
        font-size:
            1.85rem !important;
    }

}

/* ==========================================================================
   ACCUEIL — ACTUALITÉS : AJUSTEMENT FINAL
   ========================================================================== */


/* Réduit le grand vide avant les cartes */

.home-news-section .section-head {
    margin-bottom: 24px !important;
}


/* Image un peu plus haute */

.home-news-card-media {
    aspect-ratio: 16 / 11 !important;
}


/* On privilégie le haut de la photographie :
   visages et têtes ne sont plus coupés */

.home-news-card-media > img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center top !important;
}


/* Tablette */

@media (max-width: 860px) {

    .home-news-section .section-head {
        margin-bottom: 22px !important;
    }

}


/* Mobile */

@media (max-width: 620px) {

    .home-news-section .section-head {
        margin-bottom: 18px !important;
    }

    .home-news-card-media {
        aspect-ratio: 16 / 10 !important;
    }

}

.home-news-card-content h3 {
    font-size:
        clamp(
            1.65rem,
            1.9vw,
            2.15rem
        ) !important;

    line-height: 1.06 !important;
}

.home-news-card-content > p {
    display: -webkit-box;

    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;

    line-clamp: 4;
}

.home-news-card-media {
    position: relative;
    overflow: hidden;

    aspect-ratio: 16 / 10;
    border-radius: 2rem 2rem 0 0;

    background:
        linear-gradient(
            135deg,
            rgba(8, 19, 43, 0.06),
            rgba(109, 151, 181, 0.08)
        ),
        #f3f0ea;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 1rem;
}

.home-news-card-media img {
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center center;

    display: block;
    border-radius: 1.25rem;
}
.home-news-card {
    overflow: hidden;
}

.home-news-card-media img {
    max-width: 100%;
    max-height: 100%;
}

/* ==========================================================================
   ACCUEIL — ACTUALITÉS
   PHOTOS ENTIÈRES + SIGNATURE OR
   ========================================================================== */


/* ==========================================================================
   CARTE
   ========================================================================== */

.home-news-section .home-news-card {
    position: relative;

    overflow: hidden !important;

    padding: 0 !important;

    border:
        1px solid
        rgba(214, 169, 75, .22) !important;

    border-radius: 30px !important;

    background: #ffffff;

    box-shadow:
        0 18px 50px
        rgba(6, 19, 38, .07);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease !important;
}


.home-news-section .home-news-card:hover {
    transform:
        translateY(-6px) !important;

    border-color:
        rgba(214, 169, 75, .65) !important;

    box-shadow:
        0 28px 65px
        rgba(6, 19, 38, .12) !important;
}


/* ==========================================================================
   ZONE PHOTO
   IMPORTANT : AUCUNE HAUTEUR FORCÉE
   ========================================================================== */

.home-news-section .home-news-card-media {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;

    aspect-ratio: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    border-radius:
        29px
        29px
        0
        0 !important;

    background: #f6f0e7 !important;
}


/* ==========================================================================
   PHOTO — PROPORTIONS ORIGINALES
   ========================================================================== */

.home-news-section
.home-news-card-media > img {

    position: static !important;

    display: block !important;

    width: 100% !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: none !important;

    aspect-ratio: auto !important;

    object-fit: contain !important;
    object-position: center center !important;

    margin: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    transform: none !important;
}


/*
 * Le hover ne zoome plus l'image.
 * Donc aucune partie ne disparaît au survol.
 */

.home-news-section
.home-news-card:hover
.home-news-card-media > img {

    transform: none !important;
}


/* ==========================================================================
   PETITE LIGNE OR ENTRE PHOTO ET ARTICLE
   ========================================================================== */

.home-news-section
.home-news-card-media::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            var(--gold) 18%,
            var(--gold) 82%,
            transparent 100%
        );

    opacity: .78;

    pointer-events: none;
}


/* ==========================================================================
   BADGE JOURNAL — OR
   ========================================================================== */

.home-news-section
.home-news-card-category {

    position: absolute !important;

    left: 22px !important;
    bottom: 18px !important;

    z-index: 3;

    padding:
        8px
        14px !important;

    border:
        1px solid
        rgba(255, 255, 255, .55) !important;

    border-radius:
        999px !important;

    background:
        rgba(214, 169, 75, .94) !important;

    color:
        #061326 !important;

    font-size:
        8px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .17em !important;

    text-transform:
        uppercase;

    box-shadow:
        0 8px 22px
        rgba(6, 19, 38, .15);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}


/* ==========================================================================
   CONTENU
   ========================================================================== */

.home-news-section
.home-news-card-content {

    padding:
        32px
        32px
        30px !important;
}


/* ==========================================================================
   DATE — OR
   ========================================================================== */

.home-news-section
.home-news-card-content time {

    color:
        #ad8437 !important;

    font-weight:
        900 !important;

    letter-spacing:
        .16em;
}


/* ==========================================================================
   LIEN LIRE
   ========================================================================== */

.home-news-section
.home-news-card-content
.link-arrow {

    color:
        #061326;
}


.home-news-section
.home-news-card-content
.link-arrow > span {

    color:
        var(--gold);
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 620px) {

    .home-news-section
    .home-news-card {

        border-radius:
            23px !important;
    }


    .home-news-section
    .home-news-card-media {

        border-radius:
            22px
            22px
            0
            0 !important;
    }


    .home-news-section
    .home-news-card-content {

        padding:
            25px
            22px
            25px !important;
    }


    .home-news-section
    .home-news-card-category {

        left: 15px !important;
        bottom: 14px !important;
    }

}

/* SECOND ARTICLE — PHOTO UN PEU PLUS HAUTE */

.news-page
.news-editorial-grid
.news-editorial-card:first-child
.news-editorial-image {
    aspect-ratio: 1 / 1 !important;
}

/* ==========================================================================
   NEWS — SECOND ARTICLE
   PHOTO PLUS HAUTE + SIGNATURE OR
   ========================================================================== */

.news-page
.news-editorial-grid
.news-editorial-card:first-child {
    border:
        1px solid
        rgba(214, 169, 75, .24);

    border-radius: 30px;

    overflow: hidden;

    background: #fff;

    box-shadow:
        0 18px 45px
        rgba(6, 19, 38, .06);

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}


/* PHOTO PLUS HAUTE */

.news-page
.news-editorial-grid
.news-editorial-card:first-child
.news-editorial-image {
    position: relative;

    aspect-ratio: 1 / 1 !important;

    border-radius:
        29px
        29px
        0
        0 !important;

    overflow: hidden;

    background: var(--paper);
}


/* PHOTO */

.news-page
.news-editorial-grid
.news-editorial-card:first-child
.news-editorial-image > img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    object-position:
        center center !important;
}


/* FILET OR SOUS LA PHOTO */

.news-page
.news-editorial-grid
.news-editorial-card:first-child
.news-editorial-image::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            var(--gold) 15%,
            var(--gold) 85%,
            transparent 100%
        );

    opacity: .9;
}


/* CONTENU */

.news-page
.news-editorial-grid
.news-editorial-card:first-child
.news-editorial-content {
    padding:
        26px
        28px
        30px !important;
}


/* CATÉGORIE EN OR */

.news-page
.news-editorial-grid
.news-editorial-card:first-child
.news-editorial-meta span {
    color:
        #a87d2f !important;
}


/* FLÈCHE "LIRE" EN OR */

.news-page
.news-editorial-grid
.news-editorial-card:first-child
.news-editorial-link span {
    color:
        var(--gold) !important;
}


/* SURVOL */

.news-page
.news-editorial-grid
.news-editorial-card:first-child:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(214, 169, 75, .62);

    box-shadow:
        0 26px 58px
        rgba(6, 19, 38, .11);
}


/* MOBILE */

@media (max-width: 600px) {

    .news-page
    .news-editorial-grid
    .news-editorial-card:first-child
    .news-editorial-image {
        aspect-ratio:
            1.08 / 1 !important;
    }

}

/* ==========================================================================
   ACCUEIL — SIGNATURE OR THÉOPHILE TOUALI
   ========================================================================== */


/* ==========================================================================
   1. LIVRE À LA UNE
   ========================================================================== */

/* Petit signal doré dans le badge */

.spotlight-section
.spotlight-featured-badge {
    border:
        1px solid
        rgba(214, 169, 75, .45);
}


.spotlight-section
.spotlight-featured-dot {
    background:
        var(--gold) !important;
}


/* Métadonnées */

.spotlight-section
.spotlight-meta span:first-child {
    color:
        #a87d2f;
}


/* Petits intitulés éditoriaux */

.spotlight-section
.spotlight-section-label {
    color:
        #a87d2f;
}


/* Lien lire un extrait */

.spotlight-section
.spotlight-read-link:hover {
    color:
        var(--gold);
}


/* ==========================================================================
   2. BIBLIOTHÈQUE
   ========================================================================== */

/* Eyebrow uniquement dans la bibliothèque */

.section-soft
.section-head
.eyebrow {
    color:
        #a87d2f;
}


/* Trait sous le prix */

.section-soft
.book-price::after {
    background:
        rgba(214, 169, 75, .42);
}


.section-soft
.book-card:hover
.book-price::after {
    width: 38px;

    background:
        var(--gold);
}


/* Petit détail sur le prix */

.section-soft
.book-price-small {
    color:
        #9b7837;
}


/* ==========================================================================
   3. MARQUE THÉOPHILE TOUALI
   ========================================================================== */

/* Petit titre */

.author-brand
.author-brand-message
.eyebrow {
    color:
        #d9b86e;
}


/* Partie importante de la signature */

.author-brand
.author-brand-message
h2 span {
    color:
        #e0b85f;
}


/* Lien auteur */

.author-brand
.author-brand-link:hover {
    color:
        var(--gold) !important;

    border-color:
        var(--gold) !important;
}


/* Numéros 01, 02, 03... */

.author-brand
.brand-universe-number {
    color:
        #d7ad58 !important;
}


/* Cartes territoires au survol */

.author-brand
.brand-universe-card:hover {
    border-color:
        rgba(214, 169, 75, .45) !important;
}


/* ==========================================================================
   4. CITATIONS — MOTS CHOISIS
   ========================================================================== */

/* Numéro courant */

.quote-showcase
.quote-showcase-count strong {
    color:
        var(--gold);
}


/* Grande guillemet */

.quote-showcase
.quote-mark-large {
    color:
        rgba(214, 169, 75, .72) !important;
}


/* Point actif */

.quote-showcase
.quote-dot.is-active {
    background:
        var(--gold) !important;
}


/* Flèches */

.quote-showcase
.quote-nav:hover {
    color:
        var(--gold);

    border-color:
        rgba(214, 169, 75, .60);

    background:
        rgba(214, 169, 75, .08);
}


/* ==========================================================================
   5. ACTUALITÉS
   ========================================================================== */

/* Le badge JOURNAL est déjà doré :
   on harmonise le reste */

.home-news-section
.section-head
.eyebrow {
    color:
        #a87d2f;
}


.home-news-section
.home-news-card-content time {
    color:
        #a87d2f !important;
}


.home-news-section
.home-news-card-content
.link-arrow > span {
    color:
        var(--gold);
}


/* Toutes les actualités → */

.home-news-section
.section-head > .link-arrow:hover {
    color:
        #a87d2f;
}


/* ==========================================================================
   6. CTA FINAL
   ========================================================================== */

.final-cta-section
.final-cta-content
.eyebrow {
    color:
        #d9b86e;
}


/* "Peut-être la vôtre." */

.final-cta-section
.final-cta-content
h2 span {
    color:
        #e0b85f !important;
}


/* Flèche du bouton principal */

.final-cta-section
.final-cta-primary > span {
    color:
        #b48735;
}


/* Bouton principal : léger rappel or au hover */

.final-cta-section
.final-cta-primary:hover {
    background:
        #fffaf0 !important;

    box-shadow:
        0 15px 38px
        rgba(214, 169, 75, .20);
}


/* Bouton secondaire */

.final-cta-section
.final-cta-secondary:hover {
    border-color:
        rgba(214, 169, 75, .70) !important;

    color:
        #f0cf82 !important;
}

/* ==========================================================================
   BIBLIOTHÈQUE — SIGNATURE OR
   ========================================================================== */


/* "BIBLIOTHÈQUE" AU-DESSUS DU GRAND TITRE */

.page-hero-books
.books-hero-copy > .eyebrow {
    color: #a77d31 !important;
}

.page-hero-books
.books-hero-copy > .eyebrow::before {
    background: var(--gold) !important;
}


/* ==========================================================================
   CARTE "À DÉCOUVRIR"
   ========================================================================== */

.books-story-sequence {
    border-color:
        rgba(214, 169, 75, .28) !important;

    box-shadow:
        0 16px 42px
        rgba(7, 20, 38, .05),
        0 0 0 1px
        rgba(214, 169, 75, .025);
}


/*
 * On conserve la barre verticale
 * dans la couleur propre au roman.
 *
 * Donc PAS de remplacement ici :
 * var(--story-accent) reste actif.
 */


/* ==========================================================================
   "À DÉCOUVRIR"
   ========================================================================== */

.books-story-kicker {
    color:
        #9f762d !important;
}


/* ==========================================================================
   COMPTEUR
   01 en or, / 03 plus discret
   ========================================================================== */

.books-story-counter {
    color:
        rgba(7, 20, 38, .36) !important;
}


.books-story-counter
[data-story-current] {
    color:
        #b58734 !important;

    font-weight: 800;
}


/* ==========================================================================
   TITRE DU LIVRE
   Petit rappel or sur "Dans"
   ========================================================================== */

.books-story-book {
    color:
        #9a7a45 !important;
}


.books-story-book em {
    color:
        #071426 !important;
}


/* ==========================================================================
   CTA
   ========================================================================== */

.books-story-link {
    transition:
        color .22s ease;
}


.books-story-link:hover {
    color:
        #9f762d;
}


/* Cercle de la flèche */

.books-story-link-arrow {
    border:
        1px solid
        rgba(214, 169, 75, .55);

    box-shadow:
        0 7px 18px
        rgba(214, 169, 75, .12);
}


.books-story-link:hover
.books-story-link-arrow {
    background:
        var(--gold) !important;

    color:
        #071426 !important;

    border-color:
        var(--gold);
}


/* ==========================================================================
   FLÈCHES DE NAVIGATION
   ========================================================================== */

.books-story-control {
    border-color:
        rgba(214, 169, 75, .30) !important;
}


.books-story-control:hover {
    background:
        var(--gold) !important;

    border-color:
        var(--gold) !important;

    color:
        #071426 !important;
}


/* ==========================================================================
   BARRE DE PROGRESSION
   mélange or + couleur du roman
   ========================================================================== */

.books-story-progress {
    background:
        rgba(214, 169, 75, .14) !important;
}


.books-story-progress span {
    background:
        linear-gradient(
            90deg,
            var(--gold) 0%,
            var(--story-accent) 100%
        ) !important;
}


/* ==========================================================================
   PAGE AUTEUR — SIGNATURE OR THÉOPHILE TOUALI
   ========================================================================== */


/* ==========================================================================
   OR OFFICIEL DU SITE
   ========================================================================== */

.author-page-hero,
.author-stories,
.author-voice,
.author-biography,
.author-final {
    --author-gold:
        var(--gold, #d6a94b);
}


/* ==========================================================================
   HERO — MANIFESTE
   ========================================================================== */

/* La signature au-dessus du titre */

.author-page-manifesto .eyebrow {
    color:
        #d9b25d !important;
}

.author-page-manifesto .eyebrow::before {
    background:
        var(--author-gold) !important;
}


/*
 * On GARDE la grande phrase italique en bleu.
 * L'or doit rester une ponctuation.
 */


/* Phrase finale :
   "Alors vient le choix..." */

.author-page-manifesto-text strong {
    color:
        #e0b85f !important;
}


/* CTA */

.author-page-discover > span {
    border-color:
        rgba(214, 169, 75, .58) !important;

    color:
        #e0b85f;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.author-page-discover:hover {
    color:
        #e0b85f !important;

    border-color:
        rgba(214, 169, 75, .65) !important;
}

.author-page-discover:hover > span {
    background:
        var(--author-gold);

    border-color:
        var(--author-gold) !important;

    color:
        #071625;

    transform:
        translateY(2px);
}


/* ==========================================================================
   UNIVERS DES PERSONNAGES
   ========================================================================== */

.author-stories-head .eyebrow {
    color:
        #a77d31 !important;
}

.author-stories-head .eyebrow::before {
    background:
        var(--author-gold) !important;
}


/* "Trajectoires croisées" */

.author-stories-intro-label {
    color:
        #a77d31 !important;
}


/* Numéro 01 / 02 / 03 */

.author-story-number {
    color:
        #b48633 !important;
}


/*
 * On conserve ici la couleur individuelle
 * de chaque roman pour les thèmes.
 */


/* CTA de chaque roman */

.author-story-link:hover {
    color:
        #9c742d;
}

.author-story-link:hover
.author-story-link-arrow {
    border-color:
        var(--author-gold) !important;

    background:
        var(--author-gold) !important;

    color:
        #071625 !important;
}


/* ==========================================================================
   LA PLUME
   ========================================================================== */

.author-voice .author-voice-eyebrow {
    color:
        #ddb863 !important;
}

.author-voice .author-voice-eyebrow::before {
    background:
        var(--author-gold) !important;
}


/* "La plume" sur la photographie */

.author-voice
.author-voice-photo-caption span {
    color:
        #e0b85f !important;
}


/*
 * Le grand texte italique reste bleu :
 * bleu + marine + or fonctionnent mieux
 * que tout passer en doré.
 */


/* ==========================================================================
   BIOGRAPHIE
   ========================================================================== */

.author-biography-heading .eyebrow {
    color:
        #a77d31 !important;
}

.author-biography-heading .eyebrow::before {
    background:
        var(--author-gold) !important;
}


/* Nom Théophile Touali au début de la bio */

.author-biography-intro strong {
    color:
        #9c742d !important;
}


/* Petit filet sous l'introduction */

.author-biography-intro {
    border-bottom-color:
        rgba(214, 169, 75, .32) !important;
}


/* ==========================================================================
   CTA FINAL
   ========================================================================== */

.author-final .eyebrow {
    color:
        #dcb75f !important;
}

.author-final .eyebrow::before {
    background:
        var(--author-gold) !important;
}


/* "l'exploration ?" */

.author-final-copy h2 span {
    color:
        #e0b85f !important;
}


/* Acheter mes livres */

.author-final-secondary {
    color:
        #e0b85f !important;

    transition:
        color .25s ease,
        transform .25s ease;
}

.author-final-secondary:hover {
    color:
        #f1d58e !important;

    transform:
        translateX(3px);
}


/* Bouton principal */

.author-final .btn-light:hover {
    border-color:
        var(--author-gold) !important;

    box-shadow:
        0 14px 38px
        rgba(214, 169, 75, .18);
}

/* ==========================================================================
   PAGE ACTUALITÉS — SIGNATURE OR THÉOPHILE TOUALI
   ========================================================================== */


/* ==========================================================================
   1. HERO
   ========================================================================== */

/* JOURNAL */

.news-page
.news-page-hero
.eyebrow {
    color:
        #a77d31 !important;
}


.news-page
.news-page-hero
.eyebrow::before {
    background:
        var(--gold, #d6a94b) !important;
}


/* Trait à gauche du texte introductif */

.news-page
.news-page-hero-intro {
    border-left-color:
        var(--gold, #d6a94b) !important;
}


/*
 * On garde "autour des livres."
 * en bleu.
 * L'or reste la signature secondaire.
 */


/* ==========================================================================
   2. ARTICLE À LA UNE
   ========================================================================== */

/* Très légère bordure dorée autour du bloc */

.news-page
.news-featured-card {
    border:
        1px solid
        rgba(214, 169, 75, .24);

    box-shadow:
        0 35px 90px
        rgba(15, 30, 42, .14),
        0 0 0 1px
        rgba(214, 169, 75, .025);
}


/* Badge À LA UNE */

.news-page
.news-featured-badge {
    background:
        rgba(214, 169, 75, .96) !important;

    color:
        #071625 !important;

    border:
        1px solid
        rgba(255, 255, 255, .35);

    box-shadow:
        0 8px 24px
        rgba(0, 0, 0, .13);
}


/* Catégorie */

.news-page
.news-featured-meta span {
    color:
        #e0b85f !important;
}


/* Lire l'actualité */

.news-page
.news-featured-link {
    color:
        #e0b85f !important;

    transition:
        color .22s ease;
}


.news-page
.news-featured-link:hover {
    color:
        #f0ce7b !important;
}


/* Flèche */

.news-page
.news-featured-link span {
    color:
        var(--gold, #d6a94b) !important;
}


/* ==========================================================================
   3. DERNIÈRES ACTUALITÉS
   ========================================================================== */

/* LE JOURNAL */

.news-page
.news-section-heading
.eyebrow {
    color:
        #a77d31 !important;
}


.news-page
.news-section-heading
.eyebrow::before {
    background:
        var(--gold, #d6a94b) !important;
}


/* Trait de l'introduction */

.news-page
.news-section-heading > p {
    border-left-color:
        var(--gold, #d6a94b) !important;
}


/* Catégorie des articles */

.news-page
.news-editorial-meta span {
    color:
        #a77d31 !important;
}


/* Flèche LIRE */

.news-page
.news-editorial-link span {
    color:
        var(--gold, #d6a94b) !important;
}


/* Le texte Lire devient légèrement doré au survol */

.news-page
.news-editorial-link {
    transition:
        color .22s ease;
}


.news-page
.news-editorial-link:hover {
    color:
        #9f762d !important;
}


/* Petit filet doré sous les photos */

.news-page
.news-editorial-image::after {
    content: "";

    position: absolute;

    z-index: 2;

    left: 0;
    right: 0;
    bottom: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            var(--gold, #d6a94b) 18%,
            var(--gold, #d6a94b) 82%,
            transparent 100%
        );

    opacity: .65;

    pointer-events: none;
}


/* ==========================================================================
   4. EN IMAGES
   ========================================================================== */

/* EN IMAGES */

.news-page
.news-gallery-heading
.eyebrow {
    color:
        #a77d31 !important;
}


.news-page
.news-gallery-heading
.eyebrow::before {
    background:
        var(--gold, #d6a94b) !important;
}


/* Trait du texte à droite */

.news-page
.news-gallery-heading > p {
    border-left-color:
        var(--gold, #d6a94b) !important;
}


/* Catégorie affichée sur les photographies */

.news-page
.news-gallery-overlay > span {
    color:
        #e3bd67 !important;
}


/* Flèche Découvrir */

.news-page
.news-gallery-overlay em span {
    color:
        var(--gold, #d6a94b) !important;
}


/* Très légère bordure or au survol */

.news-page
.news-gallery-item {
    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}


.news-page
.news-gallery-item:hover {
    border-color:
        rgba(214, 169, 75, .55) !important;
}


/* ==========================================================================
   5. SIGNATURE DE FIN DE GALERIE
   ========================================================================== */

.news-page
.news-gallery-ending > span {
    background:
        var(--gold, #d6a94b) !important;
}


/* ==========================================================================
   6. ÉTAT VIDE
   ========================================================================== */

.news-page
.news-page-empty > span {
    color:
        #a77d31 !important;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    .news-page
    .news-featured-badge {
        background:
            var(--gold, #d6a94b) !important;
    }

}

/* ==========================================================================
   CONTACT — SIGNATURE OR THÉOPHILE TOUALI
   ========================================================================== */


/* ==========================================================================
   TITRE DU FORMULAIRE
   ========================================================================== */

/* "ENTRONS EN CONTACT" */

.contact-signature
.contact-signature-form-heading
.eyebrow {
    color:
        #a77d31 !important;
}


.contact-signature
.contact-signature-form-heading
.eyebrow::before {
    background:
        var(--gold, #d6a94b) !important;
}


/* Trait vertical du texte de droite */

.contact-signature
.contact-signature-form-heading > p {
    border-left-color:
        var(--gold, #d6a94b) !important;
}


/*
 * On garde
 * "suffisent pour commencer."
 * en bleu.
 */


/* ==========================================================================
   GRAND BLOC FORMULAIRE
   ========================================================================== */

.contact-signature
.contact-signature-shell {
    border:
        1px solid
        rgba(214, 169, 75, .22) !important;

    box-shadow:
        0 30px 80px
        rgba(17, 31, 42, .085),
        0 0 0 1px
        rgba(214, 169, 75, .025) !important;
}


/* ==========================================================================
   COLONNE MARINE
   ========================================================================== */

/* Filet supérieur */

.contact-signature
.contact-signature-side::before {
    background:
        var(--gold, #d6a94b) !important;
}


/* THÉOPHILE TOUALI */

.contact-signature
.contact-signature-side-kicker {
    color:
        #e0b85f !important;
}


/*
 * "de votre message."
 * reste bleu pour conserver
 * l'équilibre bleu / or.
 */


/* ==========================================================================
   CONTACT DIRECT
   ========================================================================== */

.contact-signature
.contact-signature-direct {
    border-top-color:
        rgba(214, 169, 75, .24) !important;
}


.contact-signature
.contact-signature-direct > span {
    color:
        rgba(224, 184, 95, .66) !important;
}


.contact-signature
.contact-signature-direct a {
    color:
        #e0b85f !important;

    transition:
        color .22s ease,
        transform .22s ease;
}


.contact-signature
.contact-signature-direct a:hover {
    color:
        #f0cf82 !important;

    transform:
        translateX(3px);
}


/* ==========================================================================
   CHAMPS
   ========================================================================== */

/*
 * On ne met pas les champs en or au repos.
 * L'or apparaît seulement à l'interaction.
 */

.contact-signature
.contact-signature-field
.input:hover {
    border-color:
        rgba(214, 169, 75, .38) !important;
}


.contact-signature
.contact-signature-field
.input:focus {
    border-color:
        var(--gold, #d6a94b) !important;

    background:
        #fff !important;

    box-shadow:
        0 0 0 4px
        rgba(214, 169, 75, .10),
        0 8px 22px
        rgba(20, 48, 65, .055) !important;
}


/* ==========================================================================
   BOUTON ENVOYER
   ========================================================================== */

.contact-signature
.contact-signature-submit
.btn {
    border:
        1px solid
        rgba(214, 169, 75, .26) !important;
}


/* Cercle de la flèche */

.contact-signature
.contact-signature-submit-icon {
    background:
        var(--gold, #d6a94b) !important;

    color:
        #071625 !important;

    box-shadow:
        0 6px 16px
        rgba(214, 169, 75, .18);
}


/* Survol */

.contact-signature
.contact-signature-submit
.btn:hover {
    border-color:
        rgba(214, 169, 75, .72) !important;

    background:
        #0b2030 !important;

    box-shadow:
        0 17px 38px
        rgba(7, 22, 37, .20),
        0 0 0 1px
        rgba(214, 169, 75, .06) !important;
}


.contact-signature
.contact-signature-submit
.btn:hover
.contact-signature-submit-icon {
    background:
        #e5bd65 !important;

    color:
        #071625 !important;

    transform:
        translateX(3px);
}

/* ==========================================================================
   HEADER PREMIUM — THÉOPHILE TOUALI
   MARINE + IVOIRE + OR
   ========================================================================== */


/* ==========================================================================
   HEADER GLOBAL
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    background:
        rgba(252, 251, 248, .90) !important;

    border-bottom:
        1px solid
        rgba(214, 169, 75, .10) !important;

    backdrop-filter:
        blur(20px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(20px)
        saturate(135%);

    transition:
        background .30s ease,
        border-color .30s ease,
        box-shadow .30s ease;
}


/* Filet de marque doré extrêmement fin */

.site-header::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(214, 169, 75, .14) 15%,
            rgba(214, 169, 75, .56) 50%,
            rgba(214, 169, 75, .14) 85%,
            transparent 100%
        );

    opacity: .65;

    pointer-events: none;
}


/* ==========================================================================
   HEADER APRÈS SCROLL
   ========================================================================== */

.site-header.is-scrolled {
    background:
        rgba(252, 251, 248, .965) !important;

    border-bottom-color:
        rgba(214, 169, 75, .18) !important;

    box-shadow:
        0 14px 38px
        rgba(6, 19, 38, .075),
        0 1px 0
        rgba(214, 169, 75, .06) !important;
}


/* ==========================================================================
   CONTENEUR
   ========================================================================== */

.site-header .nav-wrap {
    min-height: 88px;

    gap: 28px;
}


/* ==========================================================================
   MARQUE
   ========================================================================== */

.site-header .brand {
    position: relative;

    gap: 14px;

    text-decoration: none;
}


/* Logo */

.site-header .brand-mark {
    transition:
        transform .30s ease,
        filter .30s ease;

    filter:
        drop-shadow(
            0 8px 18px
            rgba(6, 19, 38, .08)
        );
}


.site-header .brand:hover .brand-mark {
    transform:
        translateY(-1px)
        scale(1.025);

    filter:
        drop-shadow(
            0 10px 22px
            rgba(214, 169, 75, .17)
        );
}


/* THÉOPHILE TOUALI */

.site-header
.brand-copy strong {
    color:
        #071625;

    font-family:
        var(--serif, Georgia, "Times New Roman", serif);

    font-weight:
        700;

    letter-spacing:
        .015em;
}


/* ROMANCIER · POÈTE · AUTEUR */

.site-header
.brand-copy small {
    color:
        #9a742d !important;

    font-weight:
        800;

    letter-spacing:
        .19em;
}


/* ==========================================================================
   NAVIGATION
   ========================================================================== */

.site-header
.main-nav {
    gap:
        clamp(
            17px,
            1.7vw,
            27px
        );
}


.site-header
.main-nav > a:not(.nav-cta) {
    position: relative;

    padding:
        13px
        0;

    color:
        #465461;

    font-size:
        13px;

    font-weight:
        750;

    letter-spacing:
        .01em;

    transition:
        color .22s ease;
}


/* Ligne dorée */

.site-header
.main-nav > a:not(.nav-cta)::after {
    content: "";

    position: absolute;

    left: 50%;
    right: auto;
    bottom: 5px;

    width: 0;
    height: 2px;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            #bd8d32,
            var(--gold, #d6a94b),
            #e1bd67
        ) !important;

    transform:
        translateX(-50%);

    transition:
        width .25s ease;
}


/* Hover */

.site-header
.main-nav > a:not(.nav-cta):hover {
    color:
        #071625;
}


.site-header
.main-nav > a:not(.nav-cta):hover::after {
    right:
        auto !important;

    width:
        22px;
}


/* Page active */

.site-header
.main-nav > a:not(.nav-cta).is-active {
    color:
        #071625 !important;
}


.site-header
.main-nav > a:not(.nav-cta).is-active::after {
    right:
        auto !important;

    width:
        30px;
}


/* ==========================================================================
   BOUTON "ACHETER MES LIVRES"
   ========================================================================== */

.site-header
.nav-cta {
    position: relative;

    overflow: hidden;

    min-height:
        46px;

    padding:
        13px
        21px !important;

    border:
        1px solid
        rgba(214, 169, 75, .55) !important;

    border-radius:
        999px;

    background:
        linear-gradient(
            135deg,
            #061326 0%,
            #0b2235 100%
        ) !important;

    color:
        #ffffff !important;

    box-shadow:
        0 12px 28px
        rgba(6, 19, 38, .14),
        inset 0 1px 0
        rgba(255, 255, 255, .055);

    font-size:
        12px;

    font-weight:
        850;

    letter-spacing:
        .015em;

    transition:
        transform .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        background .22s ease;
}


/* Petit point or — signature */

.site-header
.nav-cta::before {
    content: "";

    width:
        6px;

    height:
        6px;

    flex:
        0 0 6px;

    border-radius:
        50%;

    background:
        var(--gold, #d6a94b);

    box-shadow:
        0 0 0 4px
        rgba(214, 169, 75, .10);
}


/* Flèche ajoutée sans modifier le PHP */

.site-header
.nav-cta::after {
    content:
        "↗";

    margin-left:
        2px;

    color:
        #e4bd64;

    font-size:
        13px;

    font-weight:
        700;

    transition:
        transform .22s ease;
}


/* Hover CTA */

.site-header
.nav-cta:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(214, 169, 75, .90) !important;

    background:
        linear-gradient(
            135deg,
            #08182b 0%,
            #102b3f 100%
        ) !important;

    box-shadow:
        0 17px 36px
        rgba(6, 19, 38, .19),
        0 0 0 1px
        rgba(214, 169, 75, .06);
}


.site-header
.nav-cta:hover::after {
    transform:
        translate(
            2px,
            -2px
        );
}


/* ==========================================================================
   MENU MOBILE
   ========================================================================== */

.site-header
.nav-toggle {
    border:
        1px solid
        rgba(214, 169, 75, .30) !important;

    background:
        rgba(255, 255, 255, .92) !important;

    box-shadow:
        0 8px 24px
        rgba(6, 19, 38, .07);

    transition:
        border-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease;
}


.site-header
.nav-toggle span {
    background:
        #071625 !important;
}


.site-header
.nav-toggle:hover {
    border-color:
        rgba(214, 169, 75, .70) !important;

    box-shadow:
        0 10px 28px
        rgba(214, 169, 75, .11);

    transform:
        translateY(-1px);
}


/* ==========================================================================
   NAVIGATION MOBILE OUVERTE
   ========================================================================== */

@media (max-width: 860px) {

    .site-header
    .main-nav {
        top:
            calc(100% + 8px) !important;

        border:
            1px solid
            rgba(214, 169, 75, .20) !important;

        border-radius:
            24px !important;

        background:
            rgba(255, 255, 255, .985) !important;

        box-shadow:
            0 26px 70px
            rgba(6, 19, 38, .14),
            0 0 0 1px
            rgba(214, 169, 75, .025) !important;

        padding:
            15px !important;
    }


    .site-header
    .main-nav > a:not(.nav-cta) {
        padding:
            14px
            15px !important;

        border-radius:
            12px;
    }


    .site-header
    .main-nav > a:not(.nav-cta):hover,
    .site-header
    .main-nav > a:not(.nav-cta).is-active {
        background:
            rgba(214, 169, 75, .075);

        color:
            #071625 !important;
    }


    /*
     * Le trait desktop n'est pas nécessaire
     * dans le menu vertical.
     */
    .site-header
    .main-nav > a:not(.nav-cta)::after {
        display:
            none !important;
    }


    .site-header
    .nav-cta {
        margin-top:
            7px;

        justify-content:
            center;
    }

}


/* ==========================================================================
   PETIT MOBILE
   ========================================================================== */

@media (max-width: 620px) {

    .site-header
    .nav-wrap {
        min-height:
            74px;
    }


    .site-header
    .brand-copy strong {
        font-size:
            17px;
    }


    .site-header
    .brand-copy small {
        font-size:
            8px;

        letter-spacing:
            .15em;
    }

}

/* ==========================================================================
   FOOTER PREMIUM — THÉOPHILE TOUALI
   MARINE + BLEU + IVOIRE + OR
   ========================================================================== */


/* ==========================================================================
   1. FOOTER GLOBAL
   ========================================================================== */

.site-footer {
    position: relative;

    border-top:
        1px solid
        rgba(214, 169, 75, .22);

    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(143, 196, 213, .075),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 78%,
            rgba(214, 169, 75, .075),
            transparent 27%
        ),
        linear-gradient(
            145deg,
            #030c17 0%,
            #061525 55%,
            #092238 100%
        ) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .018);
}


/* Ligne dorée très fine en haut */

.site-footer::after {
    content: "";

    position: absolute;
    top: 0;
    left: 50%;

    width:
        min(1180px, calc(100% - 36px));

    height: 1px;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(214, 169, 75, .20) 15%,
            rgba(214, 169, 75, .82) 50%,
            rgba(214, 169, 75, .20) 85%,
            transparent 100%
        );

    pointer-events: none;
}


/* ==========================================================================
   2. GRAND TOUALI EN FILIGRANE
   ========================================================================== */

.site-footer::before {
    color:
        rgba(214, 169, 75, .022) !important;
}


/* ==========================================================================
   3. IDENTITÉ / LOGO
   ========================================================================== */

.footer-logo {
    text-decoration: none;
}


/* Logo légèrement plus précieux */

.footer-logo-mark {
    transition:
        transform .30s ease,
        filter .30s ease;
}


.footer-logo:hover
.footer-logo-mark {
    transform:
        translateY(-2px)
        scale(1.025);

    filter:
        drop-shadow(
            0 11px 28px
            rgba(214, 169, 75, .16)
        );
}


/* THÉOPHILE TOUALI */

.footer-logo-copy strong {
    color:
        #ffffff !important;
}


/* ROMANCIER · POÈTE · AUTEUR */

.footer-logo-copy small {
    color:
        #d5ad55 !important;

    font-weight:
        800 !important;
}


/* ==========================================================================
   4. PROMESSE DE MARQUE
   ========================================================================== */

.footer-promise {
    color:
        #ffffff !important;
}


/*
 * On conserve cette phrase en bleu.
 * C'est l'accent émotionnel de la marque.
 */

.footer-promise em {
    color:
        #9bcbd9 !important;
}


/* Petit filet doré sous la promesse */

.footer-promise::after {
    content: "";

    display: block;

    width: 44px;
    height: 2px;

    margin-top: 23px;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            var(--gold, #d6a94b),
            rgba(214, 169, 75, .18)
        );
}


/* ==========================================================================
   5. COLONNES — EXPLORER / LIRE / SUIVRE
   ========================================================================== */

.footer-title {
    position: relative;

    color:
        #d4aa50 !important;
}


/* Petit point or avant le titre */

.footer-title::before {
    content: "";

    display: inline-block;

    width: 5px;
    height: 5px;

    margin-right: 9px;
    margin-bottom: 1px;

    border-radius:
        50%;

    background:
        var(--gold, #d6a94b);

    box-shadow:
        0 0 0 4px
        rgba(214, 169, 75, .07);
}


/* ==========================================================================
   6. LIENS
   ========================================================================== */

.footer-column a {
    position: relative;

    color:
        #c8d4dc !important;

    transition:
        color .22s ease,
        transform .22s ease;
}


.footer-column a:hover {
    color:
        #ffffff !important;

    transform:
        translateX(4px);
}


/* Flèches externes */

.footer-column a > span {
    color:
        var(--gold, #d6a94b) !important;

    transition:
        transform .22s ease;
}


.footer-column a:hover > span {
    transform:
        translate(
            2px,
            -2px
        );
}


/* Librairie légèrement mise en valeur */

.footer-external {
    color:
        #e0b85f !important;
}


.footer-external:hover {
    color:
        #f0cf82 !important;
}


/* ==========================================================================
   7. SIGNATURE LITTÉRAIRE
   ========================================================================== */

.footer-literary-signature {
    position: relative;

    border-top:
        1px solid
        rgba(214, 169, 75, .15) !important;

    border-bottom:
        1px solid
        rgba(214, 169, 75, .15) !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(214, 169, 75, .018),
            transparent
        );
}


/* Première partie discrète */

.footer-literary-signature span {
    color:
        rgba(255, 255, 255, .43) !important;
}


/* Phrase forte en or */

.footer-literary-signature strong {
    color:
        #e0b85f !important;

    text-shadow:
        0 6px 24px
        rgba(214, 169, 75, .06);
}


/* Petit losange de signature */

.footer-literary-signature::before {
    content: "◆";

    margin-right:
        7px;

    color:
        var(--gold, #d6a94b);

    font-size:
        7px;

    opacity:
        .85;
}


/* ==========================================================================
   8. BAS DU FOOTER
   ========================================================================== */

.footer-bottom {
    color:
        #718797 !important;
}


/* Le séparateur devient doré */

.footer-dot {
    color:
        rgba(214, 169, 75, .66) !important;
}


/* ==========================================================================
   9. ADMINISTRATION
   reste volontairement très discrète
   ========================================================================== */

.footer-admin {
    color:
        #718797 !important;
}


.footer-admin:hover {
    color:
        #d6a94b !important;

    opacity:
        1 !important;
}


/* ==========================================================================
   10. MOBILE
   ========================================================================== */

@media (max-width: 620px) {

    .site-footer::after {
        width:
            calc(100% - 24px);
    }


    .footer-title::before {
        width:
            4px;

        height:
            4px;
    }


    .footer-literary-signature::before {
        margin:
            0 0 8px;
    }

}

/* ==========================================================================
   ACCUEIL — HERO / CARROUSEL
   RESPONSIVE FINAL
   À PLACER TOUT EN BAS DE site.css
   ========================================================================== */


/* ==========================================================================
   TABLETTE / PETIT ÉCRAN DESKTOP
   ========================================================================== */

@media (max-width: 1080px) {

    /* ----------------------------------------------------------------------
       LE HERO PASSE RÉELLEMENT EN UNE SEULE COLONNE
       ---------------------------------------------------------------------- */

    .hero .hero-grid {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        align-items:
            start !important;

        gap:
            45px !important;
    }


    /* ----------------------------------------------------------------------
       TEXTE
       ---------------------------------------------------------------------- */

    .hero .hero-intro {
        width:
            100% !important;

        max-width:
            760px !important;

        margin:
            0 auto !important;

        text-align:
            left;
    }


    .hero .hero-intro h1 {
        max-width:
            760px !important;

        font-size:
            clamp(
                50px,
                8vw,
                74px
            ) !important;
    }


    /*
     * Les deux boutons restent de vrais boutons.
     * Ils ne se retrouvent plus écrasés dans
     * une colonne trop étroite.
     */

    .hero
    .hero-intro
    .hero-actions {
        display:
            flex !important;

        flex-direction:
            row !important;

        align-items:
            center !important;

        flex-wrap:
            wrap !important;

        gap:
            12px !important;
    }


    .hero
    .hero-intro
    .hero-actions
    .btn {
        width:
            auto !important;

        min-height:
            52px !important;

        padding:
            13px 24px !important;

        white-space:
            nowrap !important;

        border-radius:
            999px !important;
    }


    /* ----------------------------------------------------------------------
       CARROUSEL
       ---------------------------------------------------------------------- */

    .hero .book-carousel {
        width:
            100% !important;

        max-width:
            720px !important;

        min-height:
            520px !important;

        margin:
            0 auto !important;
    }


    .hero .book-carousel-stage {
        position:
            relative;

        width:
            100% !important;

        height:
            430px !important;

        margin:
            0 auto;

        perspective:
            1200px;
    }


    /* Cercle de fond */

    .hero
    .book-carousel-stage::before {
        width:
            360px !important;

        height:
            360px !important;
    }


    /* Taille générale des livres */

    .hero .carousel-book {
        width:
            195px !important;
    }


    /* Livre central */

    .hero
    .carousel-book.is-active {
        transform:
            translate(-50%, -50%)
            scale(1.08)
            rotateY(0deg) !important;
    }


    .hero
    .carousel-book.is-active:hover {
        transform:
            translate(-50%, -50%)
            translateY(-6px)
            scale(1.10) !important;
    }


    /* Livre précédent */

    .hero
    .carousel-book.is-prev {
        transform:
            translate(-50%, -50%)
            translateX(-145px)
            scale(.80)
            rotateY(11deg)
            rotateZ(-3deg) !important;
    }


    /* Livre suivant */

    .hero
    .carousel-book.is-next {
        transform:
            translate(-50%, -50%)
            translateX(145px)
            scale(.80)
            rotateY(-11deg)
            rotateZ(3deg) !important;
    }


    /* Deuxième niveau */

    .hero
    .carousel-book.is-prev-2 {
        transform:
            translate(-50%, -50%)
            translateX(-245px)
            scale(.59)
            rotateY(17deg)
            rotateZ(-5deg) !important;

        opacity:
            .26 !important;
    }


    .hero
    .carousel-book.is-next-2 {
        transform:
            translate(-50%, -50%)
            translateX(245px)
            scale(.59)
            rotateY(-17deg)
            rotateZ(5deg) !important;

        opacity:
            .26 !important;
    }


    /* Informations du livre */

    .hero
    .book-carousel-info {
        margin-top:
            0 !important;

        padding-inline:
            20px;
    }

}


/* ==========================================================================
   TABLETTE ÉTROITE
   ========================================================================== */

@media (max-width: 760px) {

    .hero {
        padding-top:
            55px !important;

        padding-bottom:
            65px !important;
    }


    .hero .hero-grid {
        gap:
            32px !important;
    }


    .hero .hero-intro h1 {
        font-size:
            clamp(
                46px,
                10vw,
                64px
            ) !important;

        line-height:
            .96 !important;
    }


    .hero .book-carousel {
        min-height:
            470px !important;
    }


    .hero .book-carousel-stage {
        height:
            385px !important;
    }


    .hero
    .book-carousel-stage::before {
        width:
            315px !important;

        height:
            315px !important;
    }


    .hero .carousel-book {
        width:
            175px !important;
    }


    .hero
    .carousel-book.is-prev {
        transform:
            translate(-50%, -50%)
            translateX(-120px)
            scale(.76)
            rotateY(10deg)
            rotateZ(-3deg) !important;
    }


    .hero
    .carousel-book.is-next {
        transform:
            translate(-50%, -50%)
            translateX(120px)
            scale(.76)
            rotateY(-10deg)
            rotateZ(3deg) !important;
    }


    /*
     * À cette largeur, les deux livres les plus éloignés
     * n'apportent plus rien visuellement.
     */

    .hero
    .carousel-book.is-prev-2,
    .hero
    .carousel-book.is-next-2 {
        opacity:
            0 !important;

        pointer-events:
            none !important;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 620px) {

    .hero {
        padding:
            42px 0 58px !important;
    }


    .hero .hero-grid {
        gap:
            24px !important;
    }


    /* ----------------------------------------------------------------------
       TITRE
       ---------------------------------------------------------------------- */

    .hero .hero-intro {
        max-width:
            none !important;
    }


    .hero .hero-intro .eyebrow {
        margin-bottom:
            17px !important;

        font-size:
            9px !important;

        line-height:
            1.55;

        letter-spacing:
            .16em !important;
    }


    .hero .hero-intro h1 {
        max-width:
            none !important;

        margin-bottom:
            20px !important;

        font-size:
            clamp(
                42px,
                12.5vw,
                56px
            ) !important;

        line-height:
            .96 !important;

        letter-spacing:
            -.048em !important;
    }


    .hero
    .hero-intro
    h1 span {
        margin-top:
            8px !important;

        font-size:
            .90em !important;
    }


    /* ----------------------------------------------------------------------
       BOUTONS MOBILE
       ---------------------------------------------------------------------- */

    .hero
    .hero-intro
    .hero-actions {
        display:
            grid !important;

        grid-template-columns:
            1fr !important;

        gap:
            11px !important;

        margin-top:
            25px !important;
    }


    .hero
    .hero-intro
    .hero-actions
    .btn {
        width:
            100% !important;

        min-height:
            54px !important;

        padding:
            13px 20px !important;

        justify-content:
            center !important;

        white-space:
            normal !important;

        text-align:
            center !important;

        border-radius:
            999px !important;
    }


    /* ----------------------------------------------------------------------
       CARROUSEL MOBILE
       ---------------------------------------------------------------------- */

    .hero .book-carousel {
        width:
            100% !important;

        max-width:
            none !important;

        min-height:
            405px !important;

        margin-top:
            4px !important;
    }


    .hero
    .book-carousel-stage {
        width:
            100% !important;

        height:
            330px !important;

        overflow:
            visible;
    }


    .hero
    .book-carousel-stage::before {
        width:
            min(270px, 76vw) !important;

        height:
            min(270px, 76vw) !important;
    }


    .hero .carousel-book {
        width:
            clamp(
                135px,
                39vw,
                155px
            ) !important;

        border-radius:
            8px;
    }


    /* Livre central */

    .hero
    .carousel-book.is-active,
    .hero
    .carousel-book.is-active:hover {
        transform:
            translate(-50%, -50%)
            scale(1.04) !important;
    }


    /* Voisin gauche */

    .hero
    .carousel-book.is-prev {
        transform:
            translate(-50%, -50%)
            translateX(-92px)
            scale(.70)
            rotateY(9deg)
            rotateZ(-3deg) !important;

        opacity:
            .74 !important;
    }


    /* Voisin droit */

    .hero
    .carousel-book.is-next {
        transform:
            translate(-50%, -50%)
            translateX(92px)
            scale(.70)
            rotateY(-9deg)
            rotateZ(3deg) !important;

        opacity:
            .74 !important;
    }


    .hero
    .carousel-book.is-prev-2,
    .hero
    .carousel-book.is-next-2 {
        display:
            none !important;
    }


    /* ----------------------------------------------------------------------
       INFOS DU LIVRE
       ---------------------------------------------------------------------- */

    .hero .book-carousel-info {
        min-height:
            72px !important;

        padding:
            0 18px;
    }


    .hero .book-carousel-type {
        font-size:
            9px !important;

        letter-spacing:
            .16em;
    }


    .hero .book-carousel-title {
        max-width:
            310px !important;

        font-size:
            21px !important;

        line-height:
            1.12;
    }

}


/* ==========================================================================
   TRÈS PETIT MOBILE
   ========================================================================== */

@media (max-width: 420px) {

    .hero
    .book-carousel-stage {
        height:
            305px !important;
    }


    .hero
    .book-carousel {
        min-height:
            380px !important;
    }


    .hero .carousel-book {
        width:
            132px !important;
    }


    .hero
    .carousel-book.is-prev {
        transform:
            translate(-50%, -50%)
            translateX(-78px)
            scale(.66)
            rotateZ(-3deg) !important;
    }


    .hero
    .carousel-book.is-next {
        transform:
            translate(-50%, -50%)
            translateX(78px)
            scale(.66)
            rotateZ(3deg) !important;
    }


    .hero
    .book-carousel-stage::before {
        width:
            235px !important;

        height:
            235px !important;
    }

}
/* ==========================================================================
   PAGE LIVRES — HERO RESPONSIVE FINAL
   À PLACER TOUT EN BAS DE site.css
   ========================================================================== */


/* ==========================================================================
   TABLETTE / ÉCRAN ÉTROIT
   ========================================================================== */

@media (max-width: 900px) {

    /* ----------------------------------------------------------------------
       HERO
       ---------------------------------------------------------------------- */

    .page-hero-books {
        padding-top:
            clamp(64px, 9vw, 90px) !important;

        padding-bottom:
            75px !important;

        overflow:
            hidden;
    }


    .page-hero-books
    .books-hero-grid {
        display:
            grid !important;

        grid-template-columns:
            minmax(0, 1fr) !important;

        gap:
            52px !important;

        width:
            100%;
    }


    .page-hero-books
    .books-hero-copy {
        width:
            100% !important;

        max-width:
            100% !important;

        min-width:
            0 !important;
    }


    /* ----------------------------------------------------------------------
       SURTITRE
       ---------------------------------------------------------------------- */

    .page-hero-books
    .books-hero-copy
    > .eyebrow {
        margin-bottom:
            28px;
    }


    /* ----------------------------------------------------------------------
       TITRE — CORRECTION PRINCIPALE
       ---------------------------------------------------------------------- */

    .page-hero-books
    .books-hero-title {
        width:
            100% !important;

        max-width:
            100% !important;

        margin:
            0 0 30px !important;

        overflow:
            visible !important;

        line-height:
            .94 !important;
    }


    /*
     * IMPORTANT :
     * sur tablette on abandonne le nowrap.
     */

    .page-hero-books
    .books-hero-copy
    .books-hero-title-main,

    .page-hero-books
    .books-hero-copy
    .books-hero-title-accent {
        width:
            100% !important;

        max-width:
            100% !important;

        white-space:
            normal !important;

        overflow-wrap:
            normal !important;

        word-break:
            normal !important;

        text-wrap:
            balance;
    }


    /* Première partie */

    .page-hero-books
    .books-hero-copy
    .books-hero-title-main {
        font-size:
            clamp(
                3.15rem,
                8.2vw,
                4.6rem
            ) !important;

        line-height:
            .94 !important;
    }


    /* Deuxième partie */

    .page-hero-books
    .books-hero-copy
    .books-hero-title-accent {
        margin-top:
            .10em !important;

        font-size:
            clamp(
                2.55rem,
                6.7vw,
                3.8rem
            ) !important;

        line-height:
            .98 !important;
    }


    /* ----------------------------------------------------------------------
       BLOC "À DÉCOUVRIR"
       ---------------------------------------------------------------------- */

    .page-hero-books
    .books-story-sequence {
        width:
            100% !important;

        max-width:
            620px !important;

        margin-top:
            34px !important;

        padding:
            24px 26px 20px !important;

        border-radius:
            22px !important;
    }


    .page-hero-books
    .books-story-topline {
        margin-bottom:
            17px !important;
    }


    .page-hero-books
    .books-story-character {
        font-size:
            clamp(
                1.55rem,
                4vw,
                1.95rem
            ) !important;

        line-height:
            1.15 !important;
    }


    .page-hero-books
    .books-story-book {
        font-size:
            clamp(
                1rem,
                2.4vw,
                1.15rem
            ) !important;

        line-height:
            1.5 !important;
    }


    .page-hero-books
    .books-story-description {
        max-width:
            520px !important;

        margin-bottom:
            20px !important;

        font-size:
            .94rem !important;

        line-height:
            1.65 !important;

        display:
            -webkit-box;

        -webkit-box-orient:
            vertical;

        -webkit-line-clamp:
            3;

        overflow:
            hidden;
    }


    /* ----------------------------------------------------------------------
       PHOTO
       ---------------------------------------------------------------------- */

    .page-hero-books
    .books-hero-visual {
        width:
            100% !important;

        justify-content:
            center !important;
    }


    .page-hero-books
    .books-hero-photo {
        width:
            min(88%, 560px) !important;

        margin:
            0 auto !important;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    .page-hero-books {
        padding-top:
            50px !important;

        padding-bottom:
            60px !important;
    }


    .page-hero-books
    .books-hero-grid {
        gap:
            42px !important;
    }


    /* ----------------------------------------------------------------------
       SURTITRE
       ---------------------------------------------------------------------- */

    .page-hero-books
    .books-hero-copy
    > .eyebrow {
        margin-bottom:
            23px !important;

        font-size:
            9px !important;

        letter-spacing:
            .18em !important;
    }


    /* ----------------------------------------------------------------------
       TITRE
       ---------------------------------------------------------------------- */

    .page-hero-books
    .books-hero-title {
        margin-bottom:
            26px !important;
    }


    .page-hero-books
    .books-hero-copy
    .books-hero-title-main {
        font-size:
            clamp(
                2.55rem,
                11.5vw,
                3.45rem
            ) !important;

        line-height:
            .96 !important;
    }


    .page-hero-books
    .books-hero-copy
    .books-hero-title-accent {
        margin-top:
            .12em !important;

        font-size:
            clamp(
                2.05rem,
                9vw,
                2.85rem
            ) !important;

        line-height:
            1 !important;
    }


    /* ----------------------------------------------------------------------
       TEASER
       ---------------------------------------------------------------------- */

    .page-hero-books
    .books-story-sequence {
        max-width:
            100% !important;

        margin-top:
            28px !important;

        padding:
            21px 20px 17px !important;

        border-radius:
            19px !important;
    }


    .page-hero-books
    .books-story-topline {
        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

        gap:
            15px;

        margin-bottom:
            16px !important;
    }


    .page-hero-books
    .books-story-kicker {
        font-size:
            .58rem !important;

        letter-spacing:
            .16em !important;
    }


    .page-hero-books
    .books-story-counter {
        flex:
            0 0 auto;

        font-size:
            .72rem !important;
    }


    .page-hero-books
    .books-story-character {
        margin-bottom:
            12px !important;

        font-size:
            1.55rem !important;

        line-height:
            1.15 !important;
    }


    .page-hero-books
    .books-story-book {
        margin-bottom:
            15px !important;

        font-size:
            1rem !important;

        line-height:
            1.45 !important;
    }


    .page-hero-books
    .books-story-description {
        margin-bottom:
            18px !important;

        font-size:
            .88rem !important;

        line-height:
            1.6 !important;

        -webkit-line-clamp:
            4;
    }


    /* ----------------------------------------------------------------------
       PIED DU TEASER
       ---------------------------------------------------------------------- */

    .page-hero-books
    .books-story-footer {
        display:
            flex;

        align-items:
            center !important;

        justify-content:
            space-between;

        gap:
            15px;
    }


    .page-hero-books
    .books-story-link {
        min-width:
            0;

        font-size:
            .72rem;
    }


    .page-hero-books
    .books-story-controls {
        flex:
            0 0 auto;
    }


    /* ----------------------------------------------------------------------
       PHOTO
       ---------------------------------------------------------------------- */

    .page-hero-books
    .books-hero-photo {
        width:
            min(92%, 470px) !important;

        aspect-ratio:
            .88 !important;
    }

}


/* ==========================================================================
   PETIT MOBILE
   ========================================================================== */

@media (max-width: 420px) {

    .page-hero-books {
        padding-top:
            42px !important;
    }


    .page-hero-books
    .books-hero-copy
    .books-hero-title-main {
        font-size:
            clamp(
                2.35rem,
                11.8vw,
                3rem
            ) !important;
    }


    .page-hero-books
    .books-hero-copy
    .books-hero-title-accent {
        font-size:
            clamp(
                1.9rem,
                9.2vw,
                2.45rem
            ) !important;
    }


    .page-hero-books
    .books-story-sequence {
        padding:
            19px 18px 16px !important;
    }


    .page-hero-books
    .books-story-character {
        font-size:
            1.42rem !important;
    }


    .page-hero-books
    .books-story-description {
        font-size:
            .84rem !important;
    }


    .page-hero-books
    .books-story-link span:first-child {
        max-width:
            145px;
    }

}
/* ==========================================================================
   BIBLIOTHÈQUE — FINITION TABLETTE PREMIUM
   ========================================================================== */

@media (min-width: 601px) and (max-width: 900px) {

    .page-hero-books
    .books-story-sequence {
        max-width: 600px !important;

        padding:
            22px
            34px
            18px !important;
    }


    .page-hero-books
    .books-story-topline {
        margin-bottom:
            14px !important;
    }


    .page-hero-books
    .books-story-character {
        margin-bottom:
            10px !important;
    }


    .page-hero-books
    .books-story-book {
        margin-bottom:
            15px !important;
    }


    .page-hero-books
    .books-story-description {
        margin-bottom:
            17px !important;

        line-height:
            1.55 !important;
    }


    .page-hero-books
    .books-story-footer {
        margin-top:
            2px !important;
    }

}

/* ==========================================================================
   BIBLIOTHÈQUE — TABLETTE COMPACTE PREMIUM
   CORRECTION FINALE
   ========================================================================== */

@media (min-width: 601px) and (max-width: 900px) {

    /* ----------------------------------------------------------------------
       HERO — UN PEU PLUS COMPACT
       ---------------------------------------------------------------------- */

    .page-hero-books {
        padding-top:
            clamp(58px, 7vw, 72px) !important;

        padding-bottom:
            60px !important;
    }


    .page-hero-books
    .books-hero-grid {
        gap:
            44px !important;
    }


    /* ----------------------------------------------------------------------
       TITRE
       ---------------------------------------------------------------------- */

    .page-hero-books
    .books-hero-copy
    > .eyebrow {
        margin-bottom:
            24px !important;
    }


    .page-hero-books
    .books-hero-title {
        margin-bottom:
            22px !important;
    }


    .page-hero-books
    .books-hero-copy
    .books-hero-title-main {
        font-size:
            clamp(
                3rem,
                7.5vw,
                4.25rem
            ) !important;
    }


    .page-hero-books
    .books-hero-copy
    .books-hero-title-accent {
        font-size:
            clamp(
                2.35rem,
                6vw,
                3.35rem
            ) !important;
    }


    /* ----------------------------------------------------------------------
       CARTE "À DÉCOUVRIR"
       ---------------------------------------------------------------------- */

    .page-hero-books
    .books-story-sequence {
        width:
            min(100%, 555px) !important;

        max-width:
            555px !important;

        margin-top:
            24px !important;

        padding:
            20px
            28px
            16px !important;

        border-radius:
            20px !important;
    }


    /* ----------------------------------------------------------------------
       HAUT DU BLOC
       ---------------------------------------------------------------------- */

    .page-hero-books
    .books-story-topline {
        margin-bottom:
            13px !important;
    }


    .page-hero-books
    .books-story-kicker {
        font-size:
            .56rem !important;

        letter-spacing:
            .17em !important;
    }


    .page-hero-books
    .books-story-counter {
        font-size:
            .66rem !important;
    }


    /* ----------------------------------------------------------------------
       PERSONNAGE
       ---------------------------------------------------------------------- */

    .page-hero-books
    .books-story-character {
        margin:
            0 0 8px !important;

        font-size:
            clamp(
                1.4rem,
                3.2vw,
                1.7rem
            ) !important;

        line-height:
            1.1 !important;
    }


    /* ----------------------------------------------------------------------
       LIVRE
       ---------------------------------------------------------------------- */

    .page-hero-books
    .books-story-book {
        margin:
            0 0 12px !important;

        font-size:
            .82rem !important;

        line-height:
            1.45 !important;
    }


    .page-hero-books
    .books-story-book em {
        font-size:
            1rem !important;
    }


    /* ----------------------------------------------------------------------
       RÉSUMÉ
       ---------------------------------------------------------------------- */

    .page-hero-books
    .books-story-description {
        max-width:
            470px !important;

        margin:
            0 0 15px !important;

        font-size:
            .82rem !important;

        line-height:
            1.5 !important;

        display:
            -webkit-box !important;

        -webkit-box-orient:
            vertical !important;

        -webkit-line-clamp:
            2 !important;

        overflow:
            hidden !important;
    }


    /* ----------------------------------------------------------------------
       BAS DU BLOC
       ---------------------------------------------------------------------- */

    .page-hero-books
    .books-story-footer {
        display:
            flex !important;

        align-items:
            center !important;

        justify-content:
            space-between !important;

        gap:
            14px !important;

        margin-top:
            0 !important;
    }


    /* CTA */

    .page-hero-books
    .books-story-link {
        gap:
            8px !important;

        font-size:
            .68rem !important;
    }


    .page-hero-books
    .books-story-link-arrow {
        width:
            34px !important;

        height:
            34px !important;

        flex:
            0 0 34px !important;
    }


    /* Navigation */

    .page-hero-books
    .books-story-controls {
        gap:
            7px !important;
    }


    .page-hero-books
    .books-story-control {
        width:
            34px !important;

        height:
            34px !important;

        font-size:
            .76rem !important;
    }


    /* ----------------------------------------------------------------------
       PROGRESSION
       ---------------------------------------------------------------------- */

    .page-hero-books
    .books-story-progress {
        margin-top:
            13px !important;
    }

}

/* ==========================================================================
   PAGE LIVRES — VRAIES MARGES MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    /*
     * On crée une vraie respiration uniquement
     * dans le hero Bibliothèque.
     */
    .page-hero-books
    .books-hero-grid {
        width:
            calc(100% - 36px) !important;

        max-width:
            100% !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;
    }


    /* =========================================================
       TITRE
       ========================================================= */

    .page-hero-books
    .books-hero-title {
        width:
            100% !important;

        max-width:
            100% !important;
    }


    /* =========================================================
       CARTE À DÉCOUVRIR
       ========================================================= */

    .page-hero-books
    .books-story-sequence {
        width:
            calc(100% - 12px) !important;

        max-width:
            none !important;

        margin-left:
            auto !important;

        margin-right:
            auto !important;
    }

}


/* ==========================================================================
   PETIT MOBILE
   ========================================================================== */

@media (max-width: 420px) {

    .page-hero-books
    .books-hero-grid {
        width:
            calc(100% - 30px) !important;
    }


    .page-hero-books
    .books-story-sequence {
        width:
            calc(100% - 8px) !important;
    }

}

/* ==========================================================================
   THÉOPHILE TOUALI — ACCROCHES + DÉBAT LECTEURS
   À ajouter à la fin de assets/css/site.css
   ========================================================================== */

/* ========================================================================
   ACCROCHES DU HERO — UNE À LA FOIS
   ======================================================================== */

.book-page-hook-rotator {
    position: relative;
    margin-top: 24px;
}

.book-page-hook-stage {
    position: relative;
    min-height: 96px;
}

.book-page-hook-rotator .book-page-hook {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    margin: 0;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity .42s ease, transform .42s ease;
}

.book-page-hook-rotator .book-page-hook.is-active {
    position: relative;
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.book-page-hook-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 14px;
}

.book-page-hook-dots {
    display: flex;
    align-items: center;
    gap: 7px;
}

.book-page-hook-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(6, 19, 38, .16);
    cursor: pointer;
    transition: width .22s ease, background .22s ease;
}

.book-page-hook-dot.is-active {
    width: 24px;
    background: var(--gold, #d6a94b);
}

.book-page-hook-debate-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #9b742c;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
}

.book-page-hook-debate-link span {
    color: var(--gold, #d6a94b);
    transition: transform .2s ease;
}

.book-page-hook-debate-link:hover span {
    transform: translateX(3px);
}

/* ========================================================================
   SECTION DÉBAT
   ======================================================================== */

.book-debate-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 8%, rgba(214,169,75,.07), transparent 27%),
        radial-gradient(circle at 92% 92%, color-mix(in srgb, var(--book-accent) 13%, transparent), transparent 30%),
        #fcfbf8;
}

.book-debate-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 430px);
    align-items: end;
    gap: 70px;
    margin-bottom: 42px;
}

.book-debate-heading .eyebrow {
    color: #a77d31;
}

.book-debate-heading .eyebrow::before {
    background: var(--gold, #d6a94b) !important;
}

.book-debate-heading h2 {
    max-width: 760px;
    margin: 14px 0 0;
    color: var(--ink);
    font: 500 clamp(43px, 4.8vw, 68px) / .98 var(--serif);
    letter-spacing: -.045em;
}

.book-debate-heading h2 em {
    display: block;
    color: var(--blue-deep);
    font-weight: 500;
}

.book-debate-heading > p {
    margin: 0;
    padding-left: 24px;
    border-left: 1px solid rgba(214,169,75,.45);
    color: #5f6f7d;
    font-size: 15px;
    line-height: 1.8;
}

.book-debate-shell {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(214,169,75,.28);
    border-radius: 34px;
    background: rgba(255,255,255,.84);
    box-shadow: 0 30px 80px rgba(6,19,38,.08);
}

.book-debate-shell::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--gold, #d6a94b), var(--book-accent));
}

.book-debate-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 34px 20px 38px;
    border-bottom: 1px solid rgba(6,19,38,.08);
}

.book-debate-topline > span:first-child {
    color: #9d752c;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.book-debate-counter {
    color: rgba(6,19,38,.35);
    font: 700 13px / 1 var(--sans);
}

.book-debate-counter strong {
    color: #ad8130;
}

.book-debate-stage {
    position: relative;
}

.book-debate-slide {
    display: none;
    grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
    gap: 64px;
    padding: 44px 46px 38px;
}

.book-debate-slide.is-active {
    display: grid;
}

.book-debate-number {
    color: #ad8130;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.book-debate-question-column h3 {
    margin: 17px 0 30px;
    color: var(--ink);
    font: italic 500 clamp(30px, 3.4vw, 46px) / 1.2 var(--serif);
    letter-spacing: -.025em;
}

.book-debate-results {
    display: grid;
    gap: 15px;
}

.book-debate-result > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 7px;
    color: #526574;
    font-size: 11px;
    font-weight: 800;
}

.book-debate-result strong {
    color: var(--ink);
}

.book-debate-result-track {
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(6,19,38,.08);
}

.book-debate-result-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--gold, #d6a94b), var(--book-accent));
    transition: width .45s ease;
}

.book-debate-votes {
    margin: 19px 0 0;
    color: #788794;
    font-size: 12px;
    line-height: 1.6;
}

.book-debate-form-column {
    padding: 27px 29px 26px;
    border: 1px solid rgba(214,169,75,.18);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(6,19,38,.055);
}

.book-debate-form {
    display: grid;
    gap: 18px;
}

.book-debate-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.book-debate-choice-group {
    margin: 0;
    padding: 0;
    border: 0;
}

.book-debate-choice-group legend,
.book-debate-field > span {
    display: block;
    margin-bottom: 9px;
    color: #4e6271;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.book-debate-field > span em {
    color: #97a3ad;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

.book-debate-choices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.book-debate-choices label {
    cursor: pointer;
}

.book-debate-choices input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.book-debate-choices span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid rgba(6,19,38,.12);
    border-radius: 999px;
    background: #fcfbf8;
    color: #405463;
    font-size: 12px;
    font-weight: 850;
    transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}

.book-debate-choices input:checked + span {
    border-color: rgba(214,169,75,.78);
    background: rgba(214,169,75,.09);
    color: #8c6725;
    box-shadow: 0 0 0 3px rgba(214,169,75,.08);
}

.book-debate-field input,
.book-debate-field textarea {
    width: 100%;
    border: 1px solid rgba(6,19,38,.12);
    border-radius: 15px;
    background: #fcfbf8;
    color: var(--ink);
    font: 500 14px / 1.55 var(--sans);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.book-debate-field input {
    min-height: 48px;
    padding: 0 15px;
}

.book-debate-field textarea {
    min-height: 120px;
    padding: 13px 15px;
    resize: vertical;
}

.book-debate-field input:focus,
.book-debate-field textarea:focus {
    border-color: var(--gold, #d6a94b);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(214,169,75,.09);
}

.book-debate-submit {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 52px;
    padding: 12px 18px 12px 21px;
    border: 1px solid rgba(214,169,75,.55);
    border-radius: 999px;
    background: linear-gradient(135deg, #061326, #0c2639);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(6,19,38,.13);
}

.book-debate-submit span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--gold, #d6a94b);
    color: #071625;
}

.book-debate-privacy {
    margin: -4px 0 0;
    color: #8a969f;
    font-size: 10px;
    line-height: 1.55;
}

.book-debate-notice {
    margin-bottom: 17px;
    padding: 12px 14px;
    border-radius: 13px;
    font-size: 12px;
    line-height: 1.55;
}

.book-debate-notice.success {
    border: 1px solid rgba(72,128,93,.20);
    background: rgba(72,128,93,.07);
    color: #315f42;
}

.book-debate-notice.error {
    border: 1px solid rgba(151,58,55,.20);
    background: rgba(151,58,55,.06);
    color: #7c3633;
}

.book-debate-reader-voices {
    grid-column: 1 / -1;
    margin-top: 6px;
    padding-top: 30px;
    border-top: 1px solid rgba(6,19,38,.08);
}

.book-debate-reader-label {
    color: #a77d31;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.book-debate-reader-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 17px;
}

.book-debate-reader-grid blockquote {
    margin: 0;
    padding: 20px 21px;
    border: 1px solid rgba(214,169,75,.14);
    border-radius: 18px;
    background: #fcfbf8;
    color: #334856;
    font: italic 500 16px / 1.65 var(--serif);
}

.book-debate-reader-grid footer {
    margin-top: 13px;
    color: #a27a31;
    font: 800 10px / 1.4 var(--sans);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.book-debate-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 34px 28px;
}

.book-debate-nav {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(214,169,75,.38);
    border-radius: 50%;
    background: #fff;
    color: var(--ink);
    cursor: pointer;
}

.book-debate-nav:hover {
    background: var(--gold, #d6a94b);
    border-color: var(--gold, #d6a94b);
}

.book-debate-dots {
    display: flex;
    align-items: center;
    gap: 7px;
}

.book-debate-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(6,19,38,.16);
    cursor: pointer;
    transition: width .22s ease, background .22s ease;
}

.book-debate-dot.is-active {
    width: 26px;
    background: var(--gold, #d6a94b);
}

/* ========================================================================
   RESPONSIVE
   ======================================================================== */

@media (max-width: 900px) {
    .book-debate-heading {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .book-debate-heading > p {
        max-width: 620px;
    }

    .book-debate-slide.is-active {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .book-debate-reader-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .book-page-hook-stage {
        min-height: 118px;
    }

    .book-page-hook-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
    }

    .book-debate-heading h2 {
        font-size: clamp(36px, 10.5vw, 48px);
    }

    .book-debate-shell {
        border-radius: 24px;
    }

    .book-debate-topline {
        padding: 21px 21px 16px 25px;
    }

    .book-debate-slide {
        padding: 30px 22px 27px 26px;
    }

    .book-debate-question-column h3 {
        font-size: clamp(27px, 8vw, 36px);
    }

    .book-debate-form-column {
        padding: 22px 18px;
        border-radius: 19px;
    }

    .book-debate-choices {
        grid-template-columns: 1fr;
    }

    .book-debate-navigation {
        padding: 0 22px 23px 26px;
    }
}

/* ==========================================================================
   FICHE LIVRE — EXTRAIT / CITATIONS
   VERSION PREMIUM FINALE
   ========================================================================== */

.book-page-excerpt-call {
    padding:
        clamp(70px, 8vw, 120px)
        0 !important;
}


/* ==========================================================================
   PANNEAU
   ========================================================================== */

.book-page-excerpt-panel {
    position: relative !important;

    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        auto !important;

    align-items:
        center !important;

    gap:
        clamp(50px, 7vw, 100px) !important;

    overflow:
        hidden !important;

    min-height:
        540px !important;

    padding:
        clamp(60px, 6vw, 92px)
        clamp(48px, 7vw, 105px) !important;

    border:
        1px solid
        rgba(214, 169, 75, .20) !important;

    border-radius:
        42px !important;

    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(143, 196, 213, .17),
            transparent 28%
        ),
        radial-gradient(
            circle at 12% 100%,
            rgba(214, 169, 75, .055),
            transparent 34%
        ),
        linear-gradient(
            138deg,
            #051221 0%,
            #081b2c 48%,
            #0c2b40 100%
        ) !important;

    box-shadow:
        0 40px 100px
        rgba(6, 19, 38, .16) !important;

    color:
        #fff !important;
}


/* grand guillemet décoratif */

.book-page-excerpt-panel::after {
    content:
        "“" !important;

    position:
        absolute !important;

    top:
        -135px !important;

    right:
        70px !important;

    font:
        400 390px / 1
        var(--serif) !important;

    color:
        rgba(255, 255, 255, .025) !important;

    pointer-events:
        none;
}


/* petit filet premium en haut */

.book-page-excerpt-panel::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        9%;

    width:
        150px;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            var(--gold),
            transparent
        );

    opacity:
        .85;
}


/* ==========================================================================
   COLONNE TEXTE
   ========================================================================== */

.book-page-excerpt-panel > div {
    position:
        relative;

    z-index:
        2;

    min-width:
        0;
}


/* ==========================================================================
   EYEBROW
   ========================================================================== */

.book-page-excerpt-panel .eyebrow {
    display:
        flex !important;

    align-items:
        center !important;

    gap:
        14px !important;

    margin-bottom:
        30px !important;

    color:
        #8fc4d5 !important;

    font-size:
        10px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .22em !important;

    text-transform:
        uppercase;
}


.book-page-excerpt-panel .eyebrow::before {
    content:
        "";

    width:
        45px;

    height:
        1px;

    background:
        var(--gold);
}


/* ==========================================================================
   CARROUSEL DE CITATIONS
   ========================================================================== */

.book-page-excerpt-quotes {
    position:
        relative;

    width:
        100%;

    max-width:
        900px;
}


.book-page-excerpt-quotes-stage {
    display:
        grid;

    align-items:
        center;

    min-height:
        205px;
}


/*
 * Toutes les citations occupent la même zone.
 */

.book-page-excerpt-quote {
    grid-area:
        1 / 1;

    display:
        grid !important;

    grid-template-columns:
        auto minmax(0, 1fr);

    align-items:
        start;

    gap:
        17px;

    width:
        100%;

    margin:
        0 !important;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(18px);

    transition:
        opacity .65s ease,
        transform .65s ease,
        visibility .65s ease;
}


.book-page-excerpt-quote.is-active {
    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);
}


/* ==========================================================================
   GUILLEMET
   ========================================================================== */

.book-page-excerpt-quote-mark {
    display:
        block !important;

    margin-top:
        -8px;

    color:
        var(--gold) !important;

    font:
        400 62px / 1
        var(--serif) !important;

    opacity:
        .95;
}


/* ==========================================================================
   TEXTE DE LA CITATION
   ========================================================================== */

.book-page-excerpt-quote > span:last-child {
    display:
        block;

    max-width:
        850px;

    color:
        #fff;

    font:
        italic 500
        clamp(34px, 3.7vw, 56px) / 1.16
        var(--serif) !important;

    letter-spacing:
        -.035em;

    text-wrap:
        balance;
}


/* ==========================================================================
   MÉTA — POINTS + COMPTEUR
   ========================================================================== */

.book-page-excerpt-quote-meta {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

    max-width:
        850px;

    margin-top:
        28px;

    padding-top:
        20px;

    border-top:
        1px solid
        rgba(255, 255, 255, .10);
}


.book-page-excerpt-quote-dots {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;
}


.book-page-excerpt-quote-dot {
    width:
        7px;

    height:
        7px;

    padding:
        0;

    border:
        0;

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, .28);

    cursor:
        pointer;

    transition:
        width .25s ease,
        background .25s ease,
        transform .25s ease;
}


.book-page-excerpt-quote-dot:hover {
    transform:
        scale(1.15);

    background:
        rgba(255, 255, 255, .65);
}


.book-page-excerpt-quote-dot.is-active {
    width:
        28px;

    background:
        var(--gold);
}


/* compteur */

.book-page-excerpt-quote-counter {
    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    color:
        rgba(255, 255, 255, .35);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        .18em;
}


.book-page-excerpt-quote-counter strong {
    color:
        var(--gold);

    font-size:
        13px;
}


/* ==========================================================================
   TEXTE D'ACCOMPAGNEMENT
   ========================================================================== */

.book-page-excerpt-panel
> div
> p {
    max-width:
        760px !important;

    margin:
        36px 0 0 !important;

    color:
        rgba(255, 255, 255, .58) !important;

    font:
        400 15px / 1.8
        var(--sans) !important;
}


.book-page-excerpt-panel
> div
> p em {
    color:
        rgba(255, 255, 255, .82);

    font-family:
        var(--serif);

    font-size:
        1.05em;
}


/* ==========================================================================
   BOUTON
   ========================================================================== */

.book-page-excerpt-button {
    position:
        relative !important;

    z-index:
        3;

    display:
        inline-flex !important;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        38px;

    min-width:
        275px;

    min-height:
        68px;

    padding:
        9px 11px 9px 27px !important;

    border:
        1px solid
        rgba(214, 169, 75, .32) !important;

    border-radius:
        999px !important;

    background:
        #f8f5ef !important;

    color:
        var(--ink) !important;

    font-size:
        13px !important;

    font-weight:
        850 !important;

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, .18);

    cursor:
        pointer;

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.book-page-excerpt-button span {
    display:
        grid;

    place-items:
        center;

    width:
        48px;

    height:
        48px;

    flex:
        0 0 48px;

    border-radius:
        50%;

    background:
        var(--gold);

    color:
        var(--ink);

    font-size:
        16px;

    transition:
        transform .3s ease,
        background .3s ease;
}


.book-page-excerpt-button:hover {
    transform:
        translateY(-3px);

    border-color:
        var(--gold) !important;

    background:
        #fff !important;

    box-shadow:
        0 25px 55px
        rgba(0, 0, 0, .24);
}


.book-page-excerpt-button:hover span {
    transform:
        translateX(3px);
}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width: 980px) {

    .book-page-excerpt-panel {
        grid-template-columns:
            1fr !important;

        gap:
            42px !important;

        min-height:
            0 !important;

        padding:
            62px 56px !important;
    }


    .book-page-excerpt-quotes-stage {
        min-height:
            180px;
    }


    .book-page-excerpt-button {
        min-width:
            255px;

        justify-self:
            start;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 620px) {

    .book-page-excerpt-call {
        padding:
            55px 0 !important;
    }


    .book-page-excerpt-panel {
        gap:
            35px !important;

        padding:
            45px 26px 30px !important;

        border-radius:
            28px !important;
    }


    .book-page-excerpt-panel::before {
        left:
            26px;

        width:
            80px;
    }


    .book-page-excerpt-panel::after {
        top:
            -70px !important;

        right:
            -5px !important;

        font-size:
            240px !important;
    }


    .book-page-excerpt-panel
    .eyebrow {
        margin-bottom:
            23px !important;

        font-size:
            8px !important;

        letter-spacing:
            .17em !important;
    }


    .book-page-excerpt-panel
    .eyebrow::before {
        width:
            30px;
    }


    .book-page-excerpt-quotes-stage {
        min-height:
            185px;
    }


    .book-page-excerpt-quote {
        gap:
            10px;
    }


    .book-page-excerpt-quote-mark {
        font-size:
            43px !important;
    }


    .book-page-excerpt-quote
    > span:last-child {
        font-size:
            clamp(
                27px,
                8vw,
                38px
            ) !important;

        line-height:
            1.17 !important;
    }


    .book-page-excerpt-quote-meta {
        margin-top:
            20px;
    }


    .book-page-excerpt-panel
    > div
    > p {
        margin-top:
            27px !important;

        font-size:
            13px !important;

        line-height:
            1.7 !important;
    }


    .book-page-excerpt-button {
        width:
            100%;

        min-width:
            0;

        min-height:
            62px;

        padding:
            7px 8px 7px 22px !important;
    }


    .book-page-excerpt-button span {
        width:
            46px;

        height:
            46px;

        flex-basis:
            46px;
    }

}
/* ==========================================================================
   FICHE LIVRE — ROTATION DES THÈMES
   ========================================================================== */

.book-page-theme-rotator {
    width: 100%;
}


.book-page-theme-cloud {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    min-height: 130px;

    transition:
        opacity .28s ease,
        transform .28s ease;
}


.book-page-theme-cloud.is-changing {
    opacity: 0;

    transform:
        translateY(8px);
}


.book-page-theme-item {
    display: inline-flex;

    align-items: center;

    min-height: 42px;

    padding:
        10px 17px;

    border:
        1px solid
        rgba(6, 19, 38, .12);

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, .72);

    color:
        var(--ink);

    font-size:
        13px;

    font-weight:
        700;

    box-shadow:
        0 8px 24px
        rgba(6, 19, 38, .045);
}


.book-page-theme-meta {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 24px;

    margin-top: 26px;

    padding-top: 18px;

    border-top:
        1px solid
        rgba(6, 19, 38, .10);
}


.book-page-theme-counter {
    display: flex;

    align-items: center;

    gap: 7px;

    color:
        var(--muted);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        .15em;
}


.book-page-theme-counter strong {
    color:
        var(--gold);
}


.book-page-theme-next {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 0;

    border: 0;

    background: transparent;

    color:
        var(--ink);

    font: inherit;

    font-size:
        12px;

    font-weight:
        800;

    cursor: pointer;
}


.book-page-theme-next span {
    color:
        var(--gold);

    transition:
        transform .25s ease;
}


.book-page-theme-next:hover span {
    transform:
        translateX(4px);
}


@media (max-width: 620px) {

    .book-page-theme-cloud {
        gap: 9px;

        min-height: 220px;
    }


    .book-page-theme-item {
        min-height: 37px;

        padding:
            8px 13px;

        font-size:
            11px;
    }


    .book-page-theme-meta {
        margin-top: 20px;
    }

}

/* ==========================================================================
   BIBLIOTHÈQUE — RÉSUMÉS DE TAILLE UNIFORME
   ========================================================================== */

.library-book-copy {
    display: flex;
    flex-direction: column;
}


/* ==========================================================================
   BLOC RÉSUMÉ
   ========================================================================== */

.library-book-summary {
    position: relative;

    margin-top: 18px;
}


/* ==========================================================================
   TEXTE
   7 lignes maximum par défaut
   ========================================================================== */

.library-book-summary-text {
    display: -webkit-box;

    margin: 0 !important;

    min-height: calc(1.8em * 7);

    overflow: hidden;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.8;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;

    line-clamp: 7;

    transition:
        max-height .45s ease,
        opacity .3s ease;
}


/* ==========================================================================
   RÉSUMÉ OUVERT
   ========================================================================== */

.library-book-summary.is-expanded
.library-book-summary-text {
    display: block;

    min-height: 0;

    overflow: visible;

    -webkit-line-clamp: unset;

    line-clamp: unset;
}


/* ==========================================================================
   BOUTON "LIRE LA SUITE"
   ========================================================================== */

.library-book-summary-toggle {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    margin-top: 13px;

    padding: 0;

    border: 0;

    background: transparent;

    color: var(--ink);

    font: inherit;

    font-size: 11px;

    font-weight: 850;

    letter-spacing: .08em;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        color .25s ease;
}


.library-book-summary-toggle:hover {
    color: var(--book-accent);
}


/* flèche */

.library-book-summary-arrow {
    color: var(--book-accent);

    font-size: 13px;

    transition:
        transform .3s ease;
}


.library-book-summary.is-expanded
.library-book-summary-arrow {
    transform: rotate(180deg);
}


/* ==========================================================================
   SI LE TEXTE EST COURT :
   JS ajoutera .is-not-truncated
   ========================================================================== */

.library-book-summary.is-not-truncated
.library-book-summary-toggle {
    display: none;
}


/* ==========================================================================
   CTA DU LIVRE
   ========================================================================== */

.library-book-link {
    margin-top: 24px !important;
}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width: 900px) {

    .library-book-summary-text {
        min-height: calc(1.75em * 6);

        line-height: 1.75;

        -webkit-line-clamp: 6;

        line-clamp: 6;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 620px) {

    .library-book-summary-text {
        min-height: calc(1.7em * 5);

        font-size: 13px;

        line-height: 1.7;

        -webkit-line-clamp: 5;

        line-clamp: 5;
    }


    .library-book-summary-toggle {
        margin-top: 11px;

        font-size: 10px;
    }

}

/* ==========================================================================
   BIBLIOTHÈQUE — CARTES LIVRES
   VERSION FINALE : COUVERTURE REMONTÉE + RÉSUMÉ ÉDITORIAL
   ========================================================================== */


/* ==========================================================================
   1. REMONTER LA COUVERTURE
   ========================================================================== */

@media (min-width: 901px) {

    .library-catalog-card .library-book-visual img {
        transform:
            translateY(-68px) !important;
    }


    .library-catalog-card:hover
    .library-book-visual img {
        transform:
            translateY(-74px)
            rotate(-1.2deg)
            scale(1.025) !important;
    }

}


/* tablette : remontée plus légère */

@media (min-width: 621px) and (max-width: 900px) {

    .library-catalog-card .library-book-visual img {
        transform:
            translateY(-30px) !important;
    }


    .library-catalog-card:hover
    .library-book-visual img {
        transform:
            translateY(-35px)
            rotate(-1deg)
            scale(1.02) !important;
    }

}


/* mobile : position normale */

@media (max-width: 620px) {

    .library-catalog-card .library-book-visual img,
    .library-catalog-card:hover
    .library-book-visual img {
        transform:
            none !important;
    }

}


/* ==========================================================================
   2. SUPPRIMER L'ANCIEN FOND BLEU DU RÉSUMÉ
   ========================================================================== */

.library-catalog-card .library-book-summary {
    display:
        block !important;

    position:
        relative !important;

    width:
        100% !important;

    margin:
        0 0 28px !important;

    padding:
        0 !important;

    background:
        transparent !important;

    color:
        inherit !important;

    box-shadow:
        none !important;

    border:
        0 !important;
}


/* ==========================================================================
   3. TEXTE DU RÉSUMÉ
   ========================================================================== */

.library-catalog-card
.library-book-summary
.library-book-summary-text {

    display:
        -webkit-box !important;

    max-width:
        430px !important;

    min-height:
        calc(1.72em * 6) !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        hidden !important;

    background:
        transparent !important;

    color:
        rgba(7, 20, 38, .62) !important;

    font-family:
        var(--sans) !important;

    font-size:
        14px !important;

    font-weight:
        400 !important;

    line-height:
        1.72 !important;

    letter-spacing:
        0 !important;

    -webkit-box-orient:
        vertical !important;

    -webkit-line-clamp:
        6 !important;

    line-clamp:
        6 !important;
}


/* ==========================================================================
   4. RÉSUMÉ OUVERT
   ========================================================================== */

.library-catalog-card
.library-book-summary.is-expanded
.library-book-summary-text {

    display:
        block !important;

    min-height:
        0 !important;

    overflow:
        visible !important;

    -webkit-line-clamp:
        unset !important;

    line-clamp:
        unset !important;
}


/* ==========================================================================
   5. LIRE LA SUITE
   ========================================================================== */

.library-catalog-card
.library-book-summary-toggle {

    display:
        inline-flex !important;

    align-items:
        center !important;

    gap:
        10px !important;

    margin:
        15px 0 0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    background:
        transparent !important;

    color:
        #071426 !important;

    font-family:
        var(--sans) !important;

    font-size:
        10px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .12em !important;

    text-transform:
        uppercase !important;

    cursor:
        pointer !important;

    box-shadow:
        none !important;
}


.library-catalog-card
.library-book-summary-toggle:hover {
    color:
        var(--book-accent) !important;
}


/* flèche */

.library-catalog-card
.library-book-summary-arrow {
    display:
        inline-block !important;

    color:
        var(--book-accent) !important;

    font-size:
        13px !important;

    transition:
        transform .3s ease !important;
}


.library-catalog-card
.library-book-summary.is-expanded
.library-book-summary-arrow {
    transform:
        rotate(180deg) !important;
}


/* masque le bouton si le résumé tient déjà entièrement */

.library-catalog-card
.library-book-summary.is-not-truncated
.library-book-summary-toggle {
    display:
        none !important;
}


/* ==========================================================================
   6. ESPACEMENT AVANT "ENTRER DANS L'HISTOIRE"
   ========================================================================== */

.library-catalog-card
.library-book-link {
    margin-top:
        auto !important;
}


/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {

    .library-catalog-card
    .library-book-summary
    .library-book-summary-text {
        min-height:
            calc(1.7em * 6) !important;

        font-size:
            13.5px !important;

        line-height:
            1.7 !important;

        -webkit-line-clamp:
            6 !important;

        line-clamp:
            6 !important;
    }

}


@media (max-width: 620px) {

    .library-catalog-card
    .library-book-summary {
        margin-bottom:
            24px !important;
    }


    .library-catalog-card
    .library-book-summary
    .library-book-summary-text {
        min-height:
            calc(1.7em * 5) !important;

        font-size:
            13px !important;

        -webkit-line-clamp:
            5 !important;

        line-clamp:
            5 !important;
    }

}

/* ==========================================================================
   ACCUEIL — À LA UNE
   VERSION ÉDITORIALE PREMIUM FINALE
   À PLACER TOUT EN BAS DE site.css
   ========================================================================== */


/* ==========================================================================
   SECTION
   ========================================================================== */

.spotlight-section {
    position: relative;

    padding:
        clamp(80px, 8vw, 125px)
        0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 12% 18%,
            rgba(143, 196, 213, .13),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #fcfbf8 0%,
            #f7f6f1 100%
        );
}


/* ==========================================================================
   CARTE PRINCIPALE
   ========================================================================== */

.spotlight-section
.spotlight-premium {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(390px, .90fr)
        minmax(0, 1.10fr);

    min-height: 720px;

    overflow: hidden;

    border:
        1px solid
        rgba(6, 19, 38, .08);

    border-radius: 38px;

    background:
        #071829;

    box-shadow:
        0 40px 100px
        rgba(6, 19, 38, .15);
}


/* petite ligne supérieure premium */

.spotlight-section
.spotlight-premium::before {
    content: "";

    position: absolute;

    z-index: 30;

    top: 0;

    left: 42px;

    width: 86px;

    height: 2px;

    background:
        var(--gold);

    opacity: .8;
}


/* ==========================================================================
   COLONNE GAUCHE
   ========================================================================== */

.spotlight-section
.spotlight-visual {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 720px;

    padding:
        92px
        55px
        54px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 37%,
            rgba(255, 255, 255, .44),
            transparent 31%
        ),
        linear-gradient(
            165deg,
            color-mix(
                in srgb,
                var(--spotlight-accent) 78%,
                white
            ),
            color-mix(
                in srgb,
                var(--spotlight-accent) 27%,
                white
            )
        );
}


/* cercle éditorial */

.spotlight-section
.spotlight-visual::before {
    content: "";

    position: absolute;

    width: 390px;

    height: 390px;

    border:
        1px solid
        rgba(255, 255, 255, .70);

    border-radius: 50%;

    box-shadow:
        0 0 0 65px
        rgba(255, 255, 255, .065);
}


/* halo */

.spotlight-section
.spotlight-halo {
    position: absolute;

    width: 320px;

    height: 320px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .22);

    filter:
        blur(4px);
}


/* ==========================================================================
   BADGE
   ========================================================================== */

.spotlight-section
.spotlight-featured-badge {
    position: absolute;

    z-index: 20;

    top: 28px;

    left: 30px;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        10px
        16px;

    border:
        1px solid
        rgba(214, 169, 75, .42);

    border-radius: 999px;

    background:
        rgba(7, 24, 41, .94);

    color:
        #fff;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .20em;

    text-transform:
        uppercase;

    box-shadow:
        0 12px 28px
        rgba(7, 24, 41, .16);

    animation:
        none;
}


.spotlight-section
.spotlight-featured-dot {
    position: relative;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        var(--gold);

    box-shadow:
        0 0 0 5px
        rgba(214, 169, 75, .13);

    animation:
        none;
}


.spotlight-section
.spotlight-featured-dot::after {
    display: none;
}


/* ==========================================================================
   ENSEMBLE COUVERTURE
   ========================================================================== */

.spotlight-section
.spotlight-visual-inner {
    position: relative;

    z-index: 5;

    display: flex;

    flex-direction: column;

    align-items: center;

    width: 100%;

    max-width: 390px;
}


/* ==========================================================================
   COUVERTURE
   ========================================================================== */

.spotlight-section
.spotlight-cover {
    position: relative;

    display: block;

    width:
        min(100%, 320px);

    overflow: hidden;

    border-radius: 7px;

    transform:
        translateY(-8px);

    transition:
        transform .45s
        cubic-bezier(.2, .8, .2, 1);
}


.spotlight-section
.spotlight-cover::after {
    content: "";

    position: absolute;

    left: 13%;

    right: 13%;

    bottom: -23px;

    height: 30px;

    z-index: -1;

    border-radius: 50%;

    background:
        rgba(4, 18, 30, .24);

    filter:
        blur(16px);
}


.spotlight-section
.spotlight-cover img {
    display: block;

    width: 100%;

    border-radius: 7px;

    box-shadow:
        0 38px 72px
        rgba(1, 12, 22, .30);

    transform:
        perspective(1200px)
        rotateY(-2.5deg);

    transition:
        transform .45s ease,
        box-shadow .45s ease;
}


.spotlight-section
.spotlight-cover:hover img {
    transform:
        perspective(1200px)
        rotateY(0)
        translateY(-5px);

    box-shadow:
        0 46px 85px
        rgba(1, 12, 22, .36);
}


/* ==========================================================================
   EN SAVOIR PLUS SUR LA COUVERTURE
   ========================================================================== */

.spotlight-section
.spotlight-cover-more {
    position: absolute;

    left: 16px;

    right: 16px;

    bottom: 16px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    padding:
        12px
        15px;

    border:
        1px solid
        rgba(255,255,255,.32);

    border-radius: 999px;

    background:
        rgba(5,20,34,.84);

    backdrop-filter:
        blur(12px);

    color:
        #fff;

    font-size:
        11px;

    font-weight:
        850;

    opacity:
        0;

    transform:
        translateY(8px);

    transition:
        opacity .3s ease,
        transform .3s ease;
}


.spotlight-section
.spotlight-cover:hover
.spotlight-cover-more {
    opacity: 1;

    transform: none;
}


/* ==========================================================================
   ACTIONS SOUS LA COUVERTURE
   ========================================================================== */

.spotlight-section
.spotlight-visual-actions {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    align-items: center;

    width:
        min(100%, 365px);

    gap: 7px;

    margin-top:
        27px;

    padding:
        6px;

    border:
        1px solid
        rgba(6, 19, 38, .10);

    border-radius:
        999px;

    background:
        rgba(255, 255, 255, .76);

    backdrop-filter:
        blur(14px);

    box-shadow:
        0 15px 35px
        rgba(6, 19, 38, .08);
}


/* LIRE */

.spotlight-section
.spotlight-read-link {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height:
        43px;

    padding:
        0 16px;

    border:
        0;

    border-radius:
        999px;

    background:
        #071829;

    color:
        #fff;

    font:
        inherit;

    font-size:
        11px;

    font-weight:
        900;

    cursor:
        pointer;

    box-shadow:
        none;

    transition:
        transform .25s ease,
        background .25s ease;
}


.spotlight-section
.spotlight-read-link:hover {
    color:
        #fff;

    background:
        #12324b;

    transform:
        translateY(-1px);
}


/* ACHAT */

.spotlight-section
.spotlight-buy-link {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    min-height:
        43px;

    padding:
        0 13px;

    border:
        0;

    color:
        #071829;

    font-size:
        11px;

    font-weight:
        900;

    white-space:
        nowrap;

    transition:
        color .2s ease;
}


.spotlight-section
.spotlight-buy-link:hover {
    color:
        #4f8190;

    transform:
        none;
}


/* ==========================================================================
   COLONNE DROITE
   ========================================================================== */

.spotlight-section
.spotlight-content {
    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-width: 0;

    padding:
        64px
        68px
        58px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 105% -5%,
            rgba(143,196,213,.12),
            transparent 28%
        ),
        linear-gradient(
            155deg,
            #0a1b2d 0%,
            #061326 100%
        );

    color:
        #fff;
}


/* grand filigrane */

.spotlight-section
.spotlight-content::before {
    content:
        "TT";

    position: absolute;

    right:
        -34px;

    bottom:
        -46px;

    width:
        auto;

    height:
        auto;

    border-radius:
        0;

    background:
        transparent;

    color:
        rgba(255, 255, 255, .025);

    font:
        800
        230px / .8
        var(--serif);

    letter-spacing:
        -.12em;

    pointer-events:
        none;
}


/* Le contenu doit rester devant */

.spotlight-section
.spotlight-content > * {
    position: relative;

    z-index: 2;
}


/* ==========================================================================
   META
   ========================================================================== */

.spotlight-section
.spotlight-meta {
    display: flex;

    align-items: center;

    gap: 9px;

    margin:
        0 0 19px;
}


.spotlight-section
.spotlight-meta span {
    color:
        #93aebb;

    font-size:
        9px;

    font-weight:
        900;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;
}


.spotlight-section
.spotlight-meta span:first-child {
    color:
        var(--gold);
}


/* ==========================================================================
   TITRE
   ========================================================================== */

.spotlight-section
.spotlight-header h2 {
    max-width:
        560px;

    margin:
        0;

    color:
        #fff;

    font:
        500
        clamp(50px, 4.7vw, 70px)
        / .94
        var(--serif);

    letter-spacing:
        -.055em;
}


/* ==========================================================================
   QUESTION PRINCIPALE
   ========================================================================== */

.spotlight-section
.spotlight-promise {
    position: relative;

    max-width:
        610px;

    margin-top:
        27px;

    padding-left:
        22px;
}


.spotlight-section
.spotlight-promise::before {
    content: "";

    position: absolute;

    left: 0;

    top: 3px;

    bottom: 3px;

    width: 2px;

    border-radius: 2px;

    background:
        var(--gold);
}


.spotlight-section
.spotlight-promise-label {
    display: block;

    margin-bottom:
        8px;

    color:
        #9d7b39;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;
}


.spotlight-section
.spotlight-promise p {
    margin: 0;

    color:
        #f7f5ef;

    font:
        italic
        500
        clamp(19px, 1.8vw, 24px)
        / 1.45
        var(--serif);
}


/* ==========================================================================
   HISTOIRE
   ========================================================================== */

.spotlight-section
.spotlight-story {
    max-width:
        630px;

    margin-top:
        31px;

    padding:
        22px
        24px
        20px;

    border:
        1px solid
        rgba(255,255,255,.075);

    border-radius:
        18px;

    background:
        rgba(255,255,255,.035);
}


.spotlight-section
.spotlight-story-head {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom:
        12px;
}


.spotlight-section
.spotlight-story
.spotlight-section-label {
    flex: 0 0 auto;

    margin: 0;

    color:
        var(--gold);

    font-size:
        8px;

    letter-spacing:
        .18em;
}


.spotlight-section
.spotlight-story-line {
    width: 100%;

    height: 1px;

    background:
        rgba(255,255,255,.10);
}


/* résumé maîtrisé */

.spotlight-section
.spotlight-summary {
    display:
        -webkit-box;

    margin: 0;

    overflow:
        hidden;

    color:
        #bdc9d2;

    font-size:
        14px;

    line-height:
        1.75;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        5;

    line-clamp:
        5;
}


/* lien sous résumé */

.spotlight-section
.spotlight-story-more {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top:
        13px;

    color:
        #fff;

    font-size:
        10px;

    font-weight:
        850;

    letter-spacing:
        .04em;
}


.spotlight-section
.spotlight-story-more span {
    color:
        var(--gold);

    transition:
        transform .2s ease;
}


.spotlight-section
.spotlight-story-more:hover span {
    transform:
        translateX(4px);
}


/* ==========================================================================
   QUESTIONS SECONDAIRES
   ========================================================================== */

.spotlight-section
.spotlight-reader-questions {
    max-width:
        630px;

    margin-top:
        25px;
}


.spotlight-section
.spotlight-reader-kicker {
    display: block;

    margin-bottom:
        10px;

    color:
        #8298a6;

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        .18em;

    text-transform:
        uppercase;
}


.spotlight-section
.spotlight-reader-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        9px;
}


.spotlight-section
.spotlight-reader-question {
    display: grid;

    grid-template-columns:
        auto
        1fr;

    gap:
        11px;

    padding:
        13px
        14px;

    border:
        1px solid
        rgba(255,255,255,.075);

    border-radius:
        14px;

    background:
        rgba(255,255,255,.025);
}


.spotlight-section
.spotlight-reader-number {
    color:
        var(--gold);

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        .10em;

    padding-top:
        3px;
}


.spotlight-section
.spotlight-reader-question p {
    margin: 0;

    color:
        #d9e1e6;

    font:
        italic
        500
        13px / 1.45
        var(--serif);
}


/* ==========================================================================
   THÈMES
   ========================================================================== */

.spotlight-section
.spotlight-themes-block {
    max-width:
        630px;

    margin-top:
        24px;
}


.spotlight-section
.spotlight-themes-block
.spotlight-section-label {
    margin-bottom:
        9px;

    color:
        #8ca0ad;

    font-size:
        8px;
}


.spotlight-section
.spotlight-themes {
    display: flex;

    flex-wrap: wrap;

    gap:
        7px;
}


.spotlight-section
.spotlight-themes span {
    padding:
        6px
        10px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        999px;

    background:
        transparent;

    color:
        #b9c5cd;

    font-size:
        9px;

    font-weight:
        800;
}


/* ==========================================================================
   FOOTER ÉDITORIAL
   ========================================================================== */

.spotlight-section
.spotlight-editorial-footer {
    max-width:
        630px;

    margin-top:
        25px;

    padding-top:
        17px;

    border-top:
        1px solid
        rgba(255,255,255,.09);
}


.spotlight-section
.spotlight-detail-link {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap:
        20px;

    color:
        #fff;

    font-size:
        11px;

    font-weight:
        850;
}


.spotlight-section
.spotlight-detail-link em {
    font-family:
        var(--serif);

    font-size:
        12px;

    font-weight:
        500;
}


.spotlight-section
.spotlight-detail-arrow {
    display: grid;

    place-items: center;

    width:
        34px;

    height:
        34px;

    flex:
        0 0 34px;

    border-radius:
        50%;

    background:
        rgba(255,255,255,.08);

    color:
        var(--gold);

    transition:
        transform .25s ease,
        background .25s ease;
}


.spotlight-section
.spotlight-detail-link:hover
.spotlight-detail-arrow {
    transform:
        translateX(4px);

    background:
        rgba(255,255,255,.13);
}


/* ==========================================================================
   TABLETTE
   ========================================================================== */

@media (max-width: 1080px) {

    .spotlight-section
    .spotlight-premium {
        grid-template-columns:
            1fr;
    }


    .spotlight-section
    .spotlight-visual {
        min-height:
            620px;

        padding:
            88px
            40px
            48px;
    }


    .spotlight-section
    .spotlight-cover {
        width:
            min(100%, 290px);
    }


    .spotlight-section
    .spotlight-content {
        padding:
            58px
            54px
            62px;
    }


    .spotlight-section
    .spotlight-header h2 {
        max-width:
            720px;
    }


    .spotlight-section
    .spotlight-story,
    .spotlight-section
    .spotlight-reader-questions,
    .spotlight-section
    .spotlight-themes-block,
    .spotlight-section
    .spotlight-editorial-footer {
        max-width:
            720px;
    }

}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 620px) {

    .spotlight-section {
        padding:
            65px
            0;
    }


    .spotlight-section
    .spotlight-premium {
        border-radius:
            26px;
    }


    .spotlight-section
    .spotlight-premium::before {
        left:
            26px;

        width:
            58px;
    }


    .spotlight-section
    .spotlight-visual {
        min-height:
            auto;

        padding:
            76px
            24px
            38px;
    }


    .spotlight-section
    .spotlight-visual::before {
        width:
            290px;

        height:
            290px;

        box-shadow:
            0 0 0 42px
            rgba(255,255,255,.055);
    }


    .spotlight-section
    .spotlight-featured-badge {
        top:
            22px;

        left:
            22px;

        padding:
            9px
            13px;

        font-size:
            8px;
    }


    .spotlight-section
    .spotlight-cover {
        width:
            min(78%, 225px);

        transform:
            none;
    }


    .spotlight-section
    .spotlight-visual-actions {
        grid-template-columns:
            1fr;

        width:
            min(100%, 280px);

        border-radius:
            22px;
    }


    .spotlight-section
    .spotlight-buy-link {
        min-height:
            40px;
    }


    .spotlight-section
    .spotlight-content {
        padding:
            43px
            25px
            47px;
    }


    .spotlight-section
    .spotlight-header h2 {
        font-size:
            clamp(
                42px,
                13vw,
                58px
            );
    }


    .spotlight-section
    .spotlight-promise {
        margin-top:
            24px;
    }


    .spotlight-section
    .spotlight-story {
        margin-top:
            27px;

        padding:
            19px
            18px;
    }


    .spotlight-section
    .spotlight-summary {
        font-size:
            13px;

        -webkit-line-clamp:
            6;

        line-clamp:
            6;
    }


    .spotlight-section
    .spotlight-reader-grid {
        grid-template-columns:
            1fr;
    }


    .spotlight-section
    .spotlight-content::before {
        font-size:
            150px;
    }

}

/* ==========================================================================
   À LA UNE — QUESTIONS DU LIVRE
   ========================================================================== */

.spotlight-section
.spotlight-question-rotator {
    position: relative;

    max-width: 610px;

    margin-top: 28px;

    padding:
        20px
        22px
        18px;

    border-left:
        2px solid
        var(--gold);

    background:
        linear-gradient(
            90deg,
            rgba(214, 169, 75, .055),
            transparent 70%
        );
}


/* =========================================================
   EN-TÊTE
   ========================================================= */

.spotlight-section
.spotlight-question-heading {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 10px;
}


.spotlight-section
.spotlight-question-heading
.spotlight-promise-label {
    margin: 0;

    color: #a9853e;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .19em;

    text-transform: uppercase;
}


/* compteur */

.spotlight-section
.spotlight-question-counter {
    display: inline-flex;

    align-items: baseline;

    gap: 5px;

    color: #667d8c;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .08em;
}


.spotlight-section
.spotlight-question-counter strong {
    color: var(--gold);
}


/* =========================================================
   ZONE DES QUESTIONS
   ========================================================= */

.spotlight-section
.spotlight-question-stage {
    position: relative;

    display: grid;

    min-height: 76px;
}


.spotlight-section
.spotlight-question-slide {
    grid-area: 1 / 1;

    align-self: center;

    margin: 0;

    color: #f8f6f0;

    font:
        italic
        500
        clamp(20px, 1.8vw, 25px)
        / 1.45
        var(--serif);

    opacity: 0;

    visibility: hidden;

    transform: translateY(8px);

    pointer-events: none;

    transition:
        opacity .45s ease,
        transform .45s ease,
        visibility .45s ease;
}


.spotlight-section
.spotlight-question-slide.is-active {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.spotlight-section
.spotlight-question-navigation {
    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 13px;

    margin-top: 13px;
}


.spotlight-section
.spotlight-question-nav {
    display: grid;

    place-items: center;

    width: 28px;

    height: 28px;

    padding: 0;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 50%;

    background:
        rgba(255,255,255,.035);

    color: #b8c7cf;

    cursor: pointer;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease;
}


.spotlight-section
.spotlight-question-nav:hover {
    color: var(--gold);

    border-color:
        rgba(214,169,75,.35);

    background:
        rgba(214,169,75,.07);
}


/* =========================================================
   BARRE DE PROGRESSION
   ========================================================= */

.spotlight-section
.spotlight-question-progress {
    position: relative;

    height: 1px;

    overflow: hidden;

    background:
        rgba(255,255,255,.10);
}


.spotlight-section
.spotlight-question-progress-bar {
    display: block;

    width: 0;

    height: 100%;

    background: var(--gold);
}


/* animation relancée par JS */

.spotlight-section
.spotlight-question-progress-bar.is-running {
    animation:
        spotlightQuestionProgress
        6s
        linear
        forwards;
}


@keyframes spotlightQuestionProgress {

    from {
        width: 0;
    }

    to {
        width: 100%;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 620px) {

    .spotlight-section
    .spotlight-question-rotator {
        margin-top: 24px;

        padding:
            17px
            17px
            15px;
    }


    .spotlight-section
    .spotlight-question-stage {
        min-height: 90px;
    }


    .spotlight-section
    .spotlight-question-slide {
        font-size: 19px;
    }

}


/* accessibilité */

@media (prefers-reduced-motion: reduce) {

    .spotlight-section
    .spotlight-question-slide {
        transition: none;
    }


    .spotlight-section
    .spotlight-question-progress-bar {
        animation: none !important;
    }

}