/* =============================================================================
   MC Maison des Créations — feuille de style du site public

   Identité reprise de l'enseigne de la boutique : noir profond, or, feuillage
   émeraude, crème. L'or reste un filet, jamais un aplat — c'est ce qui sépare
   l'élégance du clinquant.

   Aucune police n'est téléchargée : les piles système retenues offrent un
   rendu soigné et un affichage immédiat, y compris en 4G moyenne.
   ============================================================================= */

/* ── Jetons de design ─────────────────────────────────────────────────────── */
:root {
    /* Nuances sombres, légèrement vertes comme le feuillage de l'enseigne */
    --nuit:            #0d1211;
    --nuit-profonde:   #070a09;
    --nuit-douce:      #16201d;
    --emeraude:        #10403c;
    --emeraude-clair:  #1d5f56;

    /*
     * Or, en quatre valeurs.
     *
     * `--or` est l'or de la marque : filets, bordures, pictogrammes, et texte
     * sur fond sombre (6,4:1 sur --nuit). Sur fond clair il ne plafonne qu'à
     * 2,8:1, très en deçà du minimum lisible : tout texte doré posé sur crème
     * ou ivoire utilise donc `--or-texte`, qui atteint 5,4:1 sans trahir la
     * teinte. `--or-clair` et `--or-pale` sont réservés aux fonds sombres.
     */
    --or:              #b8912f;
    --or-texte:        #7f6212;
    --or-clair:        #d8b455;
    --or-pale:         #ece0c0;

    /* Fonds clairs */
    --creme:           #faf7f1;
    --creme-ombre:     #f2ece1;
    --ivoire:          #fffdf9;
    --sable:           #e6dccb;

    /* Textes */
    --encre:           #1a1f1d;
    --encre-douce:     #4a534f;
    --encre-legere:    #5f6965;
    --sur-sombre:      #f0ece3;
    --sur-sombre-doux: #b9c2bd;

    /* Rôles */
    --fond:            var(--creme);
    --surface:         var(--ivoire);
    --bordure:         #e2d9c9;
    --bordure-forte:   #cfc3ad;
    --accent:          var(--or);
    --lien:            #14514a;

    /* Retours d'état */
    --succes:          #1c6b4f;
    --succes-fond:     #e8f3ed;
    --erreur:          #97321f;
    --erreur-fond:     #fbeeea;
    --info-fond:       #eef2f0;

    /*
     * Typographie, en trois registres.
     *
     * `--titre-vedette` : la signature de la maison (V2), réservée aux grands
     *   titres. Une écriture liée perd sa lisibilité en petit corps : hors du
     *   nom de la boutique — qui est un logotype, et que le lecteur reconnaît
     *   d'un coup d'œil — elle n'est jamais employée sous 1,6 rem.
     * `--titre-accent`  : la variante V1, plus droite et condensée. Un seul
     *   emploi, la citation mise en exergue — d'où son nom. Elle n'est donc
     *   téléchargée que sur les pages qui en contiennent une.
     * `--titre`         : serif système, pour tous les titres intermédiaires,
     *   les cartes et l'administration. C'est elle qui porte le gros du texte
     *   éditorial, et elle s'affiche sans rien télécharger.
     */
    --titre-vedette: 'MC Signature', 'Iowan Old Style', 'Palatino Linotype',
                     Palatino, Georgia, serif;
    --titre-accent:  'MC Signature Accent', 'Iowan Old Style', Palatino, Georgia, serif;
    --titre: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua',
             Georgia, 'Times New Roman', serif;
    --texte: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
             'Helvetica Neue', Arial, sans-serif;

    /* Rythme vertical et horizontal */
    --marge:      clamp(1.15rem, 5vw, 2.5rem);
    --section:    clamp(3.5rem, 9vw, 7rem);
    --largeur:    76rem;
    --largeur-texte: 40rem;

    --rayon:      3px;
    --rayon-doux: 10px;

    --ombre-carte:  0 1px 2px rgba(13, 18, 17, .04), 0 8px 24px -12px rgba(13, 18, 17, .16);
    --ombre-levee:  0 2px 4px rgba(13, 18, 17, .05), 0 20px 44px -18px rgba(13, 18, 17, .28);

    --transition: 260ms cubic-bezier(.22, .61, .36, 1);
}

/* ── Polices de la maison ─────────────────────────────────────────────────── */

/*
 * Polices sur mesure, hébergées avec le site — aucun appel à un service tiers,
 * donc aucune fuite de données de navigation.
 *
 * `font-display: swap` fait afficher le texte immédiatement avec la serif
 * système, puis bascule dès la police reçue : rien n'est jamais invisible, même
 * sur une connexion lente. `unicode-range` limite le téléchargement aux
 * caractères latins réellement utilisés en français.
 *
 * Le .woff est proposé d'abord, le .ttf servant de repli.
 *
 * Seule la signature des titres est déclarée ici. La variante d'accentuation
 * vit dans « accent.css », chargée par les seules pages qui l'emploient : un
 * navigateur télécharge une police dès qu'elle est déclarée, même si aucun
 * élément ne s'en sert.
 */
@font-face {
    font-family: 'MC Signature';
    src: url('/assets/fonts/mc-signature-v2.woff') format('woff'),
         url('/assets/fonts/mc-signature-v2.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                   U+20AC, U+2122, U+2212;
}

/* ── Réinitialisation ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Compense la hauteur de l'en-tête collant lors d'un saut d'ancre */
    scroll-padding-top: 5.5rem;
}

body {
    margin: 0;
    background: var(--fond);
    color: var(--encre);
    font-family: var(--texte);
    font-size: 1.0625rem;
    line-height: 1.68;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

h1, h2, h3, h4 {
    font-family: var(--titre);
    font-weight: 400;
    line-height: 1.16;
    letter-spacing: -.008em;
    margin: 0 0 .6em;
    color: var(--encre);
    text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 6.2vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 4.4vw, 2.6rem); }
h3 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); }
h4 { font-size: 1.1rem; }

/*
 * Grands titres à la signature de la maison.
 *
 * Deux précautions propres à une écriture liée : aucun interlettrage, qui
 * romprait les attaches entre les lettres, et un interlignage plus généreux,
 * les jambages et déliés débordant de la boîte de la police.
 */
h1,
.entete-section h2,
.appel h2,
.banniere h1 {
    font-family: var(--titre-vedette);
    letter-spacing: 0;
    line-height: 1.24;
}

/* En dessous de ce corps, l'écriture liée cesse d'être lisible : on repasse
   à la serif. Les titres de cartes et d'étapes en relèvent. */
.carte__titre,
.etape h3,
h3, h4 {
    font-family: var(--titre);
    letter-spacing: -.008em;
    line-height: 1.16;
}

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--lien); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--emeraude); }

