/* Escape-Gift : feuille de style unique, écrite à la main, sans préprocesseur.
   Mobile first ; points de rupture 40em (640 px) et 60em (960 px). Polices auto-hébergées, aucune
   ressource externe (CSP default-src 'self'). Les fonds libres des bandes sont dans /css/bands.css.
   Parti pris : un faire-part plutôt qu'une page de vente. Composition centrée, beaucoup d'air, titres
   en Yanone Kaffeesatz, or réservé aux ornements (puces, chevrons, soulignés, piste du titre). */

/* -- Polices (tools/fetch_fonts.py, sous-ensemble latin, licence OFL) ---------------------------- */
@font-face {
  font-family: "Yanone Kaffeesatz";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/yanone-kaffeesatz-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Yanone Kaffeesatz";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/yanone-kaffeesatz-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/poppins-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/poppins-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -- Jetons ------------------------------------------------------------------------------------- */
:root {
  /* Palette du site d'origine (plan, Global Constraints) */
  --c-fond: #ffffff;
  --c-bandeau: #e8dfd7;
  --c-texte: #454545;
  --c-fort: #151515;
  --c-or: #e4b763;
  --c-or-bouton: #eabb48;
  --c-or-clair: #edc36c;
  --c-beige: #bea58c;
  --c-rose: #e8b79d;
  --c-rouge: #7f2329;
  --c-turquoise: #4db5af;

  /* Rôles : redéfinis sur fond sombre (bandes libres, bandes à image, hero illustré) */
  --ink: var(--c-texte);
  --ink-strong: var(--c-fort);
  --link: var(--c-fort);
  --underline: var(--c-or);
  --focus: var(--c-rouge);
  --hover: var(--c-rouge);
  --line: rgb(190 165 140 / .45);
  --field-border: #8a7966;

  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Yanone Kaffeesatz", "Arial Narrow", "Roboto Condensed", sans-serif;

  --gutter: 1rem;
  --w: 70rem;
  --measure: 44rem;
  --pad-x: max(var(--gutter), (100% - var(--w)) / 2);
  --section: clamp(2.5rem, 7vw, 5rem);
  --radius: 12px;
  --pill: 26px;
  --shadow: 0 1px 2px rgb(70 50 25 / .06), 0 10px 28px -6px rgb(70 50 25 / .14);
}

/* -- Base --------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-fond);
  color: var(--ink);
  font: 400 1rem/1.6 var(--font-body);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 60em) {
  body { font-size: 1.0625rem; }
}

img, picture, video { display: block; max-width: 100%; height: auto; }
img { margin-inline: auto; }
svg, iframe { max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
iframe { border: 0; }
[hidden] { display: none !important; }
::selection { background: var(--c-or-clair); color: var(--c-fort); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* -- Typographie -------------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { color: var(--ink-strong); text-wrap: balance; }
h1, h2, h3 { font-family: var(--font-display); text-align: center; }

h1 {
  margin-block: var(--section) 1.75rem;
  font-size: clamp(2.3rem, 1.5rem + 4vw, 4.25rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .005em;
}

/* La piste au trésor : pointillés et croix, sous le titre unique de chaque page. */
h1::after {
  content: "";
  display: block;
  width: 7.5rem;
  height: 1rem;
  margin: 1.1rem auto 0;
  background-color: var(--c-or);
  -webkit-mask: url("/img/trail.svg") center / contain no-repeat;
  mask: url("/img/trail.svg") center / contain no-repeat;
}

h2 {
  margin-block: 3.25rem .75rem;
  font-size: clamp(1.9rem, 1.45rem + 1.9vw, 2.75rem);
  font-weight: 700;
  line-height: 1.05;
}

h3 {
  margin-block: 2rem .5rem;
  font-size: clamp(1.45rem, 1.25rem + .8vw, 1.85rem);
  font-weight: 400;
  line-height: 1.15;
}

h4, h5, h6 { margin-block: 1.5rem .5rem; font-size: 1rem; font-weight: 600; line-height: 1.4; }
p { margin-block: 0 1rem; text-wrap: pretty; }
p > :is(img, picture) { margin-block: 1rem; }
b, strong { font-weight: 600; color: var(--ink-strong); }

a {
  color: var(--link);
  text-decoration-color: var(--underline);
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}

a:hover { color: var(--hover); }
ul, ol { margin-block: 0 1.25rem; padding-left: 1.4rem; }
li { margin-block: .25rem; }
ul > li::marker { color: var(--c-or); }
ol > li::marker { color: var(--ink-strong); font-weight: 600; }
hr { width: 4rem; height: 2px; margin-block: 3rem; border: 0; background: var(--c-or); }
table { width: 100%; margin-block: 1.5rem; border-collapse: collapse; font-size: .875rem; }

/* Tableau du Markdown dans un cadre (render.py) : trop large pour un téléphone, il défile dans le cadre
   au lieu de couper ses mots au milieu ; césure selon la langue de la page. */
.table-scroll { margin-block: 1.5rem; overflow-x: auto; scrollbar-color: var(--c-or) transparent; scrollbar-width: thin; }
.table-scroll > table { margin-block: 0; }

th, td {
  padding: .5rem .6rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
  hyphens: auto;
  hyphenate-limit-chars: 7 3 3;
}

th { color: var(--ink-strong); font-weight: 600; }

/* -- Mise en page : conteneur 70 rem, texte courant sur une colonne de lecture centrée -------------
   Spécificité nulle (:where) : tout composant peut redéfinir sa largeur ; les styles d'éléments
   n'écrivent que des marges verticales (margin-block) pour ne pas écraser le centrage. */
:where(.site-main) > * { width: min(100% - 2 * var(--gutter), var(--w)); margin-inline: auto; }
.site-main > :is(.band, .hero) { width: 100%; }

:where(.site-main, .band__inner, .post-body, .blog-intro) > :where(p, ul:not([class]), ol:not([class]), h2, h3, h4, h5, h6, table, .table-scroll, blockquote:not(.quote)) {
  max-width: var(--measure);
  margin-inline: auto;
}

:where(.site-main, .band__inner, .post-body) > h1 { max-width: 56rem; margin-inline: auto; }
.site-main > :first-child:not(.band, .hero) { margin-top: var(--section); }
.site-main > :last-child:not(.band, .hero) { margin-bottom: var(--section); }
.site-main > :not(.band) + .band, .site-main > .band + :not(.band) { margin-top: 3rem; }

/* -- En-tête : bandeau sable, logo, menu (centrés sur grand écran, comme le thème Neve) ------------ */
.site-header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem var(--pad-x);
  border-top: 2rem solid var(--c-bandeau);
  background: var(--c-fond);
  box-shadow: 0 1px 0 var(--line);
}

