/* ==========================================================================
   Patinae — feuille de style du site public
   Les jetons de couleur, de type et de rayon reprennent ceux de l'application
   (resources/css/app.css). Toute modification doit rester synchronisée.
   ========================================================================== */

/* --- 1. Jetons ----------------------------------------------------------- */

:root {
    /* Encre et papier */
    --noir: #0a0a0a;
    --ink: #121211;
    --ink-800: #1a1a19;
    --ink-700: #2e2d2c;
    --ink-600: #474644;
    --gray-500: #6a6967;
    --gray-400: #8a8986;
    --gray-300: #abaaa7;
    --gray-200: #d2d1ce;
    --gray-100: #e7e6e4;
    --gray-50: #f5f5f4;
    --paper: #faf8f5;
    --ivory: #f4f1ec;

    /* Accents. Le magenta appartient au monde des propriétaires,
       le laiton à celui des marques et des ateliers. */
    --magenta: #c2185b;
    --magenta-deep: #82103d;
    /* Teinte de marque figée : sert aux éléments qui ne doivent pas suivre
       l'accent laiton des pages marques. */
    --magenta-fixe: #c2185b;
    --laiton: #8f6f2f;
    --laiton-pale: #f3ede1;
    --succes: #2f6b4f;

    /* Familles */
    --font-display: 'Cabinet Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --font-sans: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --font-label: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
    --font-code: ui-monospace, 'SFMono-Regular', Menlo, monospace;

    /* Échelle */
    --t-caption: 0.78rem;
    --t-body-sm: 0.9375rem;
    --t-body: 1.0625rem;
    --t-body-lg: 1.1875rem;
    --t-d-sm: 1.5rem;
    --t-d-md: clamp(1.6rem, 2.5vw, 2.25rem);
    --t-d-lg: clamp(2rem, 3.6vw, 3.25rem);
    --t-d-xl: clamp(2.1rem, 3.8vw, 3.5rem);

    --tracking-label: 0.2em;
    --tracking-tag: 0.06em;

    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 10px;

    --shadow-card: 0 1px 2px rgb(18 18 17 / 0.05);
    --shadow-luxe: 0 14px 44px -16px rgb(18 18 17 / 0.2);
    --shadow-lift: 0 28px 70px -28px rgb(18 18 17 / 0.35);

    --ease-luxe: cubic-bezier(0.22, 1, 0.36, 1);

    --gutter: clamp(1.25rem, 5vw, 3.5rem);
}

/* --- 2. Socle ------------------------------------------------------------ */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

