/* Sections de la refonte 2026 : mise en page éditoriale noir et blanc (inspirée d'ultranoir.com).
   Montserrat pour les titres et les textes, Spectral en italique pour les accroches et les numéros.
   Utilisé d'abord par les pages villes (zones/), puis par les pages refaites une à une.
   Rappel : le body du site est en MAJUSCULES ; chaque texte courant repasse ici en casse normale. */

:root {
  --webelan-line: rgba(255, 255, 255, 0.14);
  --webelan-muted: rgba(255, 255, 255, 0.68);
  --webelan-orange: #e16539;
}

/* ---------- Textes communs ---------- */
.webelan-label {
  margin: 0 0 18px;
  color: var(--webelan-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1.6;
  text-transform: uppercase;
  text-wrap: balance;
}
.webelan-display {
  margin: 0 auto;
  max-width: 14ch;
  font-size: clamp(42px, 6.4vw, 92px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
/* Grands titres longs (pages de services) : plus petits, pour tenir en deux lignes sur ordinateur. */
.webelan-display.webelan-display-long {
  max-width: 22ch;
  font-size: clamp(32px, 5vw, 70px);
}
.webelan-title {
  margin: 0;
  max-width: 17ch;
  font-size: clamp(30px, 3.9vw, 54px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.webelan-accroche {
  margin: 28px auto 0;
  max-width: 34ch;
  color: #fff;
  font-family: var(--font-accent);
  font-size: clamp(21px, 2.1vw, 30px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.32;
  text-transform: none;
  text-wrap: balance;
}
.webelan-num {
  display: block;
  color: var(--webelan-orange);
  font-family: var(--font-accent);
  font-size: 24px;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  text-transform: none;
}

/* Mots à trait d'union jamais coupés en fin de ligne (« amène-t-il », « rendez-vous »). */
.webelan-nw {
  white-space: nowrap;
}

/* ---------- Boutons et liens ---------- */
.webelan-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 42px;
}
.webelan-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 32px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  background-color: transparent;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.webelan-btn:hover,
.webelan-btn:focus-visible {
  border-color: #fff;
  background-color: #fff;
  color: #000;
}
.webelan-btn-plein {
  border-color: #fff;
  background-color: #fff;
  color: #000;
}
.webelan-btn-plein:hover,
.webelan-btn-plein:focus-visible {
  background-color: transparent;
  color: #fff;
}
/* Bouton principal (haut de page) : pastille blanche + rond noir avec une flèche (survol : voir plus bas). */
.webelan-cta {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  min-height: 62px;
  padding: 0 10px 0 32px;
  border-radius: 999px;
  background-color: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  color: #000;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.webelan-cta-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: #000;
  color: #fff;
  transition: background-color 0.3s ease;
}
.webelan-cta-icon svg {
  width: 18px;
  height: 18px;
  transition: transform 0.35s ease;
}
.webelan-cta:hover,
.webelan-cta:focus-visible {
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.45);
  transform: translateY(-2px);
}
.webelan-cta:hover .webelan-cta-icon,
.webelan-cta:focus-visible .webelan-cta-icon {
  background-color: var(--webelan-orange);
}
.webelan-cta:hover .webelan-cta-icon svg,
.webelan-cta:focus-visible .webelan-cta-icon svg {
  transform: translateX(3px);
}
/* Survol, comme les anciens boutons du site : le texte file vers le haut et la flèche prend sa place,
   au centre. Seulement à la souris, sur un écran d'ordinateur (sur téléphone, le bouton ne bouge pas). */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .webelan-cta {
    position: relative;
    overflow: hidden;
    padding-right: 72px;
  }
  .webelan-cta > span:first-child {
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.35s ease;
  }
  .webelan-cta-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -21px;
    transition: right 0.5s cubic-bezier(0.19, 1, 0.22, 1), background-color 0.3s ease;
  }
  .webelan-cta:hover > span:first-child {
    opacity: 0;
    transform: translateY(-250%);
  }
  .webelan-cta:hover .webelan-cta-icon {
    right: calc(50% - 21px);
  }
  .webelan-cta:hover .webelan-cta-icon svg,
  .webelan-cta:focus-visible .webelan-cta-icon svg {
    transform: none;
  }
  .webelan-offer-action .webelan-cta {
    padding-right: 64px;
  }
}
.webelan-cta:focus-visible,
.webelan-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}
/* Bloc d'appel à l'action au fil de la page : une phrase en italique, le bouton principal, le téléphone. */
.webelan-sec-cta {
  padding-top: 110px;
}
.webelan-cta-band {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px 56px;
  align-items: center;
  padding: 52px 0;
  border-top: 1px solid var(--webelan-line);
  border-bottom: 1px solid var(--webelan-line);
}
.webelan-cta-band-text {
  margin: 0;
  max-width: 26ch;
  color: #fff;
  font-family: var(--font-accent);
  font-size: clamp(24px, 2.6vw, 36px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.25;
  text-transform: none;
  text-wrap: balance;
}
.webelan-cta-band-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Lien secondaire : texte souligné d'un fin trait qui devient orange au survol. */
.webelan-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.45);
  text-decoration-thickness: 1px;
  text-transform: uppercase;
  text-underline-offset: 9px;
  transition: text-decoration-color 0.3s ease;
}
.webelan-link:hover,
.webelan-link:focus-visible {
  text-decoration-color: var(--webelan-orange);
}
.webelan-actions-cta {
  align-items: center;
  gap: 18px 40px;
}
.webelan-cta-note {
  margin: 22px auto 0;
  max-width: 46ch;
  color: var(--webelan-muted);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  text-transform: none;
}

