/* Mise en page : un sélecteur de proposition, puis le site complet (nav, accueil, liens, photo, contacts, messes) rendu dans la palette du site actuel. */
:root{
  --bg:#f3f1ec; --fg:#26241f; --muted:#6b675c; --line:#d3cfc3; --chip:#e6e2d6; --chip-on:#26241f; --chip-on-fg:#f3f1ec;
  --tan:#b7b196;--sun:#96661c; --paper:#efebe5; --dark:#8a8270; --ink:#2b2a26; --nav:#304254;
  --display:"Cormorant Garamond",Georgia,serif; --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --tower:url("assets/clocher.jpg"); --l1:url("assets/agenda.jpg"); --l2:url("assets/newsletters.jpg"); --l3:url("assets/homelies.jpg"); --l4:url("assets/facebook.jpg"); --photo:url("assets/celebration.jpg");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 var(--body)}
.pad{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* ===== le site ===== */
.site{background:var(--paper);color:var(--ink);font-family:var(--body)}
.site a{color:inherit}
.w{width:min(1000px,100%);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--tan);border-bottom:1px solid rgba(48,66,84,.25)}
.nav ul{list-style:none;margin:0;padding:0;display:flex;justify-content:flex-end;gap:26px;flex-wrap:wrap}
.nav a{display:block;padding:12px 0;color:var(--nav);font-weight:700;font-size:13px;text-decoration:none}
.nav li{transition:opacity .1s ease-out}
.nav li:hover{opacity:.7}
.site h1,.site h2,.site h3{font-family:var(--display);font-weight:400;font-variant:small-caps;letter-spacing:.05em;margin:0;text-wrap:balance}

.hero{background:var(--tan);padding-block:48px 56px;scroll-margin-top:45px}
.hero .w{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
.brand{display:flex;gap:14px;align-items:center;font-size:12px;letter-spacing:.06em;text-transform:uppercase;line-height:1.3}
.brand i{display:block;width:26px;height:37px;background:url("assets/crucifix.svg") center/contain no-repeat;flex:none}
.hero h1{font-size:clamp(46px,7vw,68px);line-height:1;margin:36px 0 22px}
.hero p{margin:0 0 14px;max-width:52ch;font-size:17px}
.tower{aspect-ratio:4/5;border-radius:2px;background:var(--tower) 50% 40%/cover;box-shadow:0 10px 30px rgba(43,42,38,.25)}

.liens{padding-block:56px 112px;text-align:center}
.liens h2{font-size:clamp(32px,4.5vw,42px);margin-bottom:34px}
.tiles{display:flex;justify-content:center;gap:28px;flex-wrap:wrap}
.tile{width:min(200px,42%);min-width:140px;text-decoration:none;font-weight:600;font-size:14px;display:grid;gap:10px}
.tile .img{position:relative;display:block;aspect-ratio:1;border-radius:18px;border:1px solid rgba(43,42,38,.35);overflow:hidden;isolation:isolate}
.tile .img i{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .35s ease-out}
.tile .lab{display:block;transition:opacity .1s ease-out}
.tile:hover .img i{transform:scale(1.06)}
.tile:hover .lab{opacity:.7}
@media (prefers-reduced-motion:reduce){.tile .img i,.tile .lab,.nav li{transition:none}.tile:hover .img i{transform:none}}
.tile:focus-visible{outline:2px solid var(--nav);outline-offset:4px;border-radius:12px}

.serv{background:var(--tan);padding-block:48px 52px}
.serv h2{font-size:clamp(32px,4.5vw,42px);text-align:center;margin-bottom:30px}
.serv h3{font-size:22px;margin:0 0 14px}
.grp{margin-bottom:32px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px 28px}
.card{font-size:14px;line-height:1.45;min-width:0;overflow-wrap:anywhere}
.card b{display:block;font-size:15px}
.card em{font-style:normal;display:block;margin-top:6px}
.fb{display:flex;justify-content:center;margin-top:10px}
.fb a{display:block;width:44px;height:44px;border-radius:50%;background:url("assets/facebook.svg") center/contain no-repeat}
.fb a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.messes{background:var(--paper)}
.messes .top{padding-block:56px 0}
.messes h2{font-size:clamp(32px,4.5vw,42px);text-align:center}
.messes .body{padding-block:28px 64px}
.messes .body .w{width:min(960px,100%)}
.messes h3.day{font-size:30px;color:var(--sun);margin:0 0 14px}
.messes h3.day.wk{margin-top:40px;border-top:1px solid var(--line);padding-top:22px}
.axis{position:relative;height:22px;margin:0 0 4px 110px;font-size:12px;color:var(--muted)}
.axis span{position:absolute;transform:translateX(-50%)}
.srow{display:flex;align-items:center;border-top:1px solid var(--line);min-height:56px}
.srow .n{width:110px;flex:none;font:500 22px var(--display)}
.track{position:relative;flex:1;height:56px;background:repeating-linear-gradient(to right,transparent 0,transparent calc(20% - 1px),var(--line) calc(20% - 1px),var(--line) 20%)}
.track b{position:absolute;top:50%;transform:translate(-50%,-50%);background:var(--sun);color:#fff;padding:5px 11px;border-radius:999px;font-size:15px;font-variant-numeric:tabular-nums}
.chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.chipday{background:#faf8f4;border:1px solid var(--line);border-radius:10px;padding:12px 14px;min-width:0}
.chipday h4{margin:0 0 8px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.chipday p{margin:0 0 10px;font-size:14px}
.chipday b{font-variant-numeric:tabular-nums}
.chipday em{display:block;font-style:normal;color:var(--muted);font-size:12px;line-height:1.35}
@media (max-width:640px){.chips{grid-template-columns:repeat(2,1fr)}.axis{margin-left:84px}.srow .n{width:84px;font-size:19px}}
.foot{background:var(--ink);color:#d9d3c4;text-align:center;font-size:13px;padding:18px 16px}

/* ===== proposition 1 : passe-partout ===== */
.p1 .band{background:linear-gradient(to bottom,var(--paper) 50%,var(--dark) 50%);padding-block:0}
.p1 .mat{width:min(1040px,100%);margin:0 auto;border:12px solid #f6f2ea;outline:1px solid rgba(43,42,38,.35);outline-offset:-12px;border-radius:4px;background:var(--photo) 56% 66%/cover no-repeat;aspect-ratio:var(--ar);box-shadow:0 18px 40px rgba(43,42,38,.35)}
.p1 .band .w{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.p1 .liens{padding-bottom:56px}
.p1 .serv{padding-top:56px}

/* ===== proposition 2 : pleine largeur ===== */
.p2 .full{position:relative;scroll-margin-top:42px;aspect-ratio:var(--ar-full);background:var(--photo) 56% 66%/cover no-repeat}
.p2 .full::after{content:"";position:absolute;inset:0;background:
  linear-gradient(to bottom,var(--paper) 0,rgba(239,235,229,.0) 22%,rgba(183,177,150,0) 70%,var(--tan) 100%),
  radial-gradient(130% 120% at 50% 45%,transparent 60%,rgba(43,42,38,.35))}
.p2 .liens{padding-bottom:128px}

:root{--ar:1040/360;--ar-full:2.9/1}
@media (max-width:900px){:root{--ar:16/9;--ar-full:2.6/1}}
@media (max-width:600px){:root{--ar:4/3;--ar-full:2.3/1}}
@media (max-width:760px){
  .hero .w{grid-template-columns:1fr;gap:28px}
  .tower{aspect-ratio:16/11;background-position:50% 30%}
  .nav ul{gap:18px;justify-content:space-between}
}