/* ==========================================================================
   L'impondérable — feuille de style unique
   ==========================================================================

   Concept : le site change de matière avec l'heure.
     JOUR  — papier grainé, filets tracés, ombres douces. On a envie de
             toucher. Les photos de plats y sont appétissantes.
     NUIT  — encre profonde, plus aucune bordure : les blocs émergent du fond
             par la lumière. Trois éléments seulement s'allument, écho des
             néons de la vitrine.

   Ce qui NE CHANGE JAMAIS entre les deux modes : la grille, les tailles, les
   positions, les espacements, la typographie. C'est la même page sous une
   autre lumière — c'est ce qui rend le double mode tenable.

   Le mode est posé sur <html data-mode="jour|nuit"> par js/jour-nuit.js.

   Sommaire
     1.  Réglages et palettes
     2.  Base et matière
     3.  Typographie
     4.  Liens, boutons, focus
     5.  En-tête et navigation
     6.  Sélecteurs (langue, mode)
     7.  Premier écran
     8.  Présentation
     9.  Ambiance (zigzag)
     10. Avis
     11. Privatisation
     12. Pied de page
     13. Barre flottante
     14. Apparitions et mouvement
     15. Page de la carte
     16. Formulaire de privatisation
     17. Mentions légales et page introuvable
     18. Invitation au clic
   ========================================================================== */


/* ==========================================================================
   1. Réglages et palettes
   ========================================================================== */

:root {
    /* --- Espacements, sur une seule échelle --- */
    --xs: 0.5rem;
    --sm: 0.875rem;
    --md: 1.5rem;
    --lg: 2.5rem;
    --xl: 4rem;
    --xxl: 6.5rem;

    --conteneur: 1180px;
    --lecture: 62ch;
    --gouttiere: clamp(1.25rem, 5vw, 4rem);
    --cible: 44px;
    --rayon: 4px;
    /* Hauteur des deux barres collantes, calculée plutôt qu'écrite en dur :
       cible tactile + espacements + filet. Sert aux ancres de la carte et au
       menu plein écran, qui doivent se poser juste dessous. */
    --hauteur-entete: calc(var(--cible) + var(--xs) * 2 + 1px);
    --hauteur-nav-categories: calc(var(--cible) + var(--xs) * 2 + 1px);
    --rayon-photo: 6px;

    /* --- Typographie --- */
    --titre: "Fraunces", Georgia, "Times New Roman", serif;
    --police: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Le nom du bar est un seul mot, qui ne peut pas passer à la ligne : sa
       taille doit le faire tenir dans l'écran le plus étroit (320 px, gouttières
       comprises). Le mot mesure environ 7 fois la taille de la police. */
    --t-h1: clamp(2.25rem, 12.5vw, 7.5rem);
    --t-h2: clamp(2rem, 5.2vw, 3.75rem);
    /* Titre de page intérieure : la même voix que le premier écran, une
       octave plus bas. --t-h1 reste réservé au nom du bar. */
    --t-h1-page: clamp(2.5rem, 7vw, 5rem);
    --t-h3: clamp(1.375rem, 2.6vw, 1.875rem);
    --t-lead: clamp(1.125rem, 2vw, 1.4375rem);
    --t-corps: 1.0625rem;
    --t-petit: 0.9375rem;
    --t-label: 0.8125rem;

    /* --- JOUR : la matière --- */
    --fond: #E6DFD1;
    --fond-alt: #DDD4C2;
    --fond-carte: #F3EEE4;
    --texte: #1E1913;
    --texte-doux: #625849;
    --ligne: #C4B9A4;
    --ligne-forte: #8C8371;
    --accent: #C8301E;
    --accent-lien: #A8281A;
    /* Ocre assombri : la version plus claire ne tenait pas le contraste
       minimal pour les sur-titres, qui sont petits et en capitales. */
    --accent-doux: #70481E;
    --cta-fond: #C8301E;
    --cta-texte: #FDF6F1;

    --ombre-photo: 0 1px 2px rgba(30, 25, 19, 0.08), 0 10px 28px rgba(30, 25, 19, 0.12);
    --ombre-bloc: 0 1px 2px rgba(30, 25, 19, 0.05), 0 4px 14px rgba(30, 25, 19, 0.06);
    --lueur: none;
    --grain-opacite: 0.05;
    --voile-photo: linear-gradient(to top, rgba(18, 14, 10, 0.92) 0%, rgba(18, 14, 10, 0.78) 45%, rgba(18, 14, 10, 0.66) 65%, rgba(18, 14, 10, 0.12) 90%);
    --photo-filtre: none;

    color-scheme: light;
}

/* --- NUIT : la lumière, dans la famille « bouteille » ---
   Fond vert bouteille très sombre plutôt que bleu nuit, et l'or en accent
   doux : c'est la palette du bar éclairé le soir, pas celle d'un écran. */
:root[data-mode="nuit"] {
    --fond: #0C1A14;
    --fond-alt: #10201A;
    --fond-carte: #16291F;
    --texte: #F2EBDD;
    --texte-doux: #A9BAAE;
    --ligne: #22382C;
    --ligne-forte: #3B5949;
    --accent: #F04B33;
    --accent-lien: #F2694F;
    --accent-doux: #E0BE5A;
    /* Le rouge du bouton reste celui du jour : un rouge plus clair la nuit
       tombait sous le contraste minimal avec son texte. C'est le halo, pas
       la teinte, qui donne l'impression d'allumage. */
    --cta-fond: #C8301E;
    --cta-texte: #FFF6F1;

    /* La nuit, les blocs ne sont plus posés sur le fond : ils en émergent. */
    --ombre-photo: 0 18px 50px rgba(0, 0, 0, 0.6);
    --ombre-bloc: none;
    --lueur: 0 0 34px rgba(240, 75, 51, 0.28);
    --grain-opacite: 0.028;
    --voile-photo: linear-gradient(to top, rgba(4, 12, 8, 0.94) 0%, rgba(4, 12, 8, 0.8) 45%, rgba(4, 12, 8, 0.66) 65%, rgba(4, 12, 8, 0.15) 90%);
    --photo-filtre: contrast(1.08) saturate(1.05) brightness(0.92);

    color-scheme: dark;
}