/* « Découvrir », « Voir le projet » : texte + trait qui s'allonge au survol. */
.webelan-more {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-decoration: none;
  text-transform: uppercase;
}
.webelan-more::after {
  content: "";
  width: 30px;
  height: 1px;
  background-color: currentColor;
  transition: width 0.35s ease;
}
.webelan-more:hover::after,
.webelan-more:focus-visible::after,
.webelan-cell:hover .webelan-more::after,
.webelan-cell:focus-visible .webelan-more::after {
  width: 48px;
}

/* ---------- Haut de page ville ---------- */
.webelan-hero-ville {
  padding-bottom: 0;
  overflow: hidden;
  text-align: center;
}
/* Halo orange très léger derrière le titre (pas d'image : rien à charger). */
.webelan-hero-ville::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 760px;
  background: radial-gradient(55% 60% at 50% 0%, rgba(225, 101, 57, 0.17), rgba(225, 101, 57, 0) 72%);
  pointer-events: none;
}
/* Variante avec l'image de fond de la marque (pages principales : À propos, Tarifs, Contact,
   Réalisations, Analyses) : même image que l'accueil, voilée pour la lisibilité. */
.webelan-hero-ville.webelan-hero-image {
  background-color: #030303;
  background-image: linear-gradient(180deg, rgba(3, 3, 3, 0.42) 0%, rgba(3, 3, 3, 0.55) 50%, rgba(3, 3, 3, 0.85) 78%, rgb(3, 3, 3) 100%), url("../assets/images/hero-background.webp");
  background-position: 50% 35%;
  background-repeat: no-repeat;
  background-size: cover;
}
.webelan-hero-ville.webelan-hero-image::before {
  display: none;
}
/* Sans chiffres clés sous le bouton : un peu d'espace pour que l'image se fonde dans le noir. */
.webelan-hero-ville.webelan-hero-image:not(:has(.webelan-facts)) {
  padding-bottom: 120px;
}
.webelan-hero-image .webelan-display,
.webelan-hero-image .webelan-accroche {
  text-shadow: 0 14px 48px rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 767px) and (orientation: portrait) {
  .webelan-hero-ville.webelan-hero-image {
    background-image: linear-gradient(180deg, rgba(3, 3, 3, 0.42) 0%, rgba(3, 3, 3, 0.55) 50%, rgba(3, 3, 3, 0.85) 78%, rgb(3, 3, 3) 100%), url("../assets/brand/hero-fond-pages-mobile.webp");
  }
}
.webelan-hero-ville .webelan-breadcrumb {
  margin-bottom: 44px;
}
.webelan-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  margin: 96px 0 0;
  padding: 0;
  border-top: 1px solid var(--webelan-line);
  list-style: none;
}
.webelan-facts li {
  padding: 32px 24px 0;
}
.webelan-facts li + li {
  border-left: 1px solid var(--webelan-line);
}
.webelan-fact-value {
  display: block;
  color: #fff;
  font-family: var(--font-accent);
  font-size: 36px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.1;
  text-transform: none;
}
.webelan-fact-text {
  display: block;
  margin-top: 10px;
  color: var(--webelan-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.6;
}

/* ---------- Sections ---------- */
.webelan-sec {
  padding-top: 140px;
  padding-bottom: 0;
}
.webelan-sec-last {
  padding-bottom: 150px;
}
.webelan-sec .container {
  align-items: stretch;
}
.webelan-sec-head {
  margin-bottom: 56px;
  padding-top: 30px;
  border-top: 1px solid var(--webelan-line);
}
/* Titre à gauche, courte introduction à droite (alignée sur le bas du titre). */
.webelan-sec-head-intro {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 72px;
  align-items: end;
}
.webelan-sec-intro {
  margin: 0;
  font-size: 17px;
  line-height: 1.75;
}

/* Deux colonnes : titre à gauche, texte à droite. */
.webelan-split {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 72px;
  padding-top: 30px;
  border-top: 1px solid var(--webelan-line);
}
.webelan-split-text p {
  margin: 0 0 22px;
  font-size: 18px;
  line-height: 1.75;
}
.webelan-split-text p:last-child {
  margin-bottom: 0;
}

/* Trois cases séparées par de fins traits (services). La case entière est un lien. */
.webelan-grid3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--webelan-line);
}
.webelan-cell {
  display: flex;
  flex-direction: column;
  padding: 46px 38px 42px;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.35s ease;
}
.webelan-cell + .webelan-cell {
  border-left: 1px solid var(--webelan-line);
}
.webelan-cell:hover,
.webelan-cell:focus-visible {
  background-color: rgba(255, 255, 255, 0.045);
}
.webelan-cell h3 {
  margin: 28px 0 14px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-transform: uppercase;
}
.webelan-cell p {
  margin: 0 0 34px;
  font-size: 16px;
  line-height: 1.7;
}
.webelan-cell .webelan-more {
  margin-top: auto;
}

