/* Greg Le Fourn — page d'accueil, système visuel calqué sur aman.com
   Valeurs vérifiées dans le CSS compilé réel d'aman.com (couleurs, tailles, espacements, boutons). */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;1,8..60,400&family=Source+Sans+3:wght@300;400;500;600&display=swap');

:root{
  --ivory:#f3eee7;
  --beige:#e6e2db;
  --ink:#313131;
  --black:#000;
  --white:#fff;
  --grey:#585858;
  --accent:#6e2a2f;
  --line: rgba(49,49,49,.16);
  --serif:'Source Serif 4', Georgia, serif;
  --sans:'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --maxw:1440px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.7;
  color:var(--ink);
  background:var(--ivory);
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 40px;}
@media (max-width:640px){.container{padding:0 22px;}}

h1,h2,h3{
  font-family:var(--serif);font-weight:400;line-height:1.2;
  margin:0;color:var(--ink);letter-spacing:.01em;
}

/* Petit libellé capitale — le repère discret qu'utilise Aman avant chaque titre */
.tag{
  display:block;font-family:var(--sans);font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  font-size:.68rem;color:var(--ink);opacity:.72;margin-bottom:18px;
}

.intro-text{font-size:1rem;line-height:1.75;color:var(--ink);font-weight:300;max-width:460px;}

/* Lien souligné — le "Discover more" d'Aman : jamais de bouton plein pour naviguer */
.link-under{
  position:relative;display:inline-block;font-family:var(--sans);font-size:.85rem;font-weight:500;
  letter-spacing:.03em;color:var(--ink);padding-bottom:3px;
}
.link-under::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--ink);
  opacity:.45;transition:opacity .3s ease;
}
.link-under:hover::after{opacity:1;}

/* Bouton fin, contour, jamais de fond plein au repos — mesures reprises d'aman.com */
.btn{
  display:inline-block;padding:.85em 3.2em;font-family:var(--sans);font-size:.86rem;font-weight:500;
  letter-spacing:.05em;color:var(--ink);border:1px solid var(--ink);background:transparent;
  transition:background-color .4s ease,color .4s ease,border-color .4s ease;
}
.btn:hover{background:var(--ink);color:var(--ivory);}

/* En-tête + tiroir de navigation : voir assets/css/header.css (partagé sur toutes les pages) */