ul, ol { padding-left: 1.15rem; }
li { margin-bottom: .4em; }

strong { font-weight: 600; }

hr {
    border: 0;
    border-top: 1px solid var(--bordure);
    margin: 2.5rem 0;
}

/* Cible de saisie confortable au doigt sur mobile */
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

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

::selection { background: var(--or-pale); color: var(--nuit); }

/* ── Accessibilité ────────────────────────────────────────────────────────── */
.evitement {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--nuit);
    color: var(--or-clair);
    padding: .9rem 1.4rem;
    z-index: 200;
}
.evitement:focus { left: .5rem; top: .5rem; }

.visuellement-cache {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Champ leurre anti-robots : retiré du flux sans display:none, que certains
   robots détectent. */
.hp {
    position: absolute !important;
    left: -9999px;
    opacity: 0;
    height: 0;
    overflow: hidden;
}

/* ── Structure ────────────────────────────────────────────────────────────── */
.conteneur {
    width: 100%;
    max-width: var(--largeur);
    margin-inline: auto;
    padding-inline: var(--marge);
}

.conteneur--etroit { max-width: 52rem; }
.conteneur--large  { max-width: 88rem; }

.section { padding-block: var(--section); }
.section--serree { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.section--creme  { background: var(--creme-ombre); }
.section--ivoire { background: var(--ivoire); }

.section--nuit {
    background: var(--nuit);
    color: var(--sur-sombre);
}
.section--nuit h2,
.section--nuit h3 { color: var(--or-pale); }
.section--nuit p { color: var(--sur-sombre-doux); }

/* Feuillage doré très discret, rappel de l'encadrement de l'enseigne */
.section--nuit {
    position: relative;
    overflow: hidden;
}
.section--nuit::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(52rem 30rem at 92% -10%, rgba(184, 145, 47, .13), transparent 62%),
        radial-gradient(38rem 28rem at 4% 108%, rgba(29, 95, 86, .3), transparent 66%);
    pointer-events: none;
}
.section--nuit > * { position: relative; }

/* ── Éléments typographiques signature ────────────────────────────────────── */

/* Petite capitale dorée introduisant chaque section */
.surtitre {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    font-family: var(--texte);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--or-texte);
    margin-bottom: 1rem;
}
.surtitre::before {
    content: '';
    width: 1.8rem;
    height: 1px;
    background: currentColor;
    opacity: .55;
}
.section--nuit .surtitre { color: var(--or-clair); }
.surtitre--centre { justify-content: center; }
.surtitre--centre::after {
    content: '';
    width: 1.8rem;
    height: 1px;
    background: currentColor;
    opacity: .55;
}

.chapeau {
    font-size: clamp(1.02rem, 2vw, 1.18rem);
    color: var(--encre-douce);
    max-width: var(--largeur-texte);
    line-height: 1.72;
}
.section--nuit .chapeau { color: var(--sur-sombre-doux); }

.entete-section {
    margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
.entete-section--centre {
    text-align: center;
}
.entete-section--centre .chapeau { margin-inline: auto; }

.entete-section__lien {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-decoration: none;
    color: var(--emeraude);
    border-bottom: 1px solid var(--sable);
    padding-bottom: .2rem;
    transition: border-color var(--transition), gap var(--transition);
}
.entete-section__lien:hover { border-color: var(--or); gap: .75rem; }
.section--nuit .entete-section__lien { color: var(--or-clair); border-color: rgba(184,145,47,.35); }

/* Fleuron : petit losange doré, écho à la forme de l'enseigne */
.fleuron {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    margin: 0 0 1.4rem;
    color: var(--or-texte);
}
.fleuron::before,
.fleuron::after {
    content: '';
    height: 1px;
    width: clamp(2rem, 8vw, 4.5rem);
    background: linear-gradient(90deg, transparent, currentColor);
    opacity: .5;
}
.fleuron::after { background: linear-gradient(90deg, currentColor, transparent); }
.fleuron__losange {
    width: 8px; height: 8px;
    border: 1px solid currentColor;
    transform: rotate(45deg);
    flex: none;
}

/* ── Boutons ──────────────────────────────────────────────────────────────── */
.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    /* 48 px de haut minimum : confortable au pouce */
    min-height: 3rem;
    padding: .8rem 1.7rem;
    border: 1px solid transparent;
    border-radius: var(--rayon);
    font-family: var(--texte);
    font-size: .93rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-decoration: none;
    text-align: center;
    transition: background var(--transition), color var(--transition),
                border-color var(--transition), transform var(--transition),
                box-shadow var(--transition);
}
.bouton:hover { transform: translateY(-1px); }
.bouton:active { transform: translateY(0); }

.bouton--principal {
    background: var(--emeraude);
    color: var(--ivoire);
    border-color: var(--emeraude);
}
.bouton--principal:hover {
    background: var(--emeraude-clair);
    border-color: var(--emeraude-clair);
    color: var(--ivoire);
    box-shadow: 0 12px 26px -14px rgba(16, 64, 60, .8);
}

.bouton--or {
    background: var(--or);
    color: var(--nuit);
    border-color: var(--or);
}
.bouton--or:hover {
    background: var(--or-clair);
    border-color: var(--or-clair);
    color: var(--nuit);
    box-shadow: 0 12px 26px -14px rgba(184, 145, 47, .85);
}

.bouton--contour {
    background: transparent;
    color: var(--encre);
    border-color: var(--bordure-forte);
}
.bouton--contour:hover {
    border-color: var(--or);
    color: var(--emeraude);
    background: rgba(255, 255, 255, .6);
}

/* Variante posée sur une photo ou un fond sombre */
.bouton--clair {
    background: transparent;
    color: var(--or-pale);
    border-color: rgba(236, 224, 192, .45);
}
.bouton--clair:hover {
    background: rgba(250, 247, 241, .1);
    border-color: var(--or-clair);
    color: #fff;
}

.bouton--plein-mobile { width: 100%; }
@media (min-width: 640px) {
    .bouton--plein-mobile { width: auto; }
}

.groupe-boutons {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin-top: 1.8rem;
}

/* ── En-tête ──────────────────────────────────────────────────────────────── */
.entete {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(250, 247, 241, .93);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--bordure);
    transition: box-shadow var(--transition), background var(--transition);
}
.entete.est-defilee { box-shadow: 0 1px 20px -8px rgba(13, 18, 17, .3); }

.entete__barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4.4rem;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    color: var(--encre);
    flex: none;
}
.logo__marque { width: 2.5rem; height: 2.5rem; flex: none; }
.logo__texte { display: flex; flex-direction: column; line-height: 1.05; }
.logo__nom {
    font-family: var(--titre-vedette);
    font-size: 1.34rem;
    letter-spacing: 0;
    line-height: 1.1;
}
.logo__metier {
    font-size: .66rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--or-texte);
    margin-top: .22rem;
}