/* Les transitions de couleur ne vivent que le temps de la bascule : en
   permanence, elles alourdiraient chaque survol et chaque défilement. */
:root.bascule-en-cours,
:root.bascule-en-cours * {
    transition: background-color 0.45s ease, color 0.45s ease,
                border-color 0.45s ease, box-shadow 0.45s ease !important;
}


/* ==========================================================================
   2. Base et matière
   ========================================================================== */

@font-face {
    font-family: "Fraunces";
    src: url("../fonts/fraunces-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Fraunces";
    src: url("../fonts/fraunces-600.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Fraunces";
    src: url("../fonts/fraunces-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo-500.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo-600.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Archivo";
    src: url("../fonts/archivo-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

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

html {
    scroll-behavior: smooth;
    /* Réserve la place de la barre de défilement : sans elle, l'ouverture
       du menu (qui bloque le défilement) décalait les boutons de 15 px. */
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    background-color: var(--fond);
    color: var(--texte);
    font-family: var(--police);
    font-size: var(--t-corps);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* La matière : un grain fin posé sur toute la page. Très présent le jour,
   presque éteint la nuit — de la lumière, on n'attend pas du toucher. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: var(--grain-opacite);
    /* Texture précalculée (img/grain.webp, 14 Ko). C'était un filtre SVG
       feTurbulence recalculé à chaque chargement : il retardait le premier
       affichage d'environ une seconde. Pour la régénérer, capturer en
       180 × 180, fond transparent, ce SVG : fractalNoise, baseFrequency 0.85,
       numOctaves 3, stitchTiles stitch. */
    background-image: url("../img/grain.webp");
}

/* La nuit, une lueur très diffuse en haut de page : la pièce est éclairée
   par quelque chose hors champ, dans l'ambre d'une lampe. */
:root[data-mode="nuit"] body::after {
    content: "";
    position: fixed;
    top: -30vh;
    left: 50%;
    width: 120vw;
    height: 70vh;
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(224, 190, 90, 0.08) 0%, transparent 65%);
}

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

/* Les règles de display posées plus bas prennent le pas sur la règle par
   défaut du navigateur : sans ceci, l'icône de fermeture du menu, marquée
   hidden dans le HTML, s'afficherait en même temps que celle d'ouverture. */
[hidden] {
    display: none !important;
}

.lucide {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

main {
    position: relative;
    z-index: 2;
}


/* ==========================================================================
   3. Typographie
   ========================================================================== */

h1, h2, h3 {
    font-family: var(--titre);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.02em;
    text-wrap: balance;
    margin: 0;
}

h1 {
    font-size: var(--t-h1);
    line-height: 0.92;
    letter-spacing: -0.035em;
}

h2 {
    font-size: var(--t-h2);
}

h3 {
    font-size: var(--t-h3);
    letter-spacing: -0.015em;
}

p {
    margin: 0 0 var(--md);
    max-width: var(--lecture);
}

/* L'étiquette qui coiffe chaque section : petite, espacée, en capitales.
   C'est le seul endroit où l'on utilise les capitales — les titres, eux,
   restent en bas-de-casse pour laisser respirer le serif. */
.eyebrow {
    display: block;
    font-family: var(--police);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-doux);
    margin: 0 0 var(--sm);
    max-width: none;
}

.lead {
    font-size: var(--t-lead);
    line-height: 1.55;
}

/* La colonne de contenu est obtenue par le padding, pas en centrant chaque
   enfant : centrer les enfants leur ferait perdre leur alignement à gauche
   dès qu'ils ont eux-mêmes une largeur maximale (un titre sur 16 caractères,
   par exemple, se retrouverait au milieu). */
main > section {
    position: relative;
    padding-block: var(--xxl);
    padding-inline: max(var(--gouttiere), calc((100% - var(--conteneur)) / 2));
}


/* ==========================================================================
   4. Liens, boutons, focus
   ========================================================================== */

a {
    color: var(--accent-lien);
    text-decoration: none;
}

/* Le filet se trace au survol, au lieu d'apparaître d'un coup. */
main a:not(.cta):not(.cta-secondaire):not(.card-lien),
footer a {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease;
}

main a:not(.cta):not(.cta-secondaire):hover,
footer a:hover {
    background-size: 100% 1px;
}

button {
    cursor: pointer;
    font: inherit;
}

button:disabled {
    cursor: progress;
    opacity: 0.75;
}

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

.cta,
.cta-secondaire {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--xs);
    min-height: 52px;
    padding: var(--sm) var(--lg);
    border-radius: var(--rayon);
    font-family: var(--police);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.cta {
    background-color: var(--cta-fond);
    color: var(--cta-texte);
    box-shadow: var(--lueur);
}

.cta:hover {
    transform: translateY(-2px);
    box-shadow: var(--lueur), 0 10px 24px rgba(0, 0, 0, 0.22);
}

.cta-secondaire {
    border: 1.5px solid var(--ligne-forte);
    color: var(--texte);
}

.cta-secondaire:hover {
    border-color: var(--accent);
    color: var(--accent-lien);
    transform: translateY(-2px);
}

.lien-evitement {
    position: absolute;
    top: -100px;
    left: var(--sm);
    z-index: 60;
    padding: var(--sm) var(--md);
    background-color: var(--cta-fond);
    color: var(--cta-texte);
    border-radius: var(--rayon);
    font-weight: 600;
}

.lien-evitement:focus {
    top: var(--sm);
}

#contenu:focus {
    outline: none;
}

.center-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}


/* ==========================================================================
   5. En-tête et navigation
   ========================================================================== */

header {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--md);
    padding: var(--xs) var(--gouttiere);
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: color-mix(in srgb, var(--fond) 82%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--xs);
    min-height: var(--cible);
    color: var(--texte);
    font-family: var(--titre);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.brand:hover .logo {
    transform: rotate(-8deg) scale(1.08);
}

.logo {
    width: 30px;
    height: 30px;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.iconlogo {
    width: 20px;
    height: 20px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--xs);
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--cible);
    min-height: var(--cible);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    background-color: transparent;
    color: var(--accent-lien);
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.btn-icon:hover {
    border-color: var(--accent);
    background-color: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Panneau plein écran du menu, masqué tant qu'il n'est pas ouvert */
.nav-principale {
    display: none;
    position: fixed;
    top: var(--hauteur-entete);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 45;
    overflow-y: auto;
    background-color: var(--fond);
}

.nav-principale.est-ouvert {
    display: block;
}

.nav-principale ul {
    display: flex;
    flex-direction: column;
    gap: var(--xs);
    margin: 0;
    padding: var(--lg) var(--gouttiere);
    list-style: none;
}

.nav-principale a {
    display: flex;
    align-items: center;
    min-height: var(--cible);
    color: var(--texte);
    font-family: var(--titre);
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.nav-principale a:hover,
.nav-principale a[aria-current="page"] {
    color: var(--accent-lien);
}

body.menu-ouvert {
    overflow: hidden;
}


/* ==========================================================================
   6. Sélecteurs (langue, mode jour/nuit)
   ========================================================================== */

.selecteur-langue-item,
.selecteur-mode-item {
    border-top: 1px solid var(--ligne);
    margin-top: var(--sm);
    padding-top: var(--sm);
}

.selecteur-langue {
    display: flex;
    gap: var(--xs);
}

.selecteur-langue-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--cible);
    min-height: var(--cible);
    padding: 0 var(--sm);
    background-color: transparent;
    border: 1px solid var(--ligne);
    border-radius: 999px;
    color: var(--texte-doux);
    font-family: var(--police);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: 0.06em;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.selecteur-langue-bouton:hover {
    border-color: var(--accent);
    color: var(--texte);
}

.selecteur-langue-bouton[aria-pressed="true"] {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--cta-texte);
}

.selecteur-mode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--cible);
    min-height: var(--cible);
    background-color: transparent;
    border: 1px solid var(--ligne);
    border-radius: 999px;
    color: var(--accent-doux);
    transition: border-color 0.2s ease, color 0.2s ease, transform 0.35s ease;
}

