/* ==========================================================================
   Thomas Favier — Aquarelles
   Feuille de style unique du site (aucun style écrit dans les pages).

   Les 7 impératifs qualité (voir CLAUDE.md, section 14) :
   - Apple HIG : verre dépoli pour la navigation et les filtres, coins
     arrondis continus, animations courtes et discrètes ;
   - 3 tailles d'écran : téléphone (< 480 px) par défaut, puis tablette
     (480 à 768 px) et ordinateur (> 768 px) ;
   - compatible Safari, Chrome, Firefox, Edge ;
   - solutions de repli : chaque effet récent a une version simple avant lui ;
   - accessibilité WCAG 2.1 AA ; performance ; SEO.

   Plan :
   1. Variables
   2. Bases
   3. Navigation, logo, en-tête, pied de page
   4. Mise en page des sections
   5. Composants : boutons, cartes, filtres, curseur, fiche, formulaires, messages
   6. Administration
   7. Tablette (480 px et plus)
   8. Ordinateur (768 px et plus)
   9. Solutions de repli et préférences du système
   ========================================================================== */

/* 1. Variables ------------------------------------------------------------ */
:root {
    /* Palette reprise de la première version du site */
    --couleur-encre: #2c2c2c;      /* texte principal */
    --couleur-brume: #f5f3ef;      /* fond des pages */
    --couleur-poudre: #e8ddd4;     /* bordures douces, fonds d'image */
    --couleur-sauge: #a8b5a0;      /* filets, « .com » du logo */
    --couleur-pierre: #9e9387;     /* bordures et décor uniquement */
    /* Version foncée de « pierre », assez contrastée pour être lue (5,4:1) */
    --couleur-texte-doux: #6b6259;
    --couleur-succes: #4f6b45;
    --couleur-erreur: #a0392f;
    --couleur-blanc: #ffffff;
    /* Rose de l'accroche d'accueil : 5,2:1 sur le fond, lisible (WCAG AA) */
    --couleur-rose: #b03a6a;

    /* Verre dépoli (Apple) : fond semi-transparent + flou de l'arrière-plan */
    --verre-fond: rgba(245, 243, 239, 0.72);
    --verre-fond-plein: rgba(245, 243, 239, 0.97); /* repli sans flou */
    --verre-carte: rgba(255, 255, 255, 0.55);
    --verre-bord: rgba(158, 147, 135, 0.22);
    --verre-flou: saturate(180%) blur(20px);

    --police-texte: 'Lora', Georgia, 'Times New Roman', serif;
    --police-logo: 'Lobster', 'Brush Script MT', cursive;

    --espace-xs: 0.5rem;
    --espace-s: 1rem;
    --espace-m: 1.5rem;
    --espace-l: 2.5rem;
    --espace-xl: 4rem;

    --largeur-etroite: 36rem;
    --largeur-large: 64rem;

    /* Coins arrondis « continus » à la manière d'Apple */
    --rayon-s: 10px;    /* boutons, champs */
    --rayon-m: 14px;    /* images, cartes */
    --rayon-l: 22px;    /* panneaux */
    --rayon: var(--rayon-m);

    /* Ombres douces en deux couches */
    --ombre: 0 1px 2px rgba(44, 44, 44, 0.06), 0 6px 18px rgba(44, 44, 44, 0.10);
    --ombre-survol: 0 2px 4px rgba(44, 44, 44, 0.08), 0 14px 32px rgba(44, 44, 44, 0.16);

    /* Animations : courtes, avec la courbe d'accélération d'Apple */
    --courbe: cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition: 0.25s var(--courbe);

    --cible-tactile: 2.75rem; /* 44 px : zone de toucher minimale (WCAG / Apple) */
}

/* 2. Bases ---------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: 5rem; /* les ancres ne passent pas sous la navigation fixe */
}

