@font-face {
  font-family: 'PoliceTitre';
  src: url('police-titre.woff2?v=4') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'PoliceLibelle';
  src: url('police-libelle.woff2?v=4') format('woff2');
  font-weight: 600;
  font-display: swap;
}

:root {
  --encre: #211a1f;
  --encre-douce: #57454f;
  --fond: #ece3d5;          /* le papier de la revue */
  --fond-alt: #ddd0bd;      /* le kraft */
  --carte: #f8f3ea;         /* la page blanche */
  --marque: #9b2a1c;        /* vermillon brûlé */
  --marque-fonce: #781e13;
  --filet: #c9b79f;
  --nuit: #171114;          /* les deux double-pages sombres */
  --creme: #f1e8dc;
  --creme-doux: #c0b0a2;
  --laiton: #c99a55;
  --laiton-clair: #e0b878;
  --wa: #0e6f62;
}

:root {
  --marge: clamp(1.1rem, 4vw, 2.4rem);
  --colonne: 66rem;
  --demi-colonne: 33rem;    /* la moitié : c'est là que tombent les arêtes */

  --rayon: 0;
  --rayon-bouton: .3rem;

  --pres: 0 1px 2px color-mix(in srgb, var(--nuit) 9%, transparent);
  --loin: 0 12px 28px color-mix(in srgb, var(--nuit) 15%, transparent);
  --loin-haute: 0 18px 40px color-mix(in srgb, var(--nuit) 21%, transparent);
  --pres-sombre: 0 1px 2px rgba(0, 0, 0, .32);
  --loin-sombre: 0 14px 34px rgba(0, 0, 0, .42);

  --police-titre: 'PoliceTitre', "Source Serif Pro", Cambria, Georgia, serif;
  --police-libelle: 'PoliceLibelle', "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;      /* la barre collante ne mange plus l'ancre */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police-libelle);
  font-size: 1.0625rem;
  line-height: 1.62;
  overflow-wrap: break-word;
}

h1, h2, h3, p, dl, dd, ul, ol, figure, figcaption { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; }

:focus-visible { outline: 3px solid var(--marque); outline-offset: 2px; }
.entete :focus-visible,
.section--sombre :focus-visible,
.pied :focus-visible { outline-color: var(--laiton-clair); }

.bande {
  max-width: var(--colonne);
  margin-inline: auto;
  padding-inline: var(--marge);
  position: relative;
  z-index: 1;
}

.section { position: relative; padding-block: clamp(2.8rem, 8vw, 5.5rem); }
.section--large  { padding-block: clamp(4rem, 11vw, 7.5rem); }
.section--serree { padding-block: clamp(1.9rem, 4.6vw, 3.2rem); }

.section::after,
.pied::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  --goutte: max(0px, calc((100% - var(--colonne)) / 2));
  --joue-masque:linear-gradient(90deg, #000 0,
    rgba(0,0,0,.92) var(--goutte),
    rgba(0,0,0,.09) 46%,
    rgba(0,0,0,.09) 54%,
    rgba(0,0,0,.92) calc(100% - var(--goutte)), #000 100%);
  background:
    repeating-radial-gradient(circle at 14% -260px,
      var(--joue-lueur) 0 1px,
      var(--joue-ombre) 1px 2px,
      transparent 2px 31px) left top / 100% 100% no-repeat,
    repeating-radial-gradient(circle at 88% 128%,
      color-mix(in srgb, var(--joue-ombre) 48%, transparent) 0 1px,
      transparent 1px 53px) left top / 100% 100% no-repeat,
    linear-gradient(90deg, var(--joue-fond) 0, transparent var(--goutte),
      transparent calc(100% - var(--goutte)), var(--joue-fond) 100%) left top / 100% 100% no-repeat;
  -webkit-mask-image:var(--joue-masque);
  mask-image:var(--joue-masque);
}

