/* =========================================================
   Feuille de style principale
   Palette et typographie centralisées dans :root — il suffit
   de changer ces variables pour adapter le site à une marque.
   ========================================================= */

/* Palette relevée directement sur le logo DAK Solutions :
   orange #f0a850 · violet-indigo #504898 · rouge #f04018
   bleu clair #50a8e0 · navy #283080 · gris du texte #303030 */
:root {
  --ink:        #16182e;   /* texte principal / fond sombre */
  --ink-soft:   #232647;
  --accent:     #504898;   /* violet-indigo du logo — liens, boutons */
  --accent-dk:  #3c3675;
  --accent-lt:  #edecf8;
  --warm:       #f0a850;   /* orange du logo — chiffres clés */
  --muted:      #5b6b80;   /* texte secondaire */
  --line:       #e2e8f0;   /* bordures */
  --bg:         #ffffff;
  --bg-alt:     #f6f8fb;   /* sections alternées */
  --white:      #ffffff;

  --radius:     14px;
  --max-width:  1180px;
  --shadow:     0 1px 3px rgba(22, 24, 46, 0.06), 0 6px 20px rgba(22, 24, 46, 0.05);
  --shadow-lg:  0 12px 40px rgba(22, 24, 46, 0.12);

  --font:    -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  /* Pile japonaise : polices réellement présentes sur macOS/iOS/Windows/Android */
  --font-ja: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
             "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Les révélations latérales décalent les blocs de 100px : sans cela, une
     barre de défilement horizontale apparaît (constatée sur contact.html).
     `clip` et non `hidden` : `hidden` créerait un conteneur de défilement,
     ce qui casserait le `position: sticky` de l'en-tête. */
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.22; font-weight: 800; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.3rem); }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.3rem); }
h3 { font-size: 1.16rem; }
h4 { font-size: 1rem; }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: 820px; }

/* ---------------------------------------------------------
   TYPOGRAPHIE JAPONAISE
   Le japonais ne se justifie pas comme le latin : pas de
   crénage négatif, interlignage plus généreux, graisse 700
   (le 800 n'existe pas dans la plupart des polices JP et est
   alors synthétisé, ce qui rend le texte flou).
   --------------------------------------------------------- */
html:lang(ja) body { font-family: var(--font-ja); line-height: 1.85; }
html:lang(ja) h1,
html:lang(ja) h2,
html:lang(ja) h3,
html:lang(ja) h4 { letter-spacing: 0; font-weight: 700; line-height: 1.5; }
html:lang(ja) h1 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
html:lang(ja) h2 { font-size: clamp(1.4rem, 2.6vw, 1.95rem); }
html:lang(ja) .eyebrow { letter-spacing: 0.06em; }
html:lang(ja) .stat-num { letter-spacing: 0; }

/* Le japonais n'a pas d'espaces : le navigateur coupe donc n'importe où, y
   compris au milieu d'un mot — 「安全パート／ナー」 par exemple. Deux garde-fous :
   1. `line-break: strict` applique les règles de 禁則処理 (une ligne ne peut
      pas commencer par ー, っ, ゃ, ni par un signe de ponctuation) ;
   2. `.nw` rend chaque unité de sens insécable, ce qui est la technique
      habituelle des sites japonais pour les titres.
   Si une unité est plus large que l'écran, elle se coupe quand même : la
   dégradation reste propre. */
html:lang(ja) { line-break: strict; }
html:lang(ja) h1 { text-wrap: balance; }
.nw { display: inline-block; }

/* Lien d'évitement (accessibilité clavier) */
.skip-link {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--white);
  padding: 12px 20px; z-index: 200; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; top: 0; }