/* Références : visuel + texte, en alternance. */
.webelan-ref {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  align-items: center;
}
.webelan-ref + .webelan-ref {
  margin-top: 110px;
}
.webelan-ref-inverse .webelan-ref-visual {
  order: 2;
}
.webelan-ref-visual {
  overflow: hidden;
  border-radius: 4px;
}
.webelan-ref-visual img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.webelan-ref:hover .webelan-ref-visual img {
  transform: scale(1.03);
}
.webelan-ref-title {
  margin: 0;
  font-size: clamp(30px, 3.4vw, 50px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.webelan-ref .webelan-accroche {
  margin: 22px 0 32px;
  max-width: 26ch;
  font-size: clamp(19px, 1.7vw, 25px);
}
/* Page projet : le visuel et l'objectif du projet. */
.webelan-ref-projet .webelan-accroche {
  max-width: 34ch;
  margin-bottom: 24px;
}
.webelan-ref-projet:hover .webelan-ref-visual img {
  transform: none;
}
.webelan-ref-text {
  margin: 0;
  font-size: 17px;
  line-height: 1.75;
}
.webelan-ref-text + .webelan-ref-text {
  margin-top: 18px;
}

/* Étapes : trois colonnes ouvertes, grands numéros en italique. */
.webelan-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.webelan-steps li {
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}
.webelan-steps .webelan-num {
  font-size: 60px;
}
.webelan-steps h3 {
  margin: 26px 0 12px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-transform: uppercase;
}
.webelan-steps p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
}

/* Variante à quatre colonnes des étapes (pages de services). */
.webelan-steps-4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
/* Cases non cliquables (avantages) : pas d'effet de survol. */
div.webelan-cell:hover {
  background-color: transparent;
}
div.webelan-cell p:last-child {
  margin-bottom: 0;
}
/* Deux cases côte à côte sur ordinateur (autres services). */
@media screen and (min-width: 992px) {
  .webelan-grid2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Offres (page Tarifs) : prix en italique, ce qui est inclus sur fins traits, bouton en bas de case. */
.webelan-offer .webelan-offer-price {
  margin: 0 0 18px;
  color: #fff;
  font-family: var(--font-accent);
  font-size: 34px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.1;
}
.webelan-offer .webelan-label {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.6;
}
.webelan-offer-list {
  margin: 0 0 34px;
  padding: 0;
  border-top: 1px solid var(--webelan-line);
  list-style: none;
}
.webelan-offer-list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--webelan-line);
  font-size: 15px;
  line-height: 1.5;
  text-transform: none;
}
.webelan-offer-action {
  margin-top: auto;
}
.webelan-offer-action .webelan-cta {
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding-left: 24px;
  font-size: 12px;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.webelan-offer-action .webelan-btn {
  width: 100%;
}
/* Liens dans les textes courants : soulignés d'orange. */
.webelan-split-text a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--webelan-orange);
  text-underline-offset: 4px;
}