body {
    margin: 0;
    /* Colonne pleine hauteur : sur une page courte, le pied reste en bas de la
       fenêtre au lieu de flotter au milieu. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    color: var(--ink-800);
    font-family: var(--font-sans);
    font-size: var(--t-body);
    line-height: 1.75;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main {
    flex: 1;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--ink);
}

p {
    margin: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
}

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

a {
    color: inherit;
    text-decoration-color: var(--gray-300);
    text-underline-offset: 0.25em;
}

a:hover {
    text-decoration-color: var(--magenta);
}

::selection {
    background: var(--magenta);
    color: #fff;
}

:focus-visible {
    border-radius: var(--radius-xs);
    outline: 2px solid var(--magenta);
    outline-offset: 3px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 100;
    padding: 0.6rem 1rem;
    background: var(--ink);
    color: var(--paper);
    font-size: var(--t-body-sm);
    border-radius: var(--radius-sm);
    transform: translateY(-200%);
}

.skip-link:focus-visible {
    transform: translateY(0);
}

/* --- 3. Blocs de mise en page -------------------------------------------- */

.wrap {
    width: 100%;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

@media (min-width: 640px) {
    .wrap {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .wrap {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .wrap {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .wrap {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {
    .wrap {
        max-width: 1536px;
    }
}

/* Déclaré après les paliers : la mesure de lecture d'un article prime sur
   la largeur du container, quelle que soit la taille de l'écran. */
.wrap--narrow {
    max-width: 820px;
}

.section {
    padding-block: clamp(4.5rem, 9vw, 8.25rem);
}

.section--tight {
    padding-block: clamp(3rem, 6vw, 5rem);
}

/* Groupes de questions : quatre sections successives, dont les marges se
   cumulaient. Resserrées, elles se lisent comme une seule liste. */
.section--faq {
    padding-block: clamp(1.25rem, 2.5vw, 2rem);
}

.section--ivory {
    background: var(--ivory);
}

.section--ink {
    background: var(--ink);
    color: var(--gray-200);
}

.section--ink h1,
.section--ink h2,
.section--ink h3 {
    color: var(--paper);
}



.stack {
    display: grid;
    gap: 1.25rem;
}

.stack--sm {
    gap: 0.6rem;
}

.stack--lg {
    gap: 2.25rem;
}

/* --- 4. Typographie applicative ------------------------------------------ */





.display-xl {
    font-size: var(--t-d-xl);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.032em;
}

.display-lg {
    font-size: var(--t-d-lg);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.028em;
}

.display-md {
    font-size: var(--t-d-md);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -0.022em;
}

.display-sm {
    font-size: var(--t-d-sm);
    font-weight: 500;
    line-height: 1.26;
    letter-spacing: -0.015em;
}

.lede {
    font-size: var(--t-body-lg);
    line-height: 1.7;
    color: var(--ink-600);
    max-width: 46ch;
}

.section--ink .lede {
    color: var(--gray-300);
}

.prose-muted {
    color: var(--gray-500);
    max-width: 62ch;
}

.section--ink .prose-muted {
    color: var(--gray-300);
}

.small {
    font-size: var(--t-body-sm);
}

.caption {
    font-size: var(--t-caption);
    color: var(--gray-500);
}

/* Avec un garamond, l'italique marquait le retournement de la phrase. Un
   grotesque n'a pas de vraie italique : le contraste de ton fait le même
   travail sans l'oblique. Réservé aux tailles display, où 3:1 suffit. */
em.soft {
    font-style: normal;
    color: var(--gray-400);
}

/* La seconde phrase est posée sur une pastille opaque : c'est ce qui la rend
   lisible quelle que soit la zone de la photo qu'elle traverse — 18,5:1,
   là où le texte libre tombait à 1,4:1 sur la robe claire. */
.hero__title .soft {
    display: inline-block;
    padding: 0.04em 0.3em 0.12em;
    border-radius: 0.2em;
    background: var(--paper);
    color: var(--ink);
}


/* --- 5. Boutons et liens ------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.85rem 1.6rem;
    border: 1px solid var(--ink);
    border-radius: var(--radius-sm);
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-sans);
    font-size: var(--t-body-sm);
    font-weight: 500;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    transition:
        background 0.35s var(--ease-luxe),
        border-color 0.35s var(--ease-luxe),
        color 0.35s var(--ease-luxe),
        transform 0.35s var(--ease-luxe);
}

.btn:hover {
    background: var(--magenta-deep);
    border-color: var(--magenta-deep);
    color: #fff;
    transform: translateY(-1px);
}

.btn--ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--gray-300);
}

.btn--ghost:hover {
    background: transparent;
    color: var(--magenta-deep);
    border-color: var(--magenta);
}

.btn--light {
    background: var(--paper);
    border-color: var(--paper);
    color: var(--ink);
}

.btn--light:hover {
    background: #fff;
    border-color: #fff;
    color: var(--magenta-deep);
}

.btn--outline-light {
    background: transparent;
    border-color: rgb(250 248 245 / 0.32);
    color: var(--paper);
}

.btn--outline-light:hover {
    background: transparent;
    border-color: var(--paper);
    color: #fff;
}

.btn--sm {
    padding: 0.55rem 1.05rem;
    font-size: var(--t-caption);
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: center;
}

/* Lien fléché : la flèche avance au survol. */
.arrow-link {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: var(--t-body-sm);
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: 0.15rem;
    transition:
        color 0.3s var(--ease-luxe),
        border-color 0.3s var(--ease-luxe);
}

.arrow-link::after {
    content: '→';
    font-family: var(--font-label);
    transition: transform 0.3s var(--ease-luxe);
}

.arrow-link:hover {
    color: var(--magenta-deep);
    border-color: var(--magenta);
}

.arrow-link:hover::after {
    transform: translateX(3px);
}

.section--ink .arrow-link {
    color: var(--paper);
    border-color: rgb(250 248 245 / 0.3);
}

.section--ink .arrow-link:hover {
    color: #fff;
    border-color: var(--paper);
}

/* Certains appels à l'action ouvrent la modale plutôt qu'une page : ce sont
   des boutons, et l'on efface ce que le navigateur leur dessine d'office. */

button.btn {
    line-height: inherit;
}

button.arrow-link {
    border-top: 0;
    border-right: 0;
    border-left: 0;
    background: transparent;
    font-family: var(--font-sans);
    cursor: pointer;
}

/* --- 6. En-tête ---------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--paper);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: 72px;
}

.site-header__logo img {
    height: 26px;
    width: auto;
}

.site-nav {
    display: none;
}

@media (min-width: 1000px) {
    .site-nav {
        display: flex;
        align-items: center;
        gap: 2rem;
    }
}

.site-nav a {
    font-size: var(--t-body-sm);
    color: var(--ink-600);
    text-decoration: none;
    position: relative;
    padding-block: 0.35rem;
    transition: color 0.3s var(--ease-luxe);
}

.site-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--magenta);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease-luxe);
}

.site-nav a:hover,
.site-nav a[aria-current='page'] {
    color: var(--ink);
}

.site-nav a:hover::after,
.site-nav a[aria-current='page']::after {
    transform: scaleX(1);
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Sélecteur de langue : discret, mais toujours au même endroit. */
/* Sous 1000px le sélecteur descend dans le menu déroulant : l'en-tête garde
   le logo, le bouton « M'avertir » et l'ouverture du menu, rien de plus. */
@media (max-width: 999px) {
    .lang-switch {
        display: none;
    }
}

.lang-switch {
    font-family: var(--font-label);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--gray-500);
    text-decoration: none;
    padding: 0.3rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: color 0.3s var(--ease-luxe), background 0.3s var(--ease-luxe);
}

.lang-switch:hover {
    color: var(--ink);
    background: var(--gray-100);
}

.menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0 8px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

@media (min-width: 1000px) {
    .menu-toggle {
        display: none;
    }
}

.menu-toggle span {
    display: block;
    height: 1px;
    background: var(--ink);
    transition: transform 0.3s var(--ease-luxe);
}

.mobile-nav {
    display: grid;
    gap: 0.25rem;
    padding: 0 var(--gutter) 1.75rem;
    border-bottom: 1px solid var(--gray-200);
    background: var(--paper);
}

.mobile-nav[hidden] {
    display: none;
}

.mobile-nav a {
    padding: 0.6rem 0;
    font-size: var(--t-body);
    text-decoration: none;
}

/* Langue et compte ne sont pas des pages : un filet les sort de la liste. */
.mobile-nav__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
}

.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0.125rem;
    border-radius: var(--radius-sm);
    background: var(--gray-100);
}

.mobile-nav .lang-toggle > * {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.5rem;
    padding: 0 0.7rem;
    border-radius: calc(var(--radius-sm) - 0.125rem);
    font-family: var(--font-label);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1;
    color: var(--ink-600);
    text-decoration: none;
}

.mobile-nav .lang-toggle [aria-current] {
    background: var(--paper);
    color: var(--ink);
}

/* --- 7. Héros ------------------------------------------------------------ */

.hero {
    position: relative;
    overflow: hidden;
    background: var(--ivory);
}

.hero__media {
    position: absolute;
    inset: 0;
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* La photo est en miroir : les personnages sont à gauche, le cadrage s'y
       ancre. Calé haut aussi, les visages tenant dans le tiers supérieur. */
    object-position: 0% 22%;
}

/* Le voile garantit le contraste du titre sur le tiers gauche de la photo. */
.hero__veil {
    position: absolute;
    inset: 0;
    background: rgb(12 12 11 / 0.6);
}

.hero__inner {
    position: relative;
    display: grid;
    align-items: center;
    gap: 3rem;
    min-height: min(86vh, 700px);
    padding-block: clamp(3.5rem, 8vw, 6rem);
}

@media (min-width: 1000px) {
    .hero__inner {
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    }
}

.hero__copy {
    display: grid;
    gap: 1.5rem;
    max-width: 46rem;
}

/* Texte clair sur voile sombre. Les valeurs sont mesurées sur le composite
   réel (voile + photo), pas sur le voile seul. */
.hero__title {
    color: var(--paper);
}

.hero .lede {
    color: var(--paper);
    max-width: 64ch;
}

/* Corps du hero : trois paragraphes qui prolongent le lede. Un cran de taille
   les tient sous lui, la couleur reste celle du lede. */
.hero__body {
    display: grid;
    gap: 0.85rem;
    max-width: 64ch;
    font-size: var(--t-body);
    line-height: 1.7;
    color: var(--paper);
}

.hero__body strong {
    font-weight: 600;
}

.hero .btn {
    background: var(--paper);
    border-color: var(--paper);
    color: var(--ink);
}

.hero .btn:hover {
    background: #fff;
    border-color: #fff;
    color: var(--magenta-deep);
}

.hero .arrow-link {
    color: var(--paper);
    border-color: rgb(250 248 245 / 0.34);
}

.hero .arrow-link:hover {
    color: #fff;
    border-color: var(--paper);
}

/* Une phrase par ligne : chaque membre est un bloc, et au-delà du palier où
   la colonne est assez large, aucune ne se coupe. En dessous, le repli
   naturel reprend — un titre à 29 signes ne tient pas sur 350 px. */
.hero__title > * {
    display: block;
    /* Là où le repli reste inévitable, il coupe au milieu plutôt que de
       laisser un mot seul sur la seconde ligne. */
    text-wrap: balance;
}

@media (min-width: 1000px) {
    .hero__title {
        font-size: clamp(2.93rem, 4.35vw, 4.58rem);
    }

    .hero__title > * {
        white-space: nowrap;
    }
}

@media (max-width: 999px) {
    .hero__media img {
        object-position: 28% 30%;
    }

    .hero__veil {
        background: linear-gradient(
            180deg,
            rgb(12 12 11 / 0.88) 0%,
            rgb(12 12 11 / 0.8) 46%,
            rgb(12 12 11 / 0.55) 100%
        );
    }

    /* La pastille blanche est dessinée pour une ligne unique. Sur une colonne
       étroite la phrase passe à deux lignes et le fond devient un pavé au bord
       droit irrégulier. Le voile assure déjà 17:1 sur le blanc : on rend la
       ligne au titre. */
    .hero__title .soft {
        display: inline;
        padding: 0;
        border-radius: 0;
        background: none;
        color: inherit;
    }

    .hero__inner {
        gap: 2.25rem;
        min-height: 0;
        padding-block: clamp(2.75rem, 7vw, 3.5rem);
    }
}

/* --- 8. Le jeu de cartes du héros --------------------------------------- */
/* Une carte en pleine lecture, les suivantes décalées vers la droite dont on
   n'aperçoit que la tranche. La rotation est automatique mais s'interrompt au
   survol, au focus et dès que l'on prend la main sur les repères. */

.deck {
    display: grid;
    gap: 1rem;
    justify-items: start;
    width: 100%;
    max-width: 30rem;
    /* Les cartes du fond se décalent vers la droite : la réserve leur évite de
       déborder du container, et cale la tranche sur son bord. */
    padding-right: 3.5rem;
}


@media (min-width: 1000px) {
    .deck {
        justify-self: end;
        /* Calée en bas : les visages occupent le haut de la photo, la carte
           ne doit pas passer devant. */
        align-self: end;
    }
}

.deck__stack {
    position: relative;
    display: grid;
    width: 100%;
    list-style: none;
}

/* Toutes les cartes occupent la même cellule : la pile prend la hauteur de la
   plus haute, sans hauteur figée à maintenir. */
.deck__card {
    grid-area: 1 / 1;
    display: grid;
    gap: 0.75rem;
    align-content: start;
    padding: 1.4rem 1.4rem 1.5rem;
    background: var(--paper);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lift);
    position: relative;
    transform: translateX(calc(var(--i) * 1.15rem)) scale(calc(1 - var(--i) * 0.05));
    pointer-events: none;
    transition:
        transform 0.75s var(--ease-luxe),
        opacity 0.75s var(--ease-luxe);
}

/* Le z-index est posé par le script : dans Chrome, un z-index: calc(var(--i))
   ne se réinvalide pas de façon fiable et la pile se désordonne. */

.deck__card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--paper);
    opacity: calc(var(--i) * 0.32);
    transition: opacity 0.75s var(--ease-luxe);
    pointer-events: none;
}

.deck__card[data-current] {
    pointer-events: auto;
}

/* Au-delà de la troisième tranche, la carte attend hors champ. */
.deck__card[data-hidden] {
    opacity: 0;
    transform: translateX(3.45rem) scale(0.85);
}
@media (max-width: 640px) {
    .deck {
        padding-right: 2.2rem;
    }

    .deck__card {
        transform: translateX(calc(var(--i) * 0.7rem)) scale(calc(1 - var(--i) * 0.04));
    }

    .deck__card[data-hidden] {
        transform: translateX(2.1rem) scale(0.88);
    }
}

.deck__head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.deck__thumb {
    width: 3rem;
    height: 3rem;
    flex: none;
    border-radius: var(--radius-xs);
    background: var(--ivory);
    object-fit: cover;
}

.deck__ident {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.deck__name {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: -0.014em;
    line-height: 1.25;
    color: var(--ink);
}

.deck__spec {
    font-family: var(--font-label);
    font-size: 0.625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.deck__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-label);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: var(--gray-500);
    font-variant-numeric: tabular-nums;
    padding-top: 0.7rem;
    border-top: 1px solid var(--gray-100);
}

.deck__meta::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--magenta);
    flex: none;
}

