/* =========================================================================
   Aston Hill — systeme de design
   Direction : Editorial Luxury sombre (skill soft-skill).
   Vert anglais, laiton, serif variable Fraunces, grotesque Plus Jakarta Sans.
   ========================================================================= */

:root {
  /* Fonds — noir profond a peine teinte de vert */
  --nuit:        #080A09;
  --nuit-2:      #0E1211;
  --nuit-3:      #141917;
  --voile:       rgba(255, 255, 255, 0.045);
  --filet:       rgba(255, 255, 255, 0.09);
  --filet-fort:  rgba(255, 255, 255, 0.16);

  /* Vert anglais */
  --vert:        #0B3B2C;
  --vert-vif:    #12694C;
  --vert-clair:  #3FA07C;

  /* Laiton — accent chaud, jamais dominant */
  --laiton:      #C9A961;
  --laiton-pale: #E3D2A8;

  /* Textes */
  --creme:       #F1EEE7;
  --creme-doux:  #CFCCC4;
  --gris:        #8B918C;
  --gris-sourd:  #5E645F;

  /* Rythme */
  --r-xs: .5rem;   --r-sm: .875rem;  --r-md: 1.25rem;
  --r-lg: 2rem;    --r-xl: 2.75rem;

  /* Mouvement — masse et ressort, jamais linear */
  --sortie: cubic-bezier(.32, .72, 0, 1);
  --entree: cubic-bezier(.16, 1, .3, 1);

  --largeur: 1240px;
  --gouttiere: clamp(1.25rem, 4vw, 3.5rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--nuit);
  color: var(--creme-doux);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grain de pellicule — fixe, non scrollant, jamais sur un conteneur qui defile */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 400;
  pointer-events: none;
  opacity: .03;
  background-image: repeating-linear-gradient(
      0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(
      90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

/* Halo vert diffus derriere le haut de page */
body::before {
  content: "";
  position: fixed;
  top: -30vh; left: 50%;
  width: min(120vw, 1500px); height: 90vh;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(18, 105, 76, .20), transparent 68%);
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--vert-vif); color: var(--creme); }

:focus-visible {
  outline: 2px solid var(--laiton);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ---------- Typographie ---------------------------------------------- */

h1, h2, h3, h4, .serif {
  font-family: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 40;
  color: var(--creme);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.022em;
  margin: 0;
  text-wrap: balance;
}

.t-geant  { font-size: clamp(2.9rem, 8.2vw, 6.4rem); }
.t-grand  { font-size: clamp(2.1rem, 5vw, 3.9rem); }
.t-moyen  { font-size: clamp(1.6rem, 3vw, 2.5rem); }
.t-petit  { font-size: clamp(1.2rem, 2vw, 1.55rem); line-height: 1.2; }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.plomb {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  color: var(--creme-doux);
  line-height: 1.72;
  max-width: 60ch;
}

/* Sourcil — micro-pastille au-dessus des titres */
.sourcil {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .32rem .82rem;
  border-radius: 999px;
  border: 1px solid var(--filet);
  background: var(--voile);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--laiton-pale);
  margin-bottom: 1.4rem;
}
.sourcil::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--laiton); flex: none;
}

/* ---------- Structure ------------------------------------------------- */

.enveloppe { position: relative; z-index: 1; }
.contenant { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }
.section { padding-block: clamp(5rem, 11vw, 9.5rem); position: relative; }
.section--serree { padding-block: clamp(3.5rem, 7vw, 6rem); }

/* ---------- Double lisere : coque exterieure + noyau ------------------- */

.coque {
  padding: 6px;
  border-radius: var(--r-xl);
  background: var(--voile);
  border: 1px solid var(--filet);
  transition: border-color .7s var(--sortie), background .7s var(--sortie);
}
.noyau {
  border-radius: calc(var(--r-xl) - 6px);
  background: linear-gradient(168deg, var(--nuit-3), var(--nuit-2) 60%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .07);
  overflow: hidden;
  height: 100%;
}
.coque:hover { border-color: var(--filet-fort); background: rgba(255, 255, 255, .075); }

/* ---------- Boutons --------------------------------------------------- */

