/* ==========================================================================
   horloge-murale.fr
   Feuille de style unique, issue du canvas Claude Design "Horloge Murale".
   Organisation :
     1. Tokens          2. Base           3. Layout
     4. Typographie     5. En-tête        6. Réservations photo
     7. Composants      8. Pied de page   9. Responsive
   ========================================================================== */

/* 1. TOKENS ================================================================ */

:root {
  /* Couleurs */
  --ink:        #14110F;  /* encre profonde, fonds sombres et texte */
  --ink-deep:   #0E0C0B;  /* pied de page */
  --ink-panel:  #1F1A17;  /* réservations sur fond sombre */
  --cream:      #F4F0E8;  /* crème papier, fond principal */
  --cream-alt:  #E6E1D6;  /* réservations sur fond clair */
  --brass:      #B8874A;  /* laiton, accents et surtitres */
  --grey:       #8A837B;  /* gris de texte secondaire */
  --grey-dark:  #5A544C;  /* gris de texte sur crème */
  --white:      #FFFFFF;
  --canvas:     #DCD7CC;  /* fond hors page, utilisé par le kit UI */

  /* Traits */
  --rule-dark:  rgba(244, 240, 232, .18);
  --rule-light: rgba(20, 17, 15, .12);

  /* Texte sur fond sombre */
  --on-dark:      rgba(244, 240, 232, .80);
  --on-dark-soft: rgba(244, 240, 232, .62);

  /* Typographie */
  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --body:    'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Grille : 12 colonnes, gouttière 32, marge extérieure 64 */
  --gutter: 32px;
  --pad:    64px;
  --maxw:   1440px;
  --measure: 680px; /* colonne de lecture d'article */

  /* Rythme vertical */
  --s1: 8px;   --s2: 14px;  --s3: 22px;  --s4: 32px;
  --s5: 48px;  --s6: 72px;  --s7: 88px;
}

/* 2. BASE ================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brass); text-decoration: none; transition: color .18s ease, border-color .18s ease; }
a:hover { color: var(--ink); }

/* Focus visible partout, y compris sur fond sombre. */
:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--brass); color: var(--ink);
  padding: 12px 20px; z-index: 100;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
}
.skip:focus { left: 16px; top: 16px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 3. LAYOUT ================================================================ */

/* L'artboard du canvas faisait 1440 px fixes. Sur un vrai site, les fonds
   filent pleine largeur et seul le contenu est contraint, sinon les blocs
   sombres se retrouvent cernés de marges crème. */
.page { background: var(--cream); }

/* .wrap reste pleine largeur, pour que les fonds sombres filent bord à bord.
   Le padding absorbe le débord au delà de 1440 px, ce qui recentre le contenu
   sans jamais l'élargir. Résultat, une colonne de contenu identique à
   l'artboard, sur un fond qui couvre tout l'écran. */
.wrap {
  padding-inline: max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
}

/* Blocs pleine largeur, plafonnés pour ne pas s'étirer sur écran très large. */
.bleed { max-width: 1920px; margin-inline: auto; }

.band        { padding-top: var(--s7); padding-bottom: var(--s7); }
.band--tight { padding-top: var(--s6); padding-bottom: var(--s6); }
.band--rule  { border-bottom: 1px solid var(--rule-light); }

.dark { background: var(--ink); color: var(--cream); }
.dark a { color: var(--brass); }
.dark a:hover { color: var(--cream); }

.grid { display: grid; gap: var(--s5) var(--gutter); }

/* Un item de grille a par défaut une largeur minimale égale à son contenu.
   Sans ce min-width, un titre long ou une légende de réservation force la
   piste 1fr à s'élargir et fait déborder la page sur mobile. */
.grid > *, .hero > *, .style-split > *, .styles-row > *, .shop__grid > *,
.timeline > *, .cred > *, .site-footer__cols > *, .author > *,
.swatches > *, .kit-2col > * { min-width: 0; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-5 { grid-template-columns: repeat(5, 1fr); }
.g-6 { grid-template-columns: repeat(6, 1fr); }
.span-2 { grid-column: span 2; }

/* En-tête de section : titre à gauche, mention à droite. */
.band-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5);
}