.deck__message {
    font-size: var(--t-body-sm);
    line-height: 1.68;
    color: var(--ink-700);
}

.deck__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 8 / 5;
    object-fit: cover;
    border-radius: var(--radius-xs);
    background: var(--gray-100);
}

.deck__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    font-size: var(--t-caption);
    color: var(--gray-500);
}

.deck__foot span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.deck__foot svg {
    width: 13px;
    height: 13px;
    stroke: var(--gray-400);
    fill: none;
    stroke-width: 1.6;
}

/* Repères : ils situent la lecture et servent de commande de pause. Le point
   visible reste discret, mais la cible cliquable fait 2,5 rem. */
.deck__nav {
    display: flex;
    align-items: center;
    justify-self: center;
    gap: 0;
    padding: 0;
    border: 0;
    margin: 0;
}

/* La cible garde 26 x 40 px — au-dessus du minimum tactile — mais se resserre
   en largeur pour que les points paraissent groupés. */
.deck__dot {
    width: 1.6rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: grid;
    place-items: center;
}

.deck__dot::before {
    content: '';
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--gray-100);
    opacity: 0.55;
    transition:
        background 0.4s var(--ease-luxe),
        opacity 0.4s var(--ease-luxe),
        transform 0.4s var(--ease-luxe);
}