.section--claire, .section--kraft, .section--page {
  --joue-fond: color-mix(in srgb, var(--nuit) 30%, transparent);
  --joue-lueur: rgba(255, 255, 255, .33);
  --joue-ombre: color-mix(in srgb, var(--nuit) 5.5%, transparent);
  --joue-arete: rgba(255, 255, 255, .58);
}
.section--sombre {
  --joue-fond: color-mix(in srgb, var(--creme) 10%, transparent);
  --joue-lueur: color-mix(in srgb, var(--creme) 7.5%, transparent);
  --joue-ombre: rgba(0, 0, 0, .20);
  --joue-arete: color-mix(in srgb, var(--nuit) 44%, transparent);
}

.section--claire {
  background-color:#ece3d5;background-image:radial-gradient(58rem 24rem at 50% 0%, rgba(255, 255, 255, .18), transparent 70%);
}
.section--kraft {
  background-color:#ece3d5;background-image:radial-gradient(58rem 24rem at 50% 0%, rgba(255, 255, 255, .16), transparent 70%);
}
.section--page {
  background-color:#f8f3ea;background-image:radial-gradient(58rem 24rem at 50% 0%, rgba(255, 255, 255, .20), transparent 70%);
}
.section--sombre {
  color: var(--creme);                     /* 15,37 / 13,98 en haut */
  background-color:#171114;background-image:radial-gradient(58rem 24rem at 50% 0%, color-mix(in srgb, var(--creme) 6%, transparent), transparent 70%);
}

.ruban {
  position: relative;
  z-index: 21;
  padding: .45rem 1rem;
  background: var(--nuit);
  color: var(--creme);                     /* 15,37 */
  font-size: .82rem;
  letter-spacing: .04em;
  text-align: center;
}
.ruban a {
  color: var(--laiton-clair);              /* 10,03 */
  display: inline-block;
  padding-block: .35rem;                   /* cible ≥ 24 px */
  text-underline-offset: .2em;
}

.saut-contenu {
  position: absolute;
  left: -999rem;
  top: 0;
  z-index: 50;
  padding: .6rem 1rem;
  background: var(--carte);
  color: var(--encre);
}
.saut-contenu:focus { left: 0; }

.rail { display: none; }
@media (min-width: 75rem) {
  .rail {
    display: block;
    position: absolute;
    top: 0;
    left: .2rem;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: .68rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--encre-douce);             /* 6,97 */
  }
  .rail--clair { color: var(--creme-doux); }  /* 8,85 */
  .rail sup { font-size: .8em; }
}

.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--nuit) 82%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  backdrop-filter: blur(16px) saturate(115%);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), var(--loin-sombre);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4rem;
}

.marque { text-decoration: none; padding-block: .5rem; }
.marque__nom {
  display: block;
  font-family: var(--police-titre);
  font-size: 1.22rem;
  line-height: 1.1;
  letter-spacing: .01em;
  color: var(--creme);                     /* 9,18 au pire cas */
}
.marque__sous {
  display: block;
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--laiton-clair);              /* 5,99 au pire cas */
}

#nav-toggle {
  width: 46px;
  height: 46px;
  padding: 11px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: none;
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: var(--rayon-bouton);
  cursor: pointer;
}
.nav-toggle__trait { display: block; height: 2px; background: var(--creme); }

#nav-links {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  right: 0;
  display: none;
  flex-direction: column;
  gap: .2rem;
  padding: .8rem var(--marge) 1.1rem;
  background: var(--nuit);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  box-shadow: var(--loin-sombre);
}
#nav-links.is-open { display: flex; }

#nav-links a:not(.bouton) {
  display: block;
  padding: .6rem .2rem;                    /* cible ≥ 24 px */
  font-family: var(--police-titre);
  font-size: 1.02rem;
  color: var(--creme);                     /* 15,37 */
  text-decoration: none;
  border-bottom: 1px dotted rgba(255, 255, 255, .22);
}
#nav-links .bouton { margin-top: .6rem; }