/* 4. TYPOGRAPHIE =========================================================== */

h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; margin: 0; letter-spacing: -.01em; }

/* Les tailles suivent l'échelle du kit UI, en fluide jusqu'à la valeur desktop. */
.t-display { font-size: clamp(2.6rem, 6.1vw, 5.5rem); line-height: .96; letter-spacing: -.02em; text-wrap: pretty; }
.t-hero    { font-size: clamp(2.4rem, 5vw, 4.5rem);   line-height: .98; letter-spacing: -.02em; text-wrap: pretty; }
.t-section { font-size: clamp(1.9rem, 3.2vw, 2.75rem); line-height: 1.08; }
.t-lead    { font-size: clamp(1.6rem, 2.6vw, 2.5rem);  line-height: 1.05; text-wrap: pretty; }
.t-card    { font-size: clamp(1.35rem, 1.8vw, 1.75rem); line-height: 1.12; font-weight: 400; text-wrap: pretty; }
.t-card-sm { font-size: 1.5rem; line-height: 1.15; font-weight: 400; text-wrap: pretty; }

.chapo {
  font-family: var(--body); font-size: clamp(1rem, 1.3vw, 1.25rem);
  line-height: 1.6; color: var(--grey-dark); text-wrap: pretty;
}
.dark .chapo { color: var(--on-dark-soft); }

/* Surtitre : étiquette de rubrique en laiton. */
.eyebrow {
  font-family: var(--body); font-size: 11px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--brass);
}

/* Méta : durée de lecture, date. */
.meta {
  font-family: var(--mono); font-size: 11px;
  color: var(--grey); letter-spacing: .02em;
}
.dark .meta { color: var(--grey); }

/* Numéro d'article, effet magazine. */
.num {
  font-family: var(--display); font-size: 12px;
  letter-spacing: .18em; color: var(--brass);
}

.legal { font-size: 12px; color: var(--grey); }

/* 5. EN-TÊTE =============================================================== */

.site-header {
  background: var(--ink); color: var(--cream);
  border-bottom: 1px solid rgba(244, 240, 232, .14);
  position: relative;
}
.site-header__inner {
  min-height: 92px; display: flex; align-items: center;
  justify-content: space-between; gap: var(--s4);
}

.logo {
  font-family: var(--display); font-weight: 600; font-size: 16px;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--cream); white-space: nowrap;
}
.logo:hover { color: var(--cream); }
.logo span { color: var(--brass); }

.nav { display: flex; align-items: center; gap: 34px; }
.nav a {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 500; color: var(--on-dark);
}
.nav a:hover { color: var(--brass); }
.nav a[aria-current="page"] {
  color: var(--brass);
  border-bottom: 1px solid var(--brass);
  padding-bottom: 3px;
}

/* Champ de recherche du header. */
.search {
  display: flex; align-items: center; gap: 12px; width: 190px;
  border-bottom: 1px solid rgba(244, 240, 232, .3); padding-bottom: 6px;
}
.search input {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  color: var(--cream); font-family: var(--mono); font-size: 12px; padding: 0;
}
.search input::placeholder { color: var(--grey); }
.search button {
  background: none; border: none; padding: 0; cursor: pointer;
  width: 11px; height: 11px; border: 1.5px solid var(--brass); border-radius: 50%;
}

/* Bouton hamburger, masqué au dessus de 1080 px. */
.nav-toggle {
  display: none; background: none; border: 1px solid var(--rule-dark);
  color: var(--cream); cursor: pointer; padding: 10px 14px;
  font-family: var(--body); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
}
.nav-toggle:hover { border-color: var(--brass); color: var(--brass); }

/* 6. RÉSERVATIONS PHOTO ==================================================== */
/* Les visuels définitifs remplaceront ces blocs. Les proportions sont déjà
   celles du design, la mise en page ne bougera pas à la substitution.       */

