/* ==========================================================================
   GRAPHIC EVENTS — pages intérieures et catalogue
   Complément de ge.css. Priorité : lisible sur téléphone d'abord.
   ========================================================================== */
.btn--nav{margin-left:.8rem;padding:.78em 1.5em;font-size:.84rem}

/* ---------------------------------------------------------- fil d'Ariane */
.fil{padding-top:calc(var(--h-nav) + 18px);font-size:.83rem;color:var(--gris-txt)}
.fil a{transition:color .25s}
.fil a:hover{color:var(--vert-fonce)}
.fil__sep{padding-inline:.6em;opacity:.45}
.fil [aria-current]{color:var(--noir);font-weight:500}

/* ------------------------------------------------------- bandeau de tête */
.tete{padding:clamp(30px,4vw,60px) 0 clamp(44px,6vw,80px);position:relative;overflow:hidden}
.tete__grille{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,5vw,72px);align-items:center}
.tete h1{font-size:clamp(2.4rem,6vw,4.9rem);line-height:.94;letter-spacing:-.035em;margin-bottom:1.2rem}
.chapo{font-size:clamp(1.02rem,1.35vw,1.22rem);color:var(--gris-txt);max-width:46ch;line-height:1.6}
.tete__img{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;
  box-shadow:0 34px 70px -30px rgba(0,0,0,.42)}
.tete__img img{width:100%;height:100%;object-fit:cover}

/* --------------------------------------------------------- blocs de texte */
.texte{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(26px,4vw,54px);align-items:start}
.texte__bloc h2{font-size:clamp(1.4rem,2.3vw,2.05rem);margin-bottom:.8rem}
.texte__bloc p{color:var(--gris-txt)}
.sect--noir .texte__bloc p{color:rgba(255,255,255,.68)}
.signature{font-family:var(--titre);font-weight:600;color:var(--noir);margin-top:1.2rem}
.sect--noir .signature{color:#fff}

/* ------------------------------------------------------ process en étapes */
.etapes{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(20px,3vw,36px)}
.etape{position:relative;padding-top:2.5rem;border-top:2px solid rgba(0,0,0,.13)}
.etape__n{position:absolute;top:-.12em;left:0;font-family:var(--titre);font-weight:700;
  font-size:2.5rem;line-height:1;color:var(--vert);letter-spacing:-.04em}
.etape h3{font-size:1.2rem;margin-bottom:.45rem}
.etape p{font-size:.95rem;color:var(--gris-txt);margin:0}

/* --------------------------------------------------------------- secteurs */
.secteurs{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(16px,2.5vw,30px)}
.secteur{padding:1.7rem;background:var(--gris);border-radius:var(--r);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.secteur:hover{transform:translateY(-5px);box-shadow:0 22px 44px -22px rgba(0,0,0,.28)}
.secteur h3{font-size:1.15rem;margin-bottom:.5rem;color:var(--vert-fonce)}
.secteur p{font-size:.94rem;color:var(--gris-txt);margin:0}

/* --------------------------------------------------------------- matières */
.matieres{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(26px,4vw,60px);align-items:center}
.puces{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.55rem;align-content:center}
.puces li{padding:.58em 1.1em;background:var(--gris);border-radius:100px;
  font-family:var(--titre);font-weight:500;font-size:.88rem;
  transition:background .3s,transform .4s var(--ease)}
.puces li:hover{background:var(--vert);transform:translateY(-2px)}

/* ------------------------------------------------------------ tuiles photo
   Petit format volontaire : les photos du catalogue sont inégales,
   une tuile serrée pardonne ce qu'un plein écran exposerait. */
.grille-tuiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.tuile{margin:0;position:relative;border-radius:var(--r);overflow:hidden;
  aspect-ratio:1;background:var(--noir)}
.tuile img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.tuile:hover img{transform:scale(1.06)}
.tuile figcaption{position:absolute;inset:auto 0 0;padding:1.5rem .95rem .8rem;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.86),transparent);
  font-family:var(--titre);font-weight:500;font-size:.85rem}