/*
 * Navigation principale.
 *
 * Neuf entrées ne tiennent pas à côté du logo et des actions en dessous de
 * 1200 px : sous ce seuil, le panneau coulissant prend le relais plutôt que
 * de laisser la barre déborder.
 */
.navigation { display: none; }

@media (min-width: 1200px) {
    .navigation {
        display: flex;
        align-items: center;
        gap: .35rem;
    }
    .navigation__lien {
        position: relative;
        padding: .55rem .58rem;
        font-size: .93rem;
        font-weight: 500;
        text-decoration: none;
        color: var(--encre-douce);
        border-radius: var(--rayon);
        transition: color var(--transition);
        white-space: nowrap;
    }
    .navigation__lien::after {
        content: '';
        position: absolute;
        left: .58rem; right: .58rem; bottom: .25rem;
        height: 1px;
        background: var(--or);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--transition);
    }
    .navigation__lien:hover,
    .navigation__lien.is-active { color: var(--encre); }
    .navigation__lien:hover::after,
    .navigation__lien.is-active::after { transform: scaleX(1); }
}

.entete__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: none;
}

.entete__telephone {
    display: none;
    align-items: center;
    gap: .45rem;
    padding: .5rem .85rem;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--emeraude);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    transition: border-color var(--transition), background var(--transition);
}
.entete__telephone:hover { border-color: var(--or); background: rgba(255,255,255,.7); }
@media (min-width: 700px) and (max-width: 1199px) { .entete__telephone { display: inline-flex; } }
@media (min-width: 1440px) { .entete__telephone { display: inline-flex; } }

.entete__devis { display: none; }
@media (min-width: 1024px) { .entete__devis { display: inline-flex; } }

/* Bouton d'ouverture du menu */
.menu-bascule {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem; height: 3rem;
    background: transparent;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    color: var(--encre);
}
@media (min-width: 1200px) { .menu-bascule { display: none; } }

.menu-bascule__trait {
    position: relative;
    width: 18px; height: 1.5px;
    background: currentColor;
    transition: background var(--transition);
}
.menu-bascule__trait::before,
.menu-bascule__trait::after {
    content: '';
    position: absolute;
    left: 0;
    width: 18px; height: 1.5px;
    background: currentColor;
    transition: transform var(--transition);
}
.menu-bascule__trait::before { top: -6px; }
.menu-bascule__trait::after  { top: 6px; }

.menu-bascule[aria-expanded="true"] .menu-bascule__trait { background: transparent; }
.menu-bascule[aria-expanded="true"] .menu-bascule__trait::before { transform: translateY(6px) rotate(45deg); }
.menu-bascule[aria-expanded="true"] .menu-bascule__trait::after  { transform: translateY(-6px) rotate(-45deg); }

/* Panneau de navigation mobile */
.panneau {
    position: fixed;
    inset: 4.4rem 0 0;
    background: var(--nuit);
    color: var(--sur-sombre);
    padding: 1.6rem var(--marge) 2.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index: 99;
}
.panneau.est-ouvert { opacity: 1; visibility: visible; transform: translateY(0); }
@media (min-width: 1200px) { .panneau { display: none; } }

.panneau__lien {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .95rem 0;
    font-family: var(--titre);
    font-size: 1.3rem;
    text-decoration: none;
    color: var(--or-pale);
    border-bottom: 1px solid rgba(236, 224, 192, .12);
}
.panneau__lien.is-active { color: var(--or-clair); }
.panneau__lien::after {
    content: '→';
    opacity: .35;
    font-size: .9rem;
}

.panneau__actions {
    display: grid;
    gap: .7rem;
    margin-top: 1.8rem;
}

.panneau__contact {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(236, 224, 192, .14);
    font-size: .92rem;
    color: var(--sur-sombre-doux);
}
.panneau__contact a { color: var(--or-clair); }

/* ── Barre d'action fixe sur mobile ───────────────────────────────────────── */
.barre-mobile {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--nuit);
    border-top: 1px solid rgba(236, 224, 192, .16);
    padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 700px) { .barre-mobile { display: none; } }

.barre-mobile__action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 3.4rem;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-decoration: none;
    color: var(--or-pale);
}
.barre-mobile__action + .barre-mobile__action {
    border-left: 1px solid rgba(236, 224, 192, .16);
    color: var(--nuit);
    background: var(--or);
}

/* Réserve la place de la barre pour ne rien masquer en bas de page */
@media (max-width: 699px) {
    body { padding-bottom: 3.4rem; }
}

/* ── Bandeau d'accueil ────────────────────────────────────────────────────── */

/*
 * Deux mises en page pour un seul balisage.
 *
 * Sur mobile, la photo occupe tout le fond, sous un voile sombre.
 * À partir de 900 px, le bandeau se scinde : la typographie tient sur un
 * panneau noir et doré — écho direct à l'enseigne de la boutique — et la
 * photographie occupe sa propre colonne. Elle y est affichée à une taille
 * proche de sa définition d'origine, donc parfaitement nette, là où un fond
 * plein écran l'aurait étirée.
 */
.heros {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(88svh, 46rem);
    background: var(--nuit);
    color: var(--sur-sombre);
    overflow: hidden;
}

.heros__fond {
    position: absolute;
    inset: 0;
}
.heros__fond img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Léger mouvement d'entrée : la photo se pose au lieu d'apparaître */
    animation: repos 1.6s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes repos {
    from { transform: scale(1.06); opacity: .55; }
    to   { transform: scale(1);    opacity: 1; }
}

/* Voile dégradé : garantit le contraste du texte quelle que soit la photo */
.heros__voile {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(7, 10, 9, .93) 0%, rgba(7, 10, 9, .72) 32%,
                        rgba(7, 10, 9, .3) 62%, rgba(7, 10, 9, .5) 100%);
}

.heros__contenu {
    position: relative;
    width: 100%;
    padding-block: clamp(2.5rem, 8vw, 5rem);
}