body {
    margin: 0;
    min-height: 100vh;
    display: -webkit-box;
    display: flex;
    flex-direction: column;
    /* Valeurs simples d'abord : affichage correct même sans variables CSS */
    background-color: #f5f3ef;
    background-color: var(--couleur-brume);
    color: #2c2c2c;
    color: var(--couleur-encre);
    font-family: Georgia, 'Times New Roman', serif;
    font-family: var(--police-texte);
    font-size: 1rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main {
    display: block; /* anciens navigateurs */
    flex: 1 0 auto;
}

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

h1,
h2,
h3,
p,
ul,
blockquote,
figure {
    margin: 0;
}

a {
    color: inherit;
    text-underline-offset: 0.2em;
    transition: color var(--transition);
}

a:hover {
    color: #6b6259;
    color: var(--couleur-texte-doux);
}

/* Contour de sélection au clavier.
   :focus d'abord (navigateurs anciens), puis on le retire au clic de souris
   là où :focus-visible existe. */
:focus {
    outline: 2px solid #2c2c2c;
    outline: 2px solid var(--couleur-encre);
    outline-offset: 3px;
}

:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--couleur-encre);
    outline-offset: 3px;
}

/* Lien « Aller au contenu », visible seulement au clavier */
.lien-evitement {
    position: absolute;
    top: -4rem;
    left: var(--espace-s);
    z-index: 100;
    padding: var(--espace-xs) var(--espace-s);
    border-radius: var(--rayon-s);
    background: #2c2c2c;
    background: var(--couleur-encre);
    color: #f5f3ef;
    color: var(--couleur-brume);
}

.lien-evitement:focus {
    top: var(--espace-s);
    color: var(--couleur-brume);
}

.apparition {
    animation: apparition 0.6s var(--courbe) both;
}

@keyframes apparition {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

[hidden] {
    display: none !important;
}

/* Texte lu par les lecteurs d'écran mais invisible à l'écran */
.visuellement-cache {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0); /* ancien équivalent de clip-path */
    clip-path: inset(50%);
    white-space: nowrap;
}

/* 3. Navigation, logo, en-tête, pied de page ------------------------------ */

/* Barre de navigation fixe en haut, en verre dépoli (voir aussi section 9) */
.nav {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 50;
    padding: var(--espace-xs) var(--espace-s);
    border-bottom: 1px solid rgba(158, 147, 135, 0.22);
    border-bottom: 1px solid var(--verre-bord);
    background: rgba(245, 243, 239, 0.97);
    background: var(--verre-fond-plein);
}

.nav__liste {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 0.25rem; /* téléphone : les quatre liens tiennent sur une ligne */
    padding: 0;
    list-style: none;
}

.nav__lien {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    min-height: var(--cible-tactile);
    padding: 0 0.4rem;
    border-radius: var(--rayon-s);
    color: #6b6259;
    color: var(--couleur-texte-doux);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color var(--transition), background-color var(--transition);
}

.nav__lien:hover,
.nav__lien[aria-current="page"] {
    color: var(--couleur-encre);
}

.nav__lien:hover {
    background-color: rgba(158, 147, 135, 0.12);
}

.nav__lien[aria-current="page"] {
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--couleur-sauge);
    text-underline-offset: 0.45em;
}

.logo {
    font-family: 'Brush Script MT', cursive;
    font-family: var(--police-logo);
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: var(--couleur-encre);
    text-decoration: none;
}

.logo__point {
    color: #a8b5a0;
    color: var(--couleur-sauge);
}

.logo--grand {
    font-size: 2.25rem;
    font-size: clamp(2.25rem, 9vw, 4.5rem);
}

.logo--petit {
    font-size: 1.9rem;
}

.entete {
    padding: var(--espace-m) var(--espace-s) var(--espace-l);
    text-align: center;
}

.entete__sous-titre {
    margin-top: var(--espace-xs);
    color: var(--couleur-texte-doux);
    font-style: italic;
}

.filet {
    width: 3rem;
    height: 1px;
    margin: var(--espace-m) auto 0;
    border: 0;
    background: #a8b5a0;
    background: var(--couleur-sauge);
}

.filet--large {
    width: 4rem;
    margin-top: var(--espace-l);
}

.pied {
    padding: var(--espace-l) var(--espace-s);
    color: var(--couleur-texte-doux);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-align: center;
}

/* 4. Mise en page des sections -------------------------------------------- */
.hero {
    padding: var(--espace-l) var(--espace-s) 0;
    text-align: center;
}