/* =========================================================
   ANIMATIONS AU DÉFILEMENT
   État initial = invisible + décalé ; .is-visible (ajouté par
   le JS) ramène l'élément à sa position naturelle.

   Réglages calés sur AOS tel qu'il est configuré sur le site
   de référence sen-coding.co.jp :
     AOS.init({duration: 400, easing: "ease-in-out", once: true})
   + les valeurs par défaut d'AOS : déplacement de 100px et
   déclenchement à 120px à l'intérieur du viewport (offset).
   Un déplacement court (26px) passe inaperçu — c'est la
   distance, pas la durée, qui rend l'animation visible.
   ========================================================= */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 100px, 0);
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translate3d(-100px, 0, 0); }
[data-reveal="right"] { transform: translate3d(100px, 0, 0); }
[data-reveal="zoom"]  { transform: scale(0.6); }

[data-reveal].is-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   EN-TÊTE
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: padding 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  padding: 16px 0;
}
.site-header.is-compact {
  padding: 9px 0;
  border-bottom-color: var(--line);
  box-shadow: 0 2px 18px rgba(22, 24, 46, 0.05);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-right { display: flex; align-items: center; gap: 28px; }
.brand {
  display: flex; align-items: center; gap: 11px;
  font-weight: 800; font-size: 1.18rem; color: var(--ink); letter-spacing: -0.03em;
}
.brand:hover { text-decoration: none; }
.brand img { height: 42px; width: auto; transition: height 0.3s ease; }
.site-header.is-compact .brand img { height: 34px; }
.brand span { color: var(--accent); }
/* Le nom est déjà dans le logo, mais illisible sous 60px : on le répète
   en texte à côté de la marque, comme le font la plupart des logos ronds. */
.brand-name { white-space: nowrap; }
html:lang(ja) .brand-name { letter-spacing: 0; }

.nav-links { display: flex; gap: 26px; list-style: none; align-items: center; }
.nav-links a { color: var(--ink); font-size: 0.93rem; font-weight: 600; position: relative; }
.nav-links a:hover { text-decoration: none; color: var(--accent); }
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: -6px;
  width: 100%; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s ease;
}
.nav-links a:hover::after,
.nav-links a.is-current::after { transform: scaleX(1); }
.nav-links a.is-current { color: var(--accent); }

/* Sélecteur de langue */
.lang-switch { display: flex; list-style: none; gap: 2px; align-items: center; }
.lang-switch a {
  display: block; padding: 5px 9px; border-radius: 7px;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--muted);
}
.lang-switch a:hover { text-decoration: none; background: var(--accent-lt); color: var(--accent); }
.lang-switch a.is-current { background: var(--ink); color: var(--white); }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 42px; height: 38px; padding: 8px;
}
.nav-toggle span {
  display: block; height: 2px; background: var(--ink);
  margin: 5px 0; border-radius: 2px; transition: 0.3s;
}

/* =========================================================
   HÉROS
   ========================================================= */
.hero {
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 55%, var(--accent-dk) 130%);
  color: var(--white);
  padding: 80px 0 126px;
  position: relative; overflow: hidden;
  /* La hauteur suit le format de la photo (1634x1536, soit un ratio de
     1,064) : c'est la seule façon d'en montrer la quasi-totalité en
     cadrage `cover`, des pointes des tours jusqu'au technicien en bas.
     Divisé par 1,15 plutôt que 1,064 pour ne pas dépasser démesurément
     l'écran, et borné à 1150px pour les très grands moniteurs. */
  min-height: clamp(640px, calc(100vw / 1.15), 1150px);
  /* Contenu ancré en haut, pas centré : le héros dépasse volontairement la
     hauteur de l'écran pour montrer la photo en entier, mais texte, boutons
     ET certifications doivent rester visibles sans défiler. Centré, le bloc
     descendait à 1023px sur un écran de 900. */
  display: flex; align-items: flex-start;
}
.hero::before {
  content: ''; position: absolute;
  width: 720px; height: 720px; right: -180px; top: -260px;
  background: radial-gradient(circle, rgba(80, 72, 152, 0.55), transparent 65%);
  border-radius: 50%;
  animation: float 14s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-40px, 30px) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }

/* ---------------------------------------------------------
   DÉCOR DU HÉROS
   1. .hero-photo : la photo de Tokyo, en plein cadre, avec un
      lent mouvement d'échelle (« Ken Burns ») qui donne la
      sensation d'une vidéo sans en peser le poids.
   2. .hero::after : le voile sombre. Sans lui, le texte blanc
      passe sur un ciel clair et devient illisible — c'est la
      contrepartie obligatoire d'une photo derrière du texte.
   3. .hero-net : le réseau de particules, par-dessus.
   Tout est décoratif : aria-hidden et pointer-events:none.
   --------------------------------------------------------- */
.hero-photo,
.hero-net { position: absolute; inset: 0; pointer-events: none; }
/* Débordement de 22 px de chaque côté : la parallaxe déplace ce conteneur,
   sans cette marge un liseré sombre apparaîtrait sur le bord opposé. */
.hero-photo { z-index: 0; overflow: hidden; inset: -22px; }
.hero-net   { z-index: 2; }

.hero-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Cadrage aligné en haut : les pointes de la Tokyo Tower et de la Skytree
     sont tout en haut de la photo, un cadrage centré les décapite. */
  object-position: 50% 0%;
  /* Point d'ancrage du zoom en haut, et aucun déplacement vertical : sinon
     l'agrandissement (×1,12) rogne justement le bord haut et fait
     réapparaître le problème au fil de l'animation. */
  transform-origin: 50% 0%;
  animation: kenburns 30s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenburns {
  from { transform: scale(1.00); }
  to   { transform: scale(1.10) translate3d(-1.2%, 0, 0); }
}

/* Le voile : sombre à gauche où se trouve le texte, presque
   transparent à droite pour laisser voir la Skytree. */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(104deg,
      rgba(22, 24, 46, 0.64) 0%,
      rgba(22, 24, 46, 0.46) 34%,
      rgba(22, 24, 46, 0.18) 66%,
      rgba(22, 24, 46, 0.06) 100%),
    linear-gradient(to bottom,
      rgba(22, 24, 46, 0.34) 0%,
      rgba(22, 24, 46, 0.00) 26%,
      rgba(22, 24, 46, 0.00) 82%,
      rgba(22, 24, 46, 0.16) 100%);
}

/* Le halo décoratif n'a plus lieu d'être devant une photo. */
.hero::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-photo img { animation: none; transform: none; }
}

/* Sur un écran vertical, un cadrage plein écran rogne l'image sur les côtés
   et fait disparaître Tokyo Tower ET la Skytree — soit exactement ce qu'on
   veut montrer. La photo devient donc un bandeau qui garde toute sa largeur,
   fondu vers le haut pour ne pas donner l'impression d'une bande collée. */
@media (max-width: 760px) {
  .hero { min-height: clamp(560px, 88vh, 820px); }
  .hero-photo {
    top: auto; height: min(66%, 540px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 22%);
  }
  .hero-photo img { object-position: 50% 30%; }
  .hero::after {
    background:
      linear-gradient(to bottom,
        rgba(22, 24, 46, 0.34) 0%,
        rgba(22, 24, 46, 0.08) 40%,
        rgba(22, 24, 46, 0.42) 100%);
  }
}

.hero .container { position: relative; z-index: 3; max-width: 960px; width: 100%; }
/* Halo sombre localisé derrière le bloc de texte. Le voile global a été
   allégé pour éclaircir la photo, ce qui a fait tomber le contraste du titre
   à 3,95:1 — tout juste au seuil. Ce halo rend les lettres au contraste
   nécessaire là où elles se trouvent, sans réassombrir le reste de l'image.
   z-index négatif : il passe derrière le texte tout en restant au-dessus du
   voile, car .container crée son propre contexte d'empilement. */
