/* ==========================================================================
   LECTURE DA — PHILLIAS 32 · V3 LOCALE · 27/08/2026
   Je lis ceci comme : particuliers, associations et entreprises du Gers ;
   métier événementiel technique ; rassurer, montrer le vrai parc puis faire
   composer une demande ; ton précis et spectaculaire ; page marketing.
   Direction : pupitre lumière / atlas technique. Variance 4 · motion 2 · densité 2.
   Aucune publication : cette couche est une proposition locale de validation.
   ========================================================================== */

body{background:
  radial-gradient(70vw 44vw at 82% -14%,color-mix(in srgb,var(--v3-red) 17%,transparent),transparent 66%),
  radial-gradient(46vw 38vw at -8% 30%,color-mix(in srgb,var(--v3-amber) 7%,transparent),transparent 72%),
  var(--v3-graphite);font-family:var(--texte-f);font-weight:400;letter-spacing:.01em}

h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:-.045em;text-transform:uppercase}
h1{font-size:clamp(3.15rem,7.4vw,6.9rem);line-height:.91}
h2{font-size:clamp(2.35rem,5.3vw,4.7rem);line-height:.94}
h3{letter-spacing:-.025em}
.lead{font-size:clamp(1.05rem,1.45vw,1.25rem);line-height:1.55}
.brille{display:inline;color:var(--v3-ink);-webkit-text-fill-color:currentColor;background:none;
  text-decoration:underline;text-decoration-color:var(--v3-red);text-decoration-thickness:.1em;
  text-underline-offset:.12em}
.sec--clair .brille{color:var(--v3-ink-dark)}
.oeil{color:var(--v3-red-hot);font-weight:600;letter-spacing:.18em}
.oeil::before{width:42px;height:1px;border-radius:0}

/* Lumière contrôlée : un faisceau rouge, une poussière fixe. */
.faisceaux{opacity:.42}
.faisceaux .f1{left:52vw;width:34vw;background:radial-gradient(ellipse at 50% 0,var(--v3-red),transparent 70%)}
.faisceaux .f2,.faisceaux .f3,.faisceaux .f4,.faisceaux .f5,.faisceaux .f6{display:none}
.poussiere{opacity:.17;animation:none!important}
.pulse{background:radial-gradient(48vw 32vh at 78% 0,color-mix(in srgb,var(--v3-red) 12%,transparent),transparent 75%);opacity:.45}
.sec::before{background:radial-gradient(closest-side,color-mix(in srgb,var(--v3-red) 5%,transparent),transparent 78%)}
.sec:nth-of-type(3n)::before,.sec:nth-of-type(3n+2)::before,.sec--clair::before{background:radial-gradient(closest-side,color-mix(in srgb,var(--v3-red) 5%,transparent),transparent 78%)}

