/* ============================================
   ViseAdev — site vitrine HTML statique
   Charte : corail #EC604C, marine #003E5D,
   ardoise #344254, mist #EEF3F4
   ============================================ */

/* ----- Google Fonts ----- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Roboto:wght@400;500;700&family=Thasadith:ital,wght@0,400;0,700;1,400&display=swap');

/* ----- Variables ----- */
:root {
  --coral: #EC604C;
  --coral-dark: #d95745;
  --marine: #003E5D;
  --marine-dark: #002d44;
  --slate: #344254;
  --mist: #EEF3F4;
  --white: #ffffff;

  --font-heading: 'Montserrat', 'Roboto', sans-serif;
  --font-body: 'Thasadith', 'Roboto', sans-serif;

  --max-width: 1280px;
  --px: 1.5rem;

  /* Pente V/A : tan(71°) ≈ 2.904 → run = rise / 2.904 ≈ 0.344 × rise */
  --va-angle: 71deg;
  --va-ratio: 0.344;
}

/* ----- Reset minimal ----- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700; 
  color: var(--slate);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

b, strong {
  color: var(--coral);
}


h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

address {
  font-style: normal;
}

/* ----- Utilitaires ----- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--px);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hidden { display: none; }

/* ----- Boutons V/A ----- */
/* Le bouton principal : géométrie V/A à 71° */
.va-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 1.75rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--white);
  background: var(--coral);
  border: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;

  /* Biseau bas-droit à 71° */
  clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - (3rem * var(--va-ratio))) 100%,
    0 100%
  );
  padding-right: calc(1.75rem + 3rem * var(--va-ratio) * 0.5);
}

.va-btn:hover,
.va-btn:focus-visible {
  background: var(--coral-dark);
}

.va-btn:focus-visible {
  outline: 2px solid var(--marine);
  outline-offset: 2px;
}

/* Flash marine accolé au bouton corail */
.va-btn-flash {
  display: inline-flex;
  align-items: center;
}

.va-btn-flash::after {
  content: "";
  display: block;
  width: 0.625rem;
  height: 3rem;
  margin-left: 0.75rem;
  background: var(--marine);
  transform: skewX(-19deg);
  transform-origin: bottom center;
}

/* Version compacte de l’en-tête : bouton et flash calculés sur la même pente. */
.va-header-contact {
  --va-header-height: 2.5rem;
  --va-header-run: calc(var(--va-header-height) * var(--va-ratio));
  display: inline-flex;
  height: var(--va-header-height);
  align-items: stretch;
}

.va-header-contact__button {
  display: flex;
  align-items: center;
  padding-inline: 1.25rem calc(1.25rem + var(--va-header-run) * .5);
  background: var(--coral);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--va-header-run)) 100%, 0 100%);
  font-family: var(--font-heading);
  font-size: .875rem;
  font-weight: 600;
  color: var(--white);
}

.va-header-contact__flash {
  width: calc(.5rem + var(--va-header-run));
  height: var(--va-header-height);
  margin-left: .5rem;
  background: var(--marine);
  clip-path: polygon(var(--va-header-run) 0, 100% 0, calc(100% - var(--va-header-run)) 100%, 0 100%);
}

/* Le lien d'en-tête a une couleur ardoise par défaut : on force le texte du bouton contact en blanc */
.site-header__nav .va-header-contact__button,
.site-header__nav .va-header-contact__button:hover,
.site-header__nav .va-header-contact__button:focus-visible {
  color: #ffffff;
}

/* Bouton secondaire : contour parallèle aux pentes du bouton principal */
.va-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 1.75rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--marine);
  background: transparent;
  border: 2px solid var(--marine);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;

  /* Biseau bas-droit à 71° */
  clip-path: polygon(
    calc(3rem * var(--va-ratio)) 0,
    100% 0,
    calc(100% - (3rem * var(--va-ratio))) 100%,
    0 100%
  );
  padding-inline: calc(1.75rem + 3rem * var(--va-ratio) * 0.45);
}

.va-btn-secondary:hover,
.va-btn-secondary:focus-visible {
  background: var(--marine);
  color: var(--white);
}

.va-btn-secondary:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}

/* ----- En-tête ----- */
.site-header {
  background: var(--white);
  border-bottom: 4px solid var(--coral);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 5rem;
  gap: 1rem;
}