.selecteur-mode:hover {
    border-color: var(--accent);
    transform: rotate(18deg);
}


/* ==========================================================================
   7. Premier écran
   ========================================================================== */

.hero {
    display: grid;
    /* minmax(0, 1fr) et non 1fr : une colonne 1fr s'élargit jusqu'au contenu
       le plus large qu'elle ne peut pas couper. Ici, la photo et le titre
       poussaient le bloc au-delà de l'écran sur les téléphones étroits. */
    grid-template-columns: minmax(0, 1fr);
    min-height: clamp(540px, 84vh, 880px);
    padding: 0 !important;
    isolation: isolate;
}


.hero-media {
    grid-area: 1 / 1;
    overflow: hidden;
    position: relative;
}

/* Sortie du flux : sinon la photo impose sa propre hauteur (largeur × ratio)
   et le premier écran dépasse le min-height prévu sur grand écran. */
.hero-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Photo verticale : sur écran large, seule une bande horizontale est
       visible. Centrée, elle va de l'enseigne « L'IMPOND' » à la terrasse. */
    object-position: center 50%;
    filter: var(--photo-filtre);
}

/* Le voile fait tenir le texte par-dessus la photo, dans les deux modes. */
.hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--voile-photo);
}

.hero-content {
    grid-area: 1 / 1;
    align-self: end;
    z-index: 2;
    width: 100%;
    max-width: var(--conteneur);
    margin-inline: auto;
    padding: var(--xl) var(--gouttiere) var(--lg);
}

/* Le premier écran garde sa couleur claire même en mode jour : le texte est
   posé sur une photo sombre, pas sur le papier. */
.hero-content .eyebrow {
    color: #F2C9A0;
}

/* Le texte du premier écran peut croiser les lettrages clairs de la
   vitrine : une ombre douce garantit sa lisibilité là où le voile seul
   ne suffit pas. */
.hero-content .eyebrow,
.hero .info {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 14px rgba(0, 0, 0, 0.45);
}

.hero-content h1 {
    color: #FBF6EE;
    margin-bottom: var(--lg);
}

.hero .info {
    display: flex;
    align-items: flex-start;
    gap: var(--sm);
    color: #EFE7DA;
}

.hero .info .center-icon {
    color: #F2C9A0;
    padding-top: 3px;
}

.hero .info-text p {
    margin: 0;
    font-weight: 600;
}

.hero .info-text > span {
    display: block;
    font-size: var(--t-petit);
    color: #C5BCAE;
}

/* L'adresse ouvre l'itinéraire dans Google Maps. Sur téléphone il n'y a
   pas de survol : le souligné et la flèche restent donc visibles en
   permanence, ce sont eux qui disent « cliquable ». */
.lien-adresse {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
    transition: text-decoration-color 0.2s ease;
}

.lien-adresse:hover,
.lien-adresse:focus-visible {
    text-decoration-color: currentColor;
}

/* La flèche ne doit jamais partir seule à la ligne. */
.lien-adresse-fin {
    white-space: nowrap;
}

.lien-adresse svg {
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    margin-left: 0.2em;
    vertical-align: -0.05em;
    color: var(--accent-doux);
}

.hero .lien-adresse svg {
    color: #F2C9A0;
}

.hero .cta {
    margin-top: var(--md);
}


/* ==========================================================================
   8. Présentation
   ========================================================================== */

.story {
    background-color: var(--fond-alt);
}

.eyebrow-row {
    display: flex;
    align-items: center;
    gap: var(--xs);
    margin-bottom: var(--xs);
}

.eyebrow-row .eyebrow {
    margin-bottom: 0;
}

.story h2 {
    max-width: 16ch;
    margin-bottom: var(--lg);
}

.story .lead {
    max-width: var(--lecture);
}

.story .lead strong {
    font-family: var(--titre);
    font-weight: 600;
    color: var(--accent-lien);
}