.bouton {
  --fond: var(--creme);
  --encre: var(--nuit);
  display: inline-flex; align-items: center; gap: .85rem;
  padding: .78rem .78rem .78rem 1.6rem;
  border: 0; border-radius: 999px;
  background: var(--fond); color: var(--encre);
  font: inherit; font-size: .875rem; font-weight: 600;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: transform .55s var(--sortie), background .55s var(--sortie), color .55s var(--sortie);
  white-space: nowrap;
}
.bouton__rond {
  width: 2rem; height: 2rem; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, .085);
  transition: transform .55s var(--sortie), background .55s var(--sortie);
}
.bouton:hover .bouton__rond { transform: translate(3px, -1px) scale(1.06); background: rgba(0, 0, 0, .14); }
.bouton:active { transform: scale(.978); }

.bouton--vert { --fond: var(--vert-vif); --encre: var(--creme); }
.bouton--vert .bouton__rond { background: rgba(255, 255, 255, .14); }
.bouton--vert:hover .bouton__rond { background: rgba(255, 255, 255, .22); }

.bouton--fantome {
  --fond: transparent; --encre: var(--creme);
  border: 1px solid var(--filet);
}
.bouton--fantome .bouton__rond { background: rgba(255, 255, 255, .08); }
.bouton--fantome:hover { border-color: var(--filet-fort); background: var(--voile); }

/* ---------- En-tete : ilot flottant ----------------------------------- */

.entete {
  position: sticky; top: 0; z-index: 300;
  padding-top: 1.35rem; padding-bottom: .5rem;
  pointer-events: none;
}
.entete__ilot {
  pointer-events: auto;
  width: min(calc(100% - 2 * var(--gouttiere)), var(--largeur));
  margin-inline: auto;
  display: flex; align-items: center; gap: 1.25rem;
  padding: .55rem .55rem .55rem 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--filet);
  background: rgba(8, 10, 9, .68);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  transition: border-color .7s var(--sortie), background .7s var(--sortie);
}
.entete--pose .entete__ilot { border-color: var(--filet-fort); background: rgba(8, 10, 9, .9); }

.marque { display: flex; align-items: baseline; gap: .55rem; flex: none; }
.marque__nom {
  font-family: "Fraunces", serif;
  font-size: 1.22rem; font-weight: 600; color: var(--creme);
  letter-spacing: -.02em; white-space: nowrap;
}
.marque__mention {
  font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gris-sourd); white-space: nowrap;
}