/* En-tête technique, compact et mat. */
.nav{background:color-mix(in srgb,var(--v3-graphite-deep) 90%,transparent);border-color:var(--v3-line);backdrop-filter:blur(14px)}
.nav__in{min-height:74px}
.nav__logo img{height:48px}
.nav__liens a{font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.nav__liens a::after{height:1px;background:var(--v3-red)}
.nav__tel{border-radius:var(--v3-radius-small);border-color:var(--v3-line);font-weight:600}
.nav__tel:hover{background:var(--v3-red);border-color:var(--v3-red)}

.btn{border-radius:var(--v3-radius-small);font-weight:600;letter-spacing:.025em;min-height:50px;
  transition:transform var(--v3-motion),background var(--v3-motion),border-color var(--v3-motion)}
.btn--p{background:var(--v3-red);box-shadow:0 14px 34px color-mix(in srgb,var(--v3-red) 30%,transparent)}
.btn--p:hover{background:var(--v3-red-hot);box-shadow:0 18px 42px color-mix(in srgb,var(--v3-red) 38%,transparent)}
.btn--f{background:color-mix(in srgb,var(--v3-surface) 78%,transparent);border-color:var(--v3-line)}

/* Hero : éditorial à gauche, marque intacte dans sa fenêtre à droite. */
.hero{min-height:min(850px,calc(100svh - 74px));display:grid;align-items:center;padding-block:clamp(54px,8vh,96px)}
.hero__fond img{opacity:.2;filter:grayscale(.58) contrast(1.18) saturate(.72);transform:scale(1.035);object-position:25% 45%}
.hero__voile{background:
  linear-gradient(90deg,color-mix(in srgb,var(--v3-graphite-deep) 94%,transparent) 0 46%,color-mix(in srgb,var(--v3-graphite) 55%,transparent) 78%),
  linear-gradient(180deg,color-mix(in srgb,var(--v3-graphite) 55%,transparent),var(--v3-graphite) 96%)}
.hero__in{grid-template-columns:minmax(0,1.14fr) minmax(360px,.86fr);gap:clamp(40px,6vw,92px)}
.hero__txt{position:relative;padding-left:clamp(0px,2vw,28px)}
.hero__txt::before{content:"P32";position:absolute;left:clamp(-72px,-5vw,-42px);top:44%;rotate:-90deg;
  color:var(--v3-muted);font-family:var(--texte-f);font-weight:600;font-size:.68rem;letter-spacing:.42em}
.hero h1{max-width:11.4ch;margin-bottom:28px}
.hero h1 .brille{color:var(--v3-ink)}
.hero .lead{max-width:47ch;color:var(--v3-paper-soft)}
.hero__note{border-radius:var(--v3-radius-small);border-color:color-mix(in srgb,var(--v3-amber) 38%,transparent);
  background:color-mix(in srgb,var(--v3-amber) 8%,transparent);color:var(--v3-amber);letter-spacing:.16em}
.hero__lieu{color:var(--v3-muted);font-weight:600;letter-spacing:.22em}
.hero__anim{border-radius:var(--v3-radius);border-color:var(--v3-line);background:var(--v3-graphite-deep);
  box-shadow:var(--v3-shadow),0 0 0 1px color-mix(in srgb,var(--v3-red) 20%,transparent) inset}
.hero__anim video{inset:0;width:100%;height:100%;max-width:100%;object-fit:cover}
.hero__anim::before{content:"IDENTITÉ / 01";position:absolute;z-index:2;left:16px;top:14px;
  color:var(--v3-muted);font-size:.63rem;font-weight:600;letter-spacing:.17em}
.hero__anim::after{background:linear-gradient(180deg,transparent 64%,color-mix(in srgb,var(--v3-red) 22%,transparent))}

/* Preuves et sections : rythme d'atlas. */
.preuves{background:var(--v3-graphite-deep);border-color:var(--v3-line);padding:0}
.preuves__g{gap:0}
.preuve{padding:30px 26px;border-right:1px solid var(--v3-line)}
.preuve:last-child{border-right:0}
.preuve b,.preuve:nth-child(n) b{color:var(--v3-ink);font-size:clamp(1.55rem,2.7vw,2.3rem)}
.preuve span{color:var(--v3-muted);font-size:.82rem}
.sec{padding-block:clamp(78px,10vh,132px)}
.sec{overflow-x:clip}
.sec--clair{background:var(--v3-paper);color:var(--v3-ink-dark)}
.sec--clair .lead,.sec--clair .petit{color:var(--v3-muted-dark)}
.sec--clair .oeil,.sec--clair .pack__label,.sec--clair .etape__n{color:var(--v3-red-dark)}
.sec--clair .rgpd{color:var(--v3-muted-dark)}
.sec--clair .champ label{color:var(--v3-muted-dark)}
.sec--clair .champ label .req{color:var(--v3-red-dark)}
.sec__tete{margin-bottom:clamp(38px,6vh,70px)}

/* Portes : trois pupitres, une seule couleur de marque. */
.portes{gap:14px}
.porte{min-height:340px;border-radius:var(--v3-radius);border-color:var(--v3-line);background:var(--v3-surface);
  padding:30px;box-shadow:none}
.porte::before{inset:0;height:3px;background:var(--v3-red);opacity:1}
.porte:hover,.porte:focus-visible{transform:translateY(-4px);border-color:color-mix(in srgb,var(--v3-red) 60%,var(--v3-line));
  box-shadow:0 24px 54px color-mix(in srgb,var(--v3-graphite-deep) 64%,transparent)}
.porte__n{color:var(--v3-red-hot);font-family:var(--texte-f);font-weight:600}
.porte p{color:var(--v3-muted)}
.porte__prix{border-color:var(--v3-line)}

/* Packs et cartes : fiche technique, vraie image, statuts lisibles. */
.pack{border-radius:var(--v3-radius);box-shadow:0 18px 42px color-mix(in srgb,var(--v3-graphite-deep) 17%,transparent)}
.pack:hover{transform:translateY(-4px)}
.pack__tag{border-radius:var(--v3-radius-small);background:color-mix(in srgb,var(--v3-graphite-deep) 88%,transparent)}
.pack__label{color:var(--v3-red)}
.pack li::before{border-radius:1px;background:var(--v3-red);rotate:45deg}
.pack .btn--clair{background:var(--v3-ink-dark)}

.conf{background:var(--v3-graphite-deep)}
.conf__etapes li{border-radius:var(--v3-radius-small);border-color:var(--v3-line);background:var(--v3-surface)}
.conf__etapes li::before{border-radius:var(--v3-radius-small)}
.panneau,.reca{border-radius:var(--v3-radius);border-color:var(--v3-line);background:var(--v3-surface)}
.panneau{box-shadow:0 26px 64px color-mix(in srgb,var(--v3-graphite-deep) 55%,transparent)}
.panneau h3{font-size:clamp(1.2rem,2vw,1.65rem)}
.panneau__sous{color:var(--v3-muted)}
.choix label span{border-radius:var(--v3-radius-small)}

.cal__preuves{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:20px 0 22px;
  background:var(--v3-line);border:1px solid var(--v3-line);border-radius:var(--v3-radius-small);overflow:hidden}
.cal__preuves span{display:flex;gap:10px;align-items:center;padding:12px;background:var(--v3-graphite);font-size:.78rem;color:var(--v3-muted)}
.cal__preuves b{color:var(--v3-red-hot);font-size:.7rem;letter-spacing:.08em}
.cal{border-radius:var(--v3-radius-small);border-color:var(--v3-line)}
.cal__mois{background:var(--v3-graphite)}
.cal__c{border-radius:var(--v3-radius-small)}
.cal__c[data-choisi],.cal__c[data-plage]{background:var(--v3-red);color:var(--v3-ink)}
.cal__c[data-etat="demande"]{box-shadow:inset 0 -3px var(--v3-amber)}
.cal__c[data-etat="passe"],.cal__c[data-etat="indisponible"],.cal__c[disabled]{
  color:var(--v3-muted);background:var(--v3-surface-up);opacity:1}
.cal__c[data-etat="indisponible"]{text-decoration:line-through;text-decoration-thickness:1px}
.duree{align-items:center}
.duree__raccourcis{display:flex;gap:7px;flex-wrap:wrap}
.duree__raccourcis button{min-height:40px;padding:8px 12px;border:1px solid var(--v3-line);border-radius:var(--v3-radius-small);
  background:var(--v3-graphite);color:var(--v3-muted);cursor:pointer}
.duree__raccourcis button[data-actif]{color:var(--v3-ink);border-color:var(--v3-red);background:color-mix(in srgb,var(--v3-red) 20%,var(--v3-graphite))}
.stock-filtre{display:flex;align-items:center;gap:10px;margin:14px 0 20px;color:var(--v3-muted);font-size:.9rem;cursor:pointer}
.stock-filtre input{width:19px;height:19px;accent-color:var(--v3-red)}
.filtres button{border-radius:var(--v3-radius-small)}

.cat{gap:14px}
.art{border-radius:var(--v3-radius);background:var(--v3-graphite);border-color:var(--v3-line);box-shadow:none}
.art:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--v3-red) 58%,var(--v3-line))}
.art__img{background:var(--v3-graphite-deep)}
.art__img img{filter:saturate(.82) contrast(1.07);transition:transform .7s var(--v3-motion),filter var(--v3-motion)}
.art:hover .art__img img{transform:scale(1.025);filter:saturate(1) contrast(1.05)}
.art__preuve{position:absolute;left:10px;top:10px;padding:5px 8px;border-radius:var(--v3-radius-small);
  background:color-mix(in srgb,var(--v3-graphite-deep) 84%,transparent);color:var(--v3-muted);
  font-size:.58rem;font-weight:600;letter-spacing:.13em;backdrop-filter:blur(6px)}
