/* Page publique + carrousel. Couleurs, image de fond, tailles et durées viennent de theme.php (variables CSS, réglages de l'administration). */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.pf-body{margin:0;min-height:100vh;background:var(--bg,#03060c);color:var(--text,#f2f2f2);font:300 16px/1.4 "Barlow Condensed","Open Sans",Helvetica,sans-serif;overflow-x:hidden}
/* Image de fond fixe (pseudo-élément : background-attachment:fixed ne fonctionne pas sur iPhone/iPad) */
body.pf-body::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--bg-img,none) center/cover no-repeat}

.pf{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:48px 0 calc(110px + env(safe-area-inset-bottom))}   /* bloc un peu au-dessus du centre, comme l'ancien site */
.pf-head{text-align:center;padding:0 16px;margin-bottom:54px}
.pf-head h1{margin:0;font-weight:300;font-size:clamp(44px,10vw,80px);line-height:1.05;letter-spacing:.005em}
.pf-head .tag{margin:6px 0 0;font-weight:var(--tag-weight,100);font-size:clamp(22px,5vw,41px);line-height:1.15}
.pf-foot{text-align:center;padding:0 16px;margin-top:62px}
.pf-foot p{margin:0 0 30px;font-size:18px;font-weight:300;letter-spacing:.16em;text-transform:uppercase;opacity:.6}
/* Copyright : en bas de l'écran, hors du bloc centré (la position du carrousel ne change pas) */
.pf-foot .pf-copy{position:absolute;left:16px;right:16px;bottom:calc(20px + env(safe-area-inset-bottom));margin:0;font-size:14px;letter-spacing:.04em;text-transform:none;opacity:.45}
.pf-links{list-style:none;margin:0;padding:0;display:flex;justify-content:center;gap:4px}
.pf-links a{display:grid;place-items:center;width:45px;height:45px;color:var(--text,#fff);border-radius:50%;transition:opacity .2s}
.pf-links a:hover{opacity:.65}
.pf-links svg{width:20px;height:20px;fill:currentColor}
.pf-links a:focus-visible,.cp-car:focus-visible,.cp-arr:focus-visible{outline:2px solid var(--text,#fff);outline-offset:2px}

/* Apparition : titre et pied de page, puis le carrousel */
@keyframes pf-in{from{opacity:0}to{opacity:1}}
.pf-head,.pf-foot{animation:pf-in var(--intro-text,300ms) ease-out both}
.cp-car{animation:pf-in var(--intro-strip,600ms) ease-out var(--intro-delay,700ms) both}

/* Carrousel : bande pleine largeur, vignettes de taille fixe (recadrage « cover ») ; sur téléphone, --car-mob vignettes dans la largeur */
.cp-car{position:relative;width:100%;overflow:hidden;container-type:inline-size;touch-action:pan-y;-webkit-user-select:none;user-select:none;outline:0}
/* Tailles arrondies au pixel entier (round()) : un bord de vignette à cheval sur deux pixels donne une ligne de 1 px plus sombre (Safari, au survol) */
.cp-track{--tw:calc(var(--car-wn,440) * 1px);display:flex;gap:var(--car-gap,0);height:calc(var(--tw) * var(--car-hn,343) / var(--car-wn,440));height:round(nearest,calc(var(--tw) * var(--car-hn,343) / var(--car-wn,440)),1px);will-change:transform}
@container (max-width:760px){.cp-track{--tw:calc(100cqw / var(--car-mob,1.5))}}
.cp-tile{flex:none;width:var(--tw);width:round(nearest,var(--tw),1px);height:100%;margin:0;overflow:hidden}
.cp-tile img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;filter:grayscale(var(--car-grey,60%));transition:filter var(--car-hover,200ms) ease}
.cp-tile img:not([src]){visibility:hidden}
@media (hover:hover){.cp-tile:hover img{filter:grayscale(0)}}
@media (hover:none){.cp-tile img{filter:none}}
.cp-car.is-drag{cursor:grabbing}
.cp-arr{position:absolute;top:50%;z-index:2;width:38px;height:38px;margin-top:-19px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:rgba(235,235,235,.72);color:#454b55;cursor:pointer;opacity:.85;transition:opacity .2s,background-color .2s}
.cp-arr:hover{opacity:1;background:rgba(245,245,245,.9)}
.cp-arr-p{left:10px}
.cp-arr-n{right:10px}
.cp-arr svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4}
@media (hover:none){.cp-arr{display:none}}

@media (max-width:760px){
  .pf{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .pf-head{margin-bottom:36px}
  .pf-foot{margin-top:40px}
  .pf-foot p{margin-bottom:24px}
}
@media (prefers-reduced-motion:reduce){
  .pf-head,.pf-foot,.cp-car{animation:none}
  .cp-tile img{transition:none}
}