.navigation { margin-left: auto; }
.navigation ul { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.navigation a {
  display: block;
  padding: .5rem .85rem;
  border-radius: 999px;
  font-size: .855rem; font-weight: 500;
  color: var(--creme-doux);
  white-space: nowrap;
  transition: color .45s var(--sortie), background .45s var(--sortie);
}
.navigation a:hover { color: var(--creme); background: var(--voile); }
.navigation .current-menu-item > a,
.navigation .current_page_item > a { color: var(--creme); background: var(--voile); }

.entete__actions { display: flex; align-items: center; gap: .5rem; flex: none; }

/* Hamburger — morphing en croix */
.brulot {
  display: none;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--filet); border-radius: 50%;
  background: var(--voile);
  cursor: pointer;
  position: relative;
}
.brulot span {
  position: absolute; left: 50%; top: 50%;
  width: 17px; height: 1.5px; background: var(--creme);
  border-radius: 2px;
  transition: transform .6s var(--sortie), opacity .35s var(--sortie);
}
.brulot span:nth-child(1) { transform: translate(-50%, calc(-50% - 4px)); }
.brulot span:nth-child(2) { transform: translate(-50%, calc(-50% + 4px)); }
.brulot[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.brulot[aria-expanded="true"] span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

/* Panneau plein ecran */
.panneau {
  position: fixed; inset: 0; z-index: 290;
  display: grid; align-content: center;
  padding: 6rem var(--gouttiere) 3rem;
  background: rgba(8, 10, 9, .93);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  opacity: 0; visibility: hidden;
  transition: opacity .6s var(--sortie), visibility .6s var(--sortie);
}
.panneau[data-ouvert="true"] { opacity: 1; visibility: visible; }
.panneau ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.panneau a {
  display: block;
  font-family: "Fraunces", serif;
  font-size: clamp(2rem, 9vw, 3.2rem);
  color: var(--creme);
  padding-block: .3rem;
  opacity: 0; transform: translateY(2.6rem);
  transition: opacity .7s var(--sortie), transform .7s var(--sortie), color .4s var(--sortie);
}
.panneau a:hover { color: var(--vert-clair); }
.panneau[data-ouvert="true"] a { opacity: 1; transform: translateY(0); }
.panneau li:nth-child(1) a { transition-delay: .08s; }
.panneau li:nth-child(2) a { transition-delay: .14s; }
.panneau li:nth-child(3) a { transition-delay: .20s; }
.panneau li:nth-child(4) a { transition-delay: .26s; }
.panneau li:nth-child(5) a { transition-delay: .32s; }
.panneau li:nth-child(6) a { transition-delay: .38s; }

/* ---------- Hero : partition editoriale ------------------------------- */

.hero { padding-top: clamp(4rem, 9vw, 7.5rem); padding-bottom: clamp(3.5rem, 7vw, 6rem); }
/* Le titre d'accueil vit dans une colonne d'environ 640 px : la taille geante
   du bareme general y casserait les lignes n'importe ou. */
.hero h1 { font-size: clamp(2.7rem, 5.4vw, 4.5rem); }
.hero__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}
.hero__mesure { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 2.4rem; }
.jeton {
  display: inline-flex; align-items: baseline; gap: .45rem;
  padding: .45rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--filet);
  background: var(--voile);
  font-size: .78rem; color: var(--creme-doux);
}
.jeton b { color: var(--creme); font-weight: 700; font-variant-numeric: tabular-nums; }

.hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2.6rem; }

/* Cartouche de chiffres, en vis-a-vis du titre */
.cartouche { display: grid; gap: 1px; background: var(--filet); border-radius: calc(var(--r-xl) - 6px); overflow: hidden; }
.cartouche__ligne {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.5rem;
  background: linear-gradient(168deg, var(--nuit-3), var(--nuit-2));
}
.cartouche__val {
  font-family: "Fraunces", serif; font-size: 1.75rem; color: var(--creme);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.cartouche__lib { font-size: .75rem; letter-spacing: .11em; text-transform: uppercase; color: var(--gris); text-align: right; }

/* ---------- Grille bento asymetrique ---------------------------------- */

.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.bento > * { grid-column: span 4; }
.bento > .b-large { grid-column: span 8; }
.bento > .b-plein { grid-column: span 12; }
.bento > .b-demi  { grid-column: span 6; }

/* ---------- Carte de collection --------------------------------------- */

.collection { display: block; height: 100%; }
.collection .noyau { padding: clamp(1.6rem, 2.6vw, 2.3rem); display: flex; flex-direction: column; gap: .9rem; min-height: 15rem; }
.collection__num {
  font-family: "Fraunces", serif; font-size: .82rem; color: var(--laiton);
  letter-spacing: .16em;
}
.collection__titre { font-family: "Fraunces", serif; font-size: clamp(1.4rem, 2.2vw, 1.95rem); color: var(--creme); line-height: 1.1; }
.collection__texte { font-size: .93rem; color: var(--gris); margin: 0; }
.collection__pied { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--filet); }
.collection__compte { font-size: .8rem; color: var(--creme-doux); font-variant-numeric: tabular-nums; }
.collection__fleche {
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--voile); border: 1px solid var(--filet);
  color: var(--creme);
  transition: transform .55s var(--sortie), background .55s var(--sortie);
}
.collection:hover .collection__fleche { transform: translate(3px, -3px); background: var(--vert-vif); }

/* ---------- Fiche du Codex : carte « annonce » ------------------------ */

.fiches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1rem; }