.hero__accroche {
    max-width: 34rem;
    margin: var(--espace-s) auto 0;
    color: #b03a6a;
    color: var(--couleur-rose);
    font-size: 1.15rem;
    font-style: italic;
    font-weight: 400;
}

.section {
    width: 100%;
    max-width: 64rem;
    max-width: var(--largeur-large);
    margin: 0 auto;
    padding: var(--espace-l) var(--espace-s);
    text-align: center;
}

.section--etroite {
    max-width: 36rem;
    max-width: var(--largeur-etroite);
}

/* Accueil : la présentation suit de près la légende « œuvre du moment » */
.section--vedette + .section--presentation {
    padding-top: var(--espace-m);
}

@media (min-width: 30em) {
    .section.section--vedette {
        padding-bottom: 0;
    }

    .section--vedette + .section--presentation {
        padding-top: var(--espace-l);
    }
}

.section > * + * {
    margin-top: var(--espace-m);
}

/* Image vedette de l'accueil */
.section--vedette {
    max-width: 34rem;
    padding-bottom: 0;
}

.vedette img {
    width: 100%;
    border-radius: var(--rayon-m);
    box-shadow: var(--ombre);
}

.vedette__legende {
    margin-top: var(--espace-s);
    color: var(--couleur-texte-doux);
    font-size: 0.875rem;
    font-style: italic;
}

.titre-page {
    overflow-wrap: break-word;
    overflow-wrap: anywhere;
    font-size: 1.5rem;
    font-weight: 500;
}

.section__titre {
    color: var(--couleur-texte-doux);
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.texte-doux {
    color: #6b6259;
    color: var(--couleur-texte-doux);
}

.texte-doux--italique {
    font-style: italic;
}

.texte-doux--petit {
    font-size: 0.8rem;
}

.citation {
    font-style: italic;
    font-weight: 500;
}

.portrait {
    width: 12rem;
    height: 12rem;
    margin: 0 auto;
    border: 4px solid var(--couleur-poudre);
    border-radius: 50%;
    box-shadow: var(--ombre);
    object-fit: cover;
}

.expositions {
    padding: 0;
    color: var(--couleur-texte-doux);
    font-size: 0.95rem;
    list-style: none;
    text-align: left;
}

.expositions li + li {
    margin-top: var(--espace-xs);
}

.expositions__date {
    color: var(--couleur-encre);
}

.actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--espace-s);
    margin-top: var(--espace-l);
}

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

/* Boutons l'un sous l'autre, centrés (page d'accueil) */
.actions--colonne {
    flex-direction: column;
    align-items: center;
}

.etat-vide > * + * {
    margin-top: var(--espace-s);
}

/* Pages de texte (confidentialité) */
.texte-long {
    text-align: left;
}

.texte-long h1 {
    text-align: center;
}

.texte-long h2 {
    margin-top: var(--espace-l);
    font-size: 1.05rem;
    font-weight: 500;
}

.texte-long p {
    margin-top: var(--espace-s);
    color: var(--couleur-texte-doux);
}

/* 5. Composants ----------------------------------------------------------- */

/* Boutons : coins arrondis, léger enfoncement au clic */
.bouton {
    display: inline-block;
    min-height: 2.75rem;
    min-height: var(--cible-tactile);
    padding: 0.75rem 2rem;
    border: 1px solid #6b6259;
    border: 1px solid var(--couleur-texte-doux);
    border-radius: 10px;
    border-radius: var(--rayon-s);
    background: transparent;
    color: #6b6259;
    color: var(--couleur-texte-doux);
    font-family: inherit;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    line-height: 1.4;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color var(--transition), color var(--transition), transform 0.15s var(--courbe);
}

.bouton:hover {
    background: #6b6259;
    background: var(--couleur-texte-doux);
    color: #f5f3ef;
    color: var(--couleur-brume);
}

.bouton:active {
    transform: scale(0.98);
}

.bouton--discret {
    border-color: transparent;
    text-decoration: underline;
    text-decoration-color: var(--couleur-sauge);
}