.deck__dot[aria-current='true']::before {
    background: #fff;
    opacity: 1;
    transform: scale(1.15);
}

.deck__dot:hover::before {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .deck__card {
        transition: none;
    }
}

/* Badge : étiquette courte et réutilisable. Prend l'accent de la page, donc
   passe au laiton sur les pages marques sans règle supplémentaire. */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    justify-self: start;
    padding: 0.28rem 0.55rem;
    border-radius: var(--radius-sm);
    background: var(--magenta-fixe);
    color: var(--paper);
    font-family: var(--font-label);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    line-height: 1.35;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge--neutre {
    background: var(--gray-100);
    color: var(--ink-600);
}


.section--ink .badge--neutre {
    background: rgb(250 248 245 / 0.1);
    color: var(--gray-200);
}

/* En-tête de page intérieure : le texte à gauche, un visuel à droite plutôt
   qu'une image pleine largeur qui écrase la suite. */
/* Le texte est calé en haut : centré, il descendait d'une moitié de l'écart
   entre la colonne de texte et l'image, donc d'une valeur différente sur
   chaque page. Les titres des pages intérieures démarrent maintenant tous à
   la même hauteur. */
.page-hero {
    display: grid;
    gap: 2.5rem;
    align-items: start;
}

@media (min-width: 900px) {
    .page-hero {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
        gap: 4rem;
    }
}