.site-logo { display: inline-flex; align-items: center; gap: .6rem; color: var(--c-fort); text-decoration: none; }
.site-logo:hover { color: var(--c-fort); }
.site-logo img { width: 2.75rem; height: 2.75rem; margin: 0; }

/* Nom du site à côté du monogramme ; « / "" » : déjà annoncé par l'alt du logo. */
.site-logo::after {
  content: "Escape-Gift";
  content: "Escape-Gift" / "";
  font: 700 1.6rem/1 var(--font-display);
  letter-spacing: .02em;
}

/* Lien de langue dans le bandeau sable (la bordure haute de l'en-tête). */
.lang-switch {
  position: absolute;
  top: -2rem;
  right: var(--pad-x);
  display: inline-flex;
  align-items: center;
  height: 2rem;
  padding-inline: .5rem;
  color: var(--c-fort);
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
}

.lang-switch:hover { color: var(--c-rouge); text-decoration: underline; text-decoration-color: currentColor; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.75rem;
  padding: .4rem 1.05rem;
  border: 1.5px solid var(--c-fort);
  border-radius: var(--pill);
  background: var(--c-fond);
  color: var(--c-fort);
  font: 600 .875rem/1 var(--font-body);
  cursor: pointer;
}

.nav-toggle::before {
  content: "";
  width: 1.1rem;
  height: .8rem;
  background:
    linear-gradient(currentColor 0 0) top / 100% 2px no-repeat,
    linear-gradient(currentColor 0 0) center / 100% 2px no-repeat,
    linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat;
}