@media (min-width: 58rem) {
  #nav-toggle { display: none; }
  #nav-links {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: clamp(.9rem, 2vw, 1.6rem);
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  #nav-links a:not(.bouton) {
    padding: .5rem .1rem;
    font-size: .92rem;
    letter-spacing: .06em;
    border-bottom: 1px solid transparent;
    transition: border-color .22s ease, color .22s ease;
  }
  #nav-links a:not(.bouton):hover { color: var(--laiton-clair); border-bottom-color: var(--laiton-clair); }
  #nav-links .bouton { margin-top: 0; }
}

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: .7rem 1.4rem;
  border-radius: var(--rayon-bouton);
  font-family: var(--police-libelle);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease;
}
.bouton--plein {
  background: var(--marque);
  color: #fff;                             /* 7,66 */
  box-shadow: 0 2px 0 var(--marque-fonce), var(--loin);
}
.bouton--plein:hover {
  background: var(--marque-fonce);
  box-shadow: 0 2px 0 var(--marque-fonce), var(--loin-haute);
}
.bouton--wa {
  background: var(--wa);
  color: #fff;                             /* 5,29 */
  box-shadow: 0 2px 0 #0a544a, var(--loin);
}
.bouton--wa:hover { box-shadow: 0 2px 0 #0a544a, var(--loin-haute); }
.bouton--nav { min-height: 40px; padding: .5rem 1.1rem; font-size: .84rem; }
.bouton--grand {
  min-height: 56px;
  padding: .9rem 1.7rem;
  font-size: 1.02rem;
  font-variant-numeric: lining-nums tabular-nums;
}

.plaque {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  min-height: 56px;
  padding: .7rem 1.7rem;
  background: var(--marque);
  color: #fff;                             /* 7,66 */
  border-radius: var(--rayon-bouton);
  text-decoration: none;
  font-size: clamp(1.3rem, 3.4vw, 1.75rem);
  font-weight: 600;
  letter-spacing: .01em;
  font-variant-numeric: lining-nums tabular-nums;
  box-shadow: 0 2px 0 var(--marque-fonce), var(--loin);
  transition: transform .22s ease, box-shadow .22s ease;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.plaque:hover {
  box-shadow: 0 2px 0 var(--marque-fonce), var(--loin-haute);
}
.plaque svg { width: 1.45rem; height: 1.45rem; flex: none; }

.tete {
  --regle: var(--encre);
  position: relative;
  border-top: 3px solid var(--regle);
  padding-top: 1rem;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.tete::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -8px;
  height: 1px;
  background: var(--regle);
}
.tete--clair { --regle: var(--creme); }

.sur {
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--marque);                    /* 6,02 / 6,93 */
  margin-bottom: .5rem;
}
.sur::before {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 2px;
  background: currentColor;
  vertical-align: .26em;
  margin-right: .5rem;
}
.sur--clair { color: var(--laiton); }      /* 7,31 */

.titre-xl {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: clamp(2.1rem, 6.6vw, 4rem);
  line-height: .98;
  letter-spacing: -.02em;
}
.titre-xl--clair { color: var(--creme); }  /* 15,37 */

@media (min-width: 48rem) {
  .titre-xl--traverse { margin-left: calc(-1 * var(--marge) + .6rem); }
}
@media (min-width: 75rem) {
  .titre-xl--traverse { margin-left: calc(-1 * var(--marge) + 1.4rem); }
}

.cadre {
  position: relative;
  background: var(--carte);
  padding: .5rem .5rem .1rem;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85),
              inset 0 -1px 0 rgba(0, 0, 0, .09),
              var(--pres), var(--loin);
}   /* G-E : plus de transition au repos — c'est elle qui animait l'épreuve */
.cadre img {
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .55),
              0 0 0 1px rgba(28, 24, 22, .17),
              0 5px 11px -6px rgba(28, 24, 22, .45);
}
.cadre img { width: 100%; height: auto; object-fit: cover; object-position: 50% 50%; }
.cadre figcaption {
  padding: .55rem .2rem .4rem;
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--encre-douce);               /* 8,02 sur carte */
}

.section--sombre .cadre {
  background: color-mix(in srgb, var(--creme) 15%, var(--nuit));
  border-color: color-mix(in srgb, var(--creme) 26%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13),
              inset 0 -1px 0 rgba(0, 0, 0, .30),
              var(--pres-sombre), var(--loin-sombre);
}
.section--sombre .cadre img {
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .16),
              0 0 0 1px rgba(0, 0, 0, .42),
              0 6px 13px -6px rgba(0, 0, 0, .60);
}
.section--sombre .cadre figcaption { color: var(--creme-doux); }  /* 6,21 */