.ph {
  position: relative;
  background: var(--cream-alt);
  background-image: repeating-linear-gradient(135deg, rgba(20,17,15,.05) 0 8px, transparent 8px 16px);
  display: grid; place-items: center; padding: 20px; overflow: hidden;
}
.ph > span {
  font-family: var(--mono); font-size: 11px; line-height: 1.7;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--grey); text-align: center; max-width: 74%;
}
.ph--dark {
  background: var(--ink-panel);
  background-image: repeating-linear-gradient(135deg, rgba(244,240,232,.05) 0 8px, transparent 8px 16px);
}
.ph--sm > span { font-size: 9px; }

/* Photo réelle. Même boîte, même format que la réservation, mais sans
   hachures ni marge intérieure. L'image remplit la boîte et se recadre :
   les visuels du catalogue n'ont pas tous les mêmes proportions, et c'est
   la boîte qui impose le format, jamais le fichier. */
.ph--image { padding: 0; background-image: none; }

/* L'image est positionnee en absolu, pas dimensionnee en pourcentage.
   Un `height: 100%` ne se resout pas contre une hauteur derivee
   d'`aspect-ratio` : il retombe sur `auto`, l'image reprend ses proportions
   naturelles et deborde, la boite la rogne. `inset: 0` la fait remplir la
   boite quelle que soit la facon dont cette hauteur a ete obtenue. */
.ph--image > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}

/* Packshot produit : rien n'est coupe. Les visuels du catalogue vont du carre
   au tres vertical, un recadrage reduirait une pendule a son cadran. Le fond
   clair prolonge celui des photos detourees plutot que de les encadrer. */
.ph--contenir { background: var(--white); }
.ph--contenir > img { object-fit: contain; }

/* Ratios utilisés par le design. */
.r-1-1  { aspect-ratio: 1 / 1; }
.r-4-3  { aspect-ratio: 4 / 3; }
.r-16-9 { aspect-ratio: 16 / 9; }
.r-hero { aspect-ratio: 720 / 620; }
.r-wide { aspect-ratio: 1440 / 640; max-width: 1920px; margin-inline: auto; }

/* 7. COMPOSANTS ============================================================ */

/* --- Hero d'accueil, deux colonnes ---------------------------------------- */
.hero { display: grid; grid-template-columns: 1fr 1fr; max-width: 1920px; margin-inline: auto; }
.hero__media { min-height: 620px; }
/* Le hero file pleine largeur, mais son texte doit rester aligné sur la
   colonne de contenu du site. Sans cela, au delà de 1440 px, le titre part
   56 px trop à gauche par rapport au logo et aux sections suivantes. */
.hero__body {
  background: var(--ink); color: var(--cream);
  padding-block: 86px;
  padding-inline: 88px clamp(88px, calc((100vw - var(--maxw)) / 2 + var(--pad)), calc((1920px - var(--maxw)) / 2 + var(--pad)));
  display: flex; flex-direction: column; justify-content: center;
}
.hero__kicker { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; }
.hero__kicker .rule { height: 1px; width: 40px; background: rgba(244,240,232,.3); }
.hero__body .chapo { margin-top: 28px; max-width: 440px; }

/* --- Lien souligné, appel à l'action sobre -------------------------------- */
.link-ul {
  align-self: flex-start; display: inline-block;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600;
  color: var(--brass); border-bottom: 1px solid var(--brass); padding-bottom: 8px;
}
.link-ul:hover { color: var(--cream); border-bottom-color: var(--cream); }
.band:not(.dark) .link-ul:hover { color: var(--ink); border-bottom-color: var(--ink); }
.hero__body .link-ul { margin-top: 38px; }

.link-quiet {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey);
}
.link-quiet:hover { color: var(--ink); }
.dark .link-quiet:hover { color: var(--cream); }

/* --- Boutons -------------------------------------------------------------- */
.btn {
  display: inline-block; border: none; cursor: pointer;
  font-family: var(--body); font-size: 11px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 15px 28px; transition: background .18s ease, color .18s ease;
}
.btn--primary { background: var(--brass); color: var(--ink); }
.btn--primary:hover { background: var(--cream); color: var(--ink); }
.dark .btn--primary:hover { background: var(--cream); }

.btn--secondary {
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink); padding: 14px 27px;
}
.btn--secondary:hover { background: var(--ink); color: var(--cream); }