.nav-toggle[aria-expanded="true"] { background: var(--c-fort); color: #fff; }
.main-nav { display: none; flex-basis: 100%; }

/* Ouvert par site.js ; sans JavaScript, le focus dans l'en-tête l'ouvre. Limite connue : Safari iOS ne
   donne pas le focus à un bouton touché, le repli n'y sert donc qu'au clavier (le JS couvre le toucher). */
.main-nav--open,
html:not(.js) .site-header:focus-within .main-nav { display: block; }

.main-nav__list, .main-nav__sub { margin: 0; padding: 0; list-style: none; }
.main-nav__list { padding-bottom: .5rem; }
.main-nav li { margin: 0; }

.main-nav a {
  display: block;
  padding: .6rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--c-fort);
  font: 400 1.4rem/1.2 var(--font-display);
  letter-spacing: .01em;
  text-decoration: none;
}

.main-nav__sub a { padding-left: 1.25rem; font-size: 1.2rem; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--c-rouge); }

.has-children > a::after {
  content: "";
  display: inline-block;
  width: .4em;
  height: .4em;
  margin: 0 0 .2em .45em;
  border: solid var(--c-or);
  border-width: 0 2px 2px 0;
  rotate: 45deg;
}

@media (min-width: 60em) {
  .site-header { flex-direction: column; gap: .5rem; padding-block: 1.25rem 0; }
  .site-logo img { width: 3.75rem; height: 3.75rem; }
  .site-logo::after { font-size: 2.25rem; }
  .nav-toggle { display: none; }
  .main-nav { display: block; flex-basis: auto; }
  .main-nav__list { display: flex; flex-wrap: wrap; justify-content: center; padding: 0; }
  .main-nav__list > li { position: relative; }

  /* Survol : souligné or ; page courante : souligné rouge (thème Neve d'origine). */
  .main-nav__list > li > a { padding: .45rem .8rem .5rem; border-bottom: 2px solid transparent; font-size: 1.35rem; }
  .main-nav__list > li > a:hover,
  .main-nav__list > li:hover > a { border-bottom-color: var(--c-or); color: var(--c-fort); }
  .main-nav__list > li > a[aria-current="page"] { border-bottom-color: var(--c-rouge); color: var(--c-rouge); }

  .main-nav__sub {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 10;
    display: none;
    min-width: 15rem;
    padding: .5rem;
    translate: -50% 0;
    border-radius: var(--radius);
    background: var(--c-fond);
    box-shadow: var(--shadow);
  }

  .has-children:hover > .main-nav__sub,
  .has-children:focus-within > .main-nav__sub { display: block; }
  .main-nav__sub a { padding: .45rem .75rem; border: 0; border-radius: 8px; font-size: 1.25rem; }
  .main-nav__sub a:hover { background: var(--c-bandeau); }
}

/* -- Pied de page --------------------------------------------------------------------------------- */
.site-footer { padding: 3rem var(--pad-x) 2rem; background: var(--c-bandeau); font-size: .875rem; text-align: center; }

.footer-nav__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem 1.4rem;
  max-width: 52rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.footer-nav__list li { margin: 0; }
.footer-nav a { display: inline-block; padding-block: .4rem; color: var(--c-texte); text-decoration: none; }

.footer-nav a:hover,
.footer-nav a[aria-current="page"] { color: var(--c-rouge); text-decoration: underline; text-decoration-color: currentColor; }

.social { display: flex; justify-content: center; gap: .75rem; margin: 2rem 0 1.5rem; padding: 0; list-style: none; }

.social a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--c-fond);
  color: var(--c-fort);
  transition: background-color .2s, color .2s;
}

