/* Le Parc des Princes — composants du site. Dépend de tokens.css. Aucune valeur en dur hors tokens, sauf géométrie interne. */

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 24px)}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--body);font-feature-settings:"kern","liga";-webkit-font-smoothing:antialiased}
img,video,canvas,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--gutter);top:-60px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:var(--r-pill);text-decoration:none}
.skip:focus{top:12px}

/* ---------- Conteneurs, sections, grille ---------- */
.container{width:100%;max-width:calc(var(--content) + 2 * var(--gutter));margin-inline:auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.section{padding-block:var(--section)}
.section--tight{padding-block:var(--section-tight)}
.section + .section:not(.section--dark):not(.section--surface){padding-top:0}
.section--dark{background:var(--dk-bg);color:var(--dk-ink);--bg:var(--dk-bg);--ring-strong:rgba(246,242,236,.3);--ink:var(--dk-ink);--ink-2:var(--dk-ink-2);--accent:var(--dk-accent);--ring:var(--dk-ring);--surface:var(--dk-surface);--accent-text:var(--dk-accent)}
.section--surface{background:var(--surface)}
.grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--gap)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
@media (max-width:900px){.grid-3,.grid-2{grid-template-columns:1fr}}

/* ---------- Typographie ---------- */
.h1,.h2,.h3,.h4,h1,h2,h3,h4{margin:0;color:var(--ink);text-wrap:balance}
.h1,h1{font:var(--h1);letter-spacing:var(--track-title)}
.h2,h2{font:var(--h2);letter-spacing:var(--track-title)}
.h3,h3{font:var(--h3)}
.h4,h4{font:var(--h4)}
@media (max-width:760px){.h1,h1{font:var(--h1-m)}.h2,h2{font:var(--h2-m)}.h3,h3{font:var(--h3-m)}}
p{margin:0}
.lead{font:var(--lead);color:var(--ink-2);max-width:var(--measure)}
.text{font:var(--body);color:var(--ink-2);max-width:var(--measure)}
.small{font:var(--small);color:var(--ink-2)}
.tbc{font:var(--small);color:var(--ink-2);border-bottom:1px dashed var(--ink-3);white-space:nowrap}

/* Surtitre : petit, en minuscules, précédé d’un point cuivre */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:var(--eyebrow);color:var(--ink-2);margin:0 0 var(--s4)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}

/* En-tête de section : surtitre, titre (deux lignes au plus), texte, action */
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:var(--s5) var(--s8);align-items:end;margin-bottom:var(--s8)}
.sec-head__title{max-width:14.5em}
.sec-head__aside{display:grid;gap:var(--s5);justify-items:start}
.sec-head--center{grid-template-columns:1fr;justify-items:center;text-align:center}
.sec-head--center .sec-head__aside{justify-items:center}
.sec-head--center .lead{margin-inline:auto}
@media (max-width:900px){.sec-head{grid-template-columns:1fr;margin-bottom:var(--s7)}}

/* ---------- Boutons ---------- */
.btn{--btn-bg:transparent;--btn-fg:var(--ink);--btn-ring:var(--ring-strong);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border:0;border-radius:var(--r-pill);
  background:var(--btn-bg);color:var(--btn-fg);box-shadow:inset 0 0 0 1px var(--btn-ring);font:var(--ui);text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color var(--t-bg) var(--ease),box-shadow var(--t-shadow) var(--ease),transform var(--t-press) var(--ease),color var(--t-bg)}