@media (min-width: 900px) {
    .heros {
        align-items: stretch;
        min-height: min(84svh, 44rem);
    }

    /* La photo quitte le fond pour occuper la colonne de droite. */
    .heros__fond {
        left: auto;
        right: 0;
        width: 46%;
    }
    .heros__fond img { object-position: center; }

    /* Fondu vertical entre le panneau sombre et la photographie. */
    .heros__voile {
        left: auto;
        right: 0;
        width: 46%;
        background: linear-gradient(to right, var(--nuit) 0%, rgba(13, 18, 17, .45) 22%,
                                    rgba(13, 18, 17, 0) 55%);
    }

    /*
     * Le contenu garde la largeur et le centrage du conteneur du site — pour
     * que le titre s'aligne sur le reste des pages — et réserve la colonne de
     * droite par une simple marge intérieure. Contraindre sa largeur totale
     * l'aurait recentré dans le bandeau, et le titre serait passé sous la photo.
     */
    /*
     * La réserve est exprimée en unités de fenêtre, comme la largeur de la
     * photographie : un pourcentage se serait appliqué à la largeur du
     * conteneur, plus étroite, et la gouttière aurait varié au fil des paliers.
     * Les 2,5 rem ajoutés garantissent un vrai blanc entre texte et photo.
     */
    .heros__contenu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-right: calc(46vw + 2.5rem);
        padding-block: clamp(3rem, 6vw, 5rem);
    }
    .heros__contenu > * { max-width: 34rem; }

    /* Filet doré vertical, rappel du losange de l'enseigne. */
    .heros::after {
        content: '';
        position: absolute;
        top: 12%;
        bottom: 12%;
        right: 46%;
        width: 1px;
        background: linear-gradient(to bottom, transparent, rgba(184, 145, 47, .5), transparent);
        z-index: 1;
    }
}

@media (min-width: 1280px) {
    .heros__fond, .heros__voile { width: 44%; }
    .heros::after { right: 44%; }
    .heros__contenu { padding-right: calc(44vw + 3rem); }
}

.heros__marque {
    width: clamp(4.5rem, 12vw, 6.5rem);
    margin-bottom: 1.4rem;
}

.heros h1 {
    color: var(--ivoire);
    font-size: clamp(2.3rem, 7.5vw, 4.6rem);
    max-width: 16ch;
    margin-bottom: .35em;
}
.heros h1 em {
    font-style: italic;
    color: var(--or-clair);
}

/*
 * En écran scindé, le titre partage la largeur avec la photographie : il se
 * cale sur la colonne de texte plutôt que sur la fenêtre entière.
 */
@media (min-width: 900px) {
    .heros h1 { font-size: clamp(2.7rem, 4.6vw, 4.3rem); }
}

/*
 * La phrase d'accroche voisine immédiatement le titre, déjà tracé dans la
 * signature. Deux écritures liées l'une sous l'autre se disputeraient le
 * regard : l'italique serif fait ici le meilleur contrepoint — et évite de
 * télécharger une seconde police au premier affichage.
 */
.heros__accroche {
    font-family: var(--titre);
    font-size: clamp(1.15rem, 2.6vw, 1.6rem);
    font-style: italic;
    color: var(--or-pale);
    max-width: 30ch;
    margin-bottom: 1rem;
}

.heros__texte {
    max-width: 44ch;
    color: rgba(240, 236, 227, .82);
    font-size: 1.02rem;
}

.heros__reperes {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    margin-top: 2.2rem;
    padding-top: 1.6rem;
    border-top: 1px solid rgba(236, 224, 192, .18);
    font-size: .82rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(240, 236, 227, .68);
}
.heros__repere { display: flex; align-items: center; gap: .5rem; }
.heros__repere svg { width: 15px; height: 15px; color: var(--or); flex: none; }

/* ── Cartes de création ───────────────────────────────────────────────────── */
.grille {
    display: grid;
    gap: clamp(1.1rem, 2.6vw, 2rem);
}
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); }

.carte {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.carte:hover {
    transform: translateY(-3px);
    box-shadow: var(--ombre-levee);
    border-color: var(--bordure-forte);
    color: inherit;
}

.carte__visuel {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--creme-ombre) center/cover;
}
.carte__visuel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms cubic-bezier(.22,.61,.36,1);
}
.carte:hover .carte__visuel img { transform: scale(1.045); }

.carte__etiquette {
    position: absolute;
    top: .8rem; left: .8rem;
    display: inline-flex;
    align-items: center;
    padding: .32rem .68rem;
    background: rgba(7, 10, 9, .78);
    color: var(--or-clair);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    border-radius: 2px;
    backdrop-filter: blur(4px);
}

.carte__corps {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.15rem 1.25rem 1.35rem;
}

.carte__categorie {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--or-texte);
    margin-bottom: .5rem;
}

.carte__titre {
    font-family: var(--titre);
    font-size: 1.22rem;
    line-height: 1.24;
    margin: 0 0 .5rem;
}

.carte__texte {
    font-size: .92rem;
    color: var(--encre-douce);
    line-height: 1.6;
    margin: 0;
}

.carte__pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid var(--bordure);
    font-size: .85rem;
    font-weight: 600;
    color: var(--emeraude);
}
.carte__fleche { transition: transform var(--transition); }
.carte:hover .carte__fleche { transform: translateX(4px); }

/* Carte mise en avant, sur deux colonnes en grand écran */
.carte--vedette { grid-column: span 1; }
@media (min-width: 900px) {
    .carte--vedette { grid-column: span 2; }
    .carte--vedette .carte__visuel { aspect-ratio: 16 / 10; }
    .carte--vedette .carte__titre { font-size: 1.6rem; }
}

/* ── Tuiles d'occasion ────────────────────────────────────────────────────── */
.occasions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
    gap: .75rem;
}
@media (min-width: 700px) {
    .occasions { gap: 1rem; }
}

.occasion {
    position: relative;
    display: flex;
    align-items: flex-end;
    aspect-ratio: 1;
    padding: .9rem;
    border-radius: var(--rayon);
    overflow: hidden;
    text-decoration: none;
    color: var(--ivoire);
    background: var(--emeraude);
    isolation: isolate;
}
.occasion img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform 700ms cubic-bezier(.22,.61,.36,1);
}
.occasion::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(7,10,9,.86) 8%, rgba(7,10,9,.26) 62%, rgba(7,10,9,.14));
    transition: background var(--transition);
}
.occasion:hover img { transform: scale(1.06); }
.occasion:hover::after { background: linear-gradient(to top, rgba(16,64,60,.9) 8%, rgba(7,10,9,.32) 70%); }
.occasion:hover { color: var(--ivoire); }

.occasion__nom {
    font-family: var(--titre);
    font-size: 1.05rem;
    line-height: 1.2;
    text-shadow: 0 1px 12px rgba(0,0,0,.5);
}
.occasion__compte {
    display: block;
    font-family: var(--texte);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--or-clair);
    margin-top: .25rem;
}

/* ── Filtres du catalogue ─────────────────────────────────────────────────── */
.filtres {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 1.2rem;
    margin-bottom: 2rem;
}

.filtres__recherche {
    display: flex;
    gap: .6rem;
    margin-bottom: 1rem;
}
.filtres__recherche input {
    flex: 1;
    min-height: 3rem;
    padding: .7rem 1rem;
    border: 1px solid var(--bordure-forte);
    border-radius: var(--rayon);
    background: var(--ivoire);
}
.filtres__recherche input:focus { border-color: var(--or); }