.lien-bouton {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

/* Grille d'œuvres.
   Repli : rangées flexbox ; la grille CSS prend le relais là où elle existe (section 9). */
.grille {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.75rem;
}

.grille > * {
    width: 100%;
    padding: 0 0.75rem var(--espace-l);
}

/* Carte d'œuvre */
.carte {
    text-align: center;
}

.carte__lien {
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: var(--rayon-m);
}

.carte__image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 14px;
    border-radius: var(--rayon-m);
    background: #e8ddd4;
    background: var(--couleur-poudre);
    box-shadow: var(--ombre);
    transition: box-shadow var(--transition), transform var(--transition);
}

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

/* Survol : la carte se soulève légèrement */
.carte__lien:hover .carte__image {
    box-shadow: var(--ombre-survol);
    transform: translateY(-3px);
}

.carte__lien:hover .carte__titre {
    text-decoration: underline;
    text-decoration-color: var(--couleur-sauge);
}

.carte__sans-image {
    color: var(--couleur-texte-doux);
    font-size: 0.85rem;
    font-style: italic;
}

.carte__titre {
    margin-top: var(--espace-s);
    overflow-wrap: break-word;
    overflow-wrap: anywhere;
    font-size: 0.95rem;
    font-weight: 500;
}

.carte__details {
    color: var(--couleur-texte-doux);
    font-size: 0.8rem;
    font-style: italic;
}

.carte__vente {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--espace-xs);
    margin-top: var(--espace-xs);
    font-size: 0.85rem;
}

.carte__prix {
    font-weight: 500;
}

/* Étiquette de disponibilité : le texte porte le sens, pas la couleur seule */
.etiquette {
    padding: 0.1rem 0.6rem;
    border: 1px solid var(--couleur-pierre);
    border-radius: 999px;
    color: var(--couleur-texte-doux);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.etiquette--disponible {
    border-color: var(--couleur-succes);
    color: var(--couleur-succes);
}

.etiquette--statut-nouveau {
    border-color: var(--couleur-encre);
    color: var(--couleur-encre);
    font-weight: 500;
}

/* Filtres de la galerie : panneau arrondi sur le fond de la page */
.filtres {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--espace-s);
    padding: var(--espace-m) var(--espace-s);
    /* Même fond que la page, entouré d'un filet de 1 px */
    border: 1px solid #9e9387;
    border: 1px solid var(--couleur-pierre);
    border-radius: 22px;
    border-radius: var(--rayon-l);
    background: #f5f3ef;
    background: var(--couleur-brume);
    text-align: left;
}

.filtres__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--espace-xs);
}

/* Mise à jour immédiate : le bouton « Filtrer » n'est plus utile */
.filtres--dynamique .filtres__envoyer {
    display: none;
}

/* Curseur de prix : une poignée, un cran par prix ; seul sur sa ligne, centré */
.curseur-prix {
    --poignee: 1.75rem;
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: 36rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    text-align: center;
}

.curseur-prix legend {
    width: 100%;
    margin-bottom: var(--espace-xs);
    padding: 0;
    color: var(--couleur-texte-doux);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-align: center;
    text-transform: uppercase;
}

.curseur-prix__valeurs {
    font-size: 1.05rem;
    font-weight: 500;
}

.curseur-prix__piste {
    position: relative;
    height: 2.75rem;
}

/* La ligne */
.curseur-prix__piste::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.875rem;
    right: calc(var(--poignee) / 2);
    left: 0.875rem;
    left: calc(var(--poignee) / 2);
    height: 4px;
    margin-top: -2px;
    border-radius: 2px;
    background: #e8ddd4;
    background: var(--couleur-poudre);
}

/* Les crans : répartis à intervalles égaux sur la ligne (aucun style écrit dans la page) */
.curseur-prix__crans {
    position: absolute;
    top: 50%;
    right: calc(var(--poignee) / 2 - 1px);
    left: calc(var(--poignee) / 2 - 1px);
    display: flex;
    justify-content: space-between;
    height: 0.9rem;
    margin-top: -0.45rem;
}

.curseur-prix__cran {
    width: 2px;
    height: 100%;
    border-radius: 1px;
    background: var(--couleur-pierre);
    transition: background-color var(--transition);
}