.social a:hover { background: var(--c-fort); color: #fff; }
.social svg { width: 1.35rem; height: 1.35rem; }
.copyright { margin: 0; color: var(--c-texte); font-size: .8125rem; }

/* -- Boutons ------------------------------------------------------------------------------------ */
.buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-block: 1.75rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: .7rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--pill);
  font: 600 .95rem/1.2 var(--font-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}

/* Texte foncé sur or : 10:1 (le blanc ne donnait que 1,8:1). */
.btn--primary { background: var(--c-or-bouton); color: var(--c-fort); }
.btn--secondary { border-color: var(--c-or-bouton); background: transparent; color: var(--ink-strong); }

.btn--primary:hover,
.btn--secondary:hover { border-color: var(--c-fort); background: var(--c-fort); color: #fff; }

/* -- Hero ----------------------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(20rem, 60vh, 36rem);
  padding: var(--section) var(--gutter);
  overflow: hidden;
  background: var(--c-bandeau);
  text-align: center;
}

.hero picture, .hero > .hero__image { position: absolute; inset: 0; z-index: -2; }
.hero .hero__image { width: 100%; height: 100%; object-fit: cover; }
.hero:has(.hero__image) {
  --ink: #fff;
  --ink-strong: #fff;
  --link: #fff;
  --focus: #fff;
  --hover: var(--c-or-clair);
  color: var(--ink);
}

.hero:has(.hero__image)::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(21 21 21 / .5); }
.hero__body { max-width: 48rem; }
.hero__title { margin-top: 0; }
.hero__subtitle { font-size: clamp(1.05rem, 1rem + .5vw, 1.25rem); }

/* -- Bandes : fond plein cadre, contenu centré ---------------------------------------------------- */
.band { padding-block: var(--section); background-color: var(--band-color, transparent); }
.band__inner { width: min(100% - 2 * var(--gutter), var(--w)); margin-inline: auto; text-align: center; }
.band__inner > :first-child { margin-top: 0; }
.band__inner > :last-child { margin-bottom: 0; }
/* Liste courte d'une page vitrine : bloc centré sous le titre, texte aligné à gauche. */
:where(.site-main, .band__inner) > :where(ul:not([class]), ol:not([class])) {
  width: fit-content;
  max-width: min(100% - 2 * var(--gutter), var(--measure));
  text-align: left;
}

.band--sable { --band-color: var(--c-bandeau); }
.band--or { --band-color: var(--c-or); --underline: var(--c-fort); }
.band--beige { --band-color: var(--c-beige); --underline: var(--c-fort); }
.band--rose { --band-color: var(--c-rose); --underline: var(--c-fort); }
.band--blanc { --band-color: var(--c-fond); }
.band--or .btn--primary { background: var(--c-fort); color: #fff; }

/* Deux bandes de même couleur à la suite ne doublent pas leur marge. */
.band--sable + .band--sable,
.band--beige + .band--beige,
.band--rose + .band--rose,
.band--or + .band--or { padding-top: 0; }

/* Fonds libres (/css/bands.css : --band-bg, --band-image) : tous sombres, texte blanc ; voile sombre
   sur les images pour garder le texte lisible. */
.band--custom,
.band--image {
  --ink: #fff;
  --ink-strong: #fff;
  --link: #fff;
  --underline: var(--c-or);
  --focus: #fff;
  --hover: var(--c-or-clair);
  --line: rgb(255 255 255 / .35);
  color: var(--ink);
}

.band--custom { background-color: var(--band-bg, var(--c-texte)); }

.band--image {
  background-color: var(--band-bg, var(--c-fort));
  background-image: linear-gradient(rgb(21 21 21 / .55), rgb(21 21 21 / .55)), var(--band-image, none);
  background-position: center;
  background-size: cover;
}

:is(.band--custom, .band--image) .btn--secondary { border-color: #fff; }

:is(.band--custom, .band--image) .btn--primary:hover {
  border-color: #fff;
  background: #fff;
  color: var(--c-fort);
}

/* Dans un article, une bande devient un encart arrondi. */
.post-body .band { margin-block: 2rem; padding-inline: var(--gutter); border-radius: 16px; }

/* -- Cartes : 1, 2 puis 3 colonnes ; une carte orpheline reste centrée -------------------------------- */
.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  margin-block: 2rem;
  padding: 0;
  list-style: none;
}

/* Cartes blanches : retour aux couleurs claires, même posées sur une bande sombre. */
.card,
.post-card {
  --ink: var(--c-texte);
  --ink-strong: var(--c-fort);
  --link: var(--c-fort);
  --underline: var(--c-or);
  --focus: var(--c-rouge);
  --hover: var(--c-rouge);
  --line: rgb(190 165 140 / .45);
  color: var(--ink);
}

.card {
  display: flex;
  flex: 1 1 100%;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 1.75rem 1.5rem 1.5rem;
  border-radius: var(--radius);
  background: var(--c-fond);
  box-shadow: var(--shadow);
  text-align: center;
}

@media (min-width: 40em) {
  .card { flex: 0 1 calc((100% - 1.25rem) / 2); }
}

@media (min-width: 60em) {
  .card { flex-basis: calc((100% - 2.5rem) / 3); }
}

.card:has(> .card__media) { padding: .6rem; }
.card__icon { margin-bottom: .5rem; color: var(--c-or); }
.card__icon svg { display: block; width: 3rem; height: 3rem; stroke-width: 1.5; }
.card > :is(picture, img) { align-self: stretch; margin-bottom: .75rem; }
.card__media { display: block; align-self: stretch; }
.card img { width: 100%; border-radius: 8px; }
.card__title { margin: .25rem 0 .5rem; font-size: 1.75rem; font-weight: 700; line-height: 1.1; }
.card__title a { text-decoration: none; }
.card__text { font-size: .95rem; }
.card__text > :last-child { margin-bottom: 0; }
.card__text > :is(ul, ol) { width: fit-content; margin-inline: auto; text-align: left; }
.card .buttons { margin: auto 0 0; padding-top: 1.25rem; }

/* -- Slider : défilement natif aimanté, flèches ajoutées par site.js ------------------------------ */
.slider { position: relative; margin-block: 2rem; }

.slider__track {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0 0 .9rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  list-style: none;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--c-or) transparent;
  scrollbar-width: thin;
}

/* Téléphone : une diapositive pleine largeur (le début de la suivante dépassait du bord droit). */
.slider__slide { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }

@media (min-width: 40em) {
  .slider__slide { flex-basis: calc((100% - 1rem) / 2); }
}

@media (min-width: 60em) {
  .slider__slide { flex-basis: calc((100% - 2rem) / 3); }
}

/* Proportions d'origine, jamais recadrées (maquettes de téléphone 0,58, photos 1,5 à 2,4) ; une image
   haute est plafonnée et logée entière (contain) dans la largeur de la diapositive. */
.slider__image { width: 100%; height: auto; max-height: 30rem; object-fit: contain; border-radius: var(--radius); }
.slider__link { color: inherit; text-decoration: none; }

/* Diapositives de même hauteur : chaque image est centrée verticalement dans la zone au-dessus des
   légendes, toutes alignées en bas ; les flèches visent le centre commun de ces images. */
.slider__slide, .slider__link { display: flex; flex-direction: column; }
.slider__link { flex: 1 1 auto; }
:is(.slider__slide, .slider__link) > :is(picture, img) { margin-block: auto; }

.slider__text {
  display: block;
  margin-top: .6rem;
  color: var(--ink-strong);
  font: 400 1.5rem/1.2 var(--font-display);
  text-align: center;
}

.slider__link:hover .slider__text { color: var(--hover); }
.slider__prev, .slider__next { display: none; }

/* --arrow-top : centre commun des images, mesuré par site.js (hauteur des légendes variable). */
.slider--js .slider__prev,
.slider--js .slider__next {
  position: absolute;
  top: calc(var(--arrow-top, 50%) - 1.375rem);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 0 .2rem;
  border: 0;
  border-radius: 50%;
  background: var(--c-fond);
  box-shadow: var(--shadow);
  color: var(--c-fort);
  font: 400 2rem/1 var(--font-display);
  cursor: pointer;
}

.slider--js .slider__prev { left: .5rem; }
.slider--js .slider__next { right: .5rem; }
.slider--js :is(.slider__prev, .slider__next):hover { background: var(--c-fort); color: #fff; }

/* -- Accordéon : <details> natifs, chevron doré ---------------------------------------------------- */
.accordion { max-width: var(--measure); margin: 2rem auto; border-top: 1px solid var(--line); text-align: left; }
.acc { border-bottom: 1px solid var(--line); }

.acc > summary {
  position: relative;
  min-height: 2.75rem;
  padding: .85rem 2.5rem .85rem 0;
  color: var(--ink-strong);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.acc > summary::-webkit-details-marker { display: none; }

.acc > summary::after {
  content: "";
  position: absolute;
  top: 1.2rem;
  right: .6rem;
  width: .6rem;
  height: .6rem;
  border: solid var(--c-or);
  border-width: 0 2.5px 2.5px 0;
  rotate: 45deg;
  transition: rotate .2s, translate .2s;
}

.acc[open] > summary::after { rotate: 225deg; translate: 0 .3rem; }
.acc > summary:hover { color: var(--hover); }
.acc__body { padding-bottom: 1.25rem; }
.acc__body img { margin-block: 1rem; border-radius: 8px; box-shadow: var(--shadow); }

/* -- Formulaires : champs pleine largeur, cibles de 44 px, focus visible ------------------------------ */
.form { max-width: 36rem; margin: 2rem auto; text-align: left; }
.form__field { margin-block: 0 1.1rem; }
.form__field label { display: block; margin-bottom: .35rem; color: var(--ink-strong); font-size: .9rem; font-weight: 600; }

.form input:not([type="hidden"]),
.form textarea {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: .65rem .9rem;
  border: 1px solid var(--field-border);
  border-radius: 10px;
  background: var(--c-fond);
  color: var(--c-fort);
  font: inherit;
}

.form textarea { min-height: 9rem; resize: vertical; }
.form :is(input, textarea):focus-visible { border-color: var(--c-fort); outline-offset: 2px; }
.form__submit { margin-top: 1.5rem; text-align: center; }

.form-error {
  margin-bottom: 1.5rem;
  padding: .85rem 1rem;
  border-left: 4px solid var(--c-rouge);
  border-radius: 0 8px 8px 0;
  background: var(--c-fond);
  color: var(--c-rouge);
  font-weight: 600;
}

/* Retour de contact.php en échec (…?erreur=1#erreur) : message visible sans JavaScript. `!important`
   l'emporte sur `[hidden] { display: none !important }` par la spécificité de la classe et de :target. */
.form-error:target { display: block !important; }

/* Pot de miel : hors écran, jamais rempli par un humain. */
.hp { position: absolute; left: -9999px; }

/* -- Citation, figure, galerie, vidéo -------------------------------------------------------------- */
.quote { max-width: 40rem; margin: 2.5rem auto; padding: 0; color: var(--ink-strong); font-size: 1.1rem; text-align: center; }
.quote::before { content: "\201C"; display: block; height: 2.2rem; color: var(--c-or); font: 700 5rem/1 var(--font-display); }
.quote > p { margin-bottom: .75rem; }
.quote footer { color: var(--ink); font-size: .875rem; font-weight: 600; }
.quote cite { font-style: normal; }

.figure { max-width: var(--measure); margin: 2rem auto; text-align: center; }
.figure--rounded img { border-radius: 16px; }
.figure figcaption { margin-top: .6rem; font-size: .875rem; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
  gap: .75rem;
  margin-block: 2rem;
  padding: 0;
  list-style: none;
}

.gallery__item { margin: 0; }
.gallery__item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }

.video {
  position: relative;
  width: 100%;
  max-width: 48rem;
  aspect-ratio: 16 / 9;
  margin: 2rem auto;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--c-fort);
}

video.video { aspect-ratio: auto; }
.video__play { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.video__poster { width: 100%; height: 100%; object-fit: cover; }

.video__label {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  max-width: calc(100% - 2rem);
  overflow: hidden;
  padding: .4rem 1rem;
  translate: -50% 0;
  border-radius: var(--pill);
  background: rgb(21 21 21 / .72);
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video__play:hover .video__label { background: var(--c-fort); }
.video iframe { display: block; width: 100%; height: 100%; }

/* -- Blog, catégories, articles ---------------------------------------------------------------------- */
.blog-intro { text-align: center; }
.blog-kicker { margin: var(--section) 0 0; font-size: .9rem; text-align: center; }
.blog-kicker + h1 { margin-top: .25rem; }

.post-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-block: 2.5rem;
  padding: 0;
  list-style: none;
}

@media (min-width: 40em) {
  .post-list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 60em) {
  .post-list { grid-template-columns: repeat(3, 1fr); }
}

.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--c-fond);
  box-shadow: var(--shadow);
}