/* Page Contact : formulaire au style épuré, sans cartes arrondies ni dégradés. Le fonctionnement
   (champs, envoi, messages de réussite et d'erreur) ne change pas. */
.page-wrapper .webelan-contact-shell .webelan-contact-copy,
.page-wrapper .webelan-contact-shell .webelan-contact-card {
  padding: 32px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--webelan-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.page-wrapper .webelan-contact-shell .webelan-contact-copy::after,
.page-wrapper .webelan-contact-shell .webelan-contact-card::after {
  display: none !important;
}
.page-wrapper .webelan-contact-title,
.page-wrapper .webelan-form-title {
  font-size: clamp(26px, 2.6vw, 38px);
  letter-spacing: -0.01em;
  line-height: 1.06;
  text-wrap: balance;
}
.page-wrapper .webelan-contact-proof-item {
  border-color: var(--webelan-line) !important;
}
.page-wrapper .webelan-choice-card {
  border: 1px solid var(--webelan-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.page-wrapper .webelan-choice-card:has(input:checked),
.page-wrapper .webelan-choice-card:hover,
.page-wrapper .webelan-choice-card:focus-within {
  border-color: #fff !important;
  background: rgba(255, 255, 255, 0.05) !important;
}
.page-wrapper .webelan-contact-card .input-main,
.page-wrapper .webelan-contact-card select.input-main,
.page-wrapper .webelan-contact-card textarea.input-main {
  border: 1px solid var(--webelan-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.page-wrapper .webelan-contact-card .input-main:focus,
.page-wrapper .webelan-contact-card select.input-main:focus,
.page-wrapper .webelan-contact-card textarea.input-main:focus {
  border-color: #fff !important;
}
.page-wrapper .webelan-submit-row .button.white {
  background: #fff !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35) !important;
  color: #000 !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

/* Liste numérotée sur fins traits (méthode en 5 temps, ce que nous avons réalisé). */
.webelan-rows {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--webelan-line);
  list-style: none;
}
.webelan-rows li {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 32px;
  align-items: baseline;
  padding: 26px 0;
  border-bottom: 1px solid var(--webelan-line);
}
.webelan-rows-simple li {
  grid-template-columns: 80px minmax(0, 1fr);
}
.webelan-rows .webelan-num {
  font-size: 28px;
}
.webelan-rows h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-transform: uppercase;
}
.webelan-rows p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
}
.webelan-rows-simple p {
  font-size: 18px;
}
/* Fiche projet : client, rôle, type, année. */
.webelan-fiche {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 56px 0 0;
  border-top: 1px solid var(--webelan-line);
}
.webelan-fiche > div {
  padding: 24px 24px 0 0;
}
.webelan-fiche dt {
  margin: 0 0 8px;
  color: var(--webelan-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.webelan-fiche dd {
  margin: 0;
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
  text-transform: none;
}

/* Analyses : filtre par catégorie, au-dessus de la liste des articles. */
.webelan-filtres {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  margin: 0 0 56px;
}
.webelan-filtres a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--webelan-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.3s ease;
}
.webelan-filtres a:hover,
.webelan-filtres a:focus-visible,
.webelan-filtres a[aria-current="page"] {
  color: #fff;
}
.webelan-filtres a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--webelan-orange);
  text-decoration-thickness: 1px;
  text-underline-offset: 9px;
}

/* Article : titre, image de couverture, puis une colonne de lecture confortable. */
.webelan-display.webelan-display-article {
  max-width: 24ch;
  font-size: clamp(30px, 4.2vw, 60px);
  line-height: 1.02;
}
.webelan-article-cover {
  max-width: 1000px;
  margin: 72px auto 0;
  overflow: hidden;
  border-radius: 4px;
}
.webelan-article-cover img {
  display: block;
  width: 100%;
  height: auto;
}
.webelan-sec-article {
  padding-top: 88px;
}
.webelan-article {
  max-width: 720px;
  margin: 0 auto;
  color: #fff;
  text-transform: none;
}
.webelan-article > p,
.webelan-article li {
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.8;
  text-transform: none;
}
.webelan-article > p {
  margin: 0 0 24px;
}
.webelan-article .webelan-article-chapo {
  margin-bottom: 48px;
  font-family: var(--font-accent);
  font-size: clamp(22px, 2vw, 27px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.45;
}
.webelan-article > h2 {
  margin: 72px 0 24px;
  padding-top: 30px;
  border-top: 1px solid var(--webelan-line);
  color: #fff;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.15;
  text-transform: uppercase;
}
.webelan-article ul,
.webelan-article ol {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.webelan-article li {
  position: relative;
  margin: 0 0 10px;
  padding: 0 0 0 30px;
}
.webelan-article li::before {
  content: "";
  position: absolute;
  top: 0.9em;
  left: 0;
  width: 14px;
  height: 1px;
  background-color: var(--webelan-orange);
}
.webelan-article strong {
  font-weight: 700;
}
.webelan-article p a,
.webelan-article li a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--webelan-orange);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.webelan-article p a:hover,
.webelan-article li a:hover {
  color: var(--webelan-orange);
}
.webelan-article blockquote {
  margin: 64px 0;
  padding: 0 0 0 30px;
  border-left: 1px solid var(--webelan-orange);
  color: #fff;
  font-family: var(--font-accent);
  font-size: clamp(24px, 2.4vw, 33px);
  font-style: italic;
  font-weight: 500;
  line-height: 1.35;
  text-transform: none;
}
.webelan-article figure {
  margin: 64px 0;
}
.webelan-article figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}
/* Appel à l'action au milieu de l'article : même bandeau que les pages, dans la colonne. */
.webelan-article .webelan-cta-band {
  margin: 72px 0;
  padding: 40px 0;
}
.webelan-article .webelan-cta-band-text {
  max-width: none;
  font-size: clamp(21px, 1.9vw, 26px);
}
.webelan-article .webelan-cta-band + h2 {
  margin-top: 0;
  border-top: 0;
}
/* Sources en fin d'article : plus discrètes. */
.webelan-article-sources {
  margin-top: 72px;
  padding-top: 30px;
  border-top: 1px solid var(--webelan-line);
}
.webelan-article .webelan-article-sources h2 {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  color: var(--webelan-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.webelan-article-sources li {
  margin-bottom: 6px;
  font-size: 15px;
  line-height: 1.6;
}
.webelan-article-sources li::before {
  top: 0.8em;
}

/* Pages légales : une rubrique par ligne, titre à gauche, texte à droite. */
.webelan-mentions {
  border-top: 1px solid var(--webelan-line);
}
.webelan-mentions-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 16px 56px;
  padding: 36px 0;
  border-bottom: 1px solid var(--webelan-line);
}
.webelan-mentions-row h2 {
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-transform: uppercase;
}
.webelan-mentions-text p,
.webelan-mentions-text li {
  margin: 0;
  color: #fff;
  font-size: 17px;
  line-height: 1.75;
  text-transform: none;
}
.webelan-mentions-text ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.webelan-mentions-text li {
  position: relative;
  margin-bottom: 6px;
  padding: 0 0 0 28px;
}
.webelan-mentions-text li::before {
  content: "";
  position: absolute;
  top: 0.9em;
  left: 0;
  width: 14px;
  height: 1px;
  background-color: var(--webelan-orange);
}
.webelan-mentions-text a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--webelan-orange);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* Pied de page commun : grand « Parlons / projet. », bouton, puis les informations sur fins traits.
   Le contenu passe au-dessus du dégradé du haut (.overlay-bottom.top) pour rester net et cliquable. */
.webelan-pied {
  position: relative;
  z-index: 1;
  text-transform: none;
}
.webelan-pied-cta {
  text-align: center;
}
.webelan-pied-titre {
  margin: 0;
  color: #fff;
  font-size: clamp(44px, 8vw, 120px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 0.98;
  text-transform: uppercase;
}
.webelan-pied-trait {
  color: var(--webelan-orange);
  font-weight: 300;
}
.webelan-pied-gris {
  color: rgba(255, 255, 255, 0.55);
}
.webelan-pied-grille {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 120px;
  border-top: 1px solid var(--webelan-line);
}
.webelan-pied-grille > div {
  padding: 32px 32px 0 0;
}
.webelan-pied-grille p {
  margin: 0;
  color: #fff;
  font-size: 15px;
  line-height: 1.75;
  text-transform: none;
}
.webelan-pied-grille .webelan-label {
  margin-bottom: 14px;
  color: var(--webelan-muted);
  font-size: 12px;
  line-height: 1.6;
  text-transform: uppercase;
}
.webelan-pied-grille a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.3s ease;
}
.webelan-pied-grille a:hover,
.webelan-pied-grille a:focus-visible {
  text-decoration-color: var(--webelan-orange);
}
.webelan-pied-grille .webelan-pied-note {
  margin-top: 12px;
  color: var(--webelan-muted);
}
.webelan-pied-bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 88px;
  padding-top: 24px;
  border-top: 1px solid var(--webelan-line);
}
.webelan-pied-bas p {
  margin: 0;
  color: var(--webelan-muted);
  font-size: 13px;
  line-height: 1.6;
  text-transform: none;
}
.webelan-pied-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.webelan-pied-liens a {
  color: var(--webelan-muted);
  text-decoration: none;
  transition: color 0.3s ease;
}
.webelan-pied-liens a:hover,
.webelan-pied-liens a:focus-visible {
  color: #fff;
}
@media screen and (max-width: 991px) {
  .webelan-pied-grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 88px;
  }
  .webelan-pied-grille > div:nth-child(n + 3) {
    margin-top: 16px;
  }
}
@media screen and (max-width: 767px) {
  .webelan-mentions-row {
    grid-template-columns: minmax(0, 1fr);
    padding: 28px 0;
  }
}
@media screen and (max-width: 479px) {
  .webelan-pied-grille {
    grid-template-columns: minmax(0, 1fr);
  }
  .webelan-pied-grille > div {
    padding-right: 0;
  }
  .webelan-pied-grille > div:nth-child(n + 2) {
    margin-top: 8px;
  }
  .webelan-pied-bas {
    flex-direction: column;
  }
}