.curseur-prix__cran--actif {
    background: var(--couleur-encre);
}

.curseur-prix input[type="range"] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    background: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y; /* sur téléphone : glisser à l'horizontale règle le prix */
}

.curseur-prix input[type="range"]::-webkit-slider-runnable-track {
    height: 100%;
    background: none;
}

.curseur-prix input[type="range"]::-moz-range-track {
    background: none;
}

.curseur-prix input[type="range"]::-webkit-slider-thumb {
    width: var(--poignee);
    height: var(--poignee);
    margin-top: calc((2.75rem - var(--poignee)) / 2);
    border: 0.5px solid rgba(0, 0, 0, 0.04);
    border-radius: 50%;
    background: var(--couleur-blanc);
    box-shadow: 0 0.5px 4px rgba(0, 0, 0, 0.12), 0 6px 13px rgba(0, 0, 0, 0.12);
    cursor: -webkit-grab;
    cursor: grab;
    -webkit-appearance: none;
    appearance: none;
    transition: transform 0.15s var(--courbe);
}

.curseur-prix input[type="range"]::-moz-range-thumb {
    width: var(--poignee);
    height: var(--poignee);
    box-sizing: border-box;
    border: 0.5px solid rgba(0, 0, 0, 0.04);
    border-radius: 50%;
    background: var(--couleur-blanc);
    box-shadow: 0 0.5px 4px rgba(0, 0, 0, 0.12), 0 6px 13px rgba(0, 0, 0, 0.12);
    cursor: grab;
}

.curseur-prix input[type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.1);
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

.curseur-prix input[type="range"]:focus {
    outline: none;
}

.curseur-prix input[type="range"]:focus-visible::-webkit-slider-thumb {
    outline: 3px solid var(--couleur-encre);
    outline-offset: 2px;
}

.curseur-prix input[type="range"]:focus-visible::-moz-range-thumb {
    outline: 3px solid var(--couleur-encre);
    outline-offset: 2px;
}

/* Montants sous la ligne, centrés sur leur cran */
.curseur-prix__etiquettes {
    display: flex;
    justify-content: space-between;
    margin: 0 calc(var(--poignee) / 2);
    color: var(--couleur-texte-doux);
    font-size: 0.75rem;
}

/* Chaque montant occupe une largeur nulle centrée sur son cran,
   et son texte déborde également à gauche et à droite */
.curseur-prix__etiquette {
    display: flex;
    justify-content: center;
    width: 0;
    white-space: nowrap;
}

/* Mise à jour de la liste des œuvres */
.resultats {
    transition: opacity 0.2s var(--courbe);
}

.resultats > * + * {
    margin-top: var(--espace-m);
}

.resultats--chargement {
    opacity: 0.45;
}

/* Pagination */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--espace-xs);
}

.pagination__lien {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-width: var(--cible-tactile);
    min-height: 2.75rem;
    min-height: var(--cible-tactile);
    padding: 0 0.75rem;
    border: 1px solid var(--couleur-poudre);
    border-radius: var(--rayon-s);
    color: var(--couleur-texte-doux);
    font-size: 0.85rem;
    text-decoration: none;
    transition: border-color var(--transition), color var(--transition);
}

a.pagination__lien:hover {
    border-color: var(--couleur-texte-doux);
    color: var(--couleur-encre);
}

.pagination__lien--actif {
    border-color: var(--couleur-encre);
    color: var(--couleur-encre);
    font-weight: 500;
}

/* Fiche d'une œuvre */
.fiche__retour {
    font-size: 0.85rem;
    text-align: left;
}

/* Liens isolés : zone de toucher confortable sur téléphone */
.fiche__retour a,
.pied a {
    display: inline-flex;
    align-items: center;
    min-height: var(--cible-tactile);
}

.fiche__colonnes {
    display: grid;
    gap: var(--espace-l);
}

.fiche__image img {
    width: auto;
    max-height: 80vh;
    margin: 0 auto;
    border-radius: var(--rayon-m);
    box-shadow: var(--ombre);
}

.fiche__texte {
    text-align: left;
}

.fiche__texte > * + * {
    margin-top: var(--espace-m);
}