/* Mise en exergue par un filet à gauche, pas par une boîte de plus. */
.text-important {
    padding-left: var(--md);
    border-left: 3px solid var(--accent);
    font-size: var(--t-lead);
    line-height: 1.5;
    color: var(--texte);
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sm);
    margin-top: var(--lg);
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: var(--xs);
    padding: var(--xs) var(--md);
    border: 1px solid var(--ligne);
    border-radius: 999px;
    color: var(--texte);
}

.tag .center-icon,
.tag > svg {
    color: var(--accent-doux);
}

.tag p {
    margin: 0;
    font-size: var(--t-petit);
    font-weight: 500;
    max-width: none;
}


/* ==========================================================================
   9. Ambiance — c'est ici que la page sort du rang
   ========================================================================== */

.ambiance {
    display: grid;
    gap: var(--xl);
}

.ambiance-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--md);
    padding-bottom: var(--md);
    border-bottom: 1px solid var(--ligne);
}

.ambiance-title h2 {
    max-width: 12ch;
}

.card {
    display: grid;
    gap: var(--md);
}

.card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--rayon-photo);
    background-color: var(--fond-carte);
    box-shadow: var(--ombre-photo);
}

.card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: var(--photo-filtre);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.card:hover .card-media img {
    transform: scale(1.04);
}

/* Emplacement encore sans photo : une trame discrète plutôt qu'un trou. */
.card-media:not(:has(img)) {
    background-image: repeating-linear-gradient(
        135deg,
        var(--fond-carte),
        var(--fond-carte) 10px,
        var(--fond-alt) 10px,
        var(--fond-alt) 20px
    );
}

.card-media:not(:has(img))::after {
    content: "Photo à venir";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--texte-doux);
    font-size: var(--t-petit);
}

.tag-picture {
    position: absolute;
    top: var(--sm);
    left: var(--sm);
    z-index: 2;
    padding: 0.3rem 0.75rem;
    background-color: var(--cta-fond);
    color: var(--cta-texte);
    border-radius: 999px;
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: var(--lueur);
}

/* Signale une image qui n'est pas une photo du lieu (générée par IA) :
   lisible si on la cherche, sans concurrencer l'étiquette principale. */
.mention-illustration {
    position: absolute;
    right: var(--xs);
    bottom: var(--xs);
    z-index: 2;
    padding: 0.1rem 0.4rem;
    background-color: rgba(0, 0, 0, 0.45);
    color: rgba(255, 255, 255, 0.85);
    border-radius: 3px;
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
}

.card-body {
    align-self: center;
}

/* Le nom du plat porte la section : il doit peser autant que la photo, sinon
   la colonne de texte flotte dans le vide à côté d'une grande image. */
.card-body h3 {
    font-size: clamp(1.875rem, 3.6vw, 3rem);
    margin-bottom: var(--sm);
}

/* Le prix est une donnée : chiffres alignés, jamais de chasse variable.
   Le filet au-dessus lui donne une assise, comme une ligne de tableau. */
.card-prix,
.card-body > span {
    display: block;
    padding-top: var(--sm);
    border-top: 1px solid var(--ligne);
    font-size: var(--t-lead);
    color: var(--texte-doux);
    font-variant-numeric: tabular-nums;
}

.card-prix-libelle {
    font-size: var(--t-petit);
    color: var(--texte-doux);
}

.card-prix-valeur {
    margin-left: 0.35em;
    color: var(--accent-lien);
    font-weight: 700;
}


/* ==========================================================================
   10. Avis
   ========================================================================== */

.avis h2 {
    max-width: 14ch;
    margin-bottom: var(--md);
}

.avis-note {
    display: flex;
    align-items: center;
    gap: var(--sm);
    margin-bottom: var(--lg);
}

.avis-etoiles {
    color: var(--accent);
    font-size: 1.25rem;
    letter-spacing: 0.08em;
}

.avis-note p {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.avis-note p span:last-child {
    color: var(--texte-doux);
    font-weight: 400;
}

.avis-liste {
    display: grid;
    gap: var(--md);
    margin-bottom: var(--lg);
}

/* Les avis ne sont pas des cartes : un filet et un guillemet suffisent. */
.avis-carte {
    position: relative;
    margin: 0;
    padding: var(--md) 0 0 var(--md);
    border-top: 1px solid var(--ligne);
}

.avis-carte::before {
    content: "\201C";
    position: absolute;
    top: 0.35em;
    left: -0.06em;
    font-family: var(--titre);
    font-size: 3.5rem;
    line-height: 1;
    color: var(--accent);
    opacity: 0.55;
}

.avis-carte p {
    margin-bottom: var(--sm);
    font-size: var(--t-petit);
    line-height: 1.65;
}

.avis-carte cite {
    font-style: normal;
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--texte-doux);
}


/* ==========================================================================
   11. Privatisation
   ========================================================================== */

.privatisation {
    background-color: var(--fond-alt);
}

.privatisation h2 {
    max-width: 14ch;
    margin-bottom: var(--md);
}

.privatisation-reperes {
    display: grid;
    gap: var(--sm);
    margin: var(--lg) 0 0;
    padding: 0;
    list-style: none;
}

.privatisation-reperes li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sm);
    align-items: start;
    padding: var(--md);
    background-color: var(--fond-carte);
    border: 1px solid var(--ligne);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-bloc);
}

.privatisation-reperes .center-icon {
    color: var(--accent-doux);
    padding-top: 2px;
}

/* L'offre commerciale : la seule tuile qui s'allume la nuit. */
.repere-offre {
    border-color: var(--accent) !important;
    background-color: color-mix(in srgb, var(--accent) 10%, var(--fond-carte)) !important;
    box-shadow: var(--lueur) !important;
}

.repere-offre .center-icon {
    color: var(--accent) !important;
}

.repere-offre span {
    font-weight: 600;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sm);
    margin-top: var(--lg);
}


/* ==========================================================================
   12. Pied de page
   ========================================================================== */