.fiche { display: block; height: 100%; }
.fiche .noyau { display: flex; flex-direction: column; height: 100%; }
.fiche__visuel {
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(120% 90% at 25% 15%, rgba(18, 105, 76, .35), transparent 60%),
    linear-gradient(150deg, var(--nuit-3), #0A0D0C);
  position: relative;
  display: grid; place-items: center;
  border-bottom: 1px solid var(--filet);
  overflow: hidden;
}
.fiche__visuel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--sortie); }
.fiche:hover .fiche__visuel img { transform: scale(1.045); }
.fiche__silhouette { width: 74%; opacity: .5; transition: opacity .7s var(--sortie), transform .9s var(--sortie); }
.fiche:hover .fiche__silhouette { opacity: .8; transform: translateX(4px); }
.fiche__annee {
  position: absolute; top: .85rem; left: .85rem;
  padding: .3rem .7rem; border-radius: 999px;
  background: rgba(8, 10, 9, .74);
  border: 1px solid var(--filet);
  backdrop-filter: blur(8px);
  font-size: .7rem; letter-spacing: .08em; color: var(--laiton-pale);
  font-variant-numeric: tabular-nums;
}
.fiche__corps { padding: 1.25rem 1.35rem 1.35rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.fiche__ere { font-size: .66rem; letter-spacing: .19em; text-transform: uppercase; color: var(--gris-sourd); }
.fiche__nom { font-family: "Fraunces", serif; font-size: 1.32rem; color: var(--creme); line-height: 1.12; }
.fiche__meta { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .2rem; }
.etiquette {
  padding: .22rem .58rem; border-radius: 999px;
  border: 1px solid var(--filet); background: var(--voile);
  font-size: .68rem; color: var(--creme-doux); white-space: nowrap;
}
.etiquette--vert { border-color: rgba(63, 160, 124, .34); background: rgba(18, 105, 76, .2); color: var(--vert-clair); }
.etiquette--laiton { border-color: rgba(201, 169, 97, .34); background: rgba(201, 169, 97, .12); color: var(--laiton-pale); }
.fiche__specs {
  margin-top: auto; padding-top: .9rem; border-top: 1px solid var(--filet);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
}
.fiche__spec { display: grid; gap: .1rem; }
.fiche__spec dt { font-size: .6rem; letter-spacing: .13em; text-transform: uppercase; color: var(--gris-sourd); }
.fiche__spec dd { margin: 0; font-size: .88rem; color: var(--creme); font-variant-numeric: tabular-nums; }

/* ---------- Recherche a facettes -------------------------------------- */

.codex { display: grid; grid-template-columns: 17.5rem minmax(0, 1fr); gap: clamp(1.25rem, 2.5vw, 2.25rem); align-items: start; }

.facettes { position: sticky; top: 6.5rem; }
.facettes .noyau { padding: 1.35rem; }
.facette + .facette { margin-top: 1.35rem; padding-top: 1.35rem; border-top: 1px solid var(--filet); }
.facette__titre {
  font-size: .66rem; letter-spacing: .19em; text-transform: uppercase;
  color: var(--laiton-pale); margin-bottom: .8rem;
}
.facette__liste { display: grid; gap: .1rem; }
.facette__option {
  display: flex; align-items: center; gap: .6rem;
  padding: .38rem .5rem;
  border-radius: var(--r-xs);
  font-size: .855rem; color: var(--creme-doux);
  cursor: pointer;
  position: relative;
  transition: background .4s var(--sortie), color .4s var(--sortie);
}
.facette__option:hover { background: var(--voile); color: var(--creme); }
.facette__option input { position: absolute; opacity: 0; pointer-events: none; }
.facette__case {
  width: 1rem; height: 1rem; flex: none;
  border: 1px solid var(--filet-fort); border-radius: 5px;
  background: rgba(0, 0, 0, .35);
  display: grid; place-items: center;
  transition: background .4s var(--sortie), border-color .4s var(--sortie);
}
.facette__case::after {
  content: ""; width: .42rem; height: .42rem; border-radius: 1.5px;
  background: var(--nuit); transform: scale(0);
  transition: transform .4s var(--sortie);
}
.facette__option input:checked ~ .facette__case { background: var(--laiton); border-color: var(--laiton); }
.facette__option input:checked ~ .facette__case::after { transform: scale(1); }
.facette__option input:focus-visible ~ .facette__case { outline: 2px solid var(--laiton); outline-offset: 2px; }
.facette__compte { margin-left: auto; font-size: .72rem; color: var(--gris-sourd); font-variant-numeric: tabular-nums; }

.recherche { position: relative; margin-bottom: 1rem; }
.recherche input {
  width: 100%;
  padding: .95rem 1.15rem .95rem 2.9rem;
  border-radius: 999px;
  border: 1px solid var(--filet);
  background: var(--nuit-2);
  color: var(--creme);
  font: inherit; font-size: .92rem;
  transition: border-color .5s var(--sortie), background .5s var(--sortie);
}
.recherche input::placeholder { color: var(--gris-sourd); }
.recherche input:hover { border-color: var(--filet-fort); }
.recherche input:focus { outline: none; border-color: var(--vert-clair); background: var(--nuit-3); }
.recherche svg { position: absolute; left: 1.05rem; top: 50%; transform: translateY(-50%); color: var(--gris); }

.barre-resultats {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  margin-bottom: 1.15rem;
}
.barre-resultats__compte { font-size: .875rem; color: var(--gris); }
.barre-resultats__compte b { color: var(--creme); font-variant-numeric: tabular-nums; }
.barre-resultats__actions { margin-left: auto; display: flex; gap: .5rem; }

.vide { padding: 4rem 1.5rem; text-align: center; color: var(--gris); }
.vide h3 { margin-bottom: .6rem; }

.facettes__bascule { display: none; }

/* ---------- Fiche unique ---------------------------------------------- */

.fiche-tete { padding-top: clamp(3rem, 6vw, 5rem); }
.fiche-tete__grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }

/* Corps de la fiche : recit large, colonne laterale etroite.
   Pose en classe et non en style en ligne, sinon la media-query ne peut plus
   reprendre la main sur petit ecran (defaut mesure le 22.08.2026 : la colonne
   debordait de 53 px a 390 px de large). */
.duo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.duo__cote { display: grid; gap: 1rem; min-width: 0; }
.duo > * { min-width: 0; }
.fil { display: flex; flex-wrap: wrap; gap: .45rem; font-size: .76rem; color: var(--gris-sourd); margin-bottom: 1.2rem; }
.fil a { transition: color .4s var(--sortie); }
.fil a:hover { color: var(--creme); }

.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 1px; background: var(--filet); border-radius: calc(var(--r-xl) - 6px); overflow: hidden; }
.specs__item { padding: 1.05rem 1.15rem; background: linear-gradient(168deg, var(--nuit-3), var(--nuit-2)); }
.specs__lib { font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: var(--gris-sourd); margin-bottom: .35rem; }
.specs__val { font-family: "Fraunces", serif; font-size: 1.25rem; color: var(--creme); font-variant-numeric: tabular-nums; line-height: 1.15; }
.specs__val small { font-family: "Plus Jakarta Sans", sans-serif; font-size: .7rem; color: var(--gris); letter-spacing: .04em; }

.recit { max-width: 68ch; font-size: 1.055rem; line-height: 1.78; color: var(--creme-doux); }
.recit p + p { margin-top: 1.15em; }
.recit p:first-of-type::first-letter {
  font-family: "Fraunces", serif;
  float: left;
  font-size: 3.6em; line-height: .82;
  padding-right: .1em; margin-top: .06em;
  color: var(--laiton);
}

.sources { display: grid; gap: .55rem; list-style: none; margin: 0; padding: 0; counter-reset: src; }
.sources li {
  display: flex; gap: .8rem;
  font-size: .84rem; color: var(--gris); line-height: 1.55;
  padding-bottom: .55rem; border-bottom: 1px solid var(--filet);
  counter-increment: src;
}
.sources li::before {
  content: counter(src, decimal-leading-zero);
  color: var(--laiton); font-variant-numeric: tabular-nums; flex: none;
  font-size: .74rem; padding-top: .15rem;
}
.sources a { color: var(--creme-doux); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gris-sourd); word-break: break-word; }
.sources a:hover { color: var(--vert-clair); text-decoration-color: var(--vert-clair); }