/* ----------------------------------------------------------- réalisations */
.reas{display:grid;gap:clamp(36px,5vw,70px)}
.reaVe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(22px,4vw,54px);align-items:center}
.reaVe:nth-child(even) figure{order:2}
.reaVe figure{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--gris)}
.reaVe figure img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.reaVe:hover figure img{transform:scale(1.04)}
.reaVe h2{font-size:clamp(1.65rem,3vw,2.6rem);margin-bottom:.2rem}
.reaVe h3{font-size:1.08rem;font-weight:500;color:var(--vert-fonce);margin-bottom:.85rem}
.reaVe p{color:var(--gris-txt)}

/* ------------------------------------------------------ bandeau références */
.bandeau--refs{background:var(--noir);color:#fff;border-block-color:rgba(255,255,255,.12)}
.bandeau--refs span{font-size:clamp(.95rem,1.5vw,1.25rem);font-weight:600;letter-spacing:.04em}
.bandeau--refs span::after{background:var(--vert)}

/* ---------------------------------------------------------------- contact */
.contact{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(28px,5vw,70px);align-items:start}
.coord{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:1.1rem}
.coord li{display:grid;gap:.2rem}
.coord span{font-family:var(--titre);font-size:.73rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--vert-fonce)}
.contact__form{display:grid;grid-template-columns:1fr 1fr;gap:1.05rem}
.champ{display:grid;gap:.38rem}
.champ--large{grid-column:1/-1}
.champ label{font-family:var(--titre);font-size:.77rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris-txt)}
.champ input,.champ select,.champ textarea{
  font:inherit;font-size:1rem;padding:.85em 1em;border:0;border-radius:var(--r);
  background:var(--gris);color:var(--noir);
  box-shadow:inset 0 0 0 1px #9A9A9A;transition:box-shadow .3s,background .3s;
  scroll-margin-top:calc(var(--h-nav) + 20px)}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:0;background:#fff;box-shadow:inset 0 0 0 2px var(--vert)}
.champ textarea{resize:vertical}
.contact__form .btn{grid-column:1/-1;justify-self:start}

/* ==========================================================================
   CATALOGUE FEUILLETABLE
   ========================================================================== */
.cata__tete{padding:clamp(20px,4vw,48px) 0 clamp(24px,3vw,38px)}
.cata__tete h1{font-size:clamp(2.2rem,5.5vw,4.4rem);letter-spacing:-.035em;margin-bottom:.9rem}
.cata__reperes{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.7rem}
.repere{padding:.62em 1.05em;min-height:40px;border:0;border-radius:100px;background:var(--gris);
  font-family:var(--titre);font-weight:500;font-size:.84rem;color:var(--noir);
  transition:background .3s,transform .35s var(--ease)}
.repere:hover,.repere:focus-visible{background:var(--vert);transform:translateY(-2px)}

.cata__barre{position:sticky;top:72px;z-index:60;
  background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
  border-block:1px solid rgba(0,0,0,.09)}
.cata__barre-in{display:flex;align-items:center;gap:1rem;padding-block:.7rem}
.cnav{width:44px;height:44px;flex:none;border:0;border-radius:50%;background:var(--gris);
  color:var(--noir);font-size:1.05rem;line-height:1;
  transition:background .3s,transform .35s var(--ease)}
.cnav:hover{background:var(--vert);transform:scale(1.06)}
.cnav:disabled{opacity:.35;cursor:not-allowed;transform:none;background:var(--gris)}
.cnav--txt{width:auto;padding-inline:1.2em;border-radius:100px;
  font-family:var(--titre);font-weight:500;font-size:.84rem;letter-spacing:.05em}
.cata__compteur{font-family:var(--titre);font-size:.9rem;min-width:5.4em;text-align:center;flex:none}
.cata__compteur b{font-size:1.12rem;color:var(--vert-fonce)}
.cata__jauge{flex:1;height:3px;background:var(--gris);border-radius:3px;overflow:hidden;min-width:40px}
.cata__jauge i{display:block;height:100%;width:0;background:var(--vert);transition:width .2s linear}