/* --- Vignette de pièce ---------------------------------------------------- */
.room { display: flex; flex-direction: column; gap: 12px; }
.room .ph { height: 132px; padding: 10px; }
.room__name { font-family: var(--display); font-size: 19px; color: var(--ink); }
a.room:hover .room__name { color: var(--brass); }

/* --- Carte article -------------------------------------------------------- */
.card { display: flex; flex-direction: column; }
.card__kicker { display: flex; gap: 14px; align-items: baseline; margin-top: 22px; }
.card__title { margin-top: 12px; color: var(--ink); }
.card__chapo { font-size: 16px; line-height: 1.7; color: var(--grey-dark); margin-top: 14px; max-width: 560px; }
.card .meta { margin-top: 16px; }
a.card:hover .card__title { color: var(--brass); }

.card--lg .ph { height: 380px; }
.card--md .ph { height: 380px; }
.card--sm .ph { height: 230px; padding: 16px; }
.card--sm .card__kicker { margin-top: 18px; }
.card--sm .card__title { margin-top: 10px; }
.card--sm .meta { margin-top: 12px; }

/* Variante sans photo, pour listes latérales. */
.card--bare {
  border-top: 1px solid var(--rule-light);
  padding-top: 18px; margin-top: 0;
}
.card--bare .card__kicker { margin-top: 0; }

/* --- Bloc style, accueil -------------------------------------------------- */
.styles-row { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule-dark); }
.style-cell { padding: 36px 28px 40px; border-right: 1px solid var(--rule-dark); }
.style-cell:first-child { padding-left: 0; }
.style-cell:last-child  { padding-right: 0; border-right: none; }
.style-cell__num { font-family: var(--display); font-size: 13px; letter-spacing: .18em; color: var(--brass); margin-bottom: 20px; }
.style-cell__name { font-family: var(--display); font-size: clamp(1.5rem, 2.4vw, 2.125rem); line-height: 1.05; }
.style-cell__txt { font-size: 15px; line-height: 1.65; color: var(--on-dark-soft); margin-top: 14px; }
.style-cell a { display: inline-block; margin-top: 22px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }

/* --- Objet d'inspiration -------------------------------------------------- */
.object__name { font-family: var(--display); font-size: 17px; line-height: 1.25; margin-top: 14px; color: var(--ink); }
.object__note { font-size: 13px; color: var(--grey); margin-top: 6px; }

/* --- Newsletter ----------------------------------------------------------- */
.newsletter {
  display: flex; align-items: center; justify-content: space-between;
  gap: 80px; flex-wrap: wrap;
}
.newsletter__copy { max-width: 560px; }
.newsletter__form { flex: 1; min-width: 300px; max-width: 520px; }
.field {
  display: flex; align-items: center;
  border-bottom: 1px solid rgba(244, 240, 232, .4);
}
.field input {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  color: var(--cream); font-family: var(--body); font-size: 16px; padding: 16px 0;
}
.field input::placeholder { color: var(--grey); }
.field--light { border-bottom-color: rgba(20, 17, 15, .35); }
.field--light input { color: var(--ink); }
.newsletter__note { font-size: 12px; color: var(--grey); margin-top: 14px; }

/* --- En-tête de rubrique -------------------------------------------------- */
.rubric-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; }
.rubric-head__intro { max-width: 720px; }
.rubric-head .chapo { margin-top: 18px; }