.hero .container::before {
  content: ''; position: absolute; inset: -10% -16% -12% -18%;
  z-index: -1; pointer-events: none;
  background: radial-gradient(58% 66% at 30% 50%,
    rgba(22, 24, 46, 0.52) 0%,
    rgba(22, 24, 46, 0.30) 52%,
    rgba(22, 24, 46, 0.00) 78%);
}
@media (max-width: 760px) {
  .hero .container::before {
    inset: -6% -12%;
    background: radial-gradient(80% 60% at 50% 42%,
      rgba(22, 24, 46, 0.50) 0%,
      rgba(22, 24, 46, 0.26) 58%,
      rgba(22, 24, 46, 0.00) 82%);
  }
}
/* Le voile est volontairement plus léger qu'il ne « faudrait » pour laisser
   voir la Tokyo Tower : l'ombre portée reprend le contraste perdu, sans
   assombrir la photo. */
.hero .eyebrow { color: rgba(255, 255, 255, 0.86); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7); }
.hero h1 { color: var(--white); margin-bottom: 22px; text-shadow: 0 3px 22px rgba(0, 0, 0, 0.72); }
.hero p {
  font-size: 1.1rem; color: rgba(255, 255, 255, 0.96);
  max-width: 660px; margin-bottom: 34px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75);
}

/* Bandeau photo des pages intérieures.
   Un aplat de couleur ne disait rien du métier ; chaque page a désormais
   son cadrage, découpé dans la même scène que la page d'accueil — ce qui
   garde l'unité visuelle sans répéter la même image. */
.page-hero {
  position: relative; overflow: hidden;
  background: var(--ink);
  color: var(--white); padding: 84px 0 78px;
  display: flex; align-items: center;
}
.page-hero-photo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.page-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* Voile : sombre à gauche sous le texte, transparent à droite pour la photo. */
.page-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(22, 24, 46, 0.86) 0%,
      rgba(22, 24, 46, 0.68) 42%,
      rgba(22, 24, 46, 0.34) 78%,
      rgba(22, 24, 46, 0.22) 100%),
    linear-gradient(to bottom,
      rgba(22, 24, 46, 0.40) 0%,
      rgba(22, 24, 46, 0.00) 40%,
      rgba(22, 24, 46, 0.30) 100%);
}
.page-hero .container { position: relative; z-index: 2; width: 100%; }
.page-hero h1 { color: var(--white); text-shadow: 0 3px 20px rgba(0, 0, 0, 0.72); }
.page-hero p {
  color: rgba(255, 255, 255, 0.96); max-width: 680px; margin-top: 14px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75);
}

.breadcrumb { background: var(--bg-alt); border-bottom: 1px solid var(--line); font-size: 0.84rem; }
.breadcrumb .container { padding-top: 12px; padding-bottom: 12px; color: var(--muted); }
.breadcrumb span { color: var(--muted); }

.eyebrow {
  display: block; text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.75rem; font-weight: 700; color: var(--accent);
  margin-bottom: 14px;
}

/* =========================================================
   BOUTONS
   ========================================================= */