.cata__flux{max-width:940px;margin:0 auto;padding:clamp(18px,3vw,42px) var(--pad) 60px;
  display:grid;gap:clamp(14px,2.5vw,32px)}
.cpage{margin:0;border-radius:var(--r);overflow:hidden;background:var(--gris);
  box-shadow:0 24px 54px -28px rgba(0,0,0,.4);scroll-margin-top:140px}
.cpage img{width:100%;height:auto;display:block}

.cata__vignettes{position:fixed;inset:auto 0 0;z-index:70;max-height:60vh;overflow-y:auto;
  background:var(--noir);padding:1.1rem var(--pad) 1.5rem;
  box-shadow:0 -20px 50px -20px rgba(0,0,0,.5)}
.cata__vignettes-in{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;
  max-width:var(--max);margin:0 auto}
.vign{position:relative;border:0;padding:0;background:transparent;border-radius:2px;overflow:hidden;
  aspect-ratio:1181/1626;transition:transform .35s var(--ease),box-shadow .35s}
.vign img{width:100%;height:100%;object-fit:cover;opacity:.6;transition:opacity .3s}
.vign:hover img,.vign[aria-current] img{opacity:1}
.vign:hover{transform:translateY(-4px);box-shadow:0 12px 26px -10px rgba(0,0,0,.6)}
.vign span{position:absolute;right:3px;bottom:3px;background:var(--vert);color:var(--noir);
  font-family:var(--titre);font-weight:600;font-size:.62rem;padding:.1em .4em;border-radius:2px}
.vign[aria-current]{box-shadow:0 0 0 2px var(--vert)}

/* ==========================================================================
   TÉLÉPHONE — la priorité. Une colonne, rien qui déborde, cibles larges.
   ========================================================================== */
@media (max-width:900px){
  .tete__grille,.matieres,.contact,.reaVe{grid-template-columns:1fr}
  .reaVe:nth-child(even) figure{order:0}
  .contact__form{grid-template-columns:1fr}
}
@media (max-width:760px){
  .fil{padding-top:calc(var(--h-nav) + 8px);font-size:.82rem}
  .fil .wrap{display:flex;flex-wrap:wrap;align-items:center;row-gap:.2rem}
  .fil a,.fil [aria-current]{display:inline-flex;align-items:center;min-height:44px;padding-inline:.3em}
  .tete{padding-bottom:34px}
  .tete__img{aspect-ratio:3/2}
  .grille-tuiles{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
  .etape{padding-top:2.1rem}
  .etape__n{font-size:2.1rem}
  .secteur{padding:1.35rem}
  .champ input,.champ select,.champ textarea{font-size:16px} /* évite le zoom iOS */
  .cata__barre{top:72px}
  .cata__barre-in{gap:.55rem;padding-block:.5rem}
  .cata__compteur{min-width:4.4em;font-size:.82rem}
  .cnav{width:44px;height:44px}
  .cnav--txt{width:auto;min-height:44px;padding-inline:.85em;font-size:.78rem;
    letter-spacing:.02em;white-space:nowrap}
  .cata__flux{padding-inline:14px;gap:12px}
  .cpage{scroll-margin-top:134px}
  .cata__vignettes-in{grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:7px}
  .cata__reperes{gap:.4rem;margin-top:1.3rem}
  .repere{font-size:.79rem;padding:.62em .95em;min-height:42px}
}
@media (prefers-reduced-motion:reduce){
  .tuile img,.reaVe figure img,.secteur,.puces li{transition:none}
}

/* signature du prestataire, discrète au pied de page */
.pied__signature{opacity:.62;font-size:.82rem}
.pied__signature a{border-bottom:1px solid rgba(255,255,255,.28);transition:color .25s,border-color .25s}
.pied__signature a:hover{color:var(--vert);border-color:var(--vert)}