.filtres__groupe + .filtres__groupe { margin-top: 1rem; }

.filtres__legende {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--encre-legere);
    margin-bottom: .6rem;
}

.puces {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

/* La puce est un label enveloppant une case à cocher : la navigation clavier
   et les lecteurs d'écran fonctionnent sans code supplémentaire. */
.puce {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 2.4rem;
    padding: .42rem .9rem;
    background: var(--creme-ombre);
    border: 1px solid var(--bordure);
    border-radius: 999px;
    font-size: .85rem;
    color: var(--encre-douce);
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
    -webkit-tap-highlight-color: transparent;
}
.puce input {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
}
.puce:hover { border-color: var(--bordure-forte); }
.puce:has(input:checked) {
    background: var(--emeraude);
    border-color: var(--emeraude);
    color: var(--ivoire);
}
.puce:has(input:focus-visible) {
    outline: 2px solid var(--emeraude-clair);
    outline-offset: 2px;
}

.filtres__pied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bordure);
}

.filtres__compte {
    font-size: .9rem;
    color: var(--encre-legere);
}

.filtres__bascule {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 3rem;
    padding: .7rem 1rem;
    background: var(--surface);
    border: 1px solid var(--bordure-forte);
    border-radius: var(--rayon);
    font-weight: 600;
    font-size: .92rem;
    margin-bottom: 1rem;
}
@media (min-width: 900px) { .filtres__bascule { display: none; } }

@media (max-width: 899px) {
    .filtres[hidden] { display: none; }
}

/* ── Galerie photographique ───────────────────────────────────────────────── */
.mosaique {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
    gap: .5rem;
}
@media (min-width: 700px) {
    .mosaique {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
        gap: .7rem;
    }
}

.mosaique__element {
    position: relative;
    aspect-ratio: 1;
    border: 0;
    padding: 0;
    background: var(--creme-ombre) center/cover;
    border-radius: 2px;
    overflow: hidden;
    cursor: zoom-in;
}
.mosaique__element img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 600ms cubic-bezier(.22,.61,.36,1), opacity var(--transition);
}
.mosaique__element:hover img { transform: scale(1.05); }
.mosaique__element::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(16, 64, 60, 0);
    transition: background var(--transition);
}
.mosaique__element:hover::after { background: rgba(16, 64, 60, .16); }

/* Quelques photos plus grandes cassent la régularité de la grille */
@media (min-width: 700px) {
    .mosaique__element--haute { grid-row: span 2; aspect-ratio: 1 / 2.03; }
    .mosaique__element--large { grid-column: span 2; aspect-ratio: 2.03 / 1; }
}

/* ── Visionneuse plein écran ──────────────────────────────────────────────── */
.visionneuse {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(7, 10, 9, .96);
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.visionneuse[open] { display: flex; }

.visionneuse__image {
    max-width: min(96vw, 82rem);
    max-height: 84svh;
    object-fit: contain;
    border-radius: 2px;
    animation: apparition 300ms ease both;
}
@keyframes apparition {
    from { opacity: 0; transform: scale(.985); }
    to   { opacity: 1; transform: scale(1); }
}

.visionneuse__legende {
    position: absolute;
    left: 0; right: 0; bottom: calc(1.2rem + env(safe-area-inset-bottom));
    text-align: center;
    color: var(--sur-sombre-doux);
    font-size: .88rem;
    padding-inline: 5rem;
}

.visionneuse__bouton {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem; height: 3.2rem;
    background: rgba(250, 247, 241, .1);
    border: 1px solid rgba(236, 224, 192, .28);
    border-radius: 50%;
    color: var(--or-pale);
    transition: background var(--transition), border-color var(--transition);
}
.visionneuse__bouton:hover { background: rgba(250, 247, 241, .2); border-color: var(--or-clair); }
.visionneuse__bouton--fermer { top: 1rem; right: 1rem; }
.visionneuse__bouton--precedent { left: .8rem; top: 50%; transform: translateY(-50%); }
.visionneuse__bouton--suivant  { right: .8rem; top: 50%; transform: translateY(-50%); }

@media (max-width: 640px) {
    .visionneuse__bouton--precedent { left: .5rem; }
    .visionneuse__bouton--suivant  { right: .5rem; }
    .visionneuse__legende { padding-inline: 1rem; bottom: 4.5rem; }
}

/* ── Fiche création ───────────────────────────────────────────────────────── */
.fiche {
    display: grid;
    gap: clamp(1.8rem, 4vw, 3.5rem);
}
@media (min-width: 900px) {
    .fiche { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
}

.fiche__visuel {
    border-radius: var(--rayon);
    overflow: hidden;
    background: var(--creme-ombre);
    border: 1px solid var(--bordure);
}
.fiche__visuel img { width: 100%; }

.fiche__vignettes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
    gap: .5rem;
    margin-top: .6rem;
}
.fiche__vignette {
    aspect-ratio: 1;
    padding: 0;
    border: 1px solid var(--bordure);
    border-radius: 2px;
    overflow: hidden;
    background: var(--creme-ombre);
    cursor: zoom-in;
    transition: border-color var(--transition);
}
.fiche__vignette:hover { border-color: var(--or); }
.fiche__vignette img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 900px) {
    .fiche__infos { position: sticky; top: 6rem; }
}

.fiche__etiquettes {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 1.2rem 0;
}
.etiquette {
    display: inline-flex;
    align-items: center;
    padding: .3rem .75rem;
    background: var(--creme-ombre);
    border: 1px solid var(--bordure);
    border-radius: 999px;
    font-size: .78rem;
    color: var(--encre-douce);
    text-decoration: none;
    transition: border-color var(--transition), color var(--transition);
}
.etiquette:hover { border-color: var(--or); color: var(--emeraude); }

/* Encart d'appel à l'action en fin de fiche */
.encart-action {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--nuit);
    color: var(--sur-sombre);
    border-radius: var(--rayon);
    position: relative;
    overflow: hidden;
}
.encart-action::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(24rem 14rem at 100% 0%, rgba(184,145,47,.18), transparent 65%);
}
.encart-action > * { position: relative; }
.encart-action h3 { color: var(--or-pale); font-size: 1.3rem; margin-bottom: .5rem; }
.encart-action p { color: var(--sur-sombre-doux); font-size: .95rem; }

/* ── Formulaires ──────────────────────────────────────────────────────────── */
.formulaire {
    display: grid;
    gap: 1.2rem;
}

.champ { display: flex; flex-direction: column; gap: .4rem; }

.champ__etiquette {
    font-size: .88rem;
    font-weight: 600;
    color: var(--encre);
}
.champ__requis { color: var(--erreur); margin-left: .15rem; }