/* Bloc d'appel final : centré, pour qu'il se distingue du corps de page. */
.cta-block {
    display: grid;
    gap: 1.25rem;
    justify-items: center;
    max-width: 44rem;
    margin-inline: auto;
    text-align: center;
}

.cta-block .lede {
    max-width: 52ch;
}

.cta-block .btn-row {
    justify-content: center;
    margin-top: 0.5rem;
}

/* Citation mise en avant : l'énoncé porte seul, sans liste sous lui. Le filet
   d'accent tient lieu de guillemets — la phrase n'est attribuée à personne. */
.pull {
    display: grid;
    gap: 1.5rem;
    justify-items: center;
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
}

.pull__quote {
    margin: 0;
    padding-top: 1.75rem;
    position: relative;
    max-width: 26ch;
    font-family: var(--font-display);
    font-size: var(--t-d-md);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.022em;
    color: var(--paper);
}

.pull__quote::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2.5rem;
    height: 2px;
    transform: translateX(-50%);
    background: var(--magenta);
}

.pull .lede {
    max-width: 54ch;
}

/* Énoncé centré : une phrase par ligne, borné à une mesure lisible. */
.statement {
    max-width: 30ch;
    margin-inline: auto;
    text-align: center;
    text-wrap: balance;
}

.statement > * {
    display: block;
}

/* Trois colonnes sous l'énoncé. Aucun filet : la gouttière suffit à les
   séparer, et le texte reste ferré à gauche pour rester lisible. */
.pillars {
    list-style: none;
    display: grid;
    gap: 2.25rem;
    max-width: 68rem;
    margin-inline: auto;
}

/* Pas avant 1024 px : entre 768 et 1023 le container plafonne à 768 px, et
   trois colonnes y tomberaient à 193 px — des lignes de 26 signes. */
@media (min-width: 1024px) {
    .pillars {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3.5rem;
    }
}

.pillars > li {
    display: grid;
    gap: 0.65rem;
    align-content: start;
}


.pillars__text {
    font-size: var(--t-body-sm);
    line-height: 1.72;
    color: var(--gray-500);
}

/* --- 9. Filets et listes ------------------------------------------------ */

.hairline {
    height: 1px;
    background: var(--gray-100);
    border: 0;
    margin: 0;
}

.section--ink .hairline {
    background: rgb(250 248 245 / 0.16);
}

/* Une liste de constats séparés par des filets, sans puces ni numéros. */
.ledger {
    list-style: none;
    display: grid;
    max-width: 58rem;
}

.ledger > li {
    display: grid;
    gap: 0.35rem 2.5rem;
    padding-block: 1.5rem;
    border-top: 1px solid var(--gray-100);
}

.ledger > li:first-child {
    border-top: 0;
    padding-top: 0;
}

@media (min-width: 760px) {
    .ledger > li {
        grid-template-columns: 220px minmax(0, 1fr);
        align-items: baseline;
    }
}