.btn:hover{--btn-bg:var(--surface)}
.btn:active{transform:scale(.97)}
.btn--primary{--btn-bg:var(--vert);--btn-fg:var(--ivoire);--btn-ring:transparent}
.btn--primary:hover{--btn-bg:#2B3B31}
.section--dark .btn--primary,.btn--light{--btn-bg:var(--ivoire);--btn-fg:var(--vert);--btn-ring:transparent}
.section--dark .btn--primary:hover,.btn--light:hover{--btn-bg:var(--sable)}
.btn--glass{--btn-bg:rgba(246,242,236,.18);--btn-fg:var(--ivoire);--btn-ring:rgba(246,242,236,.32);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.btn--glass:hover{--btn-bg:rgba(246,242,236,.3)}
.btn--sm{min-height:36px;padding:6px 14px;font:var(--small);font-weight:500}
.btn--icon{width:44px;padding:0}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.4;pointer-events:none}
.chev{width:16px;height:16px;flex:none;transition:transform var(--t-press) var(--ease)}
.btn:hover .chev,.link:hover .chev{transform:translateX(3px)}
.link{display:inline-flex;align-items:center;gap:6px;font:var(--ui);color:var(--ink);text-decoration:none}
.link:hover{text-decoration:underline;text-underline-offset:4px}
.btn.is-loading{pointer-events:none}
.btn.is-loading::after{content:"";width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--r-pill);background:var(--bg);box-shadow:0 0 0 1px var(--ring);font:var(--small);font-weight:500;color:var(--ink)}
.badge--dot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* ---------- Barre de navigation : pleine largeur, puis capsule flottante ---------- */
.nav{position:fixed;inset:env(safe-area-inset-top,0px) 0 auto;z-index:50;height:var(--nav-h);display:flex;align-items:center;padding-inline:var(--gutter);
  transition:inset var(--t-nav) var(--ease),height var(--t-nav) var(--ease),padding var(--t-nav) var(--ease)}
.nav__inner{flex:1;display:flex;align-items:center;gap:var(--s5);height:100%;padding-inline:0;border-radius:var(--r-pill);color:var(--ivoire);
  transition:background-color var(--t-nav) var(--ease),box-shadow var(--t-nav) var(--ease),padding var(--t-nav) var(--ease),color var(--t-nav)}
.nav__logo{display:flex;align-items:center;height:44px;flex:none}
.nav__logo img{height:100%;width:auto}
.nav__logo .logo-dark{display:none}
.nav__links{display:flex;gap:var(--s1);margin-left:auto;list-style:none;padding:0;margin-block:0}
.nav__links a{display:block;padding:8px 14px;border-radius:var(--r-pill);font:var(--ui);font-weight:400;text-decoration:none;transition:background-color var(--t-bg)}
.nav__links a:hover{background:rgba(246,242,236,.16)}
.nav .btn{--btn-bg:var(--ivoire);--btn-fg:var(--vert);--btn-ring:transparent}
.nav__burger{display:none}
.nav.is-floating{inset:calc(12px + env(safe-area-inset-top,0px)) 0 auto;padding-inline:max(var(--gutter),calc((100vw - 1100px) / 2))}
.nav.is-floating .nav__inner{padding-inline:12px 8px;height:60px;background:var(--glass);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:var(--shadow-float);color:var(--ink)}
.nav.is-floating .nav__logo .logo-light{display:none}
.nav.is-floating .nav__logo .logo-dark{display:block}
.nav.is-floating .nav__links a:hover{background:var(--surface)}
.nav.is-floating .btn{--btn-bg:var(--vert);--btn-fg:var(--ivoire)}
.nav--solid .nav__inner{color:var(--ink)}
@media (max-width:900px){
  .nav__links{display:none}
  .nav__burger{display:inline-flex;margin-left:auto}
  .nav .nav__cta{display:none}
  .nav.is-floating{inset:calc(8px + env(safe-area-inset-top,0px)) 0 auto;padding-inline:12px}
  .nav.is-floating .nav__inner{height:56px}
}
/* Menu mobile plein écran */
.menu{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column;padding:var(--s4) var(--gutter) var(--s6);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity var(--t-shadow) var(--ease),transform var(--t-shadow) var(--ease),visibility 0s linear var(--t-shadow)}
.menu.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.menu__top{display:flex;justify-content:space-between;align-items:center;height:48px}
.menu__list{list-style:none;margin:var(--s6) 0 0;padding:0}
.menu__list a{display:block;padding:14px 0;font:var(--h4);font-weight:400;font-size:24px;line-height:32px;text-decoration:none;box-shadow:0 1px 0 var(--ring)}
.menu__foot{margin-top:auto;display:grid;gap:var(--s3)}