/* --- Filtres -------------------------------------------------------------- */
.filters {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-block: 24px; border-bottom: 1px solid var(--rule-light);
}
.filters__label { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--grey); margin-right: 10px; }
.chip {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 16px; border: 1px solid var(--rule-light); color: var(--grey-dark);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.chip[aria-current="true"]:hover { color: var(--cream); }

/* --- Encart rédaction, intercalé dans une grille -------------------------- */
.editorial {
  background: var(--ink); color: var(--cream);
  padding: 48px 56px; display: flex; align-items: center;
  justify-content: space-between; gap: var(--s5); flex-wrap: wrap;
}
.editorial__title { font-family: var(--display); font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.1; margin-top: 14px; max-width: 700px; }
.editorial__txt { font-size: 15px; line-height: 1.7; color: var(--on-dark-soft); margin-top: 14px; max-width: 640px; }
/* .link-ul est aligné en haut par défaut, pour le hero. Ici il doit suivre
   le centrage vertical de l'encart. */
.editorial .link-ul { align-self: center; }

/* --- Pagination ----------------------------------------------------------- */
.pagination {
  display: flex; align-items: center; gap: 8px;
  padding: var(--s5) 0; border-top: 1px solid var(--rule-light);
  font-family: var(--mono); font-size: 13px;
}
.pagination a, .pagination span {
  min-width: 40px; height: 40px; display: grid; place-items: center;
  color: var(--grey-dark); padding: 0 6px;
}
.pagination a:hover { color: var(--ink); background: var(--cream-alt); }
.pagination [aria-current="page"] { background: var(--ink); color: var(--cream); }
.pagination__next { margin-left: auto; letter-spacing: .14em; text-transform: uppercase; font-size: 11px; }

/* --- Fil d'ariane --------------------------------------------------------- */
/* padding-block seulement : le raccourci padding écraserait le padding-inline
   hérité de .wrap et collerait le bloc au bord de l'écran. */
.crumbs {
  padding-block: 22px; font-size: 12px; letter-spacing: .06em;
  color: var(--grey); border-bottom: 1px solid var(--rule-light);
}
.crumbs a { color: var(--grey-dark); }
.crumbs a:hover { color: var(--brass); }
.crumbs .sep { margin: 0 10px; color: var(--rule-light); }

/* --- Article -------------------------------------------------------------- */
/* Pas de max-width sur le bloc lui même, il porte .wrap. Ce sont les enfants
   qui limitent leur mesure, sinon le calcul de padding de .wrap est faussé. */
.article-head { padding-top: var(--s6); padding-bottom: var(--s5); }
.article-head .t-display { margin-top: 20px; max-width: 1040px; }
.article-head .chapo { margin-top: 26px; max-width: 760px; font-size: clamp(1.05rem, 1.4vw, 1.25rem); }

.byline {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 32px; font-family: var(--mono); font-size: 12px; color: var(--grey);
}
.byline .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--grey); }

.prose { max-width: var(--measure); margin: 0 auto; padding: var(--s6) 0 var(--s7); }
.prose p { font-size: 19px; line-height: 1.75; margin: 0 0 28px; }
.prose h2 {
  font-family: var(--display); font-size: clamp(1.6rem, 2.4vw, 2.125rem);
  line-height: 1.15; margin: 56px 0 20px;
}
.prose ul { margin: 0 0 28px; padding-left: 22px; }
.prose li { font-size: 18px; line-height: 1.75; margin-bottom: 10px; }
.prose blockquote {
  margin: 48px 0; padding: 0 0 0 32px;
  border-left: 2px solid var(--brass);
  font-family: var(--display); font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.3; text-wrap: pretty;
}
.prose figure { margin: 44px 0; }
.prose figcaption {
  font-family: var(--mono); font-size: 11px; line-height: 1.7;
  color: var(--grey); margin-top: 14px;
}
.prose .ph { height: 420px; }

/* Encadré conseil. */
.callout {
  background: var(--white); border-left: 3px solid var(--brass);
  padding: 32px 36px; margin: 48px 0;
}
.callout__label { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--brass); font-weight: 600; }
.callout__title { font-family: var(--display); font-size: 22px; line-height: 1.2; margin: 12px 0 14px; }
.callout p { font-size: 16px; line-height: 1.7; margin: 0; color: var(--grey-dark); }

/* --- Shopper le look ------------------------------------------------------ */
/* Règle du kit UI : nom générique, une phrase de justification, un lien sobre.
   Interdits, prix, badge promo, logo d'enseigne, bouton d'achat.            */
.shop__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; margin-bottom: var(--s5); }
.shop__intro { font-size: 15px; line-height: 1.7; color: var(--on-dark-soft); max-width: 420px; }
.shop__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.shop-item__name { font-family: var(--display); font-size: 20px; line-height: 1.25; margin-top: 18px; color: var(--cream); }
.shop-item__why { font-size: 15px; line-height: 1.65; color: var(--on-dark-soft); margin-top: 10px; }
.shop-item a {
  display: inline-block; margin-top: 16px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  border-bottom: 1px solid var(--brass); padding-bottom: 5px;
}
.shop-item a:hover { border-bottom-color: var(--cream); }