footer {
    position: relative;
    z-index: 2;
    display: grid;
    gap: var(--lg);
    padding-block: var(--xl) var(--xxl);
    padding-inline: max(var(--gouttiere), calc((100% - var(--conteneur)) / 2));
    border-top: 1px solid var(--ligne);
    color: var(--texte-doux);
    font-size: var(--t-petit);
}

.footer-marque {
    display: flex;
    align-items: center;
    gap: var(--xs);
    color: var(--texte);
    font-family: var(--titre);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

footer address {
    font-style: normal;
    line-height: 1.8;
}

.footer-horaires h2 {
    font-size: var(--t-label);
    font-family: var(--police);
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-doux);
    margin-bottom: var(--xs);
}

.footer-horaires p {
    margin-bottom: 0.25rem;
}

.footer-liens {
    display: flex;
    flex-wrap: wrap;
    gap: var(--md);
    margin: 0;
    padding: 0;
    list-style: none;
}

footer a {
    color: var(--texte-doux);
}

/* Cible tactile d'au moins 24 px de haut (WCAG 2.5.8) : le texte seul
   n'en faisait que 16, trop juste au doigt entre deux liens voisins. */
.footer-liens a {
    display: inline-block;
    padding-block: 0.375rem;
}

footer a:hover {
    color: var(--accent-lien);
}

.message-sanitaire {
    padding-top: var(--md);
    border-top: 1px solid var(--ligne);
    font-size: var(--t-label);
}

.retour-haut a {
    display: inline-flex;
    align-items: center;
    gap: var(--xs);
    min-height: var(--cible);
}


/* ==========================================================================
   13. Barre flottante (mobile)
   ========================================================================== */

.barre-flottante {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 35;
    padding: var(--sm) var(--gouttiere);
    padding-bottom: calc(var(--sm) + env(safe-area-inset-bottom, 0px));
    background-color: color-mix(in srgb, var(--fond) 88%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--ligne);
}

.barre-flottante .cta {
    width: 100%;
}

body.menu-ouvert .barre-flottante {
    display: none;
}

footer:has(~ .barre-flottante) {
    padding-bottom: calc(var(--xxl) + 76px);
}


/* ==========================================================================
   14. Apparitions et mouvement
   ========================================================================== */

/* Posé par js/app.js : l'état masqué vit en CSS, mais n'est appliqué que si
   le script tourne — sans lui, tout reste visible. */
.section-en-attente {
    opacity: 0;
    transform: translateY(32px);
}

.section-visible {
    opacity: 1;
    transform: none;
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Profondeur au défilement : la valeur est posée par js/animations.js,
   qui la laisse à 0 si le visiteur demande des animations réduites. */
.parallaxe {
    will-change: transform;
    transform: translate3d(0, var(--decalage, 0), 0);
}

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

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

    .section-en-attente {
        opacity: 1;
        transform: none;
    }

    .parallaxe {
        transform: none !important;
    }
}


/* ==========================================================================
   Point de rupture : 768px
   ========================================================================== */

@media (min-width: 768px) {
    header {
        padding-inline: var(--gouttiere);
    }

    .hero-content {
        padding-bottom: var(--xl);
    }

    /* Les deux repères du premier écran passent côte à côte. */
    .hero .info {
        display: inline-flex;
        margin-right: var(--xl);
    }

    /* Le zigzag : photo à gauche, texte à droite, puis l'inverse. */
    .card {
        grid-template-columns: 1.25fr 1fr;
        gap: var(--xl);
        align-items: center;
    }

    .card:nth-child(odd) .card-media {
        order: 2;
    }

    .card:nth-child(odd) .card-body {
        order: 1;
        text-align: right;
    }

    .avis-liste {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--lg);
    }

    .privatisation-reperes {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--md);
    }

    .repere-offre {
        grid-column: 1 / -1;
    }

    .barre-flottante {
        display: none;
    }

    footer:has(~ .barre-flottante) {
        padding-bottom: var(--xxl);
    }

    footer {
        grid-template-columns: repeat(3, 1fr);
        align-items: start;
    }

    .footer-marque,
    .message-sanitaire,
    .retour-haut {
        grid-column: 1 / -1;
    }
}


/* L'en-tête a son propre point de rupture, plus large que celui de la page :
   logo, trois liens, sélecteur de langue, bouton jour/nuit et téléphone ne
   tiennent sur une ligne qu'à partir de 1024 px (mesuré, en français comme en
   anglais). En dessous — tablettes en portrait, petits portables — le menu
   reste replié derrière le bouton, comme sur téléphone. Le seuil est repris
   dans js/app.js, qui referme le menu quand on franchit cette largeur. */
@media (min-width: 1024px) {
    .btn-menu {
        display: none;
    }

    .nav-principale {
        display: block;
        position: static;
        overflow: visible;
        background-color: transparent;
        z-index: auto;
    }

    .nav-principale ul {
        flex-direction: row;
        align-items: center;
        gap: var(--md);
        padding: 0;
    }

    .nav-principale a {
        min-height: auto;
        padding: var(--xs) 0;
        font-family: var(--police);
        font-size: var(--t-petit);
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .selecteur-langue-item,
    .selecteur-mode-item {
        border-top: 0;
        margin-top: 0;
        padding-top: 0;
        margin-left: var(--xs);
        padding-left: var(--sm);
        border-left: 1px solid var(--ligne);
    }

    .header-actions {
        margin-left: auto;
    }
}


@media (min-width: 1100px) {
    /* La photo du premier écran déborde légèrement de la colonne de texte :
       c'est ce décalage qui casse l'impression de gabarit. */
    .story h2 {
        font-size: clamp(2.5rem, 4.5vw, 4rem);
    }

    .ambiance {
        gap: var(--xxl);
    }
}


/* ==========================================================================
   15. Page de la carte — contenu construit par js/tarifs.js
   ========================================================================== */

/* Sur téléphone, les catégories forment une bande collante sous l'en-tête ;
   au-delà de 768px elles deviennent une colonne latérale (voir plus bas). */
.categories-nav {
    position: sticky;
    top: var(--hauteur-entete);
    z-index: 9;
    background-color: color-mix(in srgb, var(--fond) 88%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--ligne);
}

/* Dégradé de sortie : signale qu'il reste des puces hors champ, sans gêner
   le toucher. */
.categories-nav::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 32px;
    background: linear-gradient(to right, transparent, var(--fond));
    pointer-events: none;
}