/* Questions fréquentes : titre à gauche (reste visible au défilement), questions à droite.
   <details> : s'ouvre au clic et au clavier, sans script. */
.webelan-faq-layout {
  display: grid;
  grid-template-columns: 1fr 1.55fr;
  gap: 72px;
  align-items: start;
  padding-top: 30px;
  border-top: 1px solid var(--webelan-line);
}
.webelan-faq-layout > div:first-child {
  position: sticky;
  top: 140px;
}
.webelan-faq-item {
  border-bottom: 1px solid var(--webelan-line);
}
.webelan-faq-item:first-child {
  border-top: 1px solid var(--webelan-line);
}
.webelan-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 28px 0;
  cursor: pointer;
  list-style: none;
  color: #fff;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: none;
}
.webelan-faq-item summary::-webkit-details-marker {
  display: none;
}
.webelan-faq-icon {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.webelan-faq-icon::before,
.webelan-faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1px;
  background-color: #fff;
  transform: translate(-50%, -50%);
  transition: transform 0.35s ease, background-color 0.3s ease;
}
.webelan-faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.webelan-faq-item summary:hover .webelan-faq-icon,
.webelan-faq-item summary:focus-visible .webelan-faq-icon {
  border-color: #fff;
  background-color: #fff;
}
.webelan-faq-item summary:hover .webelan-faq-icon::before,
.webelan-faq-item summary:hover .webelan-faq-icon::after,
.webelan-faq-item summary:focus-visible .webelan-faq-icon::before,
.webelan-faq-item summary:focus-visible .webelan-faq-icon::after {
  background-color: #000;
}
.webelan-faq-item[open] .webelan-faq-icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}
.webelan-faq-answer {
  padding: 0 72px 30px 0;
  animation: webelan-faq-in 0.4s ease both;
}
.webelan-faq-answer p {
  margin: 0;
  font-size: 17px;
  line-height: 1.75;
}
.webelan-faq-answer a,
.webelan-faq-more a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--webelan-orange);
  text-underline-offset: 4px;
}
.webelan-faq-more a {
  white-space: nowrap;
}
.webelan-faq-more {
  margin: 34px 0 0;
  color: var(--webelan-muted);
  font-size: 15px;
  line-height: 1.6;
}
@keyframes webelan-faq-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* Villes voisines : liste de liens sur fins traits. */
.webelan-cities {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.webelan-cities a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid var(--webelan-line);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 0.3s ease;
}
.webelan-cities a::after {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 1px;
  background-color: currentColor;
  transition: width 0.35s ease;
}
.webelan-cities a:hover,
.webelan-cities a:focus-visible {
  border-bottom-color: #fff;
}
.webelan-cities a:hover::after,
.webelan-cities a:focus-visible::after {
  width: 40px;
}