/* --- Bloc auteur ---------------------------------------------------------- */
.author { display: grid; grid-template-columns: 200px 1fr; gap: var(--s5); align-items: start; }
.author .ph { aspect-ratio: 1; }
.author__name { font-family: var(--display); font-size: 26px; margin: 10px 0 14px; }
.author__bio { font-size: 16px; line-height: 1.75; color: var(--grey-dark); max-width: 640px; }

/* --- Repères, frise ------------------------------------------------------- */
.timeline { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--rule-light); }
.timeline__item { padding: 28px 24px 0 0; border-right: 1px solid var(--rule-light); }
.timeline__item:last-child { border-right: none; }
.timeline__year { font-family: var(--display); font-size: 28px; color: var(--brass); }
.timeline__txt { font-size: 14px; line-height: 1.6; color: var(--grey-dark); margin-top: 10px; }

/* --- Bloc de crédibilité -------------------------------------------------- */
.cred { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.cred__item { border-top: 2px solid var(--ink); padding-top: 22px; }
.cred__title { font-family: var(--display); font-size: 22px; line-height: 1.2; margin: 12px 0 12px; }
.cred__txt { font-size: 15px; line-height: 1.7; color: var(--grey-dark); }

/* --- Sections alternées de la page Styles --------------------------------- */
.style-split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; max-width: 1920px; margin-inline: auto; }
.style-split .ph { min-height: 520px; }
.style-split__body {
  padding-block: var(--s7); padding-inline: 72px;
  display: flex; flex-direction: column; justify-content: center;
}
/* Même alignement que le hero, sur le bord extérieur de chaque moitié. */
.style-split:not(.style-split--reverse) .style-split__body {
  padding-right: clamp(72px, calc((100vw - var(--maxw)) / 2 + var(--pad)), calc((1920px - var(--maxw)) / 2 + var(--pad)));
}
.style-split--reverse .style-split__body {
  padding-left: clamp(72px, calc((100vw - var(--maxw)) / 2 + var(--pad)), calc((1920px - var(--maxw)) / 2 + var(--pad)));
}
.style-split__num { font-family: var(--display); font-size: 13px; letter-spacing: .18em; color: var(--brass); margin-bottom: 18px; }
.style-split__txt { font-size: 16px; line-height: 1.75; margin-top: 18px; max-width: 480px; }
.tags { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; padding: 7px 14px; border: 1px solid currentColor; opacity: .7;
}
.style-split .link-ul { margin-top: 30px; }
/* Inversion : sur les sections claires, le texte reste encre. */
.style-split--light .style-split__txt { color: var(--grey-dark); }
.style-split--dark  .style-split__txt { color: var(--on-dark-soft); }

/* 8. PIED DE PAGE ========================================================== */

