/* SOLOMUND — styles additionnels, hors compilation Tailwind.
   Chargé APRÈS site.css. Ne jamais éditer site.css à la main. */

:root {
  --bleu-nuit: #1B2A4A;         /* fond du pied de page (option C validée) */
  --bleu-nuit-clair: #3B4E7B;   /* bleu foncé retenu — RVB 59·78·123 */

  /* Bascule globale : tout ce qui consommait le bleu vif #315cff
     (survols du menu, rôles sous les noms, icônes des cartes,
     bouton et accents du formulaire…) passe au bleu foncé retenu. */
  --blue: var(--bleu-nuit-clair);
}

/* Visuel du héros : image centrée et mise à l'échelle homothétique
   (aucune déformation), le cadre recadre ce qui dépasse. */
.signal img {
  object-fit: cover;
  object-position: center;
}

/* ── Pied de page et section « Notre méthode » : même dégradé
   diagonal bleu clair → bleu nuit (s'applique aussi à « Un parcours
   intégré » sur la page Formation, même classe .process). ────────── */
.footer,
.process {
  background: var(--bleu-nuit);   /* repli sans dégradé */
  background: linear-gradient(135deg, var(--bleu-nuit-clair) 0%, var(--bleu-nuit) 55%);
}

/* ── Ancres internes : point d'arrêt du défilement ────────────────
   La barre collante masquait le début des sections ciblées (le
   défilement allait « trop bas »). scroll-margin-top réserve la
   hauteur de la barre + une respiration : « Notre conviction »
   (#approche) et les autres cibles arrivent bien visibles. */
#approche,
#expertises,
#architecture,
#contact-formulaire {
  scroll-margin-top: 130px;
}