/* Le corps du registre passe à l'encre pleine : gris, il se lisait comme une
   note secondaire alors que c'est le propos de la section. */
.ledger > li > .prose-muted {
    color: var(--ink);
}

.section--ink .ledger > li > .prose-muted {
    color: var(--gray-100);
}

.ledger__term {
    font-family: var(--font-label);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--gray-500);
}

.section--ink .ledger__term {
    color: var(--gray-400);
}

.section--ink .ledger > li {
    border-color: rgb(250 248 245 / 0.12);
}

/* Fiche technique en chasse fixe : des faits, pas des promesses. */
.spec {
    list-style: none;
    display: grid;
    max-width: 62rem;
    font-family: var(--font-label);
    font-size: var(--t-body-sm);
}

.spec > li {
    display: grid;
    gap: 0.2rem 2rem;
    padding-block: 0.95rem;
    border-top: 1px solid rgb(250 248 245 / 0.12);
}

.spec > li:first-child {
    border-top: 0;
    padding-top: 0;
}

@media (min-width: 700px) {
    .spec > li {
        grid-template-columns: 15rem minmax(0, 1fr);
    }

    .spec__value {
        max-width: 68ch;
    }
}

.spec__key {
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray-400);
}

.spec__value {
    color: var(--paper);
}

/* --- 10. Cartes ---------------------------------------------------------- */

.cards {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 700px) {
    .cards--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cards--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1000px) {
    .cards--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cards--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 700px) and (max-width: 999px) {
    .cards--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.card {
    display: grid;
    gap: 0.6rem;
    align-content: start;
    padding: 1.75rem 1.6rem;
    background: var(--ivory);
    border: 0;
    border-radius: var(--radius-sm);
}

.section--ivory .card {
    background: var(--paper);
}

.card__title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.014em;
    color: var(--ink);
}

.card__text {
    font-size: var(--t-body-sm);
    color: var(--gray-500);
}

.section--ink .card {
    background: var(--ink-800);
}

.section--ink .card__title {
    color: var(--paper);
}

.section--ink .card__text {
    color: var(--gray-300);
}

/* --- 11. Étapes ---------------------------------------------------------- */
/* Trois moments dans un ordre qui compte réellement : le numéro porte donc
   une information, il n'est pas décoratif. */

.steps {
    list-style: none;
    display: grid;
    gap: 2.5rem;
    counter-reset: step;
}

@media (min-width: 900px) {
    .steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2.5rem;
    }
}

.steps > li {
    counter-increment: step;
    display: grid;
    gap: 0.7rem;
    align-content: start;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-200);
    position: relative;
}

.steps > li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    top: -0.75rem;
    left: 0;
    padding-right: 0.6rem;
    background: var(--paper);
    font-family: var(--font-label);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--magenta);
}

.section--ivory .steps > li::before {
    background: var(--ivory);
}

.section--ink .steps > li::before {
    background: var(--ink);
}

.section--ink .steps > li {
    border-color: rgb(250 248 245 / 0.24);
}

.section--ink .steps__text {
    color: var(--gray-300);
}

/* Le monde des marques emprunte le laiton des platines de mouvement
   là où celui des propriétaires emploie le magenta. */
.tone-laiton {
    --magenta: #8a6a2c;
    --magenta-deep: #6f5522;
}

.steps__title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.014em;
}

.steps__text {
    font-size: var(--t-body-sm);
    color: var(--gray-500);
}

/* --- 12. La bifurcation : deux publics ----------------------------------- */