.champ__aide {
    font-size: .82rem;
    color: var(--encre-legere);
    line-height: 1.5;
}

.champ input[type="text"],
.champ input[type="email"],
.champ input[type="tel"],
.champ input[type="date"],
.champ input[type="time"],
.champ input[type="url"],
.champ input[type="number"],
.champ input[type="password"],
.champ input[type="search"],
.champ select,
.champ textarea {
    width: 100%;
    min-height: 3rem;
    padding: .72rem .95rem;
    background: var(--ivoire);
    border: 1px solid var(--bordure-forte);
    border-radius: var(--rayon);
    /* 16 px minimum : évite le zoom automatique de Safari iOS à la saisie */
    font-size: 1rem;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.champ textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
    outline: none;
    border-color: var(--or);
    box-shadow: 0 0 0 3px rgba(184, 145, 47, .16);
}

.champ input[aria-invalid="true"],
.champ textarea[aria-invalid="true"],
.champ select[aria-invalid="true"] {
    border-color: var(--erreur);
}

.champ__erreur {
    font-size: .84rem;
    color: var(--erreur);
    font-weight: 500;
}

.champ--case {
    flex-direction: row;
    align-items: flex-start;
    gap: .7rem;
}
.champ--case input[type="checkbox"] {
    width: 1.2rem; height: 1.2rem;
    margin-top: .18rem;
    accent-color: var(--emeraude);
    flex: none;
}
.champ--case label { font-size: .9rem; color: var(--encre-douce); line-height: 1.55; }

.duo {
    display: grid;
    gap: 1.2rem;
}
@media (min-width: 640px) {
    .duo { grid-template-columns: 1fr 1fr; }
}

.groupe-champs {
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 1.3rem;
    margin: 0;
    background: var(--surface);
}
.groupe-champs legend {
    padding-inline: .6rem;
    font-family: var(--titre);
    font-size: 1.15rem;
    color: var(--emeraude);
}
.groupe-champs > .formulaire { margin-top: .4rem; }

/* Sélecteur de fichiers */
.depot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1.6rem 1rem;
    border: 1.5px dashed var(--bordure-forte);
    border-radius: var(--rayon);
    background: var(--creme-ombre);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.depot:hover { border-color: var(--or); background: var(--ivoire); }
.depot input[type="file"] { display: none; }
.depot__icone { color: var(--or); }
.depot__texte { font-size: .9rem; color: var(--encre-douce); }
.depot__liste { font-size: .84rem; color: var(--emeraude); font-weight: 600; }

