/* ==========================================================================
   Sami's Barber - Lillebonne
   Feuille unique. Cascade pilotee par @layer, tokens issus de DA.md.
   ========================================================================== */

@layer reset, base, layout, composants, utilitaires;

/* Polices auto-hebergees, sous-ensemble latin uniquement. */
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('../fonts/bricolage-800.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/manrope-400.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/manrope-700.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/plexmono-400.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/plexmono-600.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- tokens */
:root{
  /* couleurs extraites du logo et des photos du salon (voir DA.md) */
  --noir-salon:#131417;
  --noir-surface:#191A1E;
  --noir-profond:#0D0E10;
  --creme:#FCFBF9;
  --or:#D2AB5C;
  --or-clair:#E0BE77;
  --vert:#7FA845;
  --bois:#A69274;

  --txt-2:#B9B6AE;
  --txt-3:#8B887F;

  --trait:rgba(252,251,249,.11);
  --trait-fort:rgba(252,251,249,.20);
  --trait-or:rgba(210,171,92,.32);

  /* typographie */
  --f-display:'Bricolage Grotesque','Arial Narrow',sans-serif;
  --f-body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Consolas,monospace;

  --t-h1:clamp(2.5rem,6.6vw,4.25rem);
  --t-h2:clamp(2rem,6.4vw,3.75rem);
  --t-h3:clamp(1.375rem,3.4vw,1.875rem);
  --t-corps:clamp(1rem,.965rem + .18vw,1.125rem);
  --t-lead:clamp(1.0625rem,1rem + .42vw,1.25rem);
  --t-meta:.8125rem;

  /* rythme */
  --gouttiere:clamp(1.25rem,4vw,2.5rem);
  --large:1240px;
  --section:clamp(3.75rem,7.5vw,6.25rem);
  --rayon:2px;               /* rayon unique, verrouille */
  --entree:cubic-bezier(.16,1,.3,1);

  --h-entete:64px;
}
@media (min-width:900px){ :root{ --h-entete:76px; } }

/* ----------------------------------------------------------------- reset */
@layer reset{
  *,*::before,*::after{box-sizing:border-box}
  *{margin:0}
  html{-webkit-text-size-adjust:100%}
  body{min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased}
  img,picture,svg{display:block;max-width:100%}
  input,button,textarea,select{font:inherit;color:inherit}
  ul,ol{list-style:none;padding:0}
  a{color:inherit;text-decoration:none}
  table{border-collapse:collapse;width:100%}
  :where(h1,h2,h3,h4){text-wrap:balance}
  p{text-wrap:pretty}
}

/* ------------------------------------------------------------------ base */
@layer base{
  html{
    scroll-behavior:smooth;
    scroll-padding-top:calc(var(--h-entete) + 1rem);
    scroll-padding-bottom:6rem;      /* hauteur de la barre collante mobile */
  }
  @media (min-width:768px){ html{ scroll-padding-bottom:2rem; } }
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

  body{
    background:var(--noir-salon);
    color:var(--creme);
    font-family:var(--f-body);
    font-size:var(--t-corps);
    overflow-x:hidden;
    position:relative;
  }

  /* grain tres fin, fixe et hors flux : casse l'aplat du noir sans jamais
     repeindre au defilement (regle de cout DOM : jamais sur un conteneur
     qui scrolle). Invisible a l'oeil, juste moins plat. */
  body::before{
    content:"";
    position:fixed;inset:0;z-index:90;pointer-events:none;
    opacity:.035;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  }

  h1,h2,h3{
    font-family:var(--f-display);
    font-weight:800;
    line-height:1.05;
    letter-spacing:-.025em;
  }
  h1{font-size:var(--t-h1)}
  h2{font-size:var(--t-h2)}
  h3{font-size:var(--t-h3);letter-spacing:-.015em}

  ::selection{background:var(--or);color:var(--noir-salon)}

  :focus-visible{
    outline:2px solid var(--or-clair);
    outline-offset:3px;
    border-radius:var(--rayon);
    box-shadow:0 0 0 3px rgba(13,14,16,.85);
  }
  :focus:not(:focus-visible){outline:none}

  .saut-contenu{
    position:absolute;left:var(--gouttiere);top:-100px;z-index:100;
    background:var(--or);color:var(--noir-salon);
    padding:.7rem 1.1rem;border-radius:var(--rayon);font-weight:700;
    transition:top .18s var(--entree);
  }
  .saut-contenu:focus{top:.75rem}
}

/* ---------------------------------------------------------------- layout */
@layer layout{
  .enveloppe{
    width:100%;max-width:var(--large);margin-inline:auto;
    padding-inline:var(--gouttiere);
  }
  .section{padding-block:var(--section)}
  .section--serre{padding-block:calc(var(--section) * .62)}

  .grille{display:grid;gap:var(--gouttiere)}
  @media (min-width:900px){
    .grille--12{grid-template-columns:repeat(12,1fr)}
  }

  .tete-section{max-width:60ch;margin-bottom:clamp(2.25rem,5vw,3.5rem)}
  .tete-section p{
    color:var(--txt-2);font-size:var(--t-lead);
    margin-top:1.1rem;max-width:56ch;
  }
}

/* ----------------------------------------------------- composants communs */
@layer composants{

  /* --- surtitre : rationne, 2 sur tout le site --------------------------- */
  .surtitre{
    display:block;
    font-family:var(--f-mono);font-size:var(--t-meta);font-weight:400;
    letter-spacing:.16em;text-transform:uppercase;color:var(--or);
    margin-bottom:1rem;
  }

  /* --- hexagone, signature du site -------------------------------------- */
  .hexa{
    width:7px;height:8px;flex:none;background:var(--or);
    clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  }
  .separateur{
    display:flex;align-items:center;justify-content:center;gap:1rem;
    padding-block:clamp(2.5rem,7vw,4.5rem);
  }
  .separateur::before,.separateur::after{
    content:"";height:1px;flex:1 1 auto;max-width:min(28vw,240px);
    background:linear-gradient(90deg,transparent,var(--trait-or));
  }
  .separateur::after{background:linear-gradient(90deg,var(--trait-or),transparent)}
  .separateur svg{width:26px;height:30px;flex:none;color:var(--or)}

  /* --- boutons ----------------------------------------------------------- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
    min-height:52px;padding:.9rem 1.5rem;
    border:1px solid transparent;border-radius:var(--rayon);
    font-weight:700;font-size:1rem;letter-spacing:.005em;
    white-space:nowrap;cursor:pointer;
    transition:background-color .22s var(--entree),border-color .22s var(--entree),
               color .22s var(--entree),transform .18s var(--entree),
               box-shadow .22s var(--entree);
  }
  .btn svg{width:18px;height:18px;flex:none}
  .btn:active{transform:translateY(1px) scale(.98)}

  .btn--or{background:var(--or);color:var(--noir-salon)}      /* 8,53:1 */
  .btn--or:hover{
    background:var(--or-clair);transform:translateY(-2px);
    box-shadow:0 10px 24px -8px rgba(210,171,92,.45);
  }

  .btn--fantome{
    background:rgba(19,20,23,.55);color:var(--creme);
    border-color:var(--trait-fort);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  }
  .btn--fantome:hover{
    border-color:var(--or);color:var(--or-clair);transform:translateY(-2px);
  }

  /* --- badge ouvert / ferme (etat semantique reel) ----------------------- */
  .etat{
    display:inline-flex;align-items:center;gap:.5rem;
    font-family:var(--f-mono);font-size:.75rem;letter-spacing:.06em;
    text-transform:uppercase;color:var(--txt-2);white-space:nowrap;
  }
  .etat__long{display:none}
  @media (min-width:1180px){
    .etat__long{display:inline}
    .entete__etat .etat__court{display:none}
  }
  .fiche .etat__long{display:inline}
  .fiche .etat__court,.menu .etat__court{display:none}
  .menu .etat__long{display:inline}
  .etat__point{
    width:8px;height:8px;border-radius:50%;flex:none;
    border:1.5px solid currentColor;background:transparent;
  }
  .etat[data-ouvert="oui"]{color:var(--vert)}
  .etat[data-ouvert="oui"] .etat__point{background:currentColor}

  /* --- entete ------------------------------------------------------------ */
  .entete{
    position:fixed;inset:0 0 auto;z-index:50;
    height:var(--h-entete);
    display:flex;align-items:center;
    transition:background-color .3s var(--entree),border-color .3s var(--entree);
    border-bottom:1px solid transparent;
  }
  .entete[data-fige="oui"]{
    background:rgba(13,14,16,.90);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-bottom-color:var(--trait);
  }
  .entete__interieur{
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    width:100%;max-width:var(--large);margin-inline:auto;
    padding-inline:var(--gouttiere);
  }
  .entete__logo img{height:26px;width:auto}
  @media (min-width:900px){ .entete__logo img{height:31px} }

  .nav{display:none}
  @media (min-width:1024px){
    .nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2rem)}
    .nav a{
      font-size:.875rem;font-weight:600;color:var(--txt-2);
      padding-block:.35rem;position:relative;
      transition:color .2s var(--entree);
    }
    .nav a::after{
      content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
      background:var(--or);transform:scaleX(0);transform-origin:left;
      transition:transform .26s var(--entree);
    }
    .nav a:hover{color:var(--creme)}
    .nav a:hover::after{transform:scaleX(1)}
  }
  .entete__actions{display:flex;align-items:center;gap:.75rem}
  .entete__etat{display:none}
  @media (min-width:640px){ .entete__etat{display:inline-flex} }
  .entete .btn{min-height:44px;padding:.55rem 1.05rem;font-size:.9375rem}
  .entete__appel{display:none}
  @media (min-width:1024px){ .entete__appel{display:inline-flex} }

  .burger{
    display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;background:none;border:1px solid var(--trait-fort);
    border-radius:var(--rayon);cursor:pointer;
  }
  .burger svg{width:20px;height:20px}
  @media (min-width:1024px){ .burger{display:none} }

  /* menu mobile plein ecran */
  .menu{
    position:fixed;inset:0;z-index:60;
    background:var(--noir-profond);
    display:flex;flex-direction:column;
    padding:var(--gouttiere);
    visibility:hidden;opacity:0;
    transition:opacity .28s var(--entree),visibility 0s linear .28s;
  }
  .menu[data-ouvert="oui"]{
    visibility:visible;opacity:1;
    transition:opacity .28s var(--entree),visibility 0s linear 0s;
  }
  .menu__haut{display:flex;justify-content:space-between;align-items:center;
              min-height:calc(var(--h-entete) - 2 * var(--gouttiere) + 44px)}
  .menu__liens{
    display:flex;flex-direction:column;gap:.35rem;
    margin-top:clamp(1.5rem,6vh,3rem);
  }
  .menu__liens a{
    font-family:var(--f-display);font-weight:800;letter-spacing:-.02em;
    font-size:clamp(1.75rem,8vw,2.5rem);line-height:1.15;
    padding-block:.35rem;border-bottom:1px solid var(--trait);
  }
  .menu__liens a:hover{color:var(--or-clair)}
  .menu__pied{margin-top:auto;display:grid;gap:.75rem;padding-top:2rem}

  /* --- hero -------------------------------------------------------------- */
  .hero{
    position:relative;isolation:isolate;
    min-height:100dvh;
    display:flex;align-items:flex-end;
    padding-top:calc(var(--h-entete) + 2rem);
    padding-bottom:clamp(5.5rem,14vh,8rem);
    overflow:hidden;
  }
  .hero__fond{position:absolute;inset:0;z-index:-3}
  .hero__fond picture{display:block;width:100%;height:100%}
  .hero__fond img{
    width:100%;height:100%;object-fit:cover;object-position:52% 58%;
    transform:scale(1.06);
  }
  @media (min-width:768px){ .hero__fond img{object-position:50% 46%} }
  /* respiration tres lente du fond, comme un plan qui tient : jamais percu
     comme une animation, seulement comme une image qui n'est pas figee */
  @media (prefers-reduced-motion:no-preference){
    .hero__fond img{animation:respiration-fond 22s ease-in-out infinite alternate}
  }
  @keyframes respiration-fond{
    from{transform:scale(1.06)}
    to{transform:scale(1.12)}
  }

  .hero__voile{
    position:absolute;inset:0;z-index:-2;
    background:
      linear-gradient(180deg,rgba(13,14,16,.82) 0%,rgba(13,14,16,.30) 26%,rgba(13,14,16,0) 44%),
      linear-gradient(0deg,rgba(13,14,16,.96) 6%,rgba(13,14,16,.72) 34%,rgba(13,14,16,.10) 68%),
      linear-gradient(90deg,rgba(13,14,16,.70) 0%,rgba(13,14,16,.10) 62%);
  }
  /* la voute hexagonale : le plafond LED du salon, en trait lumineux */
  .hero__voute{
    position:absolute;top:0;left:0;right:0;z-index:-1;
    width:100%;height:clamp(150px,30vh,300px);
    object-fit:cover;object-position:center top;
    opacity:.85;pointer-events:none;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 42%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 42%,transparent 100%);
  }

  .hero__contenu{position:relative;max-width:min(100%,52rem)}
  .hero h1{margin-bottom:1.25rem}
  .hero h1 .h1-sur{
    display:block;
    font-family:var(--f-mono);font-weight:400;
    font-size:clamp(.75rem,2.6vw,.9375rem);
    letter-spacing:.2em;text-transform:uppercase;
    color:var(--or);margin-bottom:1.1rem;line-height:1.4;
  }
  .hero__lead{
    color:var(--txt-2);font-size:var(--t-lead);max-width:44ch;
    margin-bottom:2rem;
  }
  .hero__actions{display:flex;flex-wrap:wrap;gap:.75rem}
  .hero__actions .btn{flex:1 1 auto;min-width:min(100%,15rem)}
  @media (min-width:560px){ .hero__actions .btn{flex:0 0 auto;min-width:0} }

  /* --- entree du hero : le texte arrive apres la voute, en cascade -------- */
  @media (prefers-reduced-motion:no-preference){
    .js .hero h1 .h1-sur,
    .js .hero h1,
    .js .hero__lead,
    .js .hero__actions{
      opacity:0;
      animation:entree-hero .8s var(--entree) both;
    }
    .js .hero h1 .h1-sur{animation-delay:.15s}
    .js .hero h1{animation-delay:.28s}
    .js .hero__lead{animation-delay:.46s}
    .js .hero__actions{animation-delay:.62s}
  }
  @keyframes entree-hero{
    from{opacity:0;transform:translateY(16px)}
    to{opacity:1;transform:translateY(0)}
  }

  /* --- bandeau preuve sociale -------------------------------------------- */
  .preuve{
    border-block:1px solid var(--trait);
    background:var(--noir-surface);
  }
  .preuve__grille{
    display:grid;gap:clamp(1.75rem,5vw,3rem);
    padding-block:clamp(2.25rem,6vw,3.25rem);
  }
  @media (min-width:820px){
    .preuve__grille{grid-template-columns:auto 1fr;align-items:center;
                    gap:clamp(2.5rem,6vw,4.5rem)}
  }
  .note{display:flex;align-items:baseline;gap:.9rem}
  .note__chiffre{
    font-family:var(--f-display);font-weight:800;
    font-size:clamp(3.5rem,13vw,5rem);line-height:.8;color:var(--or);
    font-variant-numeric:tabular-nums;
  }
  .note__detail{display:grid;gap:.3rem}
  .note__etoiles{display:flex;gap:3px;color:var(--or)}
  .note__etoiles svg{width:15px;height:15px}
  .note__source{
    font-family:var(--f-mono);font-size:var(--t-meta);color:var(--txt-2);
  }
  .mots{display:grid;gap:.85rem}
  @media (min-width:560px){ .mots{grid-template-columns:repeat(3,1fr);gap:1.5rem} }
  .mots li{display:flex;align-items:baseline;gap:.65rem;color:var(--txt-2);
           font-size:.9375rem;line-height:1.45}
  .mots strong{color:var(--creme);font-weight:700;display:block}
  .mots .hexa{transform:translateY(-2px)}

  /* --- le salon : composition asymetrique --------------------------------- */
  .salon__large{
    margin-bottom:var(--gouttiere);
    overflow:hidden;border-radius:var(--rayon);
    box-shadow:0 0 0 1px transparent;
    transition:box-shadow .4s var(--entree);
  }
  .salon__duo figure{
    margin:0;overflow:hidden;border-radius:var(--rayon);
    box-shadow:0 0 0 1px transparent;
    transition:box-shadow .4s var(--entree);
  }
  .salon__large img,.salon__duo img{
    display:block;width:100%;height:auto;
    transform:scale(1.14);
  }
  .salon__large:hover,.salon__duo figure:hover{
    box-shadow:0 0 0 1px var(--trait-or),0 24px 56px -20px rgba(210,171,92,.45);
  }
  .salon__duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--gouttiere)}
  @media (min-width:900px){
    .salon__corps{grid-column:1 / span 4;align-self:end}
    .salon__large{grid-column:5 / span 8;margin-bottom:0}
    .salon__duo{grid-column:3 / span 9;margin-top:calc(var(--gouttiere) * 1.6);
                grid-template-columns:11fr 9fr;gap:calc(var(--gouttiere) * 1.4)}
    .salon__duo figure:first-child{translate:0 -4.5rem}
    .salon__duo figure:last-child{translate:0 2.5rem}
  }
  .legende{
    font-family:var(--f-mono);font-size:var(--t-meta);color:var(--txt-3);
    margin-top:.7rem;line-height:1.5;
  }

  /* --- prestations : le panneau tarifaire du salon ------------------------- */
  .tarifs{display:grid;gap:clamp(2.25rem,5vw,3rem)}
  @media (min-width:900px){
    .tarifs{grid-template-columns:5fr 4fr 3fr;gap:clamp(2rem,3.5vw,3.25rem)}
  }
  .tarifs__groupe h3{
    font-size:1.125rem;letter-spacing:.05em;color:var(--creme);
    padding-bottom:.9rem;margin-bottom:.35rem;
    border-bottom:1px solid var(--trait-or);
  }
  .ligne{
    display:flex;flex-wrap:wrap;align-items:baseline;gap:.7rem;
    padding-block:.85rem;
  }
  .ligne + .ligne{border-top:1px solid var(--trait)}
  .ligne__nom{flex:0 1 auto;color:var(--creme)}
  .ligne__fil{
    flex:1 1 auto;min-width:1rem;align-self:center;
    border-bottom:1px dotted rgba(252,251,249,.22);
    transform:translateY(-.15em);
  }
  .ligne__prix{
    flex:none;font-family:var(--f-mono);font-weight:600;
    font-size:1.0625rem;color:var(--or);font-variant-numeric:tabular-nums;
  }
  .ligne__note{
    flex:1 0 100%;order:3;font-size:.8125rem;color:var(--txt-3);
    margin-top:.15rem;line-height:1.45;
  }
  .tarifs__pied{
    margin-top:clamp(2rem,4vw,2.75rem);padding-top:1.5rem;
    border-top:1px solid var(--trait);
    display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;
    justify-content:space-between;
  }
  .tarifs__pied p{font-family:var(--f-mono);font-size:var(--t-meta);color:var(--txt-3)}
  .tarifs__pied .btn{flex:1 1 auto}
  @media (min-width:560px){ .tarifs__pied .btn{flex:0 0 auto} }

  /* mise en avant de la technique signature */
  .technique{
    border:1px solid var(--trait-or);border-radius:var(--rayon);
    background:linear-gradient(160deg,rgba(210,171,92,.09),rgba(210,171,92,0) 62%);
    padding:clamp(1.5rem,4vw,2.25rem);
    display:grid;gap:.9rem;
  }
  .technique h3{color:var(--or-clair)}
  .technique p{color:var(--txt-2);max-width:52ch}

  /* --- le travail : deux pieces a conviction ------------------------------ */
  .travail{display:grid;gap:var(--gouttiere)}
  @media (min-width:700px){
    .travail{grid-template-columns:7fr 5fr;align-items:start}
    .piece:first-child{translate:0 3rem}
    .piece:last-child{translate:0 -3rem}
  }
  .piece{position:relative;margin:0}
  .piece__btn{
    display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;
    border-radius:var(--rayon);overflow:hidden;
    box-shadow:0 0 0 1px transparent;
    transition:box-shadow .4s var(--entree);
  }
  .piece__btn:hover,.piece__btn:focus-visible{
    box-shadow:0 0 0 1px var(--trait-or),0 20px 48px -20px rgba(210,171,92,.4);
  }
  .piece__btn img{width:100%;height:auto;transition:transform .5s var(--entree)}
  .piece__btn:hover img{transform:scale(1.028)}

  /* --- enfants ------------------------------------------------------------ */
  .enfants{
    display:grid;gap:clamp(2rem,5vw,3.5rem);
  }
  @media (min-width:900px){
    .enfants{grid-template-columns:6fr 5fr;gap:clamp(3rem,7vw,6rem);align-items:start}
  }
  .paliers{display:grid;gap:0;border-top:1px solid var(--trait-or)}
  .palier{
    display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
    padding-block:1.05rem;border-bottom:1px solid var(--trait);
  }
  .palier__age{font-family:var(--f-mono);font-size:.9375rem;color:var(--txt-2)}
  .palier__prix{
    font-family:var(--f-display);font-weight:800;font-size:1.75rem;
    color:var(--or);line-height:1;font-variant-numeric:tabular-nums;
  }

  /* --- avis : decales, largeurs inegales ---------------------------------- */
  .avis{display:grid;gap:clamp(1.5rem,4vw,2.25rem)}
  @media (min-width:900px){
    .avis{grid-template-columns:repeat(12,1fr)}
    .avis li:nth-child(1){grid-column:1 / span 6}
    .avis li:nth-child(2){grid-column:8 / span 5;translate:0 2.25rem}
    .avis li:nth-child(3){grid-column:3 / span 6;translate:0 .75rem}
  }
  .avis blockquote{
    border-left:2px solid var(--or);padding-left:clamp(1.1rem,3vw,1.75rem);
  }
  .avis blockquote p{
    font-size:var(--t-lead);line-height:1.5;color:var(--creme);
  }
  .avis figcaption,.avis__meta{
    display:flex;align-items:center;gap:.6rem;margin-top:1rem;
    font-family:var(--f-mono);font-size:var(--t-meta);color:var(--txt-3);
  }
  .avis__note{color:var(--or);font-weight:600}
  .avis__mention{
    margin-top:clamp(2.5rem,6vw,3.5rem);
    font-family:var(--f-mono);font-size:var(--t-meta);color:var(--txt-3);
    max-width:60ch;line-height:1.6;
  }

  /* --- acces -------------------------------------------------------------- */
  .acces{display:grid;gap:clamp(2.5rem,6vw,4rem)}
  @media (min-width:900px){ .acces{grid-template-columns:7fr 5fr;gap:clamp(3rem,6vw,5rem)} }

  .horaires{width:100%;font-family:var(--f-mono);font-size:.9375rem}
  .horaires caption{
    text-align:left;font-family:var(--f-body);font-weight:700;
    font-size:1.0625rem;padding-bottom:1rem;color:var(--creme);
  }
  .horaires th,.horaires td{
    text-align:left;padding:.8rem .5rem;border-bottom:1px solid var(--trait);
    vertical-align:baseline;
  }
  .horaires th{font-weight:400;color:var(--txt-2);width:8.5rem}
  .horaires td{color:var(--creme);font-variant-numeric:tabular-nums}
  .horaires .ferme{color:var(--txt-3)}
  .horaires tr[data-aujourdhui="oui"] th{color:var(--or);font-weight:600}
  .horaires tr[data-aujourdhui="oui"] td{color:var(--or)}
  .horaires__note{
    font-family:var(--f-mono);font-size:var(--t-meta);color:var(--txt-3);
    margin-top:1rem;line-height:1.55;
  }

  .fiche{display:grid;gap:1.75rem;align-content:start}
  .fiche__bloc{display:grid;gap:.45rem}
  .fiche__cle{
    font-family:var(--f-mono);font-size:var(--t-meta);letter-spacing:.12em;
    text-transform:uppercase;color:var(--txt-3);
  }
  .fiche__val{font-size:1.0625rem;line-height:1.45}
  .fiche__val a:hover{color:var(--or-clair)}
  .fiche__gps{font-family:var(--f-mono);font-size:.875rem;color:var(--txt-2)}
  .fiche__actions{display:grid;gap:.75rem}
  @media (min-width:480px){ .fiche__actions{grid-template-columns:1fr 1fr} }

  .attente{
    border:1px solid var(--trait-or);border-radius:var(--rayon);
    padding:clamp(1.25rem,3.5vw,1.75rem);
    background:linear-gradient(160deg,rgba(210,171,92,.08),transparent 70%);
  }
  .attente h3{font-size:1.125rem;color:var(--or-clair);margin-bottom:.6rem}
  .attente p{color:var(--txt-2);font-size:.9375rem;line-height:1.6}

  /* --- pied de page -------------------------------------------------------- */
  .pied{
    border-top:1px solid var(--trait);
    background:var(--noir-profond);
    /* le bas degage la barre collante mobile (48px + marges + safe-area) */
    padding-block:clamp(3rem,7vw,4.5rem);
    padding-bottom:calc(7rem + env(safe-area-inset-bottom));
  }
  @media (min-width:768px){
    .pied{ padding-bottom:clamp(3rem,7vw,4.5rem); }
  }
  .pied__grille{display:grid;gap:2.5rem}
  @media (min-width:768px){
    .pied__grille{grid-template-columns:1.4fr 1fr 1fr;gap:clamp(2rem,5vw,4rem)}
  }
  .pied__logo img{height:34px;width:auto;margin-bottom:1.1rem}
  .pied p,.pied li{color:var(--txt-3);font-size:.9375rem;line-height:1.65}
  .pied h3{
    font-family:var(--f-mono);font-size:var(--t-meta);line-height:1.4;
    letter-spacing:.12em;text-transform:uppercase;
    color:var(--creme);font-weight:400;margin-bottom:.9rem;
  }
  .pied a:hover{color:var(--or-clair)}
  .pied__horaires{font-family:var(--f-mono);font-size:.8125rem}
  .pied__horaires span{display:block;color:var(--txt-2)}
  .pied__horaires li + li{margin-top:.55rem}
  .pied__bas{
    margin-top:clamp(2.5rem,6vw,3.5rem);padding-top:1.5rem;
    border-top:1px solid var(--trait);
    display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;justify-content:space-between;
    font-size:.8125rem;color:var(--txt-3);
  }
  .pied__bas nav{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem}

  /* --- barre mobile collante ---------------------------------------------- */
  .barre{
    position:fixed;left:0;right:0;bottom:0;z-index:45;
    display:grid;grid-template-columns:1fr 1fr;gap:.5rem;
    padding:.5rem var(--gouttiere) calc(.5rem + env(safe-area-inset-bottom));
    background:rgba(13,14,16,.94);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-top:1px solid var(--trait);
  }
  .barre .btn{min-height:48px;font-size:.9375rem;padding-inline:.75rem}
  @media (min-width:768px){ .barre{display:none} }

  /* --- visionneuse -------------------------------------------------------- */
  .visio{
    position:fixed;inset:0;z-index:80;
    display:grid;place-items:center;padding:var(--gouttiere);
    background:rgba(10,11,13,.94);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    visibility:hidden;opacity:0;
    transition:opacity .25s var(--entree),visibility 0s linear .25s;
  }
  .visio[data-ouvert="oui"]{
    visibility:visible;opacity:1;
    transition:opacity .25s var(--entree),visibility 0s linear 0s;
  }
  .visio img{
    max-width:min(100%,760px);max-height:88vh;width:auto;height:auto;
    border-radius:var(--rayon);
  }
  .visio__fermer{
    position:absolute;top:var(--gouttiere);right:var(--gouttiere);
    width:48px;height:48px;display:grid;place-items:center;
    background:rgba(25,26,30,.9);border:1px solid var(--trait-fort);
    border-radius:var(--rayon);cursor:pointer;
  }
  .visio__fermer svg{width:20px;height:20px}
  .visio__legende{
    position:absolute;left:var(--gouttiere);right:var(--gouttiere);
    bottom:calc(var(--gouttiere) + env(safe-area-inset-bottom));
    text-align:center;font-family:var(--f-mono);font-size:var(--t-meta);
    color:var(--txt-2);
  }

  /* --- pages legales ------------------------------------------------------- */
  .prose{max-width:72ch}
  .prose h2{
    font-size:clamp(1.5rem,4vw,2rem);margin-top:clamp(2.5rem,6vw,3.5rem);
    margin-bottom:1rem;color:var(--creme);
  }
  .prose h2:first-of-type{margin-top:0}
  .prose h3{
    font-size:1.125rem;margin-top:2rem;margin-bottom:.6rem;
    letter-spacing:.03em;color:var(--or-clair);
  }
  .prose p,.prose li{color:var(--txt-2);margin-bottom:1rem;line-height:1.7}
  .prose ul{display:grid;gap:.25rem;margin-bottom:1.5rem}
  .prose ul li{display:flex;gap:.75rem;align-items:baseline}
  .prose ul li .hexa{transform:translateY(-2px)}
  .prose a{color:var(--or-clair);text-decoration:underline;text-underline-offset:3px}
  .prose dl{display:grid;gap:.85rem;margin-bottom:1.5rem}
  .prose dt{font-family:var(--f-mono);font-size:var(--t-meta);letter-spacing:.1em;
            text-transform:uppercase;color:var(--txt-3)}
  .prose dd{color:var(--creme);margin:0}
  .a-completer{
    display:inline-block;font-family:var(--f-mono);font-size:.75rem;
    letter-spacing:.08em;text-transform:uppercase;
    color:var(--txt-3);border:1px dashed var(--trait-fort);
    border-radius:var(--rayon);padding:.15rem .55rem;
  }
  .entete-page{
    padding-top:calc(var(--h-entete) + clamp(3rem,9vw,6rem));
    padding-bottom:clamp(2rem,5vw,3rem);
  }
  .retour{
    display:inline-flex;align-items:center;gap:.5rem;
    font-family:var(--f-mono);font-size:var(--t-meta);color:var(--txt-2);
    margin-bottom:1.5rem;
  }
  .retour:hover{color:var(--or-clair)}
  .retour svg{width:14px;height:14px}
}