/* Liens vers les réseaux sociaux, sous le titre de l'œuvre */
.fiche__entete > * + * {
    margin-top: var(--espace-xs);
}

.reseaux__texte {
    color: var(--couleur-texte-doux);
    font-size: 0.75rem;
    font-style: italic;
    line-height: 1.4;
}

.reseaux__liste {
    display: flex;
    gap: var(--espace-xs);
    margin-left: -0.6rem; /* aligne la première icône sur le texte malgré sa zone de toucher */
    padding: 0;
    list-style: none;
}

.reseaux__lien {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cible-tactile);
    height: var(--cible-tactile);
    border-radius: 50%;
    color: var(--couleur-texte-doux);
    transition: color var(--transition), background-color var(--transition);
}

.reseaux__lien:hover {
    background-color: rgba(158, 147, 135, 0.12);
    color: var(--couleur-encre);
}

.reseaux__lien--inactif,
.reseaux__lien--inactif:hover {
    background: none;
    color: var(--couleur-pierre);
    cursor: default;
}

.fiche__details {
    margin: var(--espace-m) 0 0;
}

.fiche__details div {
    display: flex;
    gap: var(--espace-s);
    padding: var(--espace-xs) 0;
    border-bottom: 1px solid var(--couleur-poudre);
}

.fiche__details dt {
    flex: 0 0 7.5rem;
    color: var(--couleur-texte-doux);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    line-height: 2.2;
    text-transform: uppercase;
}

.fiche__details dd {
    margin: 0;
}

/* Formulaires */
.formulaire {
    display: flex;
    flex-direction: column;
    gap: var(--espace-m);
    text-align: left;
}

.champ label {
    display: block;
    margin-bottom: var(--espace-xs);
    color: var(--couleur-texte-doux);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.champ input,
.champ select,
.champ textarea {
    width: 100%;
    min-height: var(--cible-tactile);
    padding: 0.6rem 0.75rem;
    border: 1px solid #9e9387;
    border: 1px solid var(--couleur-pierre);
    border-radius: 10px;
    border-radius: var(--rayon-s);
    background: #ffffff;
    background: var(--couleur-blanc);
    color: var(--couleur-encre);
    font-family: inherit;
    font-size: 1rem; /* 16 px : évite le zoom automatique de Safari sur iPhone */
    line-height: 1.5;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.champ textarea {
    resize: vertical;
}

.champ input:focus-visible,
.champ select:focus-visible,
.champ textarea:focus-visible {
    border-color: var(--couleur-encre);
    outline-offset: 1px;
    box-shadow: 0 0 0 4px rgba(168, 181, 160, 0.35);
}

.champ__requis {
    letter-spacing: 0;
    text-transform: none;
}

.champ__erreur {
    margin-top: var(--espace-xs);
    color: var(--couleur-erreur);
    font-size: 0.875rem;
}

.champ [aria-invalid="true"] {
    border-color: var(--couleur-erreur);
    border-width: 2px;
}

/* Case à cocher suivie de son texte */
.champ--case {
    display: flex;
    align-items: flex-start;
    gap: var(--espace-xs);
}

.champ--case input {
    flex: 0 0 auto;
    width: 1.1rem;
    min-height: 0;
    height: 1.1rem;
    margin-top: 0.3rem;
    accent-color: var(--couleur-texte-doux);
}

.champ--case label {
    margin: 0;
    font-size: 0.9rem;
    letter-spacing: 0;
    text-transform: none;
}

/* Champ piège pour les robots : hors de l'écran */
.piege {
    position: absolute;
    left: -9999px;
}

/* Messages de confirmation ou d'erreur */
.message {
    padding: var(--espace-s);
    border-left: 3px solid var(--couleur-pierre);
    border-radius: var(--rayon-s);
    background: #ffffff;
    background: var(--couleur-blanc);
    font-size: 0.95rem;
    text-align: left;
}

.message--succes {
    border-color: var(--couleur-succes);
    color: var(--couleur-succes);
}

.message--erreur {
    border-color: var(--couleur-erreur);
    color: var(--couleur-erreur);
}

/* 6. Administration ------------------------------------------------------- */
.admin__entete {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espace-xs) var(--espace-m);
    padding: var(--espace-s) var(--espace-m);
    border-bottom: 1px solid var(--verre-bord);
    background: var(--verre-fond-plein);
}

.admin__marque {
    display: inline-flex;
    align-items: center;
    min-height: var(--cible-tactile);
    color: var(--couleur-texte-doux);
    text-decoration: none;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.admin__marque:hover {
    color: var(--couleur-encre);
    text-decoration: underline;
    text-decoration-color: var(--couleur-sauge);
}

.admin__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espace-xs) var(--espace-m);
    margin-left: auto;
    font-size: 0.9rem;
}