/* Passerelle discrete vers le stock officiel */
.passerelle .noyau { padding: 1.5rem 1.65rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.15rem; }
.passerelle__texte { flex: 1 1 16rem; }
.passerelle__titre { font-family: "Fraunces", serif; font-size: 1.2rem; color: var(--creme); margin-bottom: .25rem; }
.passerelle__note { font-size: .84rem; color: var(--gris); margin: 0; }

/* ---------- Frise chronologique --------------------------------------- */

.frise { display: grid; gap: 1px; background: var(--filet); border-radius: calc(var(--r-xl) - 6px); overflow: hidden; }
.frise__ere {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto;
  gap: 1.25rem; align-items: center;
  padding: 1.35rem 1.6rem;
  background: linear-gradient(168deg, var(--nuit-3), var(--nuit-2));
  transition: background .6s var(--sortie);
}
.frise__ere:hover { background: linear-gradient(168deg, #182220, var(--nuit-3)); }
.frise__periode { font-family: "Fraunces", serif; font-size: 1.05rem; color: var(--laiton); font-variant-numeric: tabular-nums; }
/* Nom et resume sont des <span> : sans display block ils restent sur la meme
   ligne et le resume se colle au nom de l'ere. */
.frise__nom { display: block; font-family: "Fraunces", serif; font-size: 1.28rem; color: var(--creme); }
.frise__desc { display: block; font-size: .855rem; color: var(--gris); margin: .25rem 0 0; }
.frise__compte { font-size: .8rem; color: var(--creme-doux); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Journal ---------------------------------------------------- */

.parution .noyau { padding: 1.6rem 1.75rem; display: flex; flex-direction: column; gap: .7rem; height: 100%; }
.parution__date { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gris-sourd); }
.parution__titre { font-family: "Fraunces", serif; font-size: 1.5rem; color: var(--creme); line-height: 1.15; }
.parution__extrait { font-size: .93rem; color: var(--gris); margin: 0; }

.article { max-width: 70ch; margin-inline: auto; }
.article h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 2.4em 0 .7em; }
.article h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin: 2em 0 .6em; }
.article ul, .article ol { padding-left: 1.3rem; color: var(--creme-doux); }
.article li { margin-bottom: .5em; }
.article blockquote { margin: 2rem 0; border-left: 2px solid var(--vert-clair); padding-left: 1.4rem; font-family: "Fraunces", serif; font-size: 1.25rem; color: var(--creme); }
.article a { color: var(--vert-clair); text-decoration: underline; text-underline-offset: 3px; }

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