.categories-nav-liste {
    display: flex;
    gap: var(--xs);
    padding: var(--xs) var(--gouttiere);
    overflow-x: auto;
    scroll-snap-type: x proximity;
}

.categories-nav-lien {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: var(--cible);
    padding: 0 var(--md);
    background-color: var(--fond-carte);
    border: 1px solid var(--ligne);
    border-radius: 999px;
    color: var(--texte-doux);
    font-size: var(--t-petit);
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
    scroll-snap-align: start;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.categories-nav-lien:hover {
    border-color: var(--accent);
    color: var(--texte);
}

/* Catégorie en cours de lecture, posée par le scrollspy de js/tarifs.js.
   La paire --cta-fond / --cta-texte est la seule dont le contraste est
   garanti dans les deux modes : une puce pleine en --accent portant le fond
   de page en texte passerait sous le seuil. */
.categories-nav-lien.est-actif {
    background-color: var(--cta-fond);
    border-color: var(--cta-fond);
    color: var(--cta-texte);
}

/* Repère de rubrique : seule la colonne latérale du bureau a la place de
   l'afficher sans nuire à la bande défilante du téléphone. */
.categories-nav-rubrique {
    display: none;
}

/* Les cibles des puces ne doivent atterrir ni sous l'en-tête ni sous la bande. */
#ardoise-titre,
.tarifs-categorie-titre,
.tarifs-groupe {
    scroll-margin-top: calc(var(--hauteur-entete) + var(--hauteur-nav-categories) + var(--sm));
}

/* Le titre de la page coiffe directement la première rubrique : l'espace
   complet d'une section l'en éloignerait. */
.carte-intro {
    padding-bottom: 0;
}

.carte-intro h1 {
    font-size: var(--t-h1-page);
}

/* Les rubriques s'enchaînent : l'espace complet d'une section les séparerait
   plus qu'il ne les lierait. */
.carte-happy,
.carte-section {
    padding-block: var(--lg) var(--xl);
}

/* L'ardoise est la seule chose qui change d'une semaine à l'autre : elle se
   détache sur sa propre matière. */
.carte-happy {
    background-color: var(--fond-alt);
}

/* Les rubriques sont des repères de chapitre, pas des titres de page : elles
   restent nettement sous le « Notre carte » qui les coiffe toutes. */
.carte-happy > h2,
.carte-section > h2 {
    font-size: clamp(1.75rem, 3.4vw, 2.75rem);
    margin-bottom: var(--lg);
}

/* Intertitre coiffant plusieurs catégories (les vins, par exemple) : il doit
   peser plus que les titres qu'il rassemble pour que le rang se lise. Le
   filet au-dessus fait office de changement de chapitre. */
.tarifs-groupe {
    margin: var(--xl) 0 var(--md);
    padding-top: var(--sm);
    border-top: 2px solid var(--accent);
}

.tarifs-groupe:first-child {
    margin-top: 0;
}

.tarifs-categorie {
    margin-bottom: var(--lg);
}

.tarifs-categorie-titre {
    font-size: 1.375rem;
    padding-bottom: var(--xs);
    margin-bottom: var(--sm);
    border-bottom: 1px solid var(--ligne);
}

/* --- Catégories repliables (téléphone) -------------------------------
   La carte complète dépasse vingt écrans sur mobile : chaque catégorie se
   déplie au toucher, la première de chaque rubrique restant ouverte.
   L'ouverture est pilotée par js/tarifs.js, qui rouvre tout au-delà de
   768px ; ici on ne s'occupe que de l'apparence. */

summary.tarifs-categorie-resume {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sm);
    min-height: var(--cible);
    cursor: pointer;
    /* Retire la flèche native, remplacée par le chevron ci-dessous. */
    list-style: none;
}

summary.tarifs-categorie-resume::-webkit-details-marker {
    display: none;
}

/* Le titre porte le filet de séparation : il doit occuper toute la largeur
   du résumé pour que le trait aille d'un bord à l'autre. */
summary.tarifs-categorie-resume .tarifs-categorie-titre {
    flex: 1;
    margin-bottom: 0;
}

summary.tarifs-categorie-resume::after {
    content: "";
    flex-shrink: 0;
    width: 11px;
    height: 11px;
    margin-bottom: var(--xs);
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(45deg);
    transform-origin: center;
    transition: transform 0.2s ease;
}

details.tarifs-categorie[open] > summary.tarifs-categorie-resume::after {
    transform: rotate(-135deg);
}

details.tarifs-categorie > summary.tarifs-categorie-resume + * {
    margin-top: var(--sm);
}

.tarifs-note {
    margin-bottom: var(--sm);
    color: var(--texte-doux);
    font-size: var(--t-petit);
}

.tarifs-lien-ardoise {
    display: inline-flex;
    align-items: center;
    min-height: var(--cible);
}

.tarifs-liste {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tarifs-article {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--md);
    padding: var(--xs) 0;
    border-bottom: 1px solid var(--ligne);
}

.tarifs-article:last-child {
    border-bottom: 0;
}

.tarifs-article-texte {
    min-width: 0;
}

.tarifs-nom {
    font-weight: 500;
}

.tarifs-contenance {
    color: var(--texte-doux);
}

.tarifs-nom + .tarifs-contenance::before {
    content: " · ";
}

.tarifs-description {
    margin: 0;
    color: var(--texte-doux);
    font-size: var(--t-petit);
}

/* Le prix est une donnée : même traitement que sur la page d'accueil —
   serif, chiffres à chasse fixe, jamais de retour à la ligne. */
.tarifs-prix {
    font-family: var(--titre);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--accent-lien);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tarifs-erreur {
    padding: var(--md);
    background-color: var(--fond-carte);
    border: 1px solid var(--ligne);
    border-left: 3px solid var(--accent);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-bloc);
}

