/* ══════════════════════════════════════════════════════════════════════════
   ARTIP COMMUNICATION — pages « villes »
   Complément à style-3008a.css. Mêmes jetons, mêmes polices, même vert.
   Aucun style en ligne, aucune dépendance externe.   05/09/2026 · FLY LAB
   ══════════════════════════════════════════════════════════════════════════ */

/* Sans JavaScript, rien ne doit rester invisible. */
html:not(.js) .reveal{opacity:1;transform:none}

/* ── Héro de page ville ─────────────────────────────────────────────────── */
.vhero{position:relative;overflow:hidden;background:#0E120D;
  padding:clamp(104px,13vh,168px) 0 clamp(44px,7vh,84px)}
.vhero__fond{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1100px 620px at 78% 26%,rgba(139,203,51,.16),transparent 62%),
    radial-gradient(760px 520px at 4% 92%,rgba(109,167,41,.10),transparent 66%),
    linear-gradient(160deg,#10150F 0%,#0B0E0A 58%,#0E120D 100%)}
.vhero__fond::before{content:'';position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(1200px 700px at 50% 40%,#000,transparent 78%);
          mask-image:radial-gradient(1200px 700px at 50% 40%,#000,transparent 78%)}
.vhero__in{position:relative;z-index:2}
.vhero__copy{width:min(880px,100%);padding:clamp(22px,3.4vw,44px);
  background:linear-gradient(135deg,rgba(7,10,6,.90),rgba(13,18,11,.66));
  border:1px solid rgba(255,255,255,.15);border-left:4px solid var(--vert);
  border-radius:4px 24px 24px 4px;box-shadow:0 34px 96px rgba(0,0,0,.42);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.vhero h1{font-size:clamp(2.1rem,5.4vw,4rem);line-height:1.02;
  text-transform:uppercase;margin-bottom:16px;text-wrap:balance}
.vhero__lead{font-size:var(--t-lead);color:#D6DBD0;max-width:58ch}
.vhero .actions{margin-top:26px}

/* Fil d'Ariane */
.fil{font-size:var(--t-pet);color:var(--gris);letter-spacing:.06em;margin-bottom:16px}
.fil a{color:var(--gris-clair);border-bottom:1px solid rgba(255,255,255,.2)}
.fil a:hover{color:var(--vert-vif);border-bottom-color:var(--vert-vif)}
.fil span{color:var(--vert)}

/* Bandeau de repères (distance, trajet, population) */
.reperes{display:flex;flex-wrap:wrap;gap:clamp(12px,2.2vw,30px);margin-top:clamp(26px,4vh,46px);
  position:relative;z-index:2}
.repere{flex:1 1 190px;padding:20px clamp(16px,2.4vw,28px);
  border:1px solid rgba(255,255,255,.13);border-left:4px solid rgba(109,167,41,.72);
  border-radius:4px 16px 16px 4px;background:rgba(7,10,6,.70);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.repere b{display:block;font-family:'Anton',Impact,sans-serif;font-weight:400;
  font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1;letter-spacing:-.01em;color:var(--blanc)}
.repere span{display:block;margin-top:9px;font-size:var(--t-pet);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);font-weight:600}

/* ── Grille des métiers ─────────────────────────────────────────────────── */
.vmet{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.vmet article{background:var(--carte),var(--noir-2);border:1px solid var(--bord);
  border-radius:var(--r-card);padding:clamp(22px,2.5vw,30px);
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.vmet article:hover{background:var(--carte),var(--noir-3);
  border-color:rgba(109,167,41,.34);transform:translateY(-3px)}
.vmet .kick{font-size:var(--t-pet);letter-spacing:.2em;text-transform:uppercase;
  color:var(--vert);font-weight:700;margin-bottom:10px}
.vmet h3{font-family:'Anton',Impact,sans-serif;font-weight:400;letter-spacing:-.01em;
  font-size:clamp(1.15rem,2vw,1.5rem);text-transform:uppercase;margin-bottom:10px}
.vmet p{color:var(--gris-clair);font-size:var(--t-body)}

/* ── Bande de réalisations ──────────────────────────────────────────────── */
.vbande{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(258px,45%),1fr))}
.vbande figure{margin:0;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--bord);background:var(--noir-2);
  display:flex;flex-direction:column}
.vbande img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;flex:none;
  transition:transform .6s var(--ease)}
.vbande figure:hover img{transform:scale(1.05)}
.vbande figcaption{padding:12px 14px;font-size:var(--t-pet);color:var(--gris);
  letter-spacing:.05em}

/* ── Zone desservie ─────────────────────────────────────────────────────── */
.vautour{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  list-style:none}
.vautour li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:14px 18px;border:1px solid var(--bord);border-radius:var(--r-btn);
  background:rgba(255,255,255,.025);color:var(--gris-clair);font-size:var(--t-body)}
.vautour li em{font-style:normal;color:var(--gris);font-size:var(--t-pet);
  letter-spacing:.08em;white-space:nowrap}
.vautour a{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  width:100%;transition:color .25s}
.vautour a:hover{color:var(--vert-vif)}
.vautour li:has(a):hover{border-color:rgba(109,167,41,.4);background:rgba(109,167,41,.06)}

/* ── Deux colonnes texte + encadré ──────────────────────────────────────── */
.vduo{display:grid;gap:clamp(14px,2.4vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));align-items:start}
.vbloc{background:var(--carte),var(--noir-2);border:1px solid var(--bord);
  border-radius:var(--r-card);padding:clamp(24px,2.8vw,38px)}
.vbloc h3{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:var(--t-h3);
  text-transform:uppercase;margin-bottom:14px}
.vbloc p{color:var(--gris-clair);margin-bottom:14px}
.vbloc p:last-child{margin-bottom:0}
.vbloc ul{list-style:none;margin-top:6px}
.vbloc li{color:var(--gris-clair);padding:9px 0 9px 22px;position:relative;
  border-bottom:1px solid rgba(255,255,255,.055)}
.vbloc li:last-child{border-bottom:0}
.vbloc li::before{content:'';position:absolute;left:0;top:1.02em;width:9px;height:2px;
  background:var(--vert)}
.vbloc li b{color:var(--blanc);font-weight:700}
.vbloc address{font-style:normal;color:var(--gris-clair);line-height:1.8}
.vbloc address a{color:var(--vert-vif)}
.vbloc .tag{font-size:var(--t-pet);letter-spacing:.2em;text-transform:uppercase;
  color:var(--vert);font-weight:700;margin-bottom:10px}

/* ── Appel final ────────────────────────────────────────────────────────── */
.vcta{border:1px solid var(--v2-bord);border-left:4px solid var(--vert);
  border-radius:3px 22px 22px 3px;padding:clamp(28px,4vw,52px);
  background:linear-gradient(135deg,var(--v2-carte-forte),rgba(16,22,13,.70));
  box-shadow:var(--v2-ombre)}
.vcta h2{font-family:'Anton',Impact,sans-serif;font-weight:400;font-size:var(--t-h2);
  text-transform:uppercase;margin-bottom:14px;text-wrap:balance}
.vcta p{color:#cbd2c6;font-size:var(--t-lead);max-width:62ch}

/* ── Carte ──────────────────────────────────────────────────────────────── */
.vmap{border:1px solid var(--bord);border-radius:var(--r-card);overflow:hidden;
  background:var(--noir-2)}
.vmap iframe{width:100%;height:clamp(260px,38vh,420px);border:0;display:block;filter:grayscale(.3)}
.vmap__pied{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
  padding:16px clamp(16px,2vw,24px)}
.vmap__pied strong{display:block;font-size:var(--t-body)}
.vmap__pied span{display:block;color:var(--gris);font-size:var(--t-pet)}

/* ── Note de bas de page (sources) ──────────────────────────────────────── */
.vnote{margin-top:clamp(22px,3vw,34px);font-size:var(--t-pet);color:var(--gris);
  max-width:80ch;line-height:1.7}

@media(max-width:880px){
  .vhero{padding-top:clamp(86px,11vh,124px)}
  .repere{flex:1 1 44%}
}

/* ══════════════════════════════════════════════════════════════════════════
   Ajouts du 05/09/2026 — référencement classique et moteurs à réponses.
   Deux blocs : la synthèse factuelle sous le héros, et les questions.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── « L'essentiel » : les faits, lisibles d'un coup ────────────────────── */
.vsynth{border:1px solid var(--v2-bord);border-left:4px solid var(--vert);
  border-radius:3px 20px 20px 3px;padding:clamp(22px,3vw,38px);
  background:linear-gradient(135deg,var(--v2-carte-forte),rgba(16,22,13,.70));
  box-shadow:var(--v2-ombre)}
.vsynth h2{font-family:'Anton',Impact,sans-serif;font-weight:400;
  font-size:clamp(1.2rem,2.1vw,1.6rem);text-transform:uppercase;
  letter-spacing:-.01em;margin-bottom:20px}
.vsynth dl{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));
  column-gap:clamp(18px,3vw,44px)}
.vsynth div{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.vsynth dt{font-size:var(--t-pet);letter-spacing:.16em;text-transform:uppercase;
  color:var(--vert);font-weight:700;margin-bottom:5px}
.vsynth dd{color:var(--gris-clair);font-size:var(--t-body);line-height:1.6}
.vsynth dd a{color:var(--vert-vif)}

/* ── Questions fréquentes ───────────────────────────────────────────────── */
.vfaq{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr))}
.vfaq article{background:var(--carte),var(--noir-2);border:1px solid var(--bord);
  border-radius:var(--r-card);padding:clamp(22px,2.5vw,32px)}
.vfaq h3{font-size:clamp(1rem,1.5vw,1.15rem);font-weight:700;line-height:1.4;
  margin-bottom:12px;color:var(--blanc)}
.vfaq h3::before{content:'?';display:inline-block;width:22px;height:22px;
  margin-right:10px;border-radius:50%;background:var(--vert);color:var(--noir);
  font-family:'Anton',Impact,sans-serif;font-size:.86rem;line-height:22px;
  text-align:center;vertical-align:.08em}
.vfaq p{color:var(--gris-clair)}
.vfaq p + p{margin-top:10px}
.vfaq a{color:var(--vert-vif)}

/* 06/09/2026 — audit SEO (A-D1) : les titres du pied passent de h4 à h3
   (plus de saut h2 → h4) ; même habillage que .ft h4 du site. */
.ft h3{font-size:var(--t-pet);letter-spacing:.18em;text-transform:uppercase;color:var(--gris);
  margin-bottom:16px;font-weight:700;font-family:inherit}