.pied { border-top: 1px solid var(--filet); margin-top: clamp(4rem, 8vw, 7rem); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.pied__grille { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 2rem; }
.pied__titre { font-size: .66rem; letter-spacing: .19em; text-transform: uppercase; color: var(--laiton-pale); margin-bottom: .9rem; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.pied a { font-size: .875rem; color: var(--gris); transition: color .4s var(--sortie); }
.pied a:hover { color: var(--creme); }
.pied__bas {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--filet);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .78rem; color: var(--gris-sourd);
}
.pied__avis { max-width: 46ch; line-height: 1.6; }

/* ---------- Apparitions au defilement ---------------------------------- */

/* L'etat masque n'existe QUE si le JavaScript a pu poser la classe « js » sur
   <html>. Sans lui, tout le corps de page resterait a opacity 0 : un blocage de
   script, une extension ou un IntersectionObserver qui ne se declenche pas
   videraient la page. Le contenu passe avant l'animation. */
.js [data-surgir] {
  opacity: 0;
  transform: translateY(2.6rem);
  filter: blur(6px);
  transition: opacity .9s var(--entree), transform .9s var(--entree), filter .9s var(--entree);
  will-change: transform, opacity;
}
.js [data-surgir].est-visible { opacity: 1; transform: none; filter: none; will-change: auto; }
.js [data-surgir][data-delai="1"] { transition-delay: .09s; }
.js [data-surgir][data-delai="2"] { transition-delay: .18s; }
.js [data-surgir][data-delai="3"] { transition-delay: .27s; }
.js [data-surgir][data-delai="4"] { transition-delay: .36s; }

/* ---------- Adaptation ------------------------------------------------- */

@media (max-width: 1080px) {
  .codex { grid-template-columns: 1fr; }
  .facettes { position: static; }
  .facettes__bascule { display: inline-flex; }
  .facettes[data-repli="true"] .facettes__contenu { display: none; }
  .hero__grille { grid-template-columns: 1fr; align-items: start; }
  .fiche-tete__grille { grid-template-columns: 1fr; }
  .duo { grid-template-columns: 1fr; }
  .pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .navigation { display: none; }
  .brulot { display: block; }
  .entete__ilot { padding-left: 1.15rem; }
  .marque__mention { display: none; }
  .bento > *, .bento > .b-large, .bento > .b-demi { grid-column: span 12; }
  .frise__ere { grid-template-columns: 1fr; gap: .5rem; }
  .frise__compte { justify-self: start; }
  .section { padding-block: clamp(3.5rem, 9vw, 5rem); }
  .recit p:first-of-type::first-letter { font-size: 3em; }
}

/* En dessous de 640 px, le bouton d'en-tete ne tient plus a cote de la marque
   et du brulot : il deborde de 13 px. Le brulot suffit, le menu porte le lien.
   (Regle 14 : une entree de trop replie tout l'en-tete, sur toutes les pages.) */
@media (max-width: 640px) {
  .entete__actions .bouton { display: none; }
}

@media (max-width: 560px) {
  .pied__grille { grid-template-columns: 1fr; }
  .coque { padding: 5px; border-radius: var(--r-lg); }
  .noyau { border-radius: calc(var(--r-lg) - 5px); }
  .fiche__specs { grid-template-columns: repeat(2, 1fr); }
  .hero__actions .bouton { width: 100%; justify-content: space-between; }
}

/* Cibles tactiles : 44 px minimum des que le pointeur est grossier. */
@media (pointer: coarse) {
  .facette__option { min-height: 44px; }
  .navigation a, .pied a { min-height: 44px; display: flex; align-items: center; }
  .sources a { padding-block: .25rem; }
}

/* Barre d'admin WordPress */
.admin-bar .entete { top: 32px; }
@media (max-width: 782px) { .admin-bar .entete { top: 46px; } }

/* Accessibilite */
/* Masque sans sortir du flux horizontal : un left:-9999px fausse tout audit
   de debordement et peut creer une barre de defilement sur certains moteurs. */
.saut-contenu {
  position: absolute; left: 0; top: 0; z-index: 500;
  transform: translateY(-120%);
  padding: .8rem 1.2rem; background: var(--creme); color: var(--nuit);
  border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
  transition: transform .4s var(--sortie);
}
.saut-contenu:focus { transform: translateY(0); }
.ecran-lecteur {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Pagination */
.pagination { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-top: 2.5rem; }
.pagination .page-numbers {
  display: grid; place-items: center;
  min-width: 2.5rem; height: 2.5rem; padding-inline: .7rem;
  border-radius: 999px; border: 1px solid var(--filet);
  background: var(--voile); color: var(--creme-doux);
  font-size: .855rem; font-variant-numeric: tabular-nums;
  transition: background .45s var(--sortie), color .45s var(--sortie), border-color .45s var(--sortie);
}
.pagination .page-numbers:hover { border-color: var(--filet-fort); color: var(--creme); }
.pagination .page-numbers.current { background: var(--creme); color: var(--nuit); border-color: var(--creme); }

/* Credit photo — discret, sous l'illustration d'une fiche. */
.credit-image {
  margin: .7rem .3rem 0;
  font-size: .72rem;
  line-height: 1.5;
  color: var(--gris-sourd);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.credit-image__source { color: var(--gris); white-space: nowrap; }

/* Valeur de caracteristique en texte long (architecture moteur) : au bareme
   des chiffres, elle etirerait toute la rangee. */
.specs__item--long { grid-column: span 2; }
.specs__item--long .specs__val {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--creme-doux);
}
@media (max-width: 700px) { .specs__item--long { grid-column: span 1; } }

/* =========================================================================
   Estimation & offre d'achat — reperes, etapes et formulaire CF7
   Regle : jamais une couleur de texte sans le fond du meme element, et
   chaque etat visite (repos, survol, focus, erreur, envoi).
   ========================================================================= */

.reperes {
  display: grid;
  gap: .9rem;
  margin-top: 2.4rem;
}
.repere {
  border-left: 2px solid var(--vert-vif);
  padding: .15rem 0 .15rem 1.1rem;
}
.repere__titre {
  margin: 0;
  font-family: var(--serif, Fraunces, serif);
  font-size: 1.05rem;
  color: var(--creme);
}
.repere__texte {
  margin: .25rem 0 0;
  font-size: .9rem;
  line-height: 1.6;
  color: var(--creme-doux);
}

.etapes {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: .55rem;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--creme-doux);
}
.etapes li::marker { color: var(--laiton); font-weight: 600; }

/* ---- Formulaire ---- */

.formulaire { padding: 2.2rem clamp(1.4rem, 4vw, 3rem) 2.6rem; }

.formulaire .champ-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.4rem;
}
@media (max-width: 640px) { .formulaire .champ-duo { grid-template-columns: 1fr; } }