@media (min-width: 768px) {
    /* La bande devient une colonne latérale : plus naturelle à la souris, et
       tout y tient sans avoir à faire glisser quoi que ce soit. */
    .page-carte {
        display: grid;
        grid-template-columns: minmax(200px, 240px) 1fr;
        align-items: start;
        gap: var(--xl);
        padding-inline: max(var(--gouttiere), calc((100% - var(--conteneur)) / 2));
    }

    .page-carte > main {
        min-width: 0;
    }

    /* La colonne de contenu est déjà posée par la grille ci-dessus : les
       sections ne doivent pas la reproduire une seconde fois. */
    .page-carte main > section {
        padding-inline: 0;
    }

    /* Rendue à sa largeur de colonne, l'ardoise devient un vrai panneau :
       sans ce retrait, sa teinte viendrait mordre sur le texte. Le sélecteur
       reprend .page-carte, sans quoi la règle ci-dessus l'emporterait. */
    .page-carte .carte-happy {
        margin-top: var(--md);
        padding-inline: var(--md);
        border-radius: var(--rayon);
    }

    .categories-nav {
        max-height: calc(100vh - var(--hauteur-entete));
        overflow-y: auto;
        /* Seize catégories ne tiennent pas dans un écran : la colonne défile,
           mais sa barre reste un filet plutôt qu'une gouttière. */
        scrollbar-width: thin;
        scrollbar-color: var(--ligne-forte) transparent;
        background-color: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-bottom: 0;
        border-right: 1px solid var(--ligne);
    }

    .categories-nav::after {
        display: none;
    }

    .categories-nav-liste {
        flex-direction: column;
        align-items: stretch;
        padding: var(--md) var(--sm) var(--md) 0;
        overflow-x: visible;
        scroll-snap-type: none;
    }

    .categories-nav-lien {
        justify-content: flex-start;
        width: 100%;
        border-radius: var(--rayon);
        scroll-snap-align: none;
    }

    .categories-nav-rubrique {
        display: block;
        margin: var(--md) 0 var(--xs);
        padding: 0 var(--sm);
        color: var(--accent-doux);
        font-size: var(--t-label);
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    .categories-nav-rubrique:first-child {
        margin-top: 0;
    }

    .tarifs-categorie {
        margin-bottom: var(--xl);
    }

    /* Tout est ouvert : le résumé redevient un simple titre, sans chevron
       ni possibilité de replier. */
    summary.tarifs-categorie-resume {
        min-height: 0;
        cursor: default;
        pointer-events: none;
    }

    summary.tarifs-categorie-resume::after {
        display: none;
    }

    summary.tarifs-categorie-resume .tarifs-categorie-titre {
        margin-bottom: var(--sm);
    }

    /* La colonne latérale ne consomme plus de hauteur en haut de l'écran :
       le décalage des ancres n'a plus à lui faire de place. */
    #ardoise-titre,
    .tarifs-categorie-titre,
    .tarifs-groupe {
        scroll-margin-top: calc(var(--hauteur-entete) + var(--sm));
    }
}


/* ==========================================================================
   16. Formulaire de privatisation
   ========================================================================== */

.privatisation-intro {
    padding-bottom: 0;
}

.privatisation-intro h1 {
    font-size: var(--t-h1-page);
    margin-bottom: var(--md);
}

.privatisation-intro p {
    font-size: var(--t-lead);
    line-height: 1.55;
}

.privatisation-photos {
    display: grid;
    gap: var(--md);
}

.privatisation-savoir,
.privatisation-contact-direct {
    background-color: var(--fond-alt);
}

.privatisation-savoir h2,
.privatisation-contact-direct h2 {
    margin-bottom: var(--md);
}

.privatisation-contact-direct p {
    margin-bottom: var(--lg);
}

.formulaire-section h2 {
    margin-bottom: var(--lg);
}

/* --- Champs : une seule colonne, libellé au-dessus, pleine largeur --- */

.champ {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: var(--md);
}

.champ label {
    font-weight: 600;
    color: var(--texte);
}

/* Astérisque visuel ; l'attribut required du champ l'annonce déjà aux
   lecteurs d'écran, d'où aria-hidden sur le symbole. */
.obligatoire {
    color: var(--accent-lien);
}

.formulaire-legende {
    margin-bottom: var(--md);
    color: var(--texte-doux);
    font-size: var(--t-petit);
}

.champ input,
.champ select,
.champ textarea {
    width: 100%;
    min-height: var(--cible);
    padding: var(--sm);
    background-color: var(--fond-carte);
    border: 1px solid var(--ligne-forte);
    border-radius: var(--rayon);
    color: var(--texte);
    font-family: var(--police);
    font-size: 1rem;
    transition: border-color 0.2s ease;
}

.champ input:hover,
.champ select:hover,
.champ textarea:hover {
    border-color: var(--accent);
}

.champ textarea {
    min-height: calc(var(--cible) * 2);
    resize: vertical;
}

/* Le sélecteur garde la même hauteur tactile que les champs texte. */
.champ select {
    appearance: none;
    background-repeat: no-repeat;
    background-position: right var(--sm) center;
    background-size: 20px;
    padding-right: calc(var(--sm) + 24px);
}

/* Le chevron est une image : sa couleur ne peut pas venir d'une variable
   CSS, d'où cette reprise littérale de --texte-doux par mode. Deux lignes
   à tenir à jour si la palette bouge. */
.champ select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23625849' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

:root[data-mode="nuit"] .champ select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9BAAE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Mention utile (pas secondaire) : reste en --texte, jamais en --texte-doux. */
.champ-aide {
    margin-top: -0.35rem;
    margin-bottom: var(--md);
    color: var(--texte);
    font-size: 1rem;
}

/* Message d'erreur : le texte porte l'information à lui seul (lu par tout
   lecteur d'écran), le point n'est qu'un renfort visuel — jamais l'inverse. */
.champ-erreur {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0;
    color: var(--texte);
    font-size: 1rem;
}

.champ-erreur:empty {
    display: none;
}

.champ-erreur:not(:empty)::before {
    content: "";
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 0.45rem;
    background-color: var(--cta-fond);
    border-radius: 50%;
}

/* Honeypot : hors écran, jamais display:none (un robot peu regardant doit
   pouvoir « le voir » et le remplir), et retiré de l'ordre de tabulation. */
.champ-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    left: -9999px;
}