/* Page « Zones d'intervention » : villes groupées par secteur, avec le temps de trajet. */
.webelan-zone-group {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 72px;
  padding-top: 30px;
  border-top: 1px solid var(--webelan-line);
}
.webelan-zone-group + .webelan-zone-group {
  margin-top: 72px;
}
.webelan-zone-title {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.15;
  text-transform: uppercase;
}
.webelan-cities-2 {
  grid-template-columns: repeat(2, 1fr);
}
.webelan-cities a > span:first-child {
  flex: 1 1 auto;
}
.webelan-cities-meta {
  color: var(--webelan-muted);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: none;
  white-space: nowrap;
}
/* Première rangée de liens alignée sur le haut du nom du secteur. */
.webelan-zone-group .webelan-cities li:nth-child(-n+2) a {
  padding-top: 0;
}

/* ---------- Accueil ---------- */
.webelan-center {
  display: flex;
  justify-content: center;
  margin-top: 64px;
}
.webelan-center-text {
  text-align: center;
}
/* Haut de l'accueil : garde l'image de fond et son voile ; titre plus large, lisible sur l'image. */
.webelan-acquisition-hero .webelan-display {
  max-width: none;
  font-size: clamp(32px, 5vw, 70px);
  text-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
}
/* Retour à la ligne voulu sur grand écran seulement (sur téléphone, le titre se coupe tout seul). */
@media screen and (max-width: 767px) {
  .webelan-br-large {
    display: none;
  }
}
.webelan-acquisition-hero .webelan-accroche {
  text-shadow: 0 10px 36px rgba(0, 0, 0, 0.45);
}
/* Chiffres clés placés dans une section (et non plus en haut de page). */
.webelan-facts-sec {
  margin-top: 88px;
  text-align: center;
}
/* Petit libellé du service, sous le numéro. */
.webelan-cell-label {
  margin: 22px 0 0;
  color: var(--webelan-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.5;
  text-transform: uppercase;
}
.webelan-cell .webelan-cell-label {
  margin: 22px 0 0;
  letter-spacing: 0.12em;
}
.webelan-cell-label + h3 {
  margin-top: 12px;
}

/* Réalisations et analyses : grille de deux, image puis légende sur un fin trait. */
.webelan-projects,
.webelan-posts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 80px 40px;
}
.webelan-project,
.webelan-post {
  display: block;
  color: #fff;
  text-decoration: none;
}
.webelan-project-visual,
.webelan-post-visual {
  overflow: hidden;
  border-radius: 4px;
}
.webelan-project-visual img,
.webelan-post-visual img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.webelan-post-visual img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.webelan-project:hover img,
.webelan-project:focus-visible img,
.webelan-post:hover img,
.webelan-post:focus-visible img {
  transform: scale(1.03);
}
.webelan-project-meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--webelan-line);
}
.webelan-project-meta .webelan-label,
.webelan-post .webelan-label {
  margin-bottom: 10px;
}
.webelan-project-title {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.1;
  text-transform: uppercase;
}
.webelan-project .webelan-more,
.webelan-post .webelan-more {
  flex: 0 0 auto;
}
.webelan-project:hover .webelan-more::after,
.webelan-project:focus-visible .webelan-more::after,
.webelan-post:hover .webelan-more::after,
.webelan-post:focus-visible .webelan-more::after {
  width: 48px;
}
.webelan-post .webelan-label {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--webelan-line);
}
.webelan-post-title {
  margin: 0 0 24px;
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  text-transform: none;
}

/* Avis : les cartes qui défilent (boucle « load:gallery »), en version épurée. */
/* Les cartes dépassent de l'écran : on les coupe au bord de la section. Sans ça, la page défile
   à l'horizontale dès la 2e visite de l'accueil (l'intro sautée ne coupe plus rien). */
.webelan-avis {
  overflow: hidden;
}
@supports (overflow: clip) {
  .webelan-avis {
    overflow: visible;
    overflow-x: clip;
  }
}
.webelan-avis .gallery {
  margin-top: 0;
  align-items: stretch;
}
.webelan-avis .testimonials-small.webelan-avis-card {
  display: flex;
  flex-direction: column;
  max-width: 420px;
  padding: 36px 34px 32px !important;
  border: 1px solid var(--webelan-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.webelan-avis-stars {
  margin: 0;
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.3em;
  line-height: 1;
}
.webelan-avis-quote {
  margin: 22px 0 30px;
  padding: 0;
  border: 0;
  color: #fff;
  font-family: var(--font-accent);
  font-size: 22px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.4;
  text-transform: none;
}
.webelan-avis-author {
  margin: auto 0 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
}
.webelan-avis-author span {
  color: var(--webelan-muted);
}

.webelan-faq-intro {
  margin-top: 22px;
  color: var(--webelan-muted);
}

/* ---------- Tablette ---------- */
@media screen and (max-width: 991px) {
  .webelan-sec {
    padding-top: 110px;
  }
  .webelan-split,
  .webelan-faq-layout,
  .webelan-sec-head-intro {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .webelan-faq-layout > div:first-child {
    position: static;
  }
  .webelan-grid3 {
    grid-template-columns: minmax(0, 1fr);
  }
  .webelan-cell + .webelan-cell {
    border-top: 1px solid var(--webelan-line);
    border-left: 0;
  }
  .webelan-ref {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .webelan-ref-inverse .webelan-ref-visual {
    order: 0;
  }
  .webelan-ref + .webelan-ref {
    margin-top: 80px;
  }
  .webelan-steps {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .webelan-steps-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .webelan-cities {
    grid-template-columns: repeat(2, 1fr);
  }
  .webelan-projects,
  .webelan-posts {
    gap: 64px 28px;
  }
  .webelan-zone-group {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .webelan-zone-group + .webelan-zone-group {
    margin-top: 56px;
  }
}

/* ---------- Téléphone ---------- */
@media screen and (max-width: 767px) {
  .webelan-sec {
    padding-top: 88px;
  }
  .webelan-sec-last {
    padding-bottom: 100px;
  }
  .webelan-sec-head {
    margin-bottom: 40px;
  }
  .webelan-facts {
    grid-template-columns: 1fr;
    margin-top: 64px;
    text-align: left;
  }
  .webelan-facts li {
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: 22px 0;
  }
  .webelan-facts li + li {
    border-top: 1px solid var(--webelan-line);
    border-left: 0;
  }
  .webelan-fact-value {
    flex: 0 0 120px;
    font-size: 28px;
  }
  .webelan-fact-text {
    margin-top: 0;
  }
  .webelan-projects,
  .webelan-posts {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .webelan-rows li,
  .webelan-rows-simple li {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .webelan-fiche {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .webelan-sec-cta {
    padding-top: 80px;
  }
  .webelan-cta-band {
    grid-template-columns: 1fr;
    padding: 40px 0;
  }
  .webelan-project-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .webelan-avis .testimonials-small.webelan-avis-card {
    max-width: 300px;
    padding: 28px 24px 26px !important;
  }
  .webelan-avis-quote {
    font-size: 19px;
  }
  .webelan-split-text p,
  .webelan-sec-intro {
    font-size: 16px;
    line-height: 1.7;
  }
  .webelan-cell {
    padding: 36px 26px 34px;
  }
  .webelan-steps .webelan-num {
    font-size: 48px;
  }
  .webelan-steps-4 {
    grid-template-columns: 1fr;
  }
  .webelan-faq-item summary {
    padding: 24px 0;
    font-size: 17px;
  }
  .webelan-faq-answer {
    padding-right: 0;
  }
  .webelan-faq-answer p {
    font-size: 16px;
  }
}

@media screen and (max-width: 479px) {

  .webelan-hero-ville .webelan-breadcrumb {
    margin-bottom: 32px;
  }

  .webelan-cities,
  .webelan-cities-2 {
    grid-template-columns: 1fr;
  }

  .webelan-zone-group .webelan-cities li:nth-child(2) a {
    padding-top: 24px;
  }

  .webelan-btn {
    width: 100%;
  }

  .webelan-actions-cta {
    flex-direction: column;
    gap: 14px;
  }

  .webelan-cta-band-actions {
    align-items: stretch;
    text-align: center;
  }

  .webelan-cta-band-actions .webelan-link {
    justify-content: center;
  }

  .webelan-cta {
    justify-content: space-between;
    width: 100%;
    padding-left: 26px;
  }

}

/* Petits téléphones : le mot le plus long d'un grand titre (« réalisations », « transports ») tient sur la ligne. */
@media screen and (max-width: 479px) {
  .webelan-display {
    font-size: clamp(30px, 11.5vw, 42px);
  }
}
/* Très petits téléphones : les mots longs des grands titres (« référencement ») tiennent sur la ligne. */
@media screen and (max-width: 360px) {
  .webelan-display.webelan-display-long {
    font-size: 27px;
  }
  .webelan-offer-action .webelan-cta {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .webelan-ref-visual img,
  .webelan-faq-answer {
    transition: none;
    animation: none;
  }
  .webelan-cta:hover > span:first-child {
    opacity: 1;
    transform: none;
  }
  .webelan-cta:hover .webelan-cta-icon {
    right: 10px;
  }
}