.formulaire p { margin: 0 0 1.15rem; }
.formulaire label {
  display: block;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--laiton-pale);
}

.formulaire input[type="text"],
.formulaire input[type="email"],
.formulaire input[type="tel"],
.formulaire select,
.formulaire textarea {
  width: 100%;
  margin-top: .45rem;
  padding: .78rem .95rem;
  font: inherit;
  font-size: .95rem;
  color: var(--creme);
  background: var(--nuit);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--r-sm);
  transition: border-color .35s cubic-bezier(.32,.72,0,1), background-color .35s cubic-bezier(.32,.72,0,1);
}
.formulaire input::placeholder,
.formulaire textarea::placeholder { color: var(--gris-sourd); opacity: 1; }
.formulaire input:hover,
.formulaire select:hover,
.formulaire textarea:hover { border-color: rgba(255, 255, 255, .24); }
.formulaire input:focus-visible,
.formulaire select:focus-visible,
.formulaire textarea:focus-visible {
  outline: none;
  border-color: var(--vert-clair);
  background: var(--nuit-2);
}
/* La liste ouverte est rendue par le systeme : on impose la paire complete. */
.formulaire select { appearance: none; cursor: pointer; }
.formulaire select option { background: var(--nuit-2); color: var(--creme); }
.formulaire textarea { resize: vertical; min-height: 7.5rem; }

.formulaire .formulaire__envoi { margin: .4rem 0 0; }
.formulaire input[type="submit"] {
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: var(--creme);
  background: var(--vert-vif);
  border: 0;
  border-radius: 999px;
  padding: .85rem 2.1rem;
  min-height: 44px;
  cursor: pointer;
  transition: background-color .35s cubic-bezier(.32,.72,0,1), transform .35s cubic-bezier(.32,.72,0,1);
}
.formulaire input[type="submit"]:hover { background: var(--vert-clair); }
.formulaire input[type="submit"]:active { transform: scale(.98); }
.formulaire .wpcf7-spinner { margin-left: .8rem; }

/* Etats de validation CF7 : fond et texte poses ensemble. */
.formulaire .wpcf7-not-valid { border-color: #B4574E; }
.formulaire .wpcf7-not-valid-tip {
  display: block;
  margin-top: .35rem;
  font-size: .8rem;
  text-transform: none;
  letter-spacing: 0;
  color: #E2A69F;
}
.formulaire .wpcf7-response-output {
  margin: 1.4rem 0 0;
  padding: .9rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, .13) !important;
  border-radius: var(--r-sm);
  font-size: .9rem;
  color: var(--creme);
  background: var(--nuit);
}
.formulaire .wpcf7 form.sent .wpcf7-response-output {
  border-color: var(--vert-clair) !important;
  color: var(--creme);
  background: rgba(18, 105, 76, .25);
}
.formulaire .wpcf7 form.invalid .wpcf7-response-output,
.formulaire .wpcf7 form.failed .wpcf7-response-output {
  border-color: #B4574E !important;
  color: #E2A69F;
  background: rgba(180, 87, 78, .12);
}