/* ── Messages ─────────────────────────────────────────────────────────────── */
.message {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .95rem 1.1rem;
    border-radius: var(--rayon);
    border-left: 3px solid;
    font-size: .94rem;
    margin-bottom: 1.2rem;
}
.message svg { flex: none; margin-top: .15rem; }
.message--succes { background: var(--succes-fond); border-color: var(--succes); color: #14513c; }
.message--erreur { background: var(--erreur-fond); border-color: var(--erreur); color: #7a2717; }
.message--info   { background: var(--info-fond);   border-color: var(--emeraude); color: var(--encre-douce); }

.encart-erreurs {
    padding: 1rem 1.2rem;
    background: var(--erreur-fond);
    border-left: 3px solid var(--erreur);
    border-radius: var(--rayon);
    margin-bottom: 1.5rem;
}
.encart-erreurs p { font-weight: 600; color: #7a2717; margin-bottom: .5rem; }
.encart-erreurs ul { margin: 0; color: #7a2717; font-size: .9rem; }

/* ── Fil d'Ariane ─────────────────────────────────────────────────────────── */
.fil {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    padding: 0;
    margin: 0 0 1.5rem;
    list-style: none;
    font-size: .84rem;
    color: var(--encre-legere);
}
.fil li { margin: 0; display: flex; align-items: center; gap: .45rem; }
.fil li:not(:last-child)::after { content: '/'; opacity: .4; }
.fil a { color: var(--encre-legere); text-decoration: none; }
.fil a:hover { color: var(--emeraude); text-decoration: underline; }
.fil [aria-current] { color: var(--encre); }

/* ── Bandeau de page intérieure ───────────────────────────────────────────── */
.banniere {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(15rem, 38vw, 24rem);
    background: var(--nuit);
    color: var(--sur-sombre);
    overflow: hidden;
}
.banniere img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.banniere::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(7,10,9,.92) 5%, rgba(7,10,9,.6) 45%, rgba(7,10,9,.35));
}
.banniere__contenu {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-block: clamp(2rem, 5vw, 3.5rem);
}
.banniere h1 { color: var(--ivoire); margin-bottom: .3em; }
.banniere .chapeau { color: rgba(240,236,227,.85); }
.banniere .fil { color: rgba(240,236,227,.6); }
.banniere .fil a { color: rgba(240,236,227,.6); }
.banniere .fil a:hover { color: var(--or-clair); }
.banniere .fil [aria-current] { color: var(--or-pale); }

/* Variante sobre, sans photo ni or, réservée aux pages sensibles */
.banniere--sobre {
    background: #232827;
    min-height: clamp(12rem, 26vw, 17rem);
}
.banniere--sobre::after { display: none; }
.banniere--sobre .surtitre { color: #a9b3af; }

/* ── Pagination ───────────────────────────────────────────────────────────── */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin-top: 3rem;
}
.pagination__lien {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.8rem;
    min-height: 2.8rem;
    padding: 0 .7rem;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--surface);
    text-decoration: none;
    color: var(--encre-douce);
    font-size: .92rem;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.pagination__lien:hover { border-color: var(--or); color: var(--emeraude); }
.pagination__lien[aria-current] {
    background: var(--emeraude);
    border-color: var(--emeraude);
    color: var(--ivoire);
}
.pagination__ellipse { padding: 0 .3rem; color: var(--encre-legere); }

/* ── Interactions : j'aime et commentaires ────────────────────────────────── */
.interactions {
    margin-top: clamp(2.5rem, 6vw, 4rem);
    padding-top: 2rem;
    border-top: 1px solid var(--bordure);
}

.jaime {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.8rem;
    padding: .5rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--bordure-forte);
    border-radius: 999px;
    font-size: .92rem;
    font-weight: 600;
    color: var(--encre-douce);
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.jaime:hover { border-color: var(--erreur); color: var(--erreur); }
.jaime svg { width: 18px; height: 18px; transition: transform var(--transition); }
.jaime[aria-pressed="true"] {
    border-color: var(--erreur);
    color: var(--erreur);
    background: var(--erreur-fond);
}
.jaime[aria-pressed="true"] svg { fill: currentColor; transform: scale(1.08); }

.commentaire {
    display: flex;
    gap: .9rem;
    padding: 1.1rem 0;
    border-top: 1px solid var(--bordure);
}
.commentaire:first-of-type { border-top: 0; }

.commentaire__pastille {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem; height: 2.5rem;
    flex: none;
    border-radius: 50%;
    background: var(--creme-ombre);
    color: var(--emeraude);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.commentaire__entete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: .3rem;
}
.commentaire__auteur { font-weight: 600; font-size: .95rem; }
.commentaire__date { font-size: .8rem; color: var(--encre-legere); }
.commentaire__texte { font-size: .95rem; color: var(--encre-douce); margin: 0; }
.commentaire__texte p { margin-bottom: .5em; }

.commentaire__signaler {
    background: none;
    border: 0;
    padding: .3rem 0;
    font-size: .78rem;
    color: var(--encre-legere);
    text-decoration: underline;
    margin-top: .35rem;
}
.commentaire__signaler:hover { color: var(--erreur); }

/* Réponse de la fleuriste : identifiée sans ambiguïté */
.commentaire--fleuriste .commentaire__pastille {
    background: var(--nuit);
    color: var(--or-clair);
}
.commentaire--fleuriste .commentaire__auteur::after {
    content: 'La fleuriste';
    display: inline-block;
    margin-left: .5rem;
    padding: .14rem .5rem;
    background: var(--or);
    color: var(--nuit);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-radius: 2px;
    vertical-align: middle;
}

.commentaire__reponses {
    margin-top: .9rem;
    padding-left: 1rem;
    border-left: 2px solid var(--sable);
    display: grid;
    gap: .5rem;
}
.commentaire__reponses .commentaire { border-top: 0; padding: .6rem 0; }

/* ── Informations pratiques et contact ────────────────────────────────────── */
.infos {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
}
@media (min-width: 900px) {
    .infos { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; }
}

.bloc-info {
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    padding: 1.4rem;
}
.bloc-info + .bloc-info { margin-top: 1rem; }
.bloc-info h3 {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.15rem;
    margin-bottom: .9rem;
}
.bloc-info h3 svg { color: var(--or); flex: none; }

.liste-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.liste-contact li { display: flex; gap: .75rem; margin: 0; align-items: flex-start; }
.liste-contact svg { color: var(--or); flex: none; margin-top: .2rem; }
.liste-contact a { color: var(--emeraude); font-weight: 500; }

.horaires { width: 100%; border-collapse: collapse; font-size: .93rem; }
.horaires th, .horaires td { padding: .55rem 0; text-align: left; border-bottom: 1px solid var(--bordure); }
.horaires th { font-weight: 500; color: var(--encre-douce); }
.horaires td { text-align: right; font-variant-numeric: tabular-nums; }
.horaires tr:last-child th, .horaires tr:last-child td { border-bottom: 0; }
.horaires .est-ferme { color: var(--encre-legere); font-style: italic; }
.horaires .est-aujourdhui th,
.horaires .est-aujourdhui td { color: var(--emeraude); font-weight: 700; }

.carte-plan {
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    overflow: hidden;
    background: var(--creme-ombre);
    aspect-ratio: 4 / 3;
}
.carte-plan iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── Bandeau d'appel final ────────────────────────────────────────────────── */
.appel {
    position: relative;
    background: var(--nuit);
    color: var(--sur-sombre);
    text-align: center;
    overflow: hidden;
}
.appel::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(40rem 22rem at 50% 0%, rgba(184,145,47,.15), transparent 62%),
        radial-gradient(30rem 20rem at 10% 100%, rgba(29,95,86,.28), transparent 66%);
}
.appel > * { position: relative; }
.appel h2 { color: var(--or-pale); max-width: 22ch; margin-inline: auto; }
.appel p { color: var(--sur-sombre-doux); max-width: 48ch; margin-inline: auto; }
.appel .groupe-boutons { justify-content: center; }

/* ── Pied de page ─────────────────────────────────────────────────────────── */
.pied {
    background: var(--nuit-profonde);
    color: var(--sur-sombre-doux);
    font-size: .92rem;
    padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem;
}

.pied__grille {
    display: grid;
    gap: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(236, 224, 192, .12);
}
@media (min-width: 700px) {
    .pied__grille { grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
}
@media (min-width: 1024px) {
    .pied__grille { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
}

.pied h3 {
    font-family: var(--texte);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--or);
    margin-bottom: 1rem;
}

.pied__marque { display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; }
.pied__marque svg { width: 2.8rem; height: 2.8rem; flex: none; }
.pied__nom { font-family: var(--titre-vedette); font-size: 1.5rem; color: var(--or-pale); line-height: 1.15; }
.pied__metier { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--or); margin-top: .25rem; }

.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.pied li { margin: 0; }
.pied a { color: var(--sur-sombre-doux); text-decoration: none; transition: color var(--transition); }
.pied a:hover { color: var(--or-clair); }

.pied__reseaux { display: flex; gap: .6rem; margin-top: 1rem; }
.pied__reseau {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem; height: 2.7rem;
    border: 1px solid rgba(236, 224, 192, .22);
    border-radius: 50%;
    color: var(--or-pale);
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.pied__reseau:hover { border-color: var(--or); background: rgba(184,145,47,.14); color: var(--or-clair); }

.pied__bas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding-top: 1.4rem;
    font-size: .82rem;
    color: rgba(185, 194, 189, .62);
}
.pied__bas nav { display: flex; flex-wrap: wrap; gap: 1.1rem; }

/* ── Bandeau cookies ──────────────────────────────────────────────────────── */
.cookies {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%) translateY(140%);
    z-index: 150;
    width: min(38rem, calc(100vw - 2rem));
    background: var(--nuit);
    color: var(--sur-sombre);
    border: 1px solid rgba(236, 224, 192, .2);
    border-radius: var(--rayon-doux);
    padding: 1.2rem 1.3rem;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .7);
    transition: transform 420ms cubic-bezier(.22,.61,.36,1);
}
.cookies.est-visible { transform: translateX(-50%) translateY(0); }
@media (max-width: 699px) { .cookies { bottom: 4.2rem; } }
.cookies p { font-size: .89rem; color: var(--sur-sombre-doux); margin-bottom: 1rem; }
.cookies a { color: var(--or-clair); }
.cookies__actions { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ── Apparition au défilement ─────────────────────────────────────────────── */
.anim {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 620ms cubic-bezier(.22,.61,.36,1),
                transform 620ms cubic-bezier(.22,.61,.36,1);
}
.anim.est-visible { opacity: 1; transform: none; }

/* Sans JavaScript, le contenu doit rester visible */
.no-js .anim { opacity: 1; transform: none; }

/* ── État vide ────────────────────────────────────────────────────────────── */
.vide {
    text-align: center;
    padding: clamp(2.5rem, 8vw, 5rem) 1rem;
    border: 1px dashed var(--bordure-forte);
    border-radius: var(--rayon);
    background: var(--surface);
}
.vide__icone { color: var(--sable); margin-bottom: 1rem; }
.vide h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.vide p { color: var(--encre-legere); max-width: 40ch; margin-inline: auto; }

/* ── Contenu rédactionnel ─────────────────────────────────────────────────── */
.prose { max-width: var(--largeur-texte); }
.prose h2 { margin-top: 2.4rem; }
.prose h3 { margin-top: 1.8rem; }
.prose > *:first-child { margin-top: 0; }
.prose img { border-radius: var(--rayon); margin-block: 1.8rem; }
.prose blockquote {
    margin: 2rem 0;
    padding: .3rem 0 .3rem 1.4rem;
    border-left: 2px solid var(--or);
    font-family: var(--titre-accent);
    font-size: 1.5rem;
    font-style: normal;
    letter-spacing: 0;
    line-height: 1.4;
    color: var(--emeraude);
}
.prose ul, .prose ol { margin-bottom: 1.3em; }

/* ── Liste de services (mariage, deuil) ───────────────────────────────────── */
.services {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    list-style: none;
    padding: 0;
    margin: 0;
}
.service {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: 1rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    font-size: .95rem;
    margin: 0;
    transition: border-color var(--transition), transform var(--transition);
}
.service:hover { border-color: var(--or); transform: translateY(-2px); }
.service__puce {
    width: 7px; height: 7px;
    flex: none;
    margin-top: .55rem;
    border: 1px solid var(--or);
    transform: rotate(45deg);
}

/* ── Étapes numérotées ────────────────────────────────────────────────────── */
.etapes {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    list-style: none;
    padding: 0;
    counter-reset: etape;
}
.etape { margin: 0; counter-increment: etape; }
.etape__numero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem; height: 2.6rem;
    margin-bottom: .9rem;
    border: 1px solid var(--or);
    border-radius: 50%;
    font-family: var(--titre);
    font-size: 1.05rem;
    color: var(--or);
}
.etape__numero::before { content: counter(etape, decimal-leading-zero); }
.etape h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.etape p { font-size: .93rem; color: var(--encre-douce); margin: 0; }
.section--nuit .etape p { color: var(--sur-sombre-doux); }