/* ---------- Onglets avec progression ---------- */
.tabs{display:flex;gap:var(--s2);flex-wrap:wrap}
.tab{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 16px;border:0;border-radius:var(--r-pill);
  background:var(--tab-bg,rgba(246,242,236,.16));color:inherit;font:var(--ui);font-weight:400;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background-color var(--t-bg) var(--ease)}
.tab:hover{background:rgba(246,242,236,.26)}
.tab[aria-selected="true"],.tab[aria-pressed="true"]{background:var(--ivoire);color:var(--vert);font-weight:500}
.tab__bar{position:absolute;left:16px;right:16px;bottom:5px;height:2px;border-radius:2px;background:rgba(25,43,33,.12);overflow:hidden;opacity:0;transition:opacity var(--t-bg)}
.tab[aria-selected="true"] .tab__bar,.tab[aria-pressed="true"] .tab__bar{opacity:1}
.tab__bar i{display:block;height:100%;width:100%;background:var(--cuivre);transform-origin:left;transform:scaleX(var(--p,0))}
@media (max-width:760px){.tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}.tabs::-webkit-scrollbar{display:none}.tab{flex:none}}
.tabs--light .tab{--tab-bg:var(--surface);color:var(--ink)}
.tabs--light .tab:hover{background:var(--surface-strong)}
.tabs--light .tab[aria-selected="true"],.tabs--light .tab[aria-pressed="true"]{background:var(--vert);color:var(--ivoire)}
.tabs--light .tab__bar{background:rgba(246,242,236,.2)}
.tabs--light .tab__bar i{background:var(--sable)}

/* ---------- Médias ---------- */
.media{position:relative;overflow:hidden;border-radius:var(--r-media);background:var(--surface)}
.media img,.media video{width:100%;height:100%;object-fit:cover}
.media__note{position:absolute;left:16px;bottom:16px;font:var(--small);color:var(--ivoire);background:rgba(25,43,33,.6);padding:4px 10px;border-radius:var(--r-pill)}
.img-load{background:var(--surface);transition:opacity .4s var(--ease)}
.img-load[data-loading]{opacity:0}

/* ---------- Carte (bandeau, média, corps) ---------- */
.card{display:flex;flex-direction:column;border-radius:var(--r-card);background:var(--bg);box-shadow:var(--shadow-card);overflow:hidden;
  transition:box-shadow var(--t-shadow) var(--ease),transform var(--t-shadow) var(--ease)}
.card__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s4) var(--s5);background:var(--surface)}
.card__name{font:var(--h4)}
.card__media{margin:0 var(--s2);border-radius:var(--r-inner);overflow:hidden;aspect-ratio:4/3;background:var(--surface-strong)}
.card__head + .card__media{margin-top:0}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.card:hover .card__media img{transform:scale(1.03)}
.card__body{display:grid;gap:var(--s3);padding:var(--s5);align-content:start;flex:1}
.card__title{font:var(--h4)}
.card__foot{padding:0 var(--s5) var(--s5)}
.card--plain{background:var(--surface);box-shadow:none}
.section--dark .card{background:var(--dk-surface)}

/* Carte photo pleine */
.photo-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:440px;border-radius:var(--r-card);overflow:hidden;color:var(--ivoire);isolation:isolate;background:var(--vert)}
.photo-card > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s var(--ease)}
.photo-card::before{content:"";position:absolute;inset:0;background:var(--scrim);z-index:-1}
.photo-card:hover > img{transform:scale(1.03)}
.photo-card__body{display:grid;gap:var(--s3);padding:var(--s6);justify-items:start}
.photo-card__title{font:var(--h3);color:var(--ivoire)}
.photo-card__text{font:var(--body);color:rgba(246,242,236,.86);max-width:28em}
@media (max-width:760px){.photo-card{min-height:380px}.photo-card__body{padding:var(--s5)}.photo-card__title{font:var(--h3-m)}}