.fork {
    display: grid;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

@media (min-width: 900px) {
    .fork {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.fork__panel {
    display: grid;
    gap: 1rem;
    align-content: space-between;
    padding: clamp(2rem, 4vw, 3.25rem);
    background: var(--ivory);
    min-height: 22rem;
    text-decoration: none;
    transition: background 0.45s var(--ease-luxe);
}

.fork__panel:hover {
    background: var(--paper);
}

.fork__panel--marques {
    background: var(--ink);
    color: var(--gray-300);
}

.fork__panel--marques:hover {
    background: var(--ink-800);
}

.fork__panel--marques .fork__title {
    color: var(--paper);
}

.fork__panel--marques .fork__text {
    color: var(--gray-300);
}

.fork__title {
    font-family: var(--font-display);
    font-size: var(--t-d-md);
    font-weight: 500;
    line-height: 1.16;
    letter-spacing: -0.018em;
    color: var(--ink);
}

.fork__text {
    font-size: var(--t-body-sm);
    color: var(--gray-500);
    max-width: 34ch;
}

.fork__list {
    list-style: none;
    display: grid;
    gap: 0.5rem;
    font-size: var(--t-body-sm);
}

.fork__list li {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
}

.fork__list li::before {
    content: '—';
    color: var(--magenta);
    font-family: var(--font-label);
    font-size: 0.75rem;
}

.fork__panel--marques .fork__list li::before {
    color: var(--laiton);
}

/* Enfant direct d'une grille, le lien s'étirerait sur toute la colonne et son
   filet se lirait comme un séparateur. */
.fork__panel .arrow-link {
    justify-self: start;
}

.fork__panel--marques .arrow-link {
    color: var(--paper);
    border-color: rgb(250 248 245 / 0.3);
}

.fork__panel--marques .arrow-link:hover {
    color: #fff;
    border-color: var(--paper);
}

/* --- 13. Figures --------------------------------------------------------- */

.figure {
    margin: 0;
    display: grid;
    gap: 0.75rem;
}

.figure img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-xs);
    background: var(--gray-100);
}

.figure figcaption {
    font-family: var(--font-label);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.split {
    display: grid;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}

@media (min-width: 900px) {
    .split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .split--reverse > :first-child {
        order: 2;
    }
}

/* --- 14. Tarifs ---------------------------------------------------------- */

.plans {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 900px) {
    .plans {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: start;
    }
}

.plan {
    display: grid;
    gap: 1.25rem;
    align-content: start;
    padding: 2rem 1.75rem;
    background: var(--ivory);
    border-radius: var(--radius-sm);
}

.plan--featured {
    background: var(--ink);
    color: var(--gray-300);
}

.plan--featured .plan__name,
.plan--featured .plan__price {
    color: var(--paper);
}

.plan--featured .plan__features li::before {
    color: var(--magenta);
}

.plan__name {
    font-family: var(--font-label);
    font-size: 0.6875rem;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink);
}

.plan__price {
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.022em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.plan__price small {
    font-family: var(--font-sans);
    font-size: var(--t-body-sm);
    font-weight: 400;
    color: var(--gray-500);
}

.plan__note {
    font-size: var(--t-body-sm);
    color: var(--gray-500);
}

.plan--featured .plan__note {
    color: var(--gray-300);
}

.plan__features {
    list-style: none;
    display: grid;
    gap: 0.6rem;
    font-size: var(--t-body-sm);
}

.plan__features li {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr);
    gap: 0.6rem;
    align-items: baseline;
}

.plan__features li::before {
    content: '—';
    font-family: var(--font-label);
    font-size: 0.75rem;
    color: var(--magenta);
}

/* --- 15. FAQ ------------------------------------------------------------- */

.faq {
    display: grid;
    max-width: 58rem;
}

.faq details + details {
    border-top: 1px solid var(--gray-100);
}

.faq summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 1.35rem;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.012em;
    color: var(--ink);
    cursor: pointer;
    list-style: none;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: '+';
    font-family: var(--font-label);
    font-size: 1rem;
    color: var(--magenta);
    transition: transform 0.3s var(--ease-luxe);
}

.faq details[open] summary::after {
    content: '−';
}

.faq__answer:not(:last-child) {
    padding-bottom: 0.85rem;
}

.faq__answer {
    padding-bottom: 1.5rem;
    font-size: var(--t-body-sm);
    color: var(--gray-500);
    max-width: 66ch;
}

/* --- 16. Blog ------------------------------------------------------------ */

.post-list {
    list-style: none;
    display: grid;
    gap: 2rem;
}

@media (min-width: 800px) {
    .post-list--grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.post-card {
    display: grid;
    gap: 0.85rem;
    align-content: start;
    text-decoration: none;
}

.post-card__media {
    overflow: hidden;
    border-radius: var(--radius-xs);
    background: var(--gray-100);
    aspect-ratio: 16 / 9;
}

.post-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease-luxe);
}

.post-card:hover .post-card__media img {
    transform: scale(1.035);
}

.post-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-family: var(--font-label);
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.post-card__title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.24;
    letter-spacing: -0.014em;
    color: var(--ink);
    transition: color 0.3s var(--ease-luxe);
}

.post-card:hover .post-card__title {
    color: var(--magenta-deep);
}

.post-card__excerpt {
    font-size: var(--t-body-sm);
    color: var(--gray-500);
}

/* Article */

.article-hero {
    display: grid;
    gap: 1.5rem;
    padding-block: clamp(3rem, 6vw, 5rem) 2rem;
}

.article-body {
    display: grid;
    gap: 1.4rem;
    font-size: var(--t-body);
    line-height: 1.8;
    color: var(--ink-700);
}

.article-body h2 {
    margin-top: 1.75rem;
    font-size: var(--t-d-sm);
}

.article-body h3 {
    margin-top: 1rem;
    font-family: var(--font-sans);
    font-size: var(--t-body);
    font-weight: 600;
    color: var(--ink);
}