/* ----------------------------------------------------------- utilitaires */
@layer utilitaires{
  .visuellement-cache{
    position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  .sans-scroll{overflow:hidden}
  .fil-or{color:var(--or)}
}

/* ------------------------------------------------- apparitions au scroll */
@media (prefers-reduced-motion:no-preference){
  .js .reveler{
    opacity:0;transform:translateY(42px);
    transition:opacity .85s var(--entree),transform .85s var(--entree);
    transition-delay:var(--retard,0ms);
  }
  .js .reveler[data-vu="oui"]{opacity:1;transform:none}

  /* les titres de section arrivent avec plus de franchise que le reste :
     un vrai depart, pas une derive */
  .js h2.reveler,.js .tete-section.reveler{
    transform:translateY(56px) scale(.97);
  }
  .js h2.reveler[data-vu="oui"],.js .tete-section.reveler[data-vu="oui"]{
    transform:none;
  }

  /* la premiere grande photo du salon entre par un desserrage marque plutot
     que par une translation, pour marquer que c'est un moment different
     des reveles de texte qui l'entourent */
  .js .salon__large.reveler{transform:scale(1.08)}
  .js .salon__large.reveler[data-vu="oui"]{transform:scale(1)}

  /* choreographie : chaque groupe tarifaire et chaque palier enfant arrive
     a son tour plutot que tout le bloc d'un seul mouvement */
  .tarifs__groupe:nth-child(1){--retard:0ms}
  .tarifs__groupe:nth-child(2){--retard:110ms}
  .tarifs__groupe:nth-child(3){--retard:220ms}
}

/* --- derive au defilement : amelioration progressive, zero JS ------------ */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .hero__fond img{
      animation:respiration-fond 22s ease-in-out infinite alternate,
                derive-hero linear;
      animation-timeline:auto,view();
      animation-range:normal,cover 0% cover 100%;
    }
    .salon__large img,.salon__duo img{
      animation:derive-verticale linear;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
  }
}
@keyframes derive-hero{from{translate:0 -4%} to{translate:0 11%}}
@keyframes derive-verticale{from{translate:0 -6%} to{translate:0 6%}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}

@media print{
  .entete,.barre,.menu,.visio,.hero__voute,.separateur{display:none!important}
  body{background:#fff;color:#000}
}