/* ---------- Carrousel ---------- */
.carousel{position:relative}
.carousel__track{display:grid;grid-auto-flow:column;grid-auto-columns:var(--item,calc((100% - 2 * var(--gap)) / 3));gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track > *{scroll-snap-align:start}
.carousel__nav{display:flex;gap:var(--s2)}
@media (max-width:900px){.carousel__track{--item:82%}}
@media (prefers-reduced-motion:reduce){.carousel__track{scroll-behavior:auto}}

/* Cartes empilées et collantes sur mobile */
@media (max-width:760px){
  .stack{display:grid;gap:var(--s4)}
  .stack > *{position:sticky;top:calc(var(--nav-h) + var(--stack-top,24px))}
  .stack > *:nth-child(1){--stack-top:16px}
  .stack > *:nth-child(2){--stack-top:36px}
  .stack > *:nth-child(3){--stack-top:56px}
  .stack > *:nth-child(4){--stack-top:76px}
}

/* ---------- Démonstration minutée (interface dessinée) ---------- */
.demo{position:relative;border-radius:var(--r-card);background:var(--dk-surface);color:var(--dk-ink);padding:var(--s5);box-shadow:0 0 0 1px var(--dk-ring);overflow:hidden}
.demo__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s5)}
.demo__title{font:var(--ui)}
.demo__status{font:var(--small);color:var(--dk-ink-2);display:inline-flex;align-items:center;gap:8px}
.demo__status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dk-ink-2);transition:background-color var(--t-bg)}
.demo.is-done .demo__status::before{background:var(--sable)}
.demo__rows{display:grid;gap:var(--s2);list-style:none;margin:0;padding:0}
.demo__row{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:var(--s3);padding:12px 14px;border-radius:var(--r-inner);background:rgba(246,242,236,.05);box-shadow:inset 0 0 0 1px var(--dk-ring);
  opacity:.35;transition:opacity .4s var(--ease),background-color .4s var(--ease)}
.demo__row.is-on{opacity:1}
.demo__row.is-active{background:rgba(246,242,236,.1)}
.demo__check{width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--dk-ring);display:grid;place-items:center;transition:background-color .3s var(--ease)}
.demo__check svg{width:14px;height:14px;opacity:0;transform:scale(.6);transition:opacity .25s,transform .25s var(--ease);color:var(--vert)}
.demo__row.is-done .demo__check{background:var(--sable);box-shadow:none}
.demo__row.is-done .demo__check svg{opacity:1;transform:none}
.demo__label{font:var(--body);color:var(--dk-ink)}
.demo__meta{font:var(--small);color:var(--dk-ink-2)}
.demo__typing{min-height:24px;font:var(--body);color:var(--dk-ink)}
.demo__typing::after{content:"";display:inline-block;width:2px;height:18px;margin-left:2px;vertical-align:-3px;background:var(--sable);animation:caret 1s steps(1) infinite}
.demo.is-done .demo__typing::after{display:none}
@keyframes caret{50%{opacity:0}}
.demo__result{position:relative;margin-top:var(--s4);display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:14px 16px;border-radius:var(--r-inner);background:var(--ivoire);color:var(--vert);
  opacity:0;transform:translateY(12px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.demo.is-done .demo__result{opacity:1;transform:none}
.demo__result .btn{--btn-bg:var(--vert);--btn-fg:var(--ivoire);--btn-ring:transparent}
.demo__replay{visibility:hidden;opacity:0;transition:opacity var(--t-bg)}
.demo.is-done .demo__replay{visibility:visible;opacity:1}

/* ---------- Points de confiance : filet à gauche, apparition une à une ---------- */
.trust{list-style:none;margin:0;padding:0;display:grid;gap:var(--s6)}
.trust__item{padding-left:var(--s5);box-shadow:inset 1px 0 0 var(--ring-strong);display:grid;gap:var(--s2);transition:opacity .5s var(--ease),transform .5s var(--ease),box-shadow .5s}
.trust__item.is-on{box-shadow:inset 2px 0 0 var(--accent)}
.js .trust__item:not(.is-in){opacity:.35;transform:translateY(6px)}
.trust__title{font:var(--h4)}

/* ---------- Accordéon ---------- */
.acc{border-radius:var(--r-card);background:var(--bg);box-shadow:var(--shadow-card);overflow:hidden}
.acc details{box-shadow:0 1px 0 var(--ring)}
.acc details:last-child{box-shadow:none}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);padding:20px var(--s5);font:var(--h4);font-weight:400;cursor:pointer;list-style:none;transition:background-color var(--t-bg)}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{background:var(--surface)}
.acc summary .plus{flex:none;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--ring-strong);display:grid;place-items:center;transition:transform var(--t-shadow) var(--ease),background-color var(--t-bg)}
.acc details[open] summary .plus{transform:rotate(45deg);background:var(--surface)}
.acc .acc__body{padding:0 var(--s5) var(--s5);color:var(--ink-2);max-width:44em}

