/* Troyes Mille Pages — charte 2026 */

@font-face {
    font-family: 'Jost';
    src: url('../fonts/Jost-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Jost';
    src: url('../fonts/Jost-Italic-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

/* ---------------------------------------------------------------- tokens */

:root {
    /* palette charte print */
    --tmp-bleu: #3953dd;
    --tmp-bleu-fonce: #2a3fb0;
    --tmp-jaune: #f7c900;
    --tmp-rouge: #e8344b;
    --tmp-rose: #da72a6;
    --tmp-cyan: #67b3d4;
    --tmp-creme: #fcf0e4;
    --tmp-encre: #232746;
    --tmp-papier: #fffdf8;

    /* pipette menu.jpg (tuiles rubriques) */
    --tmp-vert: #009858;
    --tmp-rose-vif: #f068a8;

    /* rôle par rubrique — menu.jpg fait foi */
    --rub-festival: var(--tmp-jaune);
    --rub-residence: var(--tmp-rose-vif);
    --rub-mediation: var(--tmp-vert);
    --rub-avis: var(--tmp-creme);
    --rub-contact: var(--tmp-rouge);

    /* échelle typo fluide, ratio ~1.3 */
    --fs-hero: clamp(2.75rem, 1.5rem + 4.5vw, 5rem);
    --fs-1: clamp(2.1rem, 1.4rem + 2.4vw, 3.4rem);
    --fs-2: clamp(1.65rem, 1.3rem + 1.3vw, 2.4rem);
    --fs-3: clamp(1.35rem, 1.2rem + .55vw, 1.7rem);
    --fs-4: 1.25rem;
    --fs-lead: clamp(1.15rem, 1.05rem + .4vw, 1.4rem);

    --bs-body-font-family: 'Jost', sans-serif;
    --bs-body-font-weight: 500;
    --bs-body-color: var(--tmp-encre);
    --bs-body-bg: var(--tmp-papier);
    --bs-link-color: var(--tmp-bleu);
    --bs-link-hover-color: var(--tmp-bleu-fonce);
}

/* ------------------------------------------------------------------ base */

body {
    font-family: var(--bs-body-font-family);
    font-weight: var(--bs-body-font-weight);
    font-size: 1.0625rem;
    color: var(--tmp-encre);
    background-color: var(--tmp-papier);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    color: var(--tmp-bleu);
    line-height: 1.12;
}

h1, .h1 { font-size: var(--fs-1); letter-spacing: -.01em; }
h2, .h2 { font-size: var(--fs-2); }
h3, .h3 { font-size: var(--fs-3); }
h4, .h4 { font-size: var(--fs-4); }

.display-tmp {
    font-size: var(--fs-hero);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.05;
    color: var(--tmp-bleu);
}

.lead, .lead-tmp {
    font-size: var(--fs-lead);
    font-weight: 500;
    line-height: 1.55;
}

p, li { max-width: 68ch; }

a {
    text-underline-offset: .2em;
    text-decoration-thickness: 2px;
}

::selection { background: var(--tmp-jaune); color: var(--tmp-encre); }

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

/* fonds de section */
.bg-creme  { background-color: var(--tmp-creme); }
.bg-bleu   { background-color: var(--tmp-bleu);  color: #fff; }
.bg-jaune  { background-color: var(--tmp-jaune); }
.bg-bleu :is(h1,h2,h3,h4,.h1,.h2,.h3,.h4) { color: #fff; }
.bg-jaune :is(h1,h2,h3,h4,.h1,.h2,.h3,.h4) { color: var(--tmp-bleu); }

/* --------------------------------------------------- soulignés main levée */

.souligne,
.souligne-boucles,
.souligne-zigzag,
.souligne-trait {
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% .24em;
    padding-bottom: .18em;
}
.souligne         { background-image: url('../img/deco/souligne-vague.svg'); }
.souligne-boucles { background-image: url('../img/deco/souligne-boucles.svg'); background-size: 100% .4em; padding-bottom: .32em; }
.souligne-zigzag  { background-image: url('../img/deco/souligne-zigzag.svg'); }
.souligne-trait   { background-image: url('../img/deco/souligne-trait.svg'); background-size: 100% .2em; padding-bottom: .15em; }

/* mot cerclé main levée */
.cercle {
    background: url('../img/deco/cercle-rose.svg') center / 100% 105% no-repeat;
    padding: .1em .35em;
}

/* étoile de marque en ponctuation de titre */
.etoile::after {
    content: '';
    display: inline-block;
    width: .7em;
    height: .7em;
    margin-left: .18em;
    background: url('../img/deco/etoile.svg') center / contain no-repeat;
}

/* --------------------------------------------------------------- boutons */

.btn-tmp,
.btn-tmp-jaune,
.btn-tmp-rouge,
.btn-tmp-vert,
.btn-tmp-blanc {
    --bs-btn-font-weight: 700;
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-padding-y: .65rem;
    --bs-btn-border-width: 0;
    --bs-btn-border-radius: 50rem;
    --bs-btn-font-size: 1.0625rem;
}
.btn-tmp        { --bs-btn-bg: var(--tmp-bleu);  --bs-btn-color: #fff;             --bs-btn-hover-bg: var(--tmp-bleu-fonce); --bs-btn-hover-color: #fff; }
.btn-tmp-jaune  { --bs-btn-bg: var(--tmp-jaune); --bs-btn-color: var(--tmp-encre); --bs-btn-hover-bg: #e0b600;               --bs-btn-hover-color: var(--tmp-encre); }
.btn-tmp-rouge  { --bs-btn-bg: var(--tmp-rouge); --bs-btn-color: #fff;             --bs-btn-hover-bg: #c92440;               --bs-btn-hover-color: #fff; }
.btn-tmp-vert   { --bs-btn-bg: var(--tmp-vert);  --bs-btn-color: #fff;             --bs-btn-hover-bg: #007a46;               --bs-btn-hover-color: #fff; }
.btn-tmp-blanc  { --bs-btn-bg: #fff;             --bs-btn-color: var(--tmp-bleu);  --bs-btn-hover-bg: var(--tmp-creme);      --bs-btn-hover-color: var(--tmp-bleu-fonce); }

/* CTA avec flèche feutre : l'icône file vers la droite au survol */
.btn-fleche::after {
    content: '';
    display: inline-block;
    width: 1.35em;
    height: .8em;
    margin-left: .5em;
    vertical-align: -.08em;
    background: url('../img/deco/fleche-jaune.svg') center / contain no-repeat;
    transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.btn-tmp-jaune.btn-fleche::after,
.btn-tmp-blanc.btn-fleche::after { background-image: url('../img/deco/fleche-rouge.svg'); }
.btn-fleche:hover::after { transform: translateX(.35em); }

/* ------------------------------------------------------ encadré « carnet » */

.carnet {
    position: relative;
    margin-top: 1.1rem;
    background: #fff;
    border: 2px solid var(--tmp-cyan);
    border-radius: .35rem .35rem .8rem .35rem;
    filter: drop-shadow(0 2px 0 rgba(35, 39, 70, .06));
}
.carnet-entete {
    padding: .55rem 1.25rem;
    border-radius: .2rem .2rem 0 0;
    font-weight: 700;
    color: var(--tmp-encre);
    background: var(--tmp-jaune);
}
.carnet-rose .carnet-entete { background: var(--tmp-rose); }
.carnet-bleu .carnet-entete { background: var(--tmp-bleu); color: #fff; }
.carnet-corps { padding: 1.1rem 1.25rem 1.25rem; }
.carnet-corps > :last-child { margin-bottom: 0; }

/* anneaux de spirale */
.carnet::before {
    content: '';
    position: absolute;
    top: -13px;
    left: 0;
    right: 0;
    height: 26px;
    pointer-events: none;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Cpath d='M5 28 C2 8 22 8 19 28' fill='none' stroke='%23232746' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Cpath d='M5 28 C2 8 22 8 19 28' fill='none' stroke='%23232746' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Cpath d='M5 28 C2 8 22 8 19 28' fill='none' stroke='%23232746' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 20px 26px;
    background-position: 18% 0, 50% 0, 82% 0;
}

/* coin de page corné */
.carnet::after {
    content: '';
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 22px;
    height: 22px;
    background: var(--tmp-cyan);
    border-radius: .8rem 0 .6rem 0;
}

/* -------------------------------------------------- cadres irréguliers */

.cadre-jaune,
.cadre-bleu {
    position: relative;
    padding: 1.5rem 1.6rem;
    background: #fff;
    border: 3px solid var(--tmp-jaune);
    border-radius: 1.3rem 1.7rem 1.1rem 1.9rem / 1.8rem 1.2rem 2rem 1.4rem;
}
.cadre-bleu { border-color: var(--tmp-bleu); }
.cadre-jaune > :last-child,
.cadre-bleu > :last-child { margin-bottom: 0; }

.cadre-jaune::after,
.cadre-bleu::after {
    content: '';
    position: absolute;
    top: -1.1rem;
    right: 1.4rem;
    width: 2.4rem;
    height: 2rem;
    background: url('../img/deco/oeil.svg') center / contain no-repeat;
}
.cadre-bleu::after {
    background-image: url('../img/deco/etoile.svg');
    top: -1.3rem;
    right: -.9rem;
    width: 2.6rem;
    height: 2.6rem;
}

/* -------------------------------------------------------------- citation */

.citation {
    position: relative;
    padding: .4rem 0 .4rem 3.4rem;
    margin: 1.5rem 0;
    font-size: var(--fs-lead);
    font-weight: 600;
    font-style: italic;
    color: var(--tmp-bleu);
}
.citation::before {
    content: '';
    position: absolute;
    left: 0;
    top: .1rem;
    width: 2.4rem;
    height: 2rem;
    background: url('../img/deco/guillemets-jaune.svg') center / contain no-repeat;
}
.citation-rose::before  { background-image: url('../img/deco/guillemets-rose.svg'); }
.citation-cyan::before  { background-image: url('../img/deco/guillemets-cyan.svg'); }
.citation-bleu::before  { background-image: url('../img/deco/guillemets-bleu.svg'); }
.citation cite {
    display: block;
    margin-top: .35rem;
    font-size: 1rem;
    font-weight: 500;
    font-style: normal;
    color: var(--tmp-encre);
}

/* ------------------------------------------------------- tuiles rubriques */

.tuile {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: .35rem;
    text-decoration: none;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.tuile img { width: 58%; height: 58%; object-fit: contain; }
.tuile:hover, .tuile:focus-visible { transform: rotate(-2deg) scale(1.04); }

.tuile-festival  { background: var(--rub-festival); }
.tuile-residence { background: var(--rub-residence); }
.tuile-mediation { background: var(--rub-mediation); }
.tuile-avis      { background: var(--rub-avis); box-shadow: inset 0 0 0 2px rgba(35, 39, 70, .08); }
.tuile-contact   { background: var(--rub-contact); }

.tuile-libelle {
    display: block;
    margin-top: .6rem;
    text-align: center;
    font-weight: 700;
    color: var(--tmp-bleu);
}

/* ------------------------------------------------------------- agenda */

.badge-mois {
    display: inline-block;
    padding: .2rem .85rem;
    border: 2px solid var(--tmp-encre);
    border-radius: .3rem .5rem .3rem .55rem;
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--tmp-encre);
    background: #fff;
}

.evenement { padding: .65rem 0; }
.evenement .date { font-size: .9375rem; font-weight: 600; color: var(--tmp-rouge); }
.evenement .titre { font-weight: 700; color: var(--tmp-encre); }
.evenement .lieu { font-size: .9375rem; color: var(--tmp-encre); opacity: .75; }

/* ------------------------------------------------------------------ déco */

.deco {
    position: absolute;
    pointer-events: none;
    user-select: none;
}

.section-deco { position: relative; overflow: hidden; }
.section-deco > .container,
.section-deco > .container-fluid { position: relative; z-index: 1; }

/* -------------------------------------------------------- accessibilité */

@media (prefers-reduced-motion: reduce) {
    .tuile, .btn-fleche::after { transition: none; }
}