.site-header__brand img {
  height: 2.75rem;
  width: auto;
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.site-header__nav a {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--slate);
  transition: color 0.2s ease;
}

.site-header__nav a:hover,
.site-header__nav a:focus-visible {
  color: var(--marine);
}

.site-header__nav .va-btn {
  min-height: 2.5rem;
  font-size: 0.85rem;
  padding-right: calc(1.5rem + 2.5rem * var(--va-ratio) * 0.5);
  clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - (2.5rem * var(--va-ratio))) 100%,
    0 100%
  );
}

.site-header__nav .va-btn-flash::after {
  height: 2.5rem;
  width: calc(0.5rem + 2.5rem * var(--va-ratio));
  margin-left: 0.5rem;
  transform: none;
  clip-path: polygon(
    calc(2.5rem * var(--va-ratio)) 0,
    100% 0,
    calc(100% - 2.5rem * var(--va-ratio)) 100%,
    0 100%
  );
}

.nav-desktop-only {
  display: none;
}

@media (min-width: 640px) {
  .nav-desktop-only {
    display: inline-flex;
  }
}

/* ----- Hero ----- */
.hero {
  position: relative;
  background: var(--mist);
  overflow: hidden;
}

.hero__motif {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  max-width: 42%;
  object-fit: contain;
  object-position: right center;
  pointer-events: none;
  z-index: 0;
}

.hero__content {
  position: relative;
  z-index: 1;
  padding-block: 6rem;
}

.hero__meta {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral);
}

.hero__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.15;
  color: var(--marine);
  margin-top: 1rem;
  max-width: 48rem;
}

.hero__lead {
  font-size: 1.125rem;
  line-height: 1.7;
  max-width: 42rem;
  margin-top: 1.5rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.hero__note {
  font-size: 0.9rem;
  color: var(--slate);
  opacity: 0.8;
  margin-top: 1.5rem;
}

@media (max-width: 640px) {
  .hero__content {
    padding-block: 4rem;
    padding-right: 4.5rem;
  }

  .hero__motif {
    top: auto;
    right: -4rem;
    bottom: 2rem;
    width: 9rem;
    height: auto;
    max-width: none;
  }
}


/* ----- Sections ----- */
.section {
  padding: 5rem 0;
}

.section-title-wrapper {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.section__mark {
  width: 3rem;
  height: auto;
  flex-shrink: 0;
  object-fit: contain;
}

.section__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.65rem, 4vw, 2.25rem);
  color: var(--marine);
}

.section__intro {
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 42rem;
  margin-top: 1rem;
}

/* Trait décoratif corail sous certaines sections */
.section-accent {
  position: absolute;
  left: 0;
  top: 0;
  height: 0.5rem;
  width: 33%;
  background: var(--coral);
}

.section-accent--right {
  left: auto;
  right: 0;
  background: var(--marine);
}

/* ----- Cartes d’activité / besoins ----- */
.needs {
  position: relative;
  background: var(--white);
}

.needs__list {
  display: grid;
  gap: 1.5rem;
  margin-top: 3rem;
}

@media (min-width: 768px) {
  .needs__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.need-card {
  position: relative;
  background: var(--mist);
  border-left: 4px solid var(--coral);
  padding: 2rem;
  margin-bottom: .625rem;
  transition: background 0.2s ease;
  --step-left: 6%;
  --step-color: var(--coral);
}

.need-card:hover {
  background: #fdecea;
}

.need-card__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.need-card__number {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.75rem;
  color: var(--coral);
  line-height: 1;
}

.need-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--marine);
}

.need-card__text {
  margin-top: 1rem;
  line-height: 1.65;
}

/* Socle horizontal décalé : rappel minimal du palier V/A validé. */
.need-card::after {
  content: "";
  position: absolute;
  left: var(--step-left);
  bottom: -.625rem;
  width: 42%;
  height: .25rem;
  background: var(--step-color, var(--coral));
}

.need-card:nth-child(2) { --step-left: 24%; --step-color: var(--marine); }
.need-card:nth-child(3) { --step-left: 14%; }
.need-card:nth-child(4) { --step-left: 32%; --step-color: var(--marine); }