/* ── Liens du menu : plus gras, survol bleu souligné ────────────── */
.navlinks a {
  font-weight: 700;
}
.navlinks a:hover,
.navlinks a:focus-visible {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}
.nav-cta:hover,
.nav-cta:focus-visible {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

/* ── Navigation collante (PC uniquement) ──────────────────────────
   .nav passe en sticky : elle reste dans le flux, aucun saut de mise
   en page. site.js pilote deux classes :
   - .est-masquee  entre le sommet et le seuil de 650 px (translation) ;
   - .est-figee    dès que la page est défilée : la barre prend toute
     la largeur du viewport (fond + liseré bord à bord, y compris au-
     dessus des sections sombres), avec un rembourrage calculé pour que
     le contenu reste aligné au pixel sur la grille .shell
     (largeur effective PC : min(1280px, 100% - 80px)).
   Sans JavaScript, la navigation reste simplement visible en haut. */
@media (min-width: 1101px) {
  .nav {
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--paper);
    transition: transform .28s ease;
  }
  .nav.est-masquee {
    transform: translateY(-101%);
  }
  .nav.est-figee {
    width: 100%;
    margin: 0;
    padding-inline: max(40px, calc((100% - 1280px) / 2));
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav { transition: none; }
}

/* ── Formulaire de contact (page Contact) ─────────────────────────
   Remplace le bouton mailto du héros. Traité côté serveur par
   inc/contact-form.php (admin-post.php, nonce, pot de miel, débit). */
.contact-formulaire { max-width: 720px; margin-top: 40px; }

.cf-message { margin: 0 0 24px; padding: 14px 18px; border-left: 3px solid var(--ink); background: #fff; }
.cf-message-succes { border-left-color: var(--blue); }
.cf-message-erreur { border-left-color: #b3261e; }

.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cf-champ {
  display: flex; flex-direction: column; gap: 6px;
  margin: 0 0 18px;
}
.cf-etiquette {
  font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.cf-requis { color: var(--blue); }

.cf input[type=text], .cf input[type=email], .cf textarea {
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  padding: 12px 14px; font: 1rem/1.5 Arial, Helvetica, sans-serif;
  border-radius: 0; width: 100%; box-sizing: border-box;
}
.cf input:focus, .cf textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.cf textarea { resize: vertical; }

.cf-legal { margin: 6px 0 20px; font-size: .85rem; line-height: 1.5; color: #555; max-width: 640px; }

/* Bouton commun (formulaire + liens boutons dans les pages).
   La bordure bleue existe dès le repos, fondue dans le fond : au
   survol, le fond devient transparent et le bouton passe en filaire
   bleu, sans aucun décalage de mise en page. */
.cf-bouton,
.bouton-bleu {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--blue); color: #fff;
  border: 2px solid var(--blue); cursor: pointer;
  padding: 14px 24px; font: 700 .95rem Arial, Helvetica, sans-serif;
  letter-spacing: .04em; text-decoration: none;
}
.cf-bouton:hover, .cf-bouton:focus-visible,
.bouton-bleu:hover, .bouton-bleu:focus-visible {
  background: transparent;
  color: var(--blue);
}
.cf-bouton:focus-visible, .bouton-bleu:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px;
}

/* ── Cartouches au-dessus des titres (bureau) ─────────────────────
   La maquette d'origine place les cartouches (.section-kicker) dans
   une colonne à gauche des titres (grilles 1fr 3fr) et écarte les deux
   libellés de l'entête héros aux extrémités (.eyebrow space-between).
   On étend au bureau la construction mobile (≤ 800 px) déjà validée :
   tout est empilé, cartouche au-dessus de son titre. Les écartements
   (gap) des grilles d'origine sont conservés. */
@media (min-width: 801px) {
  /* Entête héros : libellé(s) regroupé(s) à gauche. */
  .eyebrow {
    justify-content: flex-start;
    gap: 20px;
  }

  /* Têtes de section centrées — on n'y touche pas : « Notre méthode »,
     « Trois regards », « Un parcours intégré » (page Formation). */
  .section-head {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .founders-head > p:last-child {
    grid-column: auto;
    margin-left: auto;
    margin-right: auto;
  }

  /* Tous les blocs à cartouche + paragraphe reviennent au bord gauche,
     empilés (cartouche, titre, texte) : « Notre conviction »,
     « Formation & adoption », « Une relation de confiance », et leurs
     équivalents des pages Formation et Contact. */
  .manifesto,
  .training-intro,
  .confidentiality {
    grid-template-columns: 1fr;
  }
  .manifesto .section-kicker,
  .big-copy,
  .manifesto-note {
    grid-column: auto;
  }

  /* « Souveraineté & architecture » : titre et chapô en pleine ligne,
     texte du chapô déployé sur toute la largeur. */
  .arch-title,
  .arch-intro {
    grid-column: 1 / -1;
  }
  .arch-intro p {
    max-width: none;
  }

  /* Visuel du héros : cadre rehaussé (360 → 520 px), image toujours
     centrée et homothétique (object-fit ci-dessous). */
  .signal { height: 440px; }

  /* Respiration verticale des sections. La hauteur ajoutée au visuel
     compense : « Notre conviction » ne prend plus de rembourrage haut,
     l'écart sous l'image est porté par le héros (80 px). */
  .process        { padding: 160px 0; }
  .manifesto      { padding: 0 0 150px; }
  .founders       { padding: 150px 0; }
  .architecture   { padding: 150px 0; }
  .confidentiality{ padding: 150px 0; }
  .training-intro { padding: 130px 0; }
  .usecases       { padding: 120px 0; }
}


/* ── « Du terrain au système » : cartes détachées, flottement 3D ──
   Remplace la construction à filets de la maquette : chaque étape
   devient une carte translucide posée sur le dégradé, qui se
   soulève au survol. Numéro en grand corps, bien visible. */
.steps {
  border-top: 0;
  gap: 28px;
}
.step,
.step + .step,
.step:last-child {
  position: relative;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  background: rgba(255, 255, 255, .06);
  padding: 34px 30px 30px;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.step:hover {
  transform: translateY(-10px);
  background: rgba(255, 255, 255, .10);
  box-shadow: 0 24px 48px rgba(0, 0, 0, .35);
}
.step > span {
  position: absolute;
  top: 24px;
  left: 30px;
  font: 700 2.6rem/1 Arial, Helvetica, sans-serif;
  color: rgba(255, 255, 255, .32);
}
.step h3 {
  margin-top: 46px;
}
@media (prefers-reduced-motion: reduce) {
  .step, .step + .step, .step:last-child { transition: none; }
  .step:hover { transform: none; }
}