.site-footer {
  background: var(--ink-deep); color: var(--cream);
  padding-block: var(--s6) 40px;
  padding-inline: max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
}
.site-footer__cols {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s5);
  padding-bottom: 56px; border-bottom: 1px solid rgba(244, 240, 232, .14);
}
.site-footer__about { font-size: 15px; line-height: 1.7; color: rgba(244,240,232,.55); margin-top: 18px; max-width: 320px; }
.fcol { display: flex; flex-direction: column; gap: 12px; }
.fcol__title { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--brass); font-weight: 600; margin-bottom: 6px; }
.fcol a { font-size: 14px; color: rgba(244,240,232,.65); }
.fcol a:hover { color: var(--brass); }
.site-footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap; padding-top: 26px; font-size: 12px; color: var(--grey);
}
.site-footer__social { display: flex; gap: 24px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.site-footer__social a { color: var(--grey); }
.site-footer__social a:hover { color: var(--brass); }

/* Pied de page court, utilisé par les pages intérieures du canvas. */
.footer-slim {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
  padding-block: 30px;
  padding-inline: max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
  border-top: 1px solid var(--rule-light);
  font-size: 12px; color: var(--grey);
}

/* 9. RESPONSIVE ============================================================ */

@media (max-width: 1280px) {
  :root { --pad: 44px; }
  .hero__body { padding: 64px 56px; }
  .style-split__body { padding: var(--s6) 48px; }
}

@media (max-width: 1080px) {
  .nav-toggle { display: block; }

  /* Le menu passe en panneau déroulant sous le header. */
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    z-index: 30; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ink); border-bottom: 1px solid var(--rule-dark);
    padding-block: var(--s1) var(--s4);
    padding-inline: max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: 16px 0; border-bottom: 1px solid var(--rule-dark); font-size: 13px; }
  .nav a[aria-current="page"] { border-bottom-color: var(--brass); padding-bottom: 16px; }
  .search { display: none; }

  .g-6 { grid-template-columns: repeat(3, 1fr); }
  .g-5 { grid-template-columns: repeat(3, 1fr); }
  .styles-row { grid-template-columns: repeat(2, 1fr); }
  .style-cell { padding: 32px 24px; }
  .style-cell:nth-child(2) { padding-right: 0; border-right: none; }
  .style-cell:nth-child(odd) { padding-left: 0; }
  .shop__grid { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(3, 1fr); }
  .site-footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  :root { --pad: 28px; --s6: 56px; --s7: 64px; }

  /* Le logotype en capitales très espacées mesure 257 px, ce qui ne laisse
     pas la place au bouton Menu. On resserre plutôt que de le tronquer. */
  .logo { font-size: 14px; letter-spacing: .14em; }
  .nav-toggle { padding: 9px 12px; }

  .hero { grid-template-columns: 1fr; }
  .hero__media { min-height: 0; aspect-ratio: 4 / 3; }
  .hero__body { padding: 56px 28px; }

  .g-3, .g-4 { grid-template-columns: repeat(2, 1fr); }
  .span-2 { grid-column: span 2; }

  .style-split { grid-template-columns: 1fr; }
  .style-split .ph { min-height: 0; aspect-ratio: 4 / 3; }
  /* Sur mobile la photo repasse toujours au dessus du texte. */
  .style-split--reverse .ph { order: -1; }
  /* Sélecteurs alignés sur ceux du clamp desktop, qui ont une spécificité
     supérieure et gagneraient sinon même à cette largeur. */
  .style-split__body,
  .style-split:not(.style-split--reverse) .style-split__body,
  .style-split--reverse .style-split__body { padding: 56px 28px; }

  .cred { grid-template-columns: 1fr; gap: var(--s4); }
  .author { grid-template-columns: 1fr; }
  .author .ph { max-width: 180px; }
  .newsletter { gap: var(--s4); }
  .editorial { padding: 36px 28px; }
  .prose .ph { height: 300px; }
}

@media (max-width: 600px) {
  .g-2, .g-3, .g-4, .g-5, .g-6 { grid-template-columns: 1fr; }
  .span-2 { grid-column: span 1; }
  .styles-row { grid-template-columns: 1fr; }
  .style-cell { padding: 28px 0; border-right: none; border-bottom: 1px solid var(--rule-dark); }
  .style-cell:last-child { border-bottom: none; }
  .shop__grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .timeline__item { border-right: none; border-bottom: 1px solid var(--rule-light); padding: 22px 0; }
  .timeline__item:last-child { border-bottom: none; }
  .site-footer__cols { grid-template-columns: 1fr; }
  .card--lg .ph, .card--md .ph { height: 260px; }
  .prose p { font-size: 17px; }
  .prose li { font-size: 16px; }
  .pagination__next { margin-left: 0; width: 100%; justify-content: flex-start; }
}

/* Préférences système ------------------------------------------------------ */

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

@media print {
  .site-header, .site-footer, .newsletter, .shop, .filters, .pagination { display: none !important; }
  body { background: #fff; color: #000; }
  .prose { max-width: none; }
}

/* Portrait d'auteur en bas d'article. Mêmes proportions que la réservation
   qu'il remplace, pour que la mise en page ne bouge pas selon qu'une fiche
   porte une photo ou non. */
.author__photo { display: block; width: 120px; height: 120px; object-fit: cover;
                 border-radius: 50%; flex: 0 0 auto; }