.couve__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 2.5rem);
  align-items: center;
}

.couve__etiquette {
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--marque);                    /* 6,02 */
  margin-bottom: 1rem;
}

.couve__titre {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: clamp(2.4rem, 8.4vw, 4.5rem);
  line-height: .96;
  letter-spacing: -.025em;
}
.couve__ligne { display: block; }

.couve__accent {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-top: .35rem;
  padding: .12rem .8rem .3rem;
  background: var(--carte);
  color: var(--marque);                    /* 6,93 */
  box-shadow: var(--pres), var(--loin);
}

.couve__intro {
  margin-top: 1.5rem;
  max-width: 32ch;                         /* colonne étroite de revue */
  color: var(--encre-douce);               /* 6,97 */
}
.couve__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin-top: 1.5rem;
}

.glace {
  position: relative;
  z-index: 2;
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: .6rem;
  box-shadow: var(--pres), var(--loin);
}

.glace__rampe {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 2rem;
  margin: -.6rem -.6rem .6rem;             /* la rampe tient toute la largeur du panneau */
  border-bottom: 1px solid var(--filet);
}
.glace__ampoule {
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 34%, #fff 0 30%, var(--carte) 58%, var(--filet) 100%);
  box-shadow: 0 4px 10px -2px color-mix(in srgb, var(--laiton) 60%, transparent);
}

.glace__cadre { position: relative; }
.glace__cadre img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 38%;
}
.glace__cadre::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 38%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .14), transparent);
}
.glace__credit {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: .35rem .75rem;
  background: color-mix(in srgb, var(--nuit) 82%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  backdrop-filter: blur(16px) saturate(115%);
  border-top: 1px solid rgba(255, 255, 255, .14);
  border-left: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
  color: var(--creme);                     /* 8,92 au pire cas (photo blanche) */
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

@media (min-width: 62rem) {
  .couve__grille {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    gap: clamp(2rem, 5vw, 3.5rem);
  }
  .couve__accent { max-width: 100%; }   /* aucun débord : cf. plus haut */
  .glace__cadre img { aspect-ratio: 4 / 3; }
}

.mot {
  background: var(--carte);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  box-shadow: var(--pres), var(--loin);
}
.mot__chapo {
  font-family: var(--police-titre);
  font-size: clamp(1.22rem, 1rem + 1vw, 1.7rem);
  line-height: 1.34;
  letter-spacing: -.012em;
  color: var(--encre);                     /* 11,23 sur carte */
  margin: 0;
  max-width: 30ch;
}
.mot__colonnes { display: grid; gap: 1.1rem; }
.mot__colonnes p {
  margin: 0;
  font-size: .98rem;
  line-height: 1.68;
  color: var(--encre);                     /* 11,23 */
}
@media (min-width: 48rem) {
  .mot__colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem; }
}
@media (min-width: 62rem) {
  .mot {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(2rem, 5vw, 3.6rem);
  }
  .mot__chapo { grid-column: 1; grid-row: 1; max-width: 22ch; }
  .peigne { grid-column: 1; grid-row: 2; align-self: start; }
  .mot__colonnes {
    grid-column: 2; grid-row: 1 / span 2;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.3rem;
    align-content: start;
  }
}

.peigne {
  display: block;
  height: 19px;
  margin: clamp(1.5rem, 3.5vw, 2.25rem) 0 clamp(1.25rem, 3vw, 1.75rem);
  background-image:
    linear-gradient(var(--encre), var(--encre)),
    repeating-linear-gradient(90deg, var(--encre) 0 1px, transparent 1px 7px);
  background-size: 100% 2px, 100% 17px;
  background-position: left top, left 2px;
  background-repeat: no-repeat;
  opacity: .34;
  -webkit-mask-image: linear-gradient(90deg, #000 0 58%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0 58%, transparent 100%);
}

.nuancier__texte {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
  align-items: start;
}
.nuancier__texte p { max-width: 40ch; color: var(--creme-doux); }  /* 8,85 */

.lettrine::first-letter {
  float: left;
  font-family: var(--police-titre);
  font-size: 4.1em;
  line-height: .76;
  padding-right: .1em;
  padding-top: .04em;
  color: var(--laiton);                    /* 7,31 */
}

@media (min-width: 48rem) {
  .nuancier__texte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .nuancier__texte { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr); }
  .cadre--remonte { margin-top: -5.5rem; }   /* elle remonte vers le titre */
  .nuancier .tete { padding-right: 17rem; }
}

.planche {
  display: grid;
  gap: .45rem;
  margin-top: clamp(2rem, 5vw, 3rem);
}
.ton {
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr) 8.5rem;
  align-items: center;
  gap: .8rem;
}
.ton__num {
  order: 1;
  font-size: .82rem;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--creme);                     /* 15,37 */
  text-align: right;
}
.ton__barre {
  order: 2;
  display: block;
  height: 1.45rem;
  background: var(--ton);
  border: 1px solid color-mix(in srgb, var(--creme) 30%, transparent);
  transform-origin: left center;
}
.ton__nom {
  order: 3;
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--creme-doux);                /* 8,85 */
  text-align: right;
}

