/* Retraite Copy - liste d'invitation. DA Copy House : ink/paper/bronze, zéro arrondi,
   Graveur (titres) + Inter (corps). Mise en page reprise du swipe Château de Courtomer
   (colonne lettre étroite, photos polaroïd, boîtes d'inscription répétées), sans ses
   couleurs ni ses arrondis. */

@font-face{font-family:Graveur;src:url('assets/fonts/graveur.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('assets/fonts/inter-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url('assets/fonts/inter-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Inter;src:url('assets/fonts/inter-700.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --ink:#212121;
  --paper:#F9F9F2;
  --bronze:#AC6B46;
  --muted:#615c55;
  --line:#dcd7cd;
  --col:640px;
  --gut:16px;
  --serif:Graveur,Georgia,serif;
  --sans:Inter,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:17px/1.6 var(--sans)}
img{display:block;max-width:100%}
.keep{white-space:nowrap}
a{color:inherit}
button,a{touch-action:manipulation}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--bronze);outline-offset:4px}

.wrap{width:min(calc(100% - 2*var(--gut)),1180px);margin:auto}
.wrap-letter{width:min(calc(100% - 2*var(--gut)),var(--col));margin:auto}

/* ---- marque en tête, minimale ---- */
.mark{padding:28px 0;border-bottom:1px solid var(--line)}
.mark-word{font:600 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

/* ---- ouverture ---- */
.open{padding:72px 0 56px}
.pretitle{margin:0 0 28px;color:var(--bronze);font:600 13px/1.6 var(--sans);letter-spacing:.02em;max-width:520px}
h1{margin:0 0 28px;font-family:var(--serif);font-weight:500;letter-spacing:-.01em;font-size:clamp(34px,5.6vw,60px);line-height:1.15;text-wrap:balance}
.lead{margin:0 0 40px;color:var(--muted);font-size:20px;line-height:1.6}
.lead em{font-style:italic;color:var(--ink)}

.not-signup{margin:0 0 44px;padding:28px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);font-family:var(--serif);font-weight:500;font-size:clamp(26px,3.2vw,34px);line-height:1.3;text-align:center}

/* ---- lettre ---- */
.letter{padding:0 0 8px}
:where(.letter, .open) p{margin:0 0 26px;font-size:18px;line-height:1.75}
.letter p:last-child{margin-bottom:0}
.letter u{text-decoration-thickness:1.5px;text-underline-offset:3px}
.big-statement{margin:44px 0!important;padding:36px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-family:var(--serif);font-size:clamp(24px,3vw,32px);line-height:1.35;text-align:center}
.big-statement strong{font-weight:500;color:var(--bronze)}
h2.reveal-line{margin:64px 0 26px;font-family:var(--serif);font-weight:500;font-size:clamp(30px,3.75vw,42px);line-height:1.18;text-wrap:balance}

/* ---- liste de chiffres ---- */
.stat-list{margin:36px 0;padding:0;list-style:none}
.stat-list li{padding:14px 0 14px 20px;border-left:3px solid var(--bronze);border-bottom:1px solid var(--line);font-size:17px;line-height:1.6}
.stat-list li:last-child{border-bottom:0}

/* ---- citation Brian York ---- */
.quote-york{margin:44px 0;padding:36px 32px;border-left:3px solid var(--bronze);background:var(--ink);color:var(--paper)}
.quote-york .quote-en{margin:0 0 18px!important;font-family:var(--serif);font-weight:500;font-size:clamp(21px,2.6vw,27px);line-height:1.4}
.quote-york cite{display:block;margin-bottom:22px;color:var(--bronze);font-style:normal;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.quote-york .quote-fr{margin:0!important;color:#cfc9c0;font-size:14px;line-height:1.65}

/* ---- photos polaroid ---- */
.polaroid{margin:44px auto;padding:14px 14px 30px;max-width:480px;background:var(--paper);border:1px solid var(--ink);box-shadow:6px 8px 0 #21212112}
.polaroid img{display:block;width:100%;border:1px solid var(--line)}
.polaroid figcaption{margin-top:14px;color:var(--muted);font-size:13px;line-height:1.5;text-align:center}
.polaroid-hero{max-width:600px}
.tilt-left{transform:rotate(-2deg)}
.tilt-right{transform:rotate(2deg)}

/* ---- boîtes d'inscription (formulaire GHL "Liste d'invitation Retraite Copy",
   ID SkucAyImm7f8ryLI8mvC) ---- */
.ghl-form{margin:40px 0}
.ghl-box{background:var(--ink);color:var(--paper)}
.ghl-box .form-title{padding:32px 28px 0;font-family:var(--serif);font-weight:500;font-size:28px;line-height:1.25;margin:0 0 14px!important}
.ghl-box .form-copy{padding:0 28px;color:#cfc9c0;font-size:15px;line-height:1.6;margin:0 0 20px!important}
/* !important : form_embed.js pose des width/height en style INLINE sur l'iframe
   chargee (mesure : 640x393 au lieu de 100%x480) - seul un !important en feuille
   externe passe devant un style inline. */
.ghl-iframe{display:block;width:100%!important;height:480px!important;border:0}

/* ---- signature ---- */
.signature{padding:56px 0 88px;border-top:1px solid var(--line)}
.sig-layout{display:grid;grid-template-columns:1fr 200px;gap:36px;align-items:start}
.sig-name{font-family:var(--serif);font-weight:500;font-size:32px;line-height:1.2;margin:0 0 22px!important}
.sig-bio{font-size:15px;line-height:1.75;color:var(--muted)}
.sig-photo{margin:0;max-width:200px}
.sig-photo img{aspect-ratio:1;object-fit:cover}

/* ---- pied ---- */
footer{padding:28px 0;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
.footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px}
footer a{text-decoration:underline}

@media(max-width:1024px){
  .open{padding:56px 0 44px}
}

@media(max-width:768px){
  .open{padding:48px 0 36px}
  .signature{padding:44px 0 64px}
  .sig-layout{grid-template-columns:1fr 160px;gap:24px}
  .sig-photo{max-width:160px}
}

@media(max-width:430px){
  .wrap,.wrap-letter{width:calc(100% - 2*var(--gut))}
  .mark{padding:20px 0}
  .open{padding:40px 0 28px}
  h1{font-size:40px;line-height:1.18}
  h2.reveal-line{font-size:30px;margin:44px 0 18px}
  .not-signup{font-size:23px}
  .sig-name{font-size:27px}
  .ghl-box .form-title{font-size:24px}
}
@media(max-width:400px){
  h1{font-size:34px;line-height:1.2}
  h2.reveal-line{font-size:26px;margin:36px 0 16px}
  .stat-list li{font-size:15px;padding:12px 0 12px 16px}
  .quote-york{padding:24px 20px}
  .lead{font-size:18px;margin-bottom:32px}
  .not-signup{font-size:21px;padding:22px 0;margin-bottom:32px}
  :where(.letter, .open) p{font-size:16px;line-height:1.7;margin-bottom:22px}
  .big-statement{font-size:21px;padding:28px 0;margin:32px 0!important}
  .polaroid{margin:32px auto;padding:10px 10px 26px}
  .ghl-box .form-title{padding:24px 20px 0;font-size:20px}
  .ghl-box .form-copy{padding:0 20px}
  .sig-layout{grid-template-columns:1fr;gap:24px}
  .sig-photo{max-width:140px}
}