/* ----- Pied de page ----- */
.site-footer {
  background: var(--marine);
  color: rgba(255, 255, 255, 0.9);
  padding: 3.5rem 0 2rem;
}

.site-footer__grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 640px) {
  .site-footer__grid {
    grid-template-columns: 1fr auto;
    align-items: start;
    justify-content: space-between;
  }
}

.site-footer__brand {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--white);
}

.site-footer__tagline {
  max-width: 20rem;
  margin-top: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.55;
}

.site-footer__contact {
  font-size: 0.95rem;
  line-height: 1.8;
}

.site-footer__contact a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__contact a:hover,
.site-footer__contact a:focus-visible {
  color: var(--coral);
}

.site-footer__legal {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.85rem;
  opacity: 0.75;
}

.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.15); }
.site-footer__bottom .site-footer__legal { margin: 0; padding: 0; border: 0; }
.linkedin-link { display: inline-flex; align-items: center; gap: .5rem; color: var(--mist); font-family: var(--font-heading); font-size: .875rem; font-weight: 600; }
.linkedin-link:hover, .linkedin-link:focus-visible { color: var(--coral); }

/* ----- Parcours V/A ----- */
.va-journey { overflow: hidden; }
.method { background: var(--marine); color: var(--white); }
.journey-heading { max-width: 42rem; }
.journey-kicker { margin: 0; font-family: var(--font-heading); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--coral); }
.journey-heading h2, .outcomes-heading h2, .voices-heading h2 { margin-top: .75rem; font-family: var(--font-heading); font-size: clamp(2rem, 5vw, 3.75rem); font-weight: 800; line-height: 1.05; }
.journey-heading h2 { color: var(--white); }
.journey-heading > p:last-child, .outcomes-heading > p:last-child { margin-top: 2rem; max-width: 36rem; font-size: 1.05rem; line-height: 1.7; }
.method-path { position: relative; display: grid; gap: 2.5rem; margin-top: 4rem; padding: 0; list-style: none; }
.method-stage { position: relative; display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; }
.method-stage__number { position: relative; z-index: 1; display: grid; width: 2.5rem; height: 2.5rem; place-items: center; background: var(--coral); font-family: var(--font-heading); font-weight: 800; color: var(--white); }
.method-stage__copy { padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.24); }
.method-stage h3 { color: var(--white); font-family: var(--font-heading); font-size: 1.4rem; }
.method-stage p { margin-top: .75rem; max-width: 34rem; line-height: 1.7; }
.benefits { position: relative; background: var(--white); }
.qui-suis-je { padding: 7rem 0; }
.profile-visual { margin-top: 2.5rem; max-width: 24rem; }
.profile-visual img { display: block; width: 100%; height: auto; }
.benefits::before { position: absolute; top: 0; left: 0; width: 44%; height: 3.75rem; background: var(--marine); clip-path: polygon(0 0, 100% 0, calc(100% - 1.29rem) 100%, 0 100%); content: ""; }
.outcomes-layout { display: grid; gap: 4rem; }
.outcomes-heading h2, .voices-heading h2 { color: var(--marine); }
.growth-visual { margin: 3rem 0 0; }
.growth-visual img { display: block; width: 100%; height: auto; }
.outcomes-list { border-top: 4px solid var(--coral); }
.outcome { display: grid; grid-template-columns: 4rem 1fr; gap: 1.25rem; padding: 1.5rem 0; border-bottom: 1px solid #d9e0e2; }
.outcome > span { font-family: var(--font-heading); font-size: .8rem; font-weight: 700; color: var(--coral); }
.outcome h3 { font-family: var(--font-heading); font-size: clamp(1.35rem, 3vw, 2rem); color: var(--marine); }
.outcome p { margin-top: .35rem; max-width: 30rem; line-height: 1.6; }
.voices { position: relative; background: var(--mist); }
.voices::before { position: absolute; top: 0; right: 0; width: 36%; height: .5rem; background: var(--coral); content: ""; }
.voices-flow { margin-top: 3.5rem; }
.voice { display: grid; gap: 1.5rem; margin: 0; padding: 2.25rem 0; border-top: 1px solid #d9e0e2; }
.voice blockquote { margin: 0; max-width: 52rem; font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.55; color: var(--marine); }
.voice figcaption { display: flex; flex-direction: column; gap: .2rem; font-size: 0.9rem; }
.voice figcaption strong { font-family: var(--font-heading); color: var(--marine); font-size: 0.95rem; }
@media (min-width: 768px) {
  .method-path { grid-template-columns: repeat(3, 1fr); gap: 0; padding-top: 5rem; }
  .method-stage { display: block; min-height: 22rem; }
  .method-stage:nth-child(2) { transform: translateY(-2.5rem); }
  .method-stage:nth-child(3) { transform: translateY(-5rem); }
  .method-stage__number { margin-bottom: 2rem; }
  .method-stage__copy { min-height: 13rem; padding: 0 2rem 0 0; border: 0; }
  .outcomes-layout { grid-template-columns: .8fr 1.2fr; gap: 7rem; }
  .growth-visual { width: 125%; }
  .outcome:nth-child(even) { margin-left: 4rem; }
  .voice { grid-template-columns: 1fr 14rem; align-items: end; }
  .voice:nth-child(2) { padding-left: 8%; }
  .voice:nth-child(3) { padding-left: 16%; }
}

/* ----- FAQ ----- */
.faq {
  position: relative;
  background: var(--mist);
}

.faq__list {
  display: grid;
  gap: 0.75rem;
  max-width: 52rem;
  margin-top: 3.5rem;
}

.faq-item {
  background: var(--white);
  border: 1px solid #d9e0e2;
  border-left: 4px solid var(--coral);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--marine);
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--coral);
  line-height: 1;
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item summary:hover {
  color: var(--coral);
}

.faq-item__answer {
  padding: 0 1.5rem 1.25rem;
  line-height: 1.65;
  color: var(--slate);
}

.faq-item[open] {
  border-left-color: var(--marine);
}

/* ----- Focus accessible ----- */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--marine);
  outline-offset: 2px;
}