/* ---------- Formulaire ---------- */
.form{display:grid;gap:var(--s4)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media (max-width:760px){.form__row{grid-template-columns:1fr}}
.field{display:grid;gap:6px}
.field label,.field legend{font:var(--small);font-weight:500;color:var(--ink)}
.input,.select,.textarea{width:100%;min-height:48px;padding:12px 16px;border:0;border-radius:var(--r-field);background:var(--bg);color:var(--ink);font:var(--body);
  box-shadow:inset 0 0 0 1px var(--ink-3);transition:box-shadow var(--t-shadow) var(--ease);appearance:none}
.textarea{min-height:120px;resize:vertical}
.select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23192B21' stroke-width='1.6'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
.input::placeholder,.textarea::placeholder{color:var(--ink-2)}
.input:hover,.select:hover,.textarea:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.input:focus,.select:focus,.textarea:focus{outline:0;box-shadow:inset 0 0 0 2px var(--accent)}
.field.is-invalid .input,.field.is-invalid .select{box-shadow:inset 0 0 0 2px var(--cuivre-texte)}
.field__error{font:var(--small);color:var(--cuivre-texte);display:none}
.field.is-invalid .field__error{display:block}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--ink-3);font:var(--ui);font-weight:400;transition:background-color var(--t-bg),color var(--t-bg),box-shadow var(--t-bg)}
.chip input:checked + span{background:var(--vert);color:var(--ivoire);box-shadow:none}
.chip input:focus-visible + span{outline:2px solid var(--accent);outline-offset:3px}
.check{display:flex;gap:var(--s3);align-items:flex-start;font:var(--small);color:var(--ink-2)}
.check input{width:20px;height:20px;margin:0;accent-color:var(--vert);flex:none}
.form__done{display:none;border-radius:var(--r-card);background:var(--surface);padding:var(--s6);gap:var(--s3)}
.form.is-sent > :not(.form__done){display:none}
.form.is-sent .form__done{display:grid}

/* ---------- Points sur photo (studio) ---------- */
.hotspot{position:absolute;transform:translate(-50%,-50%);width:36px;height:36px;border:0;border-radius:50%;background:var(--ivoire);color:var(--vert);box-shadow:0 0 0 6px rgba(246,242,236,.32);display:grid;place-items:center;cursor:pointer;font:var(--small);font-weight:500;
  transition:transform var(--t-press) var(--ease),background-color var(--t-bg),box-shadow var(--t-shadow)}
.hotspot:hover{transform:translate(-50%,-50%) scale(1.08)}
.hotspot[aria-pressed="true"]{background:var(--vert);color:var(--ivoire);box-shadow:0 0 0 6px rgba(25,43,33,.25)}

/* ---------- Pied de page ---------- */
.footer{background:var(--vert);color:var(--dk-ink-2);padding-block:var(--s9) var(--s6)}
.footer a{text-decoration:none;color:var(--dk-ink)}
.footer a:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- Réduction des animations ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .js .trust__item:not(.is-in){opacity:1;transform:none}
  .card:hover .card__media img,.photo-card:hover > img{transform:none}
}