/* Couverture 16:9 fixe : la couverture de repli (SVG) n'a pas de dimensions. */
.post-card__cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.post-card__title { margin: 1.1rem 1.25rem .35rem; font-size: 1.6rem; line-height: 1.1; text-align: left; }
.post-card__title a { text-decoration: none; }

/* Toute la carte mène à l'article ; « Lire la suite » reste au-dessus du lien étiré. */
.post-card__title a::after { content: ""; position: absolute; inset: 0; }
.post-card:hover .post-card__title a { color: var(--c-rouge); }
.post-card__date { margin-inline: 1.25rem; font-size: .8125rem; }
.post-card__excerpt { margin: .6rem 1.25rem 0; font-size: .9rem; }

.post-card__more {
  position: relative;
  align-self: flex-start;
  margin: auto 1.25rem 1.25rem;
  padding-top: 1rem;
  color: var(--c-rouge);
  font-size: .875rem;
  font-weight: 600;
}

.post-header { text-align: center; }
.post-header h1 { margin-bottom: 1.25rem; }
.post-date { margin: 0; font-size: .875rem; }
.post-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.post-cats li { margin: 0; }

.post-cats a {
  display: inline-block;
  padding: .3rem .85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--c-texte);
  font-size: .8125rem;
  text-decoration: none;
}