.art__check{border-radius:var(--v3-radius-small);background:var(--v3-red)}
.art__nom{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:1.08}
.art__nom{overflow-wrap:anywhere}
.art__ref{color:var(--v3-amber);letter-spacing:.12em}
.art__desc{color:var(--v3-muted)}
.art__prix{color:var(--v3-ink)}
.art__stock{color:var(--v3-ok)}
.art[data-epuise]{opacity:.42;filter:grayscale(.7)}
.reca{box-shadow:var(--v3-shadow)}
.reca__m,.reca__poignee-m{background:none;color:var(--v3-ink);-webkit-text-fill-color:currentColor}

/* Grand format, galerie, portrait et formulaire. */
.led__img,.video,.apropos__p{border-radius:var(--v3-radius);border-color:var(--v3-line);box-shadow:var(--v3-shadow)}
.formats li{border-radius:var(--v3-radius-small);border-color:var(--v3-line);background:var(--v3-surface)}
.formats li b{color:var(--v3-red-hot)}
.galerie{gap:12px}
.galerie figure{border-radius:var(--v3-radius);border:1px solid var(--v3-line)}
.galerie figcaption{background:color-mix(in srgb,var(--v3-graphite-deep) 86%,transparent);font-weight:500}
.signature{color:var(--v3-red-hot)}
.etape{border-radius:var(--v3-radius);border-color:var(--v3-line-dark);box-shadow:none}
.etape__n{color:var(--v3-red)}
.faq details{border-radius:var(--v3-radius-small);background:var(--v3-surface)}
.faq details[open]{border-color:var(--v3-red);background:color-mix(in srgb,var(--v3-red) 9%,var(--v3-surface))}
.champ input,.champ select,.champ textarea{border-radius:var(--v3-radius-small)}
.pied{background:var(--v3-graphite-deep);border-color:var(--v3-line)}