.formulaire-rgpd {
    margin-bottom: var(--md);
    color: var(--texte-doux);
    font-size: 1rem;
}

/* Le bouton d'envoi est la seule action dominante de la page. */
.formulaire-section .cta {
    width: 100%;
}

/* --- Confirmation et échec d'envoi : même gabarit de panneau --- */

.formulaire-panel {
    position: relative;
    margin-top: var(--md);
    padding: var(--md);
    padding-right: calc(var(--cible) + var(--sm));
    background-color: var(--fond-carte);
    border: 1px solid var(--ligne);
    border-left: 3px solid var(--accent);
    border-radius: var(--rayon);
    box-shadow: var(--ombre-bloc);
}

/* Cible tactile pleine (44px) mais icône discrète : le panneau reste lisible
   sans qu'un deuxième bouton bordé ne fasse concurrence au bouton d'envoi. */
.formulaire-panel-fermer {
    position: absolute;
    top: var(--xs);
    right: var(--xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cible);
    height: var(--cible);
    background: none;
    border: none;
    border-radius: var(--rayon);
    color: var(--texte-doux);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.formulaire-panel-fermer:hover {
    background-color: var(--fond-alt);
    color: var(--accent);
}

.formulaire-panel-fermer svg {
    width: 18px;
    height: 18px;
}

.formulaire-panel h3 {
    margin-bottom: var(--sm);
}

.formulaire-panel p {
    margin-bottom: var(--sm);
}

.formulaire-panel p:last-child {
    margin-bottom: 0;
}

/* Lien au fil du texte (le numéro de téléphone) : cible tactile portée à
   44px sans casser le paragraphe. Ciblé sur .formulaire-panel lui-même et
   non sur « p a », le panneau d'échec étant un <p> sans <p> imbriqué. */
.formulaire-panel a {
    position: relative;
}

.formulaire-panel a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: var(--cible);
    transform: translateY(-50%);
}

@media (min-width: 768px) {
    .privatisation-photos {
        grid-template-columns: repeat(2, 1fr);
    }

    .privatisation-contact-direct {
        text-align: center;
    }

    .privatisation-contact-direct p {
        margin-inline: auto;
    }

    /* Toujours une seule colonne : plus confortable à lire que des champs
       côte à côte, et aligné à gauche comme le titre au-dessus. */
    .formulaire-section form,
    .formulaire-panel {
        max-width: 640px;
    }
}


/* ==========================================================================
   17. Mentions légales et page introuvable
   ========================================================================== */

.mentions-legales h1 {
    font-size: var(--t-h1-page);
    margin-bottom: var(--lg);
}

.mentions-legales h2 {
    margin-top: var(--xl);
    margin-bottom: var(--sm);
    font-size: var(--t-h3);
    /* Un lien externe peut viser cette section (depuis privatisation.html) :
       évite qu'elle n'arrive masquée sous l'en-tête collant. */
    scroll-margin-top: calc(var(--hauteur-entete) + var(--sm));
}

.mentions-legales h2:first-of-type {
    margin-top: 0;
}

.mentions-legales p {
    margin-bottom: var(--sm);
}

/* La page introuvable n'a rien à raconter : tout tient au milieu de l'écran. */
.page-introuvable {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
}

.page-introuvable h1 {
    font-size: var(--t-h1-page);
    margin-bottom: var(--sm);
}

.page-introuvable p {
    max-width: 46ch;
    margin-bottom: var(--lg);
}


/* ==========================================================================
   18. Invitation au clic
   Au pointeur : survol. Au toucher : rejoué une fois à l'entrée à l'écran,
   la classe .en-vue étant posée par js/app.js. Le bloc « animations
   réduites » de la section 14 neutralise l'ensemble.
   ========================================================================== */

.cta svg,
.btn-icon svg {
    transition: transform 0.2s ease;
}

/* L'icône avance dans le sens de la lecture. */
.cta:hover svg {
    transform: translateX(3px);
}

/* Le combiné sonne : oscillation amortie. */
@keyframes sonnerie {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-9deg); }
    40% { transform: rotate(7deg); }
    60% { transform: rotate(-5deg); }
    80% { transform: rotate(3deg); }
}

/* Rappel périodique : deux oscillations, puis repos jusqu'au cycle suivant.
   Le mouvement tient dans les 12 premiers pour cent, soit 0,7 s sur 6 s. */
@keyframes rappel-telephone {
    0%, 12%, 100% { transform: rotate(0); }
    2% { transform: rotate(-9deg); }
    4% { transform: rotate(8deg); }
    6% { transform: rotate(-7deg); }
    8% { transform: rotate(5deg); }
    10% { transform: rotate(-3deg); }
}

.btn-appel svg {
    animation: rappel-telephone 6s ease-in-out infinite;
}

.btn-appel:hover svg {
    animation: sonnerie 0.5s ease;
}

/* Équivalent tactile : seuls les appareils sans survol rejouent l'effet. */
@media (hover: none) {

    @keyframes invite-fond {
        35%, 65% { background-color: color-mix(in srgb, var(--cta-fond) 82%, var(--cta-texte)); }
    }

    @keyframes invite-contour {
        35%, 65% {
            border-color: var(--accent);
            color: var(--accent-lien);
        }
    }

    @keyframes invite-icone {
        35%, 65% { transform: translateX(3px); }
    }

    .cta.en-vue {
        animation: invite-fond 0.9s ease;
    }

    .cta.en-vue svg {
        animation: invite-icone 0.9s ease;
    }

    .cta-secondaire.en-vue {
        animation: invite-contour 0.9s ease;
    }
}