.post-cats a:hover { border-color: var(--c-or); color: var(--hover); }
.post-cover { max-width: min(100%, 56rem); margin-block: 2.5rem; border-radius: 16px; }
.post-body { margin-top: 2.5rem; }
.post-back { margin-top: 3rem; font-weight: 600; text-align: center; }

/* -- Pages légales, 404 ----------------------------------------------------------------------------- */
.site-main > .legal { width: min(100% - 2 * var(--gutter), var(--measure)); }
.legal :is(h2, h3) { text-align: left; }
.legal h2 { font-size: clamp(1.6rem, 1.4rem + 1vw, 2rem); }
.legal-note { padding: .9rem 1.1rem; border-radius: 10px; background: var(--c-bandeau); font-size: .9rem; }
.not-found { padding-bottom: 2rem; text-align: center; }
.not-found > [lang] { margin-top: 3rem; }

/* -- Lien d'évitement : premier élément de la page, invisible tant qu'il n'a pas le focus clavier ------ */
.skip-link {
  position: absolute;
  top: 0;
  left: .5rem;
  z-index: 100;
  padding: .6rem 1rem;
  border-radius: 0 0 8px 8px;
  background: var(--c-fort);
  color: #fff;
  font-weight: 600;
  transform: translateY(-120%);
}
.skip-link:focus { transform: none; }

/* -- Utilitaires, mouvement réduit ------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  html, .slider__track { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}