/* Apparitions : plus franches, sans flou permanent. */
@media (prefers-reduced-motion:no-preference){
  [data-rev]{opacity:0;transform:translateY(20px);filter:none;clip-path:inset(0 0 18% 0);
    transition:opacity .72s cubic-bezier(.22,1,.36,1),transform .72s cubic-bezier(.22,1,.36,1),clip-path .72s cubic-bezier(.22,1,.36,1)}
  [data-rev][data-vu]{opacity:1;transform:none;filter:none;clip-path:inset(0)}
  .faisceaux .f1{animation:balayer-v3 22s ease-in-out infinite alternate}
}
@keyframes balayer-v3{from{transform:rotate(8deg) translateX(-2vw)}to{transform:rotate(-5deg) translateX(2vw)}}

@media (max-width:1079px){
  .reca{border-radius:var(--v3-radius) var(--v3-radius) 0 0}
  .reca__poignee-m{color:var(--v3-ink)}
}
@media (max-width:940px){
  .hero{min-height:0;padding-top:34px}
  .hero__in{grid-template-columns:1fr}
  .hero__anim{order:-1;max-width:none}
  .hero__txt{padding-left:0}
  .hero__txt::before{display:none}
  .hero__fond img{translate:0 0!important}
  .hero__voile{background:linear-gradient(180deg,color-mix(in srgb,var(--v3-graphite-deep) 48%,transparent),var(--v3-graphite) 76%)}
  .preuve{border-bottom:1px solid var(--v3-line)}
}
@media (max-width:640px){
  h1{font-size:clamp(2.7rem,14vw,4.4rem)}
  h2{font-size:clamp(2rem,11vw,3.25rem)}
  .nav__in{min-height:64px}
  .nav__logo img{height:39px}
  .nav__tel{font-size:.78rem;padding:8px 10px}
  .hero__note{font-size:.64rem;padding:6px 9px}
  .hero__actions .btn{width:100%}
  .preuves__g{grid-template-columns:1fr 1fr}
  .preuve{padding:20px 16px}
  .preuve:nth-child(2n){border-right:0}
  .cal__preuves{grid-template-columns:1fr}
  .cal__preuves span{min-height:44px}
  .duree{align-items:stretch}
  .duree__raccourcis{display:grid;grid-template-columns:1fr 1fr}
  .cat{grid-template-columns:1fr 1fr}
}
@media (max-width:360px){
  .cat{grid-template-columns:1fr}
  .art__desc{display:block}
}
@media (prefers-reduced-motion:reduce){
  .faisceaux,.pulse,.poussiere{display:none}
  .art__img img,.btn,.porte,.pack,.art{transition:none}
}