@media (min-width: 62rem) {
  .planche {
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: .5rem;
    align-items: stretch;
  }
  .ton { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; }
  .ton__barre {
    order: 1;
    height: 8.2rem;
    transform-origin: bottom center;
  }
  .ton__num { order: 2; text-align: left; font-size: .9rem; }
  .ton__nom { order: 3; text-align: left; min-height: 2.8em; }
}

.planche__legende {
  margin-top: 1.5rem;
  max-width: 52ch;
  font-size: .92rem;
  color: var(--creme-doux);                /* 8,85 */
}

.sommaire__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.entree {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  column-gap: 1rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--filet);
}
.entree:last-child { border-bottom: 1px solid var(--filet); }
.entree__num {
  grid-row: 1 / 3;
  font-family: var(--police-titre);
  font-size: 2.5rem;
  line-height: .82;
  color: var(--filet);
  font-variant-numeric: lining-nums;
}
.entree h3 {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.28rem;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin-bottom: .35rem;
}
.entree p {
  max-width: 42ch;
  font-size: .97rem;
  color: var(--encre-douce);               /* 8,02 */
}

@media (min-width: 62rem) {
  .sommaire__grille { grid-template-columns: minmax(0, 1fr) minmax(0, .72fr); }
  .cadre--mord {
    margin-left: -3.5rem;
    margin-top: 5rem;
    z-index: 2;
  }
}

.cahier {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2.6vw, 1.5rem);
}
.cahier__a img { aspect-ratio: 3 / 2; }
.cahier__b img { aspect-ratio: 3 / 4; }
.cahier__c img { aspect-ratio: 3 / 2; }
.cahier__d img { aspect-ratio: 3 / 4; }