.admin__nav a,
.admin__nav .lien-bouton {
    display: inline-flex;
    align-items: center;
    min-height: var(--cible-tactile);
}

.admin__contenu {
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    padding: var(--espace-l) var(--espace-s);
}

.admin__contenu > * + * {
    margin-top: var(--espace-m);
}

.admin__bloc {
    padding: var(--espace-m);
    border: 1px solid var(--couleur-poudre);
    border-radius: var(--rayon-l);
    background: var(--couleur-blanc);
    box-shadow: 0 1px 2px rgba(44, 44, 44, 0.04);
}

.admin__bloc > * + * {
    margin-top: var(--espace-s);
}

.admin__bloc--etroit {
    max-width: 26rem;
    margin-right: auto;
    margin-left: auto;
}

.admin__bloc--danger {
    border-color: var(--couleur-erreur);
}

.admin__colonnes {
    display: grid;
    gap: var(--espace-m);
}

.admin__message {
    padding: var(--espace-s);
    border-radius: var(--rayon-s);
    background: var(--couleur-brume);
    overflow-wrap: break-word;
    overflow-wrap: anywhere;
}

.admin__export > * + * {
    margin-top: var(--espace-xs);
}

/* Aperçu de l'œuvre en haut de son formulaire de modification */
.admin__visuel {
    max-width: 24rem;
}

.admin__visuel img {
    max-height: 60vh;
    width: auto;
    border-radius: var(--rayon-m);
    box-shadow: var(--ombre);
}

.admin__visuel figcaption {
    margin-top: var(--espace-xs);
}

.admin__apercu {
    margin-bottom: var(--espace-xs);
    border: 1px solid var(--couleur-poudre);
    border-radius: var(--rayon-s);
}

.filtres--admin {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

.bouton--danger {
    border-color: var(--couleur-erreur);
    color: var(--couleur-erreur);
}

.bouton--danger:hover {
    background: var(--couleur-erreur);
    color: var(--couleur-blanc);
}

.compteurs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--espace-s);
    padding: 0;
    list-style: none;
}

.compteur {
    display: block;
    padding: var(--espace-s);
    border: 1px solid var(--couleur-poudre);
    border-radius: var(--rayon-m);
    text-align: center;
    text-decoration: none;
    transition: border-color var(--transition), transform var(--transition);
}

.compteur:hover {
    border-color: var(--couleur-texte-doux);
    transform: translateY(-2px);
}

.compteur__nombre {
    display: block;
    color: var(--couleur-encre);
    font-size: 1.75rem;
    line-height: 1.2;
}

.compteur__libelle {
    color: var(--couleur-texte-doux);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.formulaire__ligne {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--espace-m);
}

.tableau-defilant {
    position: relative; /* garde les textes cachés à l'intérieur du tableau */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    text-align: left;
}

.tableau th,
.tableau td {
    padding: var(--espace-xs) var(--espace-s) var(--espace-xs) 0;
    border-bottom: 1px solid var(--couleur-poudre);
    vertical-align: top;
}