/* Héros plein écran — photo fixe, texte discret, comme demandé */
.hero{
  position:relative;
  height:calc(100vh - var(--gh-header-h) - var(--gh-header-gap));
  min-height:480px;
  display:flex;align-items:flex-end;justify-content:center;
  background:var(--ink);color:#fff;overflow:hidden;
}
@media (max-width:768px){
  .hero{height:calc(100vh - var(--gh-header-h-mobile) - var(--gh-header-gap-mobile));}
}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 15%;}
.hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(0,0,0,.32) 55%, rgba(0,0,0,.6) 80%, rgba(0,0,0,.85) 100%);
}
.hero-caption{position:relative;z-index:2;text-align:center;padding-bottom:120px;max-width:900px;}
.hero-caption h1{font-size:clamp(1.7rem,3.2vw,2.5rem);color:#fff;font-weight:300;text-shadow:0 2px 14px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.3);}
@media (max-width:640px){.hero-caption{padding-bottom:80px;}}

/* Apparition marquée et progressive du titre, ligne par ligne — CSS pur.
   Vérification facile : classe .hero-reveal-line sur chaque ligne, animation "gh-hero-in". */
@keyframes gh-hero-in{
  from{opacity:0;transform:translateY(38px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes gh-hero-in-tag{
  from{opacity:0;transform:translateY(38px);}
  to{opacity:.85;transform:translateY(0);}
}
.hero-caption .tag{
  display:block;color:#fff;opacity:0;
  text-shadow:0 1px 8px rgba(0,0,0,.35);
  animation:gh-hero-in-tag 1.6s cubic-bezier(.16,.7,.2,1) .1s forwards;
}
.hero-caption h1 .line.hero-reveal-line{
  display:block;opacity:0;
  animation:gh-hero-in 1.8s cubic-bezier(.16,.7,.2,1) forwards;
}
.hero-caption h1 .line.hero-reveal-line:nth-child(1){animation-delay:.5s;}
.hero-caption h1 .line.hero-reveal-line:nth-child(2){animation-delay:.9s;}
.hero-caption h1 .line.hero-reveal-line:nth-child(3){animation-delay:1.3s;}
@media (prefers-reduced-motion: reduce){
  .hero-caption .tag,.hero-caption h1 .line{animation:none;opacity:1;transform:none;}
}

/* Repère de défilement — discret, sous le titre, jamais superposé au texte.
   Une seule animation (opacité + position ensemble) : pas de conflit entre deux
   animations qui se disputeraient la propriété transform, ce qui rendait le repère
   statique auparavant. */
.scroll-cue{
  position:absolute;left:50%;bottom:34px;z-index:2;
  color:#fff;
  transform:translate(-50%,0);
  opacity:0;
  animation:gh-scroll-cue 1.8s ease-in-out 1.9s infinite;
}
@keyframes gh-scroll-cue{
  0%{opacity:.3;transform:translate(-50%,0);}
  50%{opacity:.85;transform:translate(-50%,11px);}
  100%{opacity:.3;transform:translate(-50%,0);}
}
@media (max-width:640px){.scroll-cue{bottom:22px;}}

/* Encart "Prenons contact" : voir assets/css/header.css (partagé sur toutes les pages) */

/* Rythme des sections — mesures proches de celles d'aman.com (container--spacer) */
.section{padding:110px 0;}
.section-small{padding:64px 0;}
.section-tight{padding:80px 0;}
@media (max-width:760px){.section{padding:72px 0;}.section-small{padding:44px 0;}.section-tight{padding:56px 0;}}

/* Bloc à fond sombre — rupture de rythme façon aman.com entre deux séquences claires.
   Toutes les couleurs de texte basculent vers l'ivoire pour rester lisibles. */
.section-alt{background:#e5e1db;}

/* La grille "un même homme, deux rôles" suit directement le hero plein écran :
   davantage de respiration en haut pour marquer une vraie séparation. */
.trio-section{padding-top:150px;}
@media (max-width:760px){.trio-section{padding-top:100px;}}

/* Bloc légende centré, sans image — le mécanisme d'intro d'Aman */
.caption-block{max-width:560px;margin:0 auto;text-align:center;}
.caption-block h2{font-size:clamp(1.5rem,2.4vw,1.9rem);margin:0 0 20px;}
.caption-block p{margin:0 0 26px;}
.caption-block.align-left{margin-left:0;margin-right:auto;text-align:left;}

/* Sauts de ligne forcés (titre/texte "Une cérémonie que vous ne verrez nulle part
   ailleurs") : lignes fixes voulues sur desktop/tablette. Sur petit mobile, on les
   neutralise pour laisser le texte se replier naturellement (évite des lignes trop
   courtes une fois le retour forcé combiné au retour automatique de l'écran). */
@media (max-width:640px){
  br.force-break{display:none;}
}

/* Bloc média + légende dessous — jamais de texte sur la photo, hors héros */
.media-block{margin:0 auto;}
.media-block figure{margin:0 0 40px;}
.media-block img{width:100%;height:auto;display:block;}
.media-block.ratio-16-9 img{aspect-ratio:16/9;object-fit:cover;}
.media-caption{max-width:560px;margin:0 auto;text-align:center;}
.media-caption h2{font-size:clamp(1.4rem,2.2vw,1.7rem);margin:0 0 16px;}
.media-caption p{margin:0 0 22px;}

/* Deux blocs média côte à côte (mi-largeur) */
.media-pair{display:grid;grid-template-columns:1fr 1fr;gap:70px;}
@media (max-width:800px){.media-pair{grid-template-columns:1fr;gap:64px;}}
.media-pair figure{margin:0;}
.media-pair img{width:100%;aspect-ratio:3/4;object-fit:cover;}
.media-pair .media-caption{max-width:none;text-align:left;}

/* Paire asymétrique — grande photo (paysage) + photo étroite (portrait), comme aman.com.
   Hauteur commune forcée sur les deux figures : object-fit:cover recadre chaque image
   pour remplir cette hauteur sans déformation, quelle que soit la largeur de colonne. */
.media-pair.asym{grid-template-columns:1.7fr 1fr;gap:24px;align-items:stretch;}
.media-pair.asym figure{height:clamp(340px,42vw,560px);overflow:hidden;}
.media-pair.asym img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;}
@media (max-width:800px){
  .media-pair.asym{grid-template-columns:1fr;}
  .media-pair.asym figure{height:340px;}
}

/* Grille à trois colonnes — inspirée de "The World of Aman" : photo portrait,
   petit titre, texte court, lien souligné. Ratio identique sur les trois. */
.trio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:52px;}
@media (max-width:860px){.trio-grid{grid-template-columns:1fr;gap:56px;max-width:380px;margin:0 auto;}}
.trio-item{text-align:center;}
.trio-item figure{margin:0 0 24px;overflow:hidden;}
.trio-item img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;}
.trio-item figure.flip img{transform:scaleX(-1);}
.trio-item h3{font-size:1.1rem;font-weight:400;margin:0 0 10px;}
.trio-item p{font-size:.92rem;line-height:1.7;margin:0 0 18px;max-width:280px;margin-left:auto;margin-right:auto;}

/* Chiffres clés — structure "Seasonal Experiences" d'aman.com :
   colonne de texte fixe (1fr) + carrousel de cartes qui défile (2fr), ratio et
   espacement (4.6rem≈64px) repris de leur grille réelle .layout--1-2-from-desktop.
   Défilement : scroll horizontal natif avec snap (équivalent de leur carousel Slick
   configuré sans flèches, au swipe/drag), pas de librairie JS nécessaire. */
/* Fond beige grisé (même teinte que .section-alt) sur toute la largeur/hauteur de la section,
   pour marquer nettement la rupture avec les blocs clairs au-dessus et en dessous. */
.stats-section{background:#e5e1db;position:relative;}

/* Même repère de défilement que le hero (.scroll-cue), mais en teinte sombre pour
   rester lisible sur le fond clair de cette section, et repositionné plus près du
   bas de section (les cartes du carrousel laissent moins de vide en dessous). */
.scroll-cue-dark{color:var(--ink);bottom:14px;}
@media (max-width:640px){.scroll-cue-dark{bottom:8px;}}

/* Cette section sort du .container habituel pour que le carrousel puisse déborder
   jusqu'au bord réel de l'écran (comme le slider-3up-wrapper-right-offset d'aman.com).
   La colonne de texte recalcule elle-même la marge gauche que lui donnait le .container
   (max-width 1440px, padding 40px / 22px en mobile), pour rester alignée avec le reste du site. */
.stats-layout{display:grid;grid-template-columns:1fr 2fr;gap:64px;align-items:start;}
@media (max-width:900px){.stats-layout{grid-template-columns:1fr;gap:32px;}}

.stats-text{padding-left:max(40px, calc((100vw - 1440px) / 2 + 40px));padding-right:24px;}
@media (max-width:640px){.stats-text{padding-left:22px;}}
.stats-text h2{font-size:clamp(1.5rem,2.4vw,1.9rem);margin:0 0 18px;}
.stats-text p{font-size:1rem;max-width:360px;margin:0;}

/* Carrousel : défilement natif au clic-glisser/molette, sans barre visible.
   Le dernier item visible est volontairement coupé par le bord de l'écran ; le JS
   (voir script en bas de page) estompe en direct toute carte partiellement visible,
   comme le fait le slick d'aman.com entre ses diapositives active/inactives. */
.stats-scroller{
  display:flex;gap:24px;overflow-x:auto;padding-bottom:8px;padding-right:24px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;
}
.stats-scroller::-webkit-scrollbar{display:none;width:0;height:0;}
.stats-scroller.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none;}
.stats-scroller img{-webkit-user-drag:none;user-select:none;}
@media (max-width:900px){.stats-scroller{padding-left:22px;}}
@media (min-width:901px){.stats-scroller{padding-left:0;}}
/* Carte "chiffres clés" — reprise fidèle de la carte "Seasonal Experiences" d'aman.com :
   photo nette en pleine opacité au-dessus, texte en dessous, jamais superposé.
   Espacements convertis depuis leur CSS compilé (racine 14px) :
   figcaption margin-top 1.1429rem→16px ; .subtitle margin-bottom 1rem→14px ;
   figcaption h3 margin-bottom .5rem→7px + figcaption padding-bottom 1rem→14px (soit 21px
   jusqu'à la description) ; .card__multiple_links margin-top 1rem→14px avant le lien. */
/* Largeur des cartes calée sur le réglage Slick réel d'aman.com pour ce carrousel
   (data-slick de leur "Seasonal Experiences" : slidesToShow 2.5, puis 1.5 sous 600px,
   1.2 sous 480px). En %, la largeur se recalcule sur la zone visible du scroller
   (jamais sur le contenu qui déborde) : le nombre de cartes visibles reste donc
   constant quelle que soit la largeur d'écran, avec toujours la carte suivante
   coupée/entrevue sur le bord droit. */
.stats-card{
  position:relative;flex:0 0 auto;width:calc((100% - 48px) / 2.5);display:flex;flex-direction:column;
  scroll-snap-align:start;transition:opacity .15s linear;
}
@media (max-width:600px){.stats-card{width:calc((100% - 24px) / 1.5);}}
@media (max-width:480px){.stats-card{width:calc((100% - 12px) / 1.2);}}
.stats-card-figure{margin:0 0 16px;overflow:hidden;}
.stats-card-figure img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;}
.stats-card-tag{
  font-family:var(--sans);font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  font-size:.7rem;color:var(--ink);opacity:.72;margin:0 0 14px;
}
.stats-card-title{
  font-size:1.15rem;font-weight:400;letter-spacing:.02em;line-height:1.35;margin:0 0 21px;
}
.stats-card-desc{
  font-family:var(--sans);font-weight:300;font-size:.88rem;line-height:1.6;color:var(--ink);
  margin:0 0 14px;
}
.stats-card .link-under{font-size:.8rem;}
@media (max-width:520px){.stats-card-title{font-size:1.05rem;}}

/* Citation mise en avant — le supplément d'âme */
.pull-quote{max-width:720px;margin:0 auto;text-align:center;}
.pull-quote p{
  font-family:var(--serif);font-style:italic;font-weight:400;color:var(--ink);
  font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.5;margin:0 0 24px;
}
.pull-quote cite{font-style:normal;}

/* Séparateur discret entre séquences */
.hr-thin{height:1px;background:var(--line);border:0;margin:0;}

/* Pied de page — blanc, texte gris, comme aman.com */
.site-footer{background:var(--white);color:var(--grey);padding:90px 0 34px;}
.footer-top{
  display:flex;justify-content:space-between;align-items:flex-end;gap:30px;
  padding-bottom:54px;margin-bottom:54px;border-bottom:1px solid var(--line);flex-wrap:wrap;
}
.footer-top h2{font-size:1.4rem;color:var(--ink);}
.footer-links{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-bottom:60px;}
@media (max-width:760px){.footer-links{grid-template-columns:1fr 1fr;}}
.footer-links .tag{color:var(--ink);opacity:.6;margin-bottom:20px;}
.footer-links a{display:block;padding:5px 0;font-size:.92rem;color:var(--grey);}
.footer-links a:hover{color:var(--ink);}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.78rem;color:var(--grey);padding-top:20px;border-top:1px solid var(--line);}

.reveal{opacity:0;transform:translateY(16px);transition:opacity 1s ease, transform 1s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

.skip-link{position:absolute;left:-999px;background:var(--ink);color:#fff;padding:12px 18px;z-index:999;}
.skip-link:focus{left:16px;top:16px;}