@media (min-width: 48rem) {
  .cahier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cahier__a { grid-column: 1 / -1; }
}
@media (min-width: 62rem) {
  .cahier { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .cahier__a { grid-column: 1 / 3; grid-row: 1; }
  .cahier__b {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: stretch;                   /* elle, au contraire, REMPLIT les deux lignes */
    display: flex;
    flex-direction: column;
  }
  .cahier__b img { flex: 1; min-height: 0; height: 100%; aspect-ratio: auto; }
  .cahier__c { grid-column: 1; grid-row: 2;
    align-self: stretch; display: flex; flex-direction: column; }
  .cahier__c img { flex: 1; min-height: 0; height: 100%; aspect-ratio: auto;
    object-fit: cover; }
  .cahier__d { grid-column: 2; grid-row: 2; }
}

.pleine {
  position: relative;
  z-index: 1;
  margin-top: clamp(2rem, 5vw, 3rem);
}
.pleine img {
  width: 100%;
  height: clamp(13rem, 38vw, 27rem);
  object-fit: cover;
  object-position: 50% 40%;
}
.pleine__legende {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: .55rem 1.1rem;
  background: color-mix(in srgb, var(--nuit) 82%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  backdrop-filter: blur(16px) saturate(115%);
  border-top: 1px solid rgba(255, 255, 255, .14);
  border-right: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
  color: var(--creme);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
@media (min-width: 62rem) {
  .pleine__legende { left: max(var(--marge), calc((100% - var(--colonne)) / 2 + var(--marge))); }
}

.images { padding-bottom: 0; }

.contact__phrase {
  max-width: 46ch;
  margin-bottom: clamp(1.25rem, 3.5vw, 2rem);
  font-size: 1.06rem;
  color: var(--encre);                     /* 11,23 */
}

.contact__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: start;
}
@media (min-width: 48rem) {
  .contact__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .contact__grille { grid-template-columns: minmax(0, .95fr) minmax(0, 1fr) minmax(0, .9fr); }
}

.fiche__titre {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: .01em;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--encre);
  margin-bottom: .2rem;
}

.tableau__ligne {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: .55rem;                   /* lignes-cibles ≥ 24 px */
  border-bottom: 1px dotted var(--encre-douce);
}
.tableau__ligne dt {
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--encre-douce);               /* 5,67 au plus sombre du kraft */
}
.tableau__ligne dd {
  text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
}
.tableau__ligne dd a {
  color: var(--marque);                    /* 4,90 au plus sombre du kraft */
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .22em;
  display: inline-block;
  padding-block: .12rem;
}
.tableau__ligne--ferme dd { color: var(--encre-douce); }   /* 5,67 */

.tableau__ligne--aujourdhui {
  background: color-mix(in srgb, var(--marque) 10%, transparent);
  margin-inline: -.5rem;
  padding-inline: .5rem;
}
.tableau__aujourdhui {
  display: inline-block;
  margin-left: .5rem;
  padding: .1rem .55rem;
  background: var(--marque);
  color: #fff;                             /* 7,66 */
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  vertical-align: .12em;
}

.contact__appel { align-self: start; }
.contact__appel .contact__phrase { margin-top: 0; }
@media (max-width: 61.99rem) {
  .contact__appel { grid-column: 1 / -1; }
}

.pied {
  position: relative;
  color: var(--creme-doux);                /* 8,85 */
  background-color:#171114;background-image:radial-gradient(58rem 24rem at 50% 0%, color-mix(in srgb, var(--creme) 6%, transparent), transparent 70%);
  padding-block: clamp(2.6rem, 7vw, 4.5rem);
}
.pied__nom {
  font-family: var(--police-titre);
  font-weight: 600;
  font-size: clamp(1.9rem, 6.4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--creme);                     /* 13,98 en haut du pied */
}
.pied__lieu {
  margin-top: .5rem;
  font-size: .72rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--laiton);                    /* 6,65 en haut du pied */
}
.pied__credit {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--creme) 26%, transparent);
  font-size: .8rem;
}
.pied__credit a {
  color: var(--creme);                     /* 15,37 */
  display: inline-block;
  padding-block: .3rem;                    /* cible ≥ 24 px */
  text-underline-offset: .2em;
}

html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2, .8, .2, 1);
}
html.js .reveal.est-vu { opacity: 1; transform: none; }
html.js .entree { transition-delay: calc(var(--i, 0) * 90ms); }
html.js .cahier .cadre { transition-delay: calc(var(--i, 0) * 80ms); }

html.js .planche .ton__barre {
  transform: scaleX(0);
  transition: transform .65s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 70ms);
}
html.js .planche.est-vu .ton__barre { transform: none; }
@media (min-width: 62rem) {
  html.js .planche .ton__barre { transform: scaleY(0); }
  html.js .planche.est-vu .ton__barre { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { transform: none; transition: opacity .4s ease; }
  html.js .reveal.est-vu { transform: none; }
  html.js .planche .ton__barre,
  html.js .planche.est-vu .ton__barre { transform: none; transition: none; }
  .bouton, .plaque, .cadre { transition: none; }
  #nav-links a:not(.bouton) { transition: none; }
}

.entete{background-color:rgba(23,17,20,0.76)}
.entete{margin-bottom:-65px}