.tableau th {
    color: var(--couleur-texte-doux);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Numéro de classement des œuvres (ordre de la galerie) */
.tableau__rang {
    color: var(--couleur-texte-doux);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.tableau__vignette {
    width: 4rem;
    height: 3rem;
    border-radius: 6px;
    object-fit: cover;
}

.journal {
    padding: 0;
    font-size: 0.9rem;
    list-style: none;
}

.journal li {
    padding: var(--espace-xs) 0;
    border-bottom: 1px solid var(--couleur-poudre);
}

.journal__date {
    display: block;
    color: var(--couleur-texte-doux);
    font-size: 0.75rem;
}

/* Téléphone uniquement (moins de 480 px) */
@media (max-width: 29.99em) {
    /* Avec beaucoup de prix, seuls « Tous » et le prix le plus haut sont écrits sous le curseur */
    .curseur-prix__etiquette--secondaire span {
        visibility: hidden;
    }
}

/* 7. Tablette : 480 px et plus -------------------------------------------- */
@media (min-width: 30em) {
    .nav {
        padding: var(--espace-s) var(--espace-m);
    }

    .nav__liste {
        gap: 0 var(--espace-m);
    }

    .nav__lien {
        padding: 0 var(--espace-xs);
        font-size: 0.875rem;
        letter-spacing: 0.15em;
    }

    .hero {
        padding-top: var(--espace-xl);
    }

    .hero__accroche {
        font-size: 1.25rem;
    }

    .section {
        padding: var(--espace-xl) var(--espace-m);
    }

    .grille > * {
        width: 50%;
    }

    .filtres {
        padding: var(--espace-m);
    }

    /* Le curseur sur sa ligne, puis la liste « Disponibilité » centrée */
    .filtres:not(.filtres--admin) {
        grid-template-columns: minmax(0, 20rem);
        justify-content: center;
    }

    .filtres--admin {
        grid-template-columns: 1fr 1fr;
    }
}

/* 8. Ordinateur : 768 px et plus ------------------------------------------ */
@media (min-width: 48em) {
    .grille > * {
        width: 33.333%;
    }

    .fiche__colonnes {
        grid-template-columns: 3fr 2fr;
        align-items: start;
    }

    .admin__colonnes {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .filtres--admin {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* 9. Solutions de repli et préférences du système ------------------------- */

/* Grille CSS là où elle existe (les anciens navigateurs gardent les rangées flexbox) */
@supports (display: grid) {
    .grille {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--espace-l) var(--espace-m);
        margin: 0;
    }

    .grille > * {
        width: auto;
        padding: 0;
    }

    @media (min-width: 30em) {
        .grille {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        /* Accueil : une seule œuvre mise en avant reste centrée */
        .grille--1 {
            grid-template-columns: minmax(0, 32rem);
            justify-content: center;
        }
    }

    @media (min-width: 48em) {
        .grille {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .grille--1 {
            grid-template-columns: minmax(0, 32rem);
        }

        .grille--2 {
            grid-template-columns: repeat(2, minmax(0, 24rem));
            justify-content: center;
        }
    }
}

/* Verre dépoli là où le navigateur sait flouter l'arrière-plan ;
   ailleurs, la navigation garde un fond presque opaque */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .nav,
    .admin__entete {
        background: var(--verre-fond);
        -webkit-backdrop-filter: var(--verre-flou);
        backdrop-filter: var(--verre-flou);
    }
}

/* Coins « continus » (forme d'écureuil des icônes Apple) là où c'est pris en charge */
@supports (corner-shape: squircle) {
    .carte__image,
    .vedette img,
    .fiche__image img,
    .filtres,
    .admin__bloc,
    .bouton,
    .champ input,
    .champ select,
    .champ textarea {
        corner-shape: squircle;
    }
}

/* Proportion 4/3 des images de carte pour les navigateurs sans aspect-ratio */
@supports not (aspect-ratio: 4 / 3) {
    .carte__image {
        height: 0;
        padding-top: 75%;
    }

    .carte__image img,
    .carte__image .carte__sans-image {
        position: absolute;
        top: 0;
        left: 0;
    }

    .carte__sans-image {
        width: 100%;
        height: 100%;
        line-height: 1;
    }
}

/* Mode contraste élevé de Windows : les bordures restent visibles */
@media (forced-colors: active) {
    .filtres,
    .bouton,
    .carte__image,
    .curseur-prix__cran {
        border: 1px solid CanvasText;
    }
}

/* Respecte le réglage « réduire les animations » du système */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .carte__lien:hover .carte__image,
    .compteur:hover,
    .bouton:active {
        transform: none;
    }
}