.btn {
  display: inline-block; padding: 14px 30px; border-radius: 999px;
  font-weight: 700; font-size: 0.95rem; cursor: pointer;
  border: 2px solid transparent; font-family: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-primary { background: var(--accent); color: var(--white); }
.btn-primary:hover { background: var(--accent-dk); box-shadow: 0 10px 26px rgba(80, 72, 152, 0.34); }
.btn-ghost { border-color: rgba(255, 255, 255, 0.55); color: var(--white); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--white); }
.btn-sm { padding: 11px 22px; font-size: 0.88rem; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* =========================================================
   SECTIONS ET GRILLES
   ========================================================= */
.section { padding: 92px 0; }
.section--alt { background: var(--bg-alt); }
.section--dark { background: var(--ink); color: var(--white); }
.section--dark h2 { color: var(--white); }
.section--dark .lead { color: rgba(255, 255, 255, 0.78); }

.section-head { max-width: 700px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.lead { color: var(--muted); font-size: 1.04rem; margin-top: 14px; }
.prose { color: var(--muted); font-size: 1.02rem; margin-bottom: 18px; }

.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* =========================================================
   BANDEAU CERTIFICATIONS — dans le héros, sur la photo
   Les pastilles sont en verre dépoli plutôt qu'en fond plein :
   sur une photo, un fond opaque ferait autocollant.
   ========================================================= */
.hero-badges {
  margin-top: 38px; padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.badge-title {
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
  margin-bottom: 14px;
}
.badges { list-style: none; display: flex; flex-wrap: wrap; gap: 9px; }
.badges li {
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--white);
  border-radius: 999px; padding: 6px 15px;
  font-size: 0.81rem; font-weight: 600;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
html:lang(ja) .badges li { letter-spacing: 0; }

/* =========================================================
   CARTES
   ========================================================= */
.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px;
  box-shadow: var(--shadow);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 0.95rem; }

.card-num {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 11px;
  background: var(--accent-lt); color: var(--accent);
  font-weight: 800; margin-bottom: 16px;
}
.card-link { display: inline-block; margin-top: 18px; font-weight: 700; font-size: 0.9rem; }
.card-link:hover { text-decoration: none; }

.pillar { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.pillar > :not(.pillar-media) { padding-left: 30px; padding-right: 30px; }
.pillar > :last-child { padding-bottom: 30px; }
.pillar .tick { margin-top: 16px; }

/* Photo en tête de carte, avec le numéro posé dessus */
.pillar-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 22px; }
.pillar-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.pillar:hover .pillar-media img { transform: scale(1.05); }
.pillar-media .card-num {
  position: absolute; left: 18px; bottom: -22px; margin: 0;
  background: var(--white); box-shadow: var(--shadow);
}

/* En-tête illustré des groupes de la page Services */
.svc-head {
  display: grid; grid-template-columns: 280px 1fr; gap: 26px;
  align-items: center; margin-bottom: 28px;
}
.svc-head img {
  width: 100%; height: 100%; max-height: 190px; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.svc-head h3 {
  font-size: 1.35rem; padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 2px solid var(--line);
}
.svc-head .svc-intro { margin-bottom: 0; }
@media (max-width: 760px) {
  .svc-head { grid-template-columns: 1fr; gap: 18px; }
  .svc-head img { max-height: 200px; }
}

/* Listes à puce cochée */
ul.tick { list-style: none; }
ul.tick li {
  position: relative; padding-left: 26px; margin-bottom: 9px;
  font-size: 0.93rem; color: var(--ink);
}
ul.tick li::before {
  content: ''; position: absolute; left: 4px; top: 0.62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}

/* =========================================================
   SECTEURS (pastilles)
   ========================================================= */
.chip-grid {
  list-style: none; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
.chip-grid li {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 999px; padding: 11px 22px;
  font-size: 0.92rem; font-weight: 600;
  box-shadow: var(--shadow);
}

/* =========================================================
   POURQUOI MOI
   ========================================================= */
.why-grid { gap: 34px; }
.why-item { border-left: 3px solid var(--accent); padding-left: 22px; }
.why-item h3 { margin-bottom: 8px; }
.why-item p { color: var(--muted); font-size: 0.96rem; }

/* =========================================================
   CHIFFRES CLÉS
   ========================================================= */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.stat-num {
  font-size: clamp(2.2rem, 4.5vw, 3.1rem); font-weight: 800;
  color: var(--warm); line-height: 1; letter-spacing: -0.03em;
}
.stat-label { font-size: 0.88rem; color: rgba(255, 255, 255, 0.75); margin-top: 8px; }

/* =========================================================
   PAGE SERVICES
   ========================================================= */
.svc-group { margin-bottom: 62px; }
.svc-group:last-child { margin-bottom: 0; }
.svc-intro { color: var(--muted); max-width: 760px; margin-bottom: 26px; font-size: 0.98rem; }
.svc-item {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px;
  box-shadow: var(--shadow);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.svc-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.svc-item h4 { margin-bottom: 10px; font-size: 1.02rem; }
.svc-item p { color: var(--muted); font-size: 0.93rem; }
.svc-for {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 0.86rem !important;
}
.svc-for strong { color: var(--accent); }

/* Étapes numérotées */
.process { gap: 22px; }
.step { position: relative; padding-top: 8px; }
.step-num {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink); color: var(--white);
  font-weight: 800; font-size: 0.95rem; margin-bottom: 14px;
}
.step h3 { font-size: 1.02rem; margin-bottom: 6px; }
.step p { color: var(--muted); font-size: 0.92rem; }

/* Qualifications */
.cred-group {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow);
}
.cred-group h3 {
  font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent); margin-bottom: 14px;
}

/* =========================================================
   BANDEAU D'APPEL À L'ACTION
   ========================================================= */
.cta-band {
  background: linear-gradient(120deg, var(--accent-dk), var(--ink));
  color: var(--white); padding: 68px 0; text-align: center;
}
.cta-band h2 { color: var(--white); max-width: 760px; margin: 0 auto 14px; }
.cta-band p { color: rgba(255, 255, 255, 0.9); max-width: 620px; margin: 0 auto 26px; }
.cta-band .btn-primary { background: var(--white); color: var(--accent-dk); }
.cta-band .btn-primary:hover { background: var(--white); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28); }

/* =========================================================
   FORMULAIRE
   ========================================================= */
.contact-form { text-align: left; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.86rem; font-weight: 700; margin-bottom: 7px; }
.field input,
.field select,
.field textarea {
  font-family: inherit; font-size: 0.95rem; color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(80, 72, 152, 0.18);
}
/* Champ piège à robots — invisible mais pas display:none (certains bots l'ignorent) */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.form-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 22px; }
.form-note { font-size: 0.9rem; font-weight: 600; margin: 0; }
.form-note.is-ok { color: #15803d; }
.form-note.is-error { color: #b91c1c; }
.form-privacy { font-size: 0.8rem; color: var(--muted); margin-top: 14px; }
.form-recaptcha { margin-top: 6px; }
.form-recaptcha a { color: var(--muted); text-decoration: underline; }
.form-recaptcha a:hover { color: var(--accent); }
/* Le badge flottant de Google est masqué — ce qui n'est autorisé QUE si la
   mention légale est affichée près du formulaire, d'où `.form-recaptcha`. */
.grecaptcha-badge { visibility: hidden; }

/* Page contact : formulaire + colonne latérale */
.contact-layout { grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }
.contact-aside { display: grid; gap: 22px; }
.contact-aside .card:hover { transform: none; box-shadow: var(--shadow); }
.detail-list { list-style: none; margin-top: 6px; }
.detail-list li {
  display: flex; gap: 14px; padding: 11px 0;
  border-bottom: 1px solid var(--line); font-size: 0.92rem;
}
.detail-list li:last-child { border-bottom: 0; }
.detail-list .dt { flex: 0 0 40%; color: var(--muted); font-weight: 600; }
.detail-list .dd { flex: 1; word-break: break-word; }

/* =========================================================
   PIED DE PAGE
   ========================================================= */
.site-footer { background: var(--ink); color: rgba(255, 255, 255, 0.72); padding: 68px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1.2fr 1fr 1fr; gap: 40px; }
.site-footer h3 {
  color: var(--white); font-size: 0.8rem; text-transform: uppercase;
  letter-spacing: 0.1em; margin-bottom: 16px; font-weight: 700;
}
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 10px; font-size: 0.9rem; }
.site-footer a { color: rgba(255, 255, 255, 0.72); }
.site-footer a:hover { color: var(--white); }
.footer-brand {
  display: flex; align-items: center; gap: 12px;
  font-weight: 800; font-size: 1.22rem; color: var(--white); margin-bottom: 14px;
}
/* Déclinaison blanche : le logo couleur contient un arc navy et un texte
   gris foncé, invisibles sur le pied de page sombre. */
.footer-brand img { height: 46px; width: auto; }
.footer-tagline { font-size: 0.9rem; margin-bottom: 8px; }
.footer-bottom {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 0.84rem;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1040px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
}
@media (max-width: 940px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .stats  { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .nav-toggle { display: block; order: 3; }
  .nav-right {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: flex-start;
    padding: 20px 24px; gap: 18px;
  }
  .nav-right.is-open { display: flex; }
  .nav-links { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hero { padding: 54px 0 86px; }
  .section { padding: 62px 0; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .grid-4, .stats, .footer-grid, .process { grid-template-columns: 1fr; }
  .badges li { font-size: 0.74rem; padding: 5px 11px; }
  .hero-badges { margin-top: 26px; padding-top: 20px; }
}

/* =========================================================
   TEXTE LONG — confidentialité et guides
   Une page de texte se lit à une largeur de colonne, pas à
   celle de l'écran : au-delà de ~75 caractères, l'œil perd
   la ligne suivante en revenant à la marge.
   ========================================================= */
.article-body h2 {
  font-size: 1.32rem;
  margin: 46px 0 16px;
  line-height: 1.35;
}
.article-body h2:first-child { margin-top: 0; }
.article-body .prose { font-size: 1.04rem; line-height: 1.78; color: var(--ink); }
.article-body .prose-list { margin: 0 0 22px; }
.article-body .prose-list li { color: var(--ink); line-height: 1.7; }
.article-body a { text-decoration: underline; text-underline-offset: 3px; }

/* Chapeau : le paragraphe qui pose la situation avant le premier titre. */
.lead-para {
  font-size: 1.22rem; line-height: 1.62; color: var(--ink);
  font-weight: 500; margin-bottom: 40px;
  padding-left: 20px; border-left: 3px solid var(--accent);
}
.updated { font-size: 0.86rem; color: var(--muted); margin-bottom: 34px; }

/* Le héros d'un guide porte un titre long : il lui faut de la place. */
.page-hero--article .eyebrow {
  color: var(--white); opacity: 0.9;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.page-hero--article h1 { max-width: 900px; font-size: clamp(1.7rem, 3.4vw, 2.6rem); }

.guide-card h3 { font-size: 1.16rem; line-height: 1.4; }
.guide-card h3 a { color: inherit; }
.guide-card h3 a:hover { color: var(--accent); text-decoration: none; }
.guide-card .eyebrow { margin-bottom: 10px; display: block; }

.more-guides {
  margin-top: 56px; padding-top: 30px; border-top: 1px solid var(--line);
}
.more-guides h2 { font-size: 1.1rem; margin-bottom: 14px; }
.more-guides ul { list-style: none; }
.more-guides li { margin-bottom: 10px; line-height: 1.5; }

@media (max-width: 700px) {
  .lead-para { font-size: 1.1rem; padding-left: 14px; }
  .article-body h2 { font-size: 1.18rem; margin-top: 36px; }
}

/* =========================================================
   ZONE D'INTERVENTION ET QUESTIONS FRÉQUENTES
   Les arrondissements sont écrits en toutes lettres : c'est
   ainsi qu'on cherche un artisan, « électricien + quartier ».
   ========================================================= */
.wards {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
  margin: 6px 0 24px;
}
.wards li {
  font-size: 0.88rem; color: var(--ink);
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px; white-space: nowrap;
}
html:lang(ja) .wards li { font-size: 0.9rem; }

.faq-item { padding: 22px 0; border-bottom: 1px solid var(--line); }
.faq-item:first-child { padding-top: 0; }
.faq-item:last-child { border-bottom: 0; padding-bottom: 0; }
.faq-item h3 { font-size: 1.06rem; line-height: 1.45; margin-bottom: 10px; }
.faq-item p { color: var(--muted); font-size: 0.99rem; line-height: 1.75; }

@media (max-width: 700px) {
  .wards li { font-size: 0.82rem; padding: 5px 11px; }
  .faq-item h3 { font-size: 1rem; }
}

/* Lien du guide vers la prestation correspondante : un lecteur convaincu
   ne doit pas avoir à chercher la page qui vend ce qu'il vient de lire. */
.guide-service {
  margin-top: 42px; padding: 16px 20px;
  background: var(--bg-alt); border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0; font-size: 0.98rem;
}
.guide-service a { font-weight: 700; }