/* ── Événements ───────────────────────────────────────────────────────────── */
.evenement {
    display: grid;
    gap: 1.2rem;
    padding: 1.3rem;
    background: var(--surface);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition), box-shadow var(--transition);
}
@media (min-width: 640px) {
    .evenement { grid-template-columns: 5.5rem minmax(0, 1fr); align-items: start; }
}
.evenement:hover { border-color: var(--or); box-shadow: var(--ombre-carte); color: inherit; }

.evenement__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: .7rem .4rem;
    background: var(--nuit);
    color: var(--or-pale);
    border-radius: var(--rayon);
    line-height: 1.1;
}
.evenement__jour { font-family: var(--titre); font-size: 1.9rem; }
.evenement__mois { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--or); margin-top: .2rem; }
.evenement__annee { font-size: .7rem; color: rgba(185,194,189,.6); margin-top: .1rem; }

.evenement__lieu {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .86rem;
    color: var(--encre-legere);
    margin-top: .5rem;
}
.evenement__lieu svg { color: var(--or); flex: none; }

.evenement--passe { opacity: .68; }
.evenement--passe .evenement__date { background: var(--encre-legere); }

/* ── Page deuil : registre sobre ──────────────────────────────────────────── */
.registre-sobre {
    --accent: #6d7a75;
    --or: #8c9591;
    --or-clair: #aab3af;
    --or-pale: #dfe3e1;
    --emeraude: #3f4b47;
    --emeraude-clair: #56635e;
    --lien: #3f4b47;
    --fond: #f6f6f5;
    --surface: #fcfcfb;
    --bordure: #e3e3e1;
    --bordure-forte: #cdcdca;
    --creme-ombre: #efefed;
    --sable: #d8d8d5;
}
.registre-sobre .heros__fond img,
.registre-sobre .banniere img { filter: saturate(.55) brightness(.94); }
.registre-sobre .carte:hover { transform: none; box-shadow: var(--ombre-carte); }
.registre-sobre .carte__visuel img { transition: none; }
.registre-sobre .carte:hover .carte__visuel img { transform: none; }

/* ── Réseaux sociaux ──────────────────────────────────────────────────────── */
.partage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    margin-top: 2rem;
    padding-top: 1.4rem;
    border-top: 1px solid var(--bordure);
}
.partage__intitule { font-size: .84rem; color: var(--encre-legere); margin-right: .2rem; }
.partage__lien {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem; height: 2.6rem;
    border: 1px solid var(--bordure);
    border-radius: 50%;
    color: var(--encre-douce);
    transition: border-color var(--transition), color var(--transition);
}
.partage__lien:hover { border-color: var(--or); color: var(--emeraude); }

/* ── Cibles tactiles ──────────────────────────────────────────────────────── */

/*
 * Au doigt, un lien de navigation isolé doit offrir une zone d'au moins 44 px
 * de haut. La règle ne vise que les liens autonomes : ceux posés au fil d'un
 * paragraphe restent à la hauteur du texte, comme il se doit.
 */
@media (pointer: coarse), (max-width: 699px) {
    .pied ul a,
    .pied__bas nav a,
    .liste-contact a,
    .entete-section__lien,
    .fil a,
    .commentaire__signaler {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    /* La liste des coordonnées gagne en respiration plutôt qu'en hauteur seule. */
    .liste-contact { gap: .35rem; }
    .liste-contact li { align-items: center; }
    .liste-contact svg { margin-top: 0; }

    .pied ul { gap: .1rem; }
    .pied__bas nav { gap: .4rem 1.1rem; }

    .fil a { min-height: 40px; }
}

/* ── Préférences système ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .anim { opacity: 1; transform: none; }
    .heros__fond img { animation: none; }
}

@media (prefers-contrast: more) {
    :root {
        --encre-douce: #2b322f;
        --encre-legere: #3d4643;
        --bordure: #b7ab93;
        --bordure-forte: #8c8069;
    }
}

/* ── Impression ───────────────────────────────────────────────────────────── */
@media print {
    .entete, .panneau, .barre-mobile, .cookies, .appel,
    .interactions, .visionneuse, .pied__reseaux { display: none !important; }
    body { background: #fff; color: #000; font-size: 11pt; padding: 0; }
    .banniere, .heros { min-height: auto; background: none; color: #000; }
    .banniere img, .heros__fond { display: none; }
    .banniere h1, .heros h1 { color: #000; }
    a[href^="/"]::after { content: " (mc-maisondescreations.fr" attr(href) ")"; font-size: 9pt; }
}