/* ==========================================================================
   Accueil — téléphone d'abord. L'ordinateur est repris dans
   assets/styles/mediaqueries/main.css.

   Polices et couleurs viennent de assets/styles/base.css (chargée avant).
   Les noms de classes historiques (.tarifs, .us, .definition, .prefooter…)
   sont conservés : les thèmes saisonniers s'y accrochent.
   ========================================================================== */

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

html { scroll-behavior: smooth; }

body {
    min-height: 100vh;
    overflow-x: hidden;
    background-color: var(--pbs-night);
    background-image: url(../img/pattern_brick.png);
    background-size: 100% 600px;
    background-repeat: no-repeat;
    color: var(--pbs-cream);
    font-family: var(--pbs-font-text);
    font-size: 1rem;
    line-height: 1.55;
    -webkit-tap-highlight-color: transparent;
    /* La barre d'action mobile ne doit pas recouvrir le pied de page. */
    padding-bottom: 76px;
}

img { max-width: 100%; }

a { color: var(--pbs-gold-bright); }

/* ----------------------------------------------------------------- En-tête */

.site-header { position: relative; }

.title-pic { display: block; position: relative; }

.title-img {
    display: block;
    width: 100%;
    height: 300px;
    object-fit: cover;
    object-position: center 30%;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
    mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

/* La lanterne vivante (scripts/lanterne.js) : un canevas posé exactement sur
   la photo, même cadrage, même fondu vers le bas. */
.title-pic .pbs-gl--lanterne {
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
    mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

.header {
    position: relative;
    margin-top: -64px;
    padding: 0 16px 28px;
    text-align: center;
}

.bttm-cntr { position: relative; }

h1 {
    font-family: var(--pbs-font-logo);
    font-weight: 400;
    font-size: clamp(2.4rem, 11vw, 3rem);
    line-height: 1.1;
    background-image: linear-gradient(to right, #ffee9b 0, #f6e27a 15%, #d6b457 45%, #f6e27a 55%, #d6b457 85%, #ffec8f 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.55));
    /* Le reflet qui balaie le nom du salon. */
    animation: shimmer 4s linear infinite;
}
@keyframes shimmer {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}
.tiret { display: inline; }

.hero-tagline {
    margin: 10px auto 0;
    color: var(--pbs-sand);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.hero-tagline span { display: none; }

nav { margin-top: 26px; }

.reserverbloc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* --- Le bouton principal : la seule animation permanente du site, son
       liseré doré qui fait le tour. Tout le reste reste calme. --- */

@property --trace-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.reserverbloc .cta {
    position: relative;
    isolation: isolate;
    display: inline-block;
    border-radius: 16px;
    background: rgba(203, 155, 81, 0.08);
    text-decoration: none;
    animation: ctaIn 0.6s 0.1s ease-out both;
}

.reserverbloc .cta::after {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(to right, transparent 0%, rgba(246, 226, 122, 0) 4%, #ffec8f 50%, rgba(246, 226, 122, 0) 96%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

.reserverbloc .reserver {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    /* Toujours sur une seule ligne : sur les petits téléphones (320–380 px),
       taille, interlettrage et marges rétrécissent au lieu de couper le texte. */
    max-width: calc(100vw - 32px);
    padding: 0 clamp(0.9rem, 5vw, 2rem);
    border-radius: 16px;
    font-family: var(--pbs-font-text);
    font-size: clamp(0.8rem, 3.9vw, 0.95rem);
    font-weight: 700;
    letter-spacing: clamp(0.8px, 0.62vw, 2.5px);
    text-transform: uppercase;
    white-space: nowrap;
    background-image: linear-gradient(to right, #ffee9b 0, #d6b457 15%, #f5d98b 45%, #f5d98b 55%, #d6b457 85%, #ffee9b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    box-shadow: inset 0 0 0 1px rgba(214, 180, 87, 0.28), 0 2px 16px rgba(0, 0, 0, 0.55);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
}

.reserverbloc .reserver img {
    width: 17px;
    height: 17px;
    flex: none;
    /* l'icône noire devient dorée */
    filter: invert(72%) sepia(38%) saturate(600%) hue-rotate(354deg) brightness(0.95);
    transition: filter 0.4s ease;
}

.reserverbloc .reserver::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: 16px;
    background: linear-gradient(135deg, #fff3b0 0%, #f5d98b 30%, #d6b457 60%, #f5d98b 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.reserverbloc .reserver::before {
    content: "";
    position: absolute;
    inset: -1.5px;
    z-index: -1;
    border-radius: 17.5px;
    padding: 1.5px;
    background: conic-gradient(from var(--trace-angle),
        transparent 0deg, transparent 200deg,
        rgba(255, 238, 155, 0.18) 250deg, rgba(255, 243, 176, 0.55) 305deg,
        #fff3b0 340deg, #fff8d6 357deg, transparent 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    animation: traceBorder 3.8s linear infinite;
}

.reserverbloc .cta:hover .reserver,
.reserverbloc .cta:focus-visible .reserver {
    color: var(--pbs-on-gold);
    -webkit-text-fill-color: var(--pbs-on-gold);
}
.reserverbloc .cta:hover .reserver::after,
.reserverbloc .cta:focus-visible .reserver::after { opacity: 1; }
.reserverbloc .cta:hover .reserver img,
.reserverbloc .cta:focus-visible .reserver img { filter: brightness(0); }

@keyframes traceBorder { to { --trace-angle: 360deg; } }
@keyframes ctaIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.h2-rdv-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid rgba(203, 155, 81, 0.45);
    border-radius: 999px;
    background: rgba(203, 155, 81, 0.08);
    color: #f6e27a;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    animation: ctaIn 0.6s 0.25s ease-out both;
}
.h2-rdv-link svg {
    width: 15px;
    height: 15px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}
.h2-rdv-link:hover,
.h2-rdv-link:focus-visible {
    background: linear-gradient(135deg, #cb9b51 0%, #f6e27a 100%);
    border-color: #f6e27a;
    color: #17150f;
    box-shadow: 0 0 16px rgba(246, 226, 122, 0.3);
}

/* --- Le coffret de barbier --------------------------------------------------
   Hors saison, les deux boutons gardent la taille, l'or et la trace
   lumineuse d'origine ; ils gagnent un fond plein (la brique ne transparaît
   plus derrière le texte, qui se lit mieux sur téléphone), un double filet
   doré et des coins de laiton rivetés, comme les coffrets à rasoirs
   d'autrefois. Lettres en Cinzel, la police des titres du site.

   Tout est sous html:not([data-pbs-theme]) : halloween.css et noel.css
   habillent les boutons d'au-dessus et gardent leur peau pendant leur
   saison. Seules les couleurs, le fond et les coins changent ici : tailles
   et marges restent celles des règles d'origine, téléphone et ordinateur. */

html:not([data-pbs-theme]) {
    --corner-tl: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23fff2c0'/><stop offset='.5' stop-color='%23e0b95c'/><stop offset='1' stop-color='%238f6424'/></linearGradient></defs><g transform='rotate(0 8 8)'><path d='M0 6.5 A6.5 6.5 0 0 1 6.5 0 H16 V4 H7.5 A3.5 3.5 0 0 0 4 7.5 V16 H0 Z' fill='url(%23g)' stroke='%23120c04' stroke-width='.6'/><g fill='%235a3c10'><circle cx='12.2' cy='2' r='1'/><circle cx='2' cy='12.2' r='1'/></g></g></svg>");
    --corner-tr: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23fff2c0'/><stop offset='.5' stop-color='%23e0b95c'/><stop offset='1' stop-color='%238f6424'/></linearGradient></defs><g transform='rotate(90 8 8)'><path d='M0 6.5 A6.5 6.5 0 0 1 6.5 0 H16 V4 H7.5 A3.5 3.5 0 0 0 4 7.5 V16 H0 Z' fill='url(%23g)' stroke='%23120c04' stroke-width='.6'/><g fill='%235a3c10'><circle cx='12.2' cy='2' r='1'/><circle cx='2' cy='12.2' r='1'/></g></g></svg>");
    --corner-bl: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23fff2c0'/><stop offset='.5' stop-color='%23e0b95c'/><stop offset='1' stop-color='%238f6424'/></linearGradient></defs><g transform='rotate(270 8 8)'><path d='M0 6.5 A6.5 6.5 0 0 1 6.5 0 H16 V4 H7.5 A3.5 3.5 0 0 0 4 7.5 V16 H0 Z' fill='url(%23g)' stroke='%23120c04' stroke-width='.6'/><g fill='%235a3c10'><circle cx='12.2' cy='2' r='1'/><circle cx='2' cy='12.2' r='1'/></g></g></svg>");
    --corner-br: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23fff2c0'/><stop offset='.5' stop-color='%23e0b95c'/><stop offset='1' stop-color='%238f6424'/></linearGradient></defs><g transform='rotate(180 8 8)'><path d='M0 6.5 A6.5 6.5 0 0 1 6.5 0 H16 V4 H7.5 A3.5 3.5 0 0 0 4 7.5 V16 H0 Z' fill='url(%23g)' stroke='%23120c04' stroke-width='.6'/><g fill='%235a3c10'><circle cx='12.2' cy='2' r='1'/><circle cx='2' cy='12.2' r='1'/></g></g></svg>");
}

html:not([data-pbs-theme]) .reserverbloc .cta {
    display: inline-flex;
    border-radius: 7px;
    background: linear-gradient(180deg, #2a2116 0%, #18130d 55%, #100d09 100%);
    box-shadow:
        0 0 0 1px rgba(8, 6, 3, 0.9),
        0 8px 18px -6px rgba(0, 0, 0, 0.8),
        0 0 22px rgba(246, 206, 110, 0.14);
}

/* Les coins de laiton, posés par-dessus tout : ils restent quand le bouton
   se remplit d'or au survol. */
html:not([data-pbs-theme]) .reserverbloc .cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background:
        var(--corner-tl) left top / 15px 15px no-repeat,
        var(--corner-tr) right top / 15px 15px no-repeat,
        var(--corner-bl) left bottom / 15px 15px no-repeat,
        var(--corner-br) right bottom / 15px 15px no-repeat;
    pointer-events: none;
}

html:not([data-pbs-theme]) .reserverbloc .reserver {
    --pad: clamp(0.9rem, 5vw, 2rem);      /* la marge d'origine (2.6rem sur ordinateur) */
    --ls: clamp(0.6px, 0.42vw, 2.2px);
    /* Centrage au pixel, mesuré sur captures ×2, ×3 et ×4, de 320 px à
       l'ordinateur.
       - L'icône et le texte sont sur la même ligne (inline-block, et non plus
         flex) : calés tous deux sur la ligne de base, ils reçoivent le même
         arrondi, quel que soit l'écran ;
       - Cinzel (ascendante 0,98 em, descendante 0,37 em) pose ses capitales
         au-dessus du milieu de sa ligne : 2 px en haut les recentrent ;
       - hauteur de ligne et marge en pixels entiers : le navigateur arrondit
         à l'entier inférieur l'interligne posé au-dessus du texte, une valeur
         en em déplaçait le texte d'un pixel selon la taille de police ;
       - l'interlettrage se rajoute après la dernière lettre (plus l'approche
         du S, 0,047 em) : on le retire de la marge droite. */
    display: inline-block;
    line-height: 48px;    /* 50 px avec la marge du haut ; 52 px sur ordinateur */
    padding-top: 2px;
    padding-left: var(--pad);
    padding-right: calc(var(--pad) - var(--ls) - 0.047em);
    border-radius: 7px;
    font-family: var(--pbs-font-title);
    letter-spacing: var(--ls);
    background-image: linear-gradient(to right, #fff1b8 0, #e6c466 15%, #fbe6a0 45%, #fbe6a0 55%, #e6c466 85%, #fff1b8 100%);
    /* Le double filet : un trait au bord, un autre en retrait. */
    box-shadow: inset 0 0 0 1px rgba(226, 190, 100, 0.6);
    outline: 1px solid rgba(226, 190, 100, 0.26);
    outline-offset: -5px;
}
/* Le calendrier (17 px) : son milieu sur celui des capitales, à 0,35 em
   au-dessus de la ligne de base. Arrondi au pixel entier, pour qu'il tombe
   sur la même grille que le texte. */
html:not([data-pbs-theme]) .reserverbloc .reserver img {
    margin-right: 10px;
    vertical-align: calc(0.35em - 8.5px);              /* navigateurs sans round() */
    vertical-align: round(calc(0.35em - 8.5px), 1px);
}
/* La trace qui fait le tour et l'aplat d'or du survol suivent les angles. */
html:not([data-pbs-theme]) .reserverbloc .reserver::before { border-radius: 8.5px; }
html:not([data-pbs-theme]) .reserverbloc .reserver::after { border-radius: 7px; }
html:not([data-pbs-theme]) .reserverbloc .cta:focus-visible .reserver { outline-color: transparent; }

/* « Mes rendez-vous » : le même coffret, en plus petit. */
html:not([data-pbs-theme]) .h2-rdv-link {
    position: relative;
    border-color: rgba(226, 190, 100, 0.6);
    border-radius: 6px;
    background: linear-gradient(180deg, #2a2116 0%, #18130d 55%, #100d09 100%);
    color: #f6e08e;
    font-family: var(--pbs-font-title);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    /* Même centrage que le bouton principal : loupe et texte sur la même
       ligne, capitales recentrées, pixels entiers. 1 + 37 + 2 de bordure =
       40 px (51 px de ligne sur ordinateur, soit 54). */
    display: inline-block;
    line-height: 37px;
    padding-top: 1px;
    box-shadow:
        0 0 0 1px rgba(8, 6, 3, 0.9),
        0 6px 14px -6px rgba(0, 0, 0, 0.8),
        0 0 16px rgba(246, 206, 110, 0.1);
}
/* La loupe (15 px), même calage que le calendrier. */
html:not([data-pbs-theme]) .h2-rdv-link svg {
    margin-right: 7px;
    vertical-align: calc(0.35em - 7.5px);              /* navigateurs sans round() */
    vertical-align: round(calc(0.35em - 7.5px), 1px);
}
html:not([data-pbs-theme]) .h2-rdv-link::after {
    content: "";
    position: absolute;
    inset: -1px;
    background:
        var(--corner-tl) left top / 11px 11px no-repeat,
        var(--corner-tr) right top / 11px 11px no-repeat,
        var(--corner-bl) left bottom / 11px 11px no-repeat,
        var(--corner-br) right bottom / 11px 11px no-repeat;
    pointer-events: none;
}
html:not([data-pbs-theme]) .h2-rdv-link:is(:hover, :focus-visible) {
    border-color: #f6e27a;
    background: linear-gradient(135deg, #cb9b51 0%, #f6e27a 100%);
    color: #17150f;
    box-shadow:
        0 0 0 1px rgba(8, 6, 3, 0.9),
        0 6px 14px -6px rgba(0, 0, 0, 0.8),
        0 0 16px rgba(246, 226, 122, 0.3);
}

/* --------------------------------------------------- Photos et tarifs */

/* Le dégradé doré d'origine : il se voit derrière les photos quand elles
   pivotent (effet coverflow, scripts/swiper.js), puis sous les tarifs. */
.illustration {
    padding-bottom: 36px;
    background: linear-gradient(
        rgb(30, 30, 30) 5%,
        rgba(149, 126, 52, 0.4) 15%,
        rgb(30, 30, 30) 30%,
        rgb(30, 30, 30) 35%,
        rgba(149, 126, 52, 0.5));
}

.swiper {
    width: 100%;
    height: 380px;
    --swiper-theme-color: rgb(149, 126, 52);
    --swiper-navigation-size: 35px;
}
.swiper-slide { overflow: hidden; }
.swiper-slide picture { display: block; height: 100%; }
/* object-fit : la photo garde ses proportions (elle était étirée avant). */
.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tarification {
    margin: 30px 16px 0;
    text-align: center;
}

.tarifs {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--pbs-gold-bright);
    font-family: var(--pbs-font-title);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Les deux boutons de tarifs : leur dessin d'origine — une seule pastille
   coupée en deux (bleu / rose), réunies par un filet en dégradé. */
@font-face {
    font-family: 'Roboto Slab';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(../fonts/woff2/roboto-slab-latin.woff2) format('woff2');
}
.mf {
    font-family: 'Roboto Slab', Georgia, serif;
    display: flex;
    justify-content: center;
    margin: 18px 0 35px;
}
.btn-m {
    border: solid 2px rgb(69, 115, 162);
    border-right: none;
    border-radius: 25px 0 0 25px;
}
.btn-f {
    border: solid 2px rgb(180, 109, 129);
    border-left: none;
    border-radius: 0 25px 25px 0;
}
.btn a { text-decoration: none; }
.m-btn {
    background-color: rgb(30, 30, 30);
    border-radius: 25px 0 0 25px;
    padding: 6px 1em;
}
.f-btn {
    background-color: rgb(30, 30, 30);
    border-radius: 0 25px 25px 0;
    padding: 6px 1em;
}
.m-btn,
.f-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 100px;
    color: rgb(192, 167, 130);
    font-size: 1.188rem;
    font-weight: 700;
}
.m-btn img,
.f-btn img {
    width: 20px;
    height: 20px;
    padding-top: 0;
}
.btn-m { position: relative; }
.btn-m::after {
    content: "";
    position: absolute;
    top: 5px;
    bottom: 5px;
    right: -1px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(
        to bottom,
        rgb(69, 115, 162) 0%,
        #b1a258 50%,
        rgb(180, 109, 129) 100%
    );
    box-shadow: 0 0 6px rgba(246, 226, 122, 0.45);
    pointer-events: none;
    z-index: 2;
}

/* ------------------------------------------------------ Infos pratiques */

.infos { padding: 8px 16px 40px; }

.infos-card {
    max-width: 1100px;
    margin: 0 auto;
    padding: 22px 18px;
    border: 1px solid var(--pbs-line);
    border-radius: var(--pbs-radius);
    background:
        radial-gradient(120% 80% at 50% -20%, rgba(203, 155, 81, 0.14) 0%, rgba(203, 155, 81, 0) 60%),
        linear-gradient(180deg, var(--pbs-surface-2) 0%, var(--pbs-surface) 100%);
    box-shadow: var(--pbs-shadow);
}

.infos-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    margin-bottom: 16px;
}

.section-heading {
    color: var(--pbs-gold-bright);
    font-family: var(--pbs-font-title);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 1.5px;
}

.infos-list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 4px;
}

.infos-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--pbs-line-soft);
}
.infos-item:first-child { border-top: 0; }

.infos-icon {
    width: 22px;
    height: 22px;
    flex: none;
    margin-top: 2px;
    fill: none;
    stroke: var(--pbs-gold);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.infos-body { flex: 1; min-width: 0; }

.infos-label {
    color: var(--pbs-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.infos-value {
    color: var(--pbs-cream);
    font-style: normal;
    font-size: 0.98rem;
    line-height: 1.45;
}
.infos-value a {
    color: var(--pbs-cream);
    text-decoration: none;
}
.infos-note {
    margin-top: 6px;
    color: var(--pbs-warn);
    font-size: 0.85rem;
    font-weight: 600;
}
.infos-action { align-self: center; padding: 0 16px; }

.location { margin-top: 16px; }
.location iframe {
    display: block;
    width: 100%;
    height: 240px;
    border: 0;
    border-radius: var(--pbs-radius-sm);
}

/* ----------------------------------------------------- Qui sommes-nous */

.about {
    padding: 24px 16px 48px;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><rect width='30' height='30' fill='%231d1d1d'/><g stroke='%234a4327' stroke-width='1' shape-rendering='crispEdges'><line x1='0' y1='.5' x2='30' y2='.5'/><line x1='0' y1='15.5' x2='30' y2='15.5'/><line x1='.5' y1='0' x2='.5' y2='15'/><line x1='15.5' y1='15' x2='15.5' y2='30'/></g></svg>");
    background-size: 30px 30px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

.who { max-width: 760px; margin: 0 auto; }

.us { padding-top: 24px; text-align: center; }
.us h2 {
    display: inline-block;
    color: var(--pbs-gold-bright);
    font-family: var(--pbs-font-title);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 1.5px;
}

.about-text {
    margin-top: 14px;
    color: var(--pbs-cream);
    font-size: 1.08rem;
    line-height: 1.65;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.definition {
    max-width: 680px;
    margin: 36px auto 0;
    padding: 22px 20px;
    border-left: 3px solid var(--pbs-gold);
    border-radius: 0 var(--pbs-radius-sm) var(--pbs-radius-sm) 0;
    background: rgba(12, 11, 10, 0.72);
    color: var(--pbs-sand);
}
.definition blockquote p {
    /* Cinzel n'a que des capitales : parfait pour un titre, pénible sur cinq
       lignes. La citation reste donc en texte, en italique. */
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.7;
}
.definition figcaption {
    margin-top: 12px;
    color: var(--pbs-muted);
    font-size: 0.85rem;
}

/* Apparition douce au défilement (scripts/reveal.js). Le masquage n'existe
   que si JavaScript est là pour révéler. */
.js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .reveal.active {
    opacity: 1;
    transform: none;
}

/* ------------------------------------------------------ Réseaux sociaux */

.prefooter {
    padding: 36px 16px 30px;
    background: linear-gradient(rgba(149, 126, 52, 0.35) 0%, rgb(22, 21, 20) 75%, rgb(12, 12, 12) 100%);
}
.media { color: var(--pbs-sand); text-align: center; }
.md { display: flex; justify-content: center; }
.mediatitle {
    position: relative;
    padding-bottom: 14px;
    color: #e8d4a8;
    font-family: var(--pbs-font-title);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 1.5px;
}
.mediatitle::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 70%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #cb9b51 20%, #f6e27a 50%, #cb9b51 80%, transparent);
}

.social-list {
    list-style: none;
    padding: 0;
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
.social-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 22px 0 14px;
    border: 1px solid var(--pbs-line);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.3);
    color: var(--pbs-cream);
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.25s ease, background 0.25s ease;
}
.social-link svg { width: 26px; height: 26px; fill: #1877f2; }
.social-link:hover { border-color: var(--pbs-gold-bright); background: rgba(203, 155, 81, 0.12); }

/* ----------------------------------------------------------------- Pied */

footer {
    padding: 10px 16px 28px;
    background-color: rgb(12, 12, 12);
    color: var(--pbs-muted);
    font-size: 0.85rem;
    text-align: center;
}

.ciseau-img { display: flex; justify-content: center; }
.ciseau-img img {
    width: auto;
    height: 110px;
    transform: rotate(40deg);
    opacity: 0.3;
}

.contact-us {
    margin: 18px 0 20px;
    color: var(--pbs-sand);
    font-size: 1rem;
}
a[href^="tel:"] { color: var(--pbs-gold-bright); text-decoration: none; font-weight: 600; white-space: nowrap; }

.footer-links {
    list-style: none;
    padding: 18px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
    border-top: 1px solid var(--pbs-line-soft);
    border-bottom: 1px solid var(--pbs-line-soft);
}
.footer-links a {
    color: var(--pbs-sand);
    text-decoration: underline;
    text-decoration-color: rgba(203, 155, 81, 0.45);
    text-underline-offset: 4px;
}
.footer-links a:hover { color: var(--pbs-gold-bright); }

.copyright { margin-top: 18px; font-size: 0.78rem; }

/* Mobile seulement : le saut de ligne du slogan. */
.br-mobile { display: inline; }