.article-body ul,
.article-body ol {
    display: grid;
    gap: 0.5rem;
    padding-left: 1.15rem;
}

.article-body li::marker {
    color: var(--gray-300);
}

.article-body a {
    color: var(--magenta-deep);
    text-decoration: underline;
    text-decoration-color: var(--magenta);
}

.article-body blockquote {
    margin: 0.75rem 0;
    padding-left: 1.5rem;
    border-left: 2px solid var(--magenta);
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.article-body figure {
    margin: 1rem 0;
}

.article-body img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-xs);
}

.article-body code {
    font-family: var(--font-code);
    font-size: 0.875em;
    background: var(--ivory);
    padding: 0.1em 0.35em;
    border-radius: var(--radius-xs);
}

.callout {
    display: grid;
    gap: 0.5rem;
    padding: 1.4rem 1.5rem;
    background: var(--ivory);
    border-left: 2px solid var(--magenta);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: var(--t-body-sm);
    color: var(--ink-600);
}

.callout__title {
    font-family: var(--font-label);
    font-size: 0.6875rem;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--magenta);
}

/* --- 17. Formulaire ------------------------------------------------------ */

.field {
    display: grid;
    gap: 0.4rem;
}

.field label {
    font-family: var(--font-label);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 0.75rem 0.9rem;
    font-family: var(--font-sans);
    font-size: max(1rem, var(--t-body-sm));
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    transition: border-color 0.3s var(--ease-luxe);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--magenta);
    outline: none;
}

.field textarea {
    min-height: 9rem;
    resize: vertical;
}

.field__help {
    font-size: var(--t-caption);
    color: var(--gray-500);
}

/* --- 18. Pied de page ---------------------------------------------------- */

.site-footer {
    background: var(--ink);
    color: var(--gray-300);
    padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}

.site-footer h2,
.site-footer h3 {
    color: var(--paper);
}

.site-footer__grid {
    display: grid;
    gap: 2.5rem;
}

@media (min-width: 760px) {
    .site-footer__grid {
        grid-template-columns: 1.4fr repeat(2, minmax(0, 1fr));
        gap: 3rem;
    }
}

.site-footer__logo img {
    height: 22px;
    width: auto;
    filter: invert(1);
}

.site-footer__col h3 {
    font-family: var(--font-label);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--gray-400);
    margin-bottom: 0.9rem;
}

.site-footer__col ul {
    list-style: none;
    display: grid;
    gap: 0.55rem;
    font-size: var(--t-body-sm);
}

.site-footer__col a {
    text-decoration: none;
    color: var(--gray-300);
    transition: color 0.3s var(--ease-luxe);
}

.site-footer__col a:hover {
    color: var(--paper);
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgb(250 248 245 / 0.16);
    font-family: var(--font-label);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    color: var(--gray-400);
}

/* --- 19. Révélations au défilement --------------------------------------- */

.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 0.8s var(--ease-luxe),
        transform 0.8s var(--ease-luxe);
}

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

/* --- 20. Modale « M'avertir » -------------------------------------------- */

.notify {
    width: min(30rem, calc(100vw - 2 * var(--gutter)));
    padding: 0;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: var(--paper);
    color: var(--ink);
    box-shadow: var(--shadow-lift);
}

.notify::backdrop {
    background: rgb(10 10 10 / 0.55);
}

.notify__inner {
    position: relative;
    display: grid;
    gap: 1rem;
    padding: clamp(1.5rem, 4vw, 2.25rem);
}

.notify__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--gray-500);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition:
        color 0.3s var(--ease-luxe),
        background 0.3s var(--ease-luxe);
}

.notify__close:hover {
    color: var(--ink);
    background: var(--gray-100);
}

.notify__title {
    margin: 0;
    padding-right: 2rem;
    font-family: var(--font-display);
    font-size: var(--t-d-sm);
    font-weight: 500;
    letter-spacing: -0.01em;
}

.notify__lede {
    margin: 0;
    color: var(--ink-600);
    font-size: var(--t-body-sm);
}

.notify__form {
    display: grid;
    gap: 1rem;
    margin-top: 0.25rem;
}

/* display: grid l'emporte sur le [hidden] du navigateur : on le redit. */
.notify__form[hidden] {
    display: none;
}

.notify__form .btn {
    justify-self: start;
}

.notify__note {
    margin: 0;
    color: var(--gray-500);
    font-size: var(--t-caption);
}

.notify__done {
    margin: 0;
    color: var(--succes);
    font-size: var(--t-body-sm);
}

/* Le leurre à robots et le cadre qui encaisse la réponse de Brevo : hors
   champ plutôt que masqués, pour que le cadre se charge et se signale. */
.notify__decoy,
.notify__sink {
    position: absolute;
    width: 1px;
    height: 1px;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* --- 21. Mouvement réduit ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

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