/* ----- Gabarits blog ----- */
.blog-grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 640px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.blog-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid #e2e8f0;
}

.blog-card__meta {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--coral);
}

.blog-card__title {
  margin-top: 0.75rem;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--marine);
  line-height: 1.25;
}

.blog-card__title a:hover {
  color: var(--coral);
}

.blog-card__desc {
  flex: 1;
  margin-top: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

.blog-card__link {
  display: inline-flex;
  align-items: center;
  margin-top: 1.25rem;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--coral);
}

.blog-card__link:hover {
  text-decoration: underline;
}

/* ----- Gabarit article ----- */
.article-template {
  max-width: 45rem;
}

.article-template__meta {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--coral);
}

.article-template__title {
  margin-top: 0.75rem;
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 800;
  color: var(--marine);
  line-height: 1.1;
}

.article-template__intro {
  margin-top: 1rem;
  font-size: 1.15rem;
  line-height: 1.65;
}

.article-template__body {
  margin-top: 2.5rem;
}

.article-template__body h2 {
  margin-top: 2rem;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--marine);
}

.article-template__body p {
  margin-top: 0.75rem;
  line-height: 1.7;
}

.article-template__body ul {
  margin-top: 0.75rem;
  padding-left: 1.25rem;
  list-style: disc;
}

.article-template__body li + li {
  margin-top: 0.35rem;
}

.article-template__related {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid #e2e8f0;
}

.article-template__related h2 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--marine);
}

.article-template__related ul {
  margin-top: 1rem;
  display: grid;
  gap: 0.5rem;
}

.article-template__related a {
  font-weight: 600;
  color: var(--marine);
}

.article-template__related a:hover {
  color: var(--coral);
}

/* ----- Formulaire de contact statique ----- */
.contact-section { background: var(--white); }
.contact-form { display: grid; gap: 1.5rem; max-width: 42rem; margin-top: 2.5rem; }
.contact-form__row { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .contact-form__row { grid-template-columns: repeat(2, 1fr); } }
.contact-form__field { display: flex; flex-direction: column; gap: .5rem; }
.contact-form label { font-family: var(--font-heading); font-size: .875rem; font-weight: 600; color: var(--marine); }
.contact-form input, .contact-form textarea { width: 100%; border: 1px solid #d9e0e2; background: var(--white); padding: .75rem 1rem; font: inherit; color: var(--slate); }
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--coral); outline-offset: 2px; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }