/* ============================================================
   PRONEXION — style.css
   Design system dérivé du logo. Un seul fichier, zéro dépendance.
   ============================================================ */

:root {
  --bleu-marine:  #0A2A6B;
  --bleu-moyen:   #1B6BB0;
  --bleu-clair:   #0092C6;
  --vert:         #65AB22;
  --vert-fonce:   #107E17;
  --vert-fonce-hover: #0D6513;
  --gris-texte:   #333B45;
  --gris-clair:   #6B7684;
  --fond:         #FFFFFF;
  --fond-alt:     #F5F8FB;
  --bordure:      #E1E8F0;
  --erreur:       #C0392B;
  --succes:       #2E7D32;
  --degrade:      linear-gradient(135deg, var(--bleu-marine), var(--vert-fonce));
  --ombre:        0 2px 12px rgba(15,58,110,.08);
  --ombre-forte:  0 8px 28px rgba(15,58,110,.14);
  --rayon:        8px;
  --rayon-btn:    4px;
  --header-h:     76px;
}

/* index.html : header adapté au logo double.
   --h-header est l'unique source de hauteur de header ; .site_header,
   .nav_mobile et le scroll-margin-top des ancres en dépendent tous les
   trois (avec repli sur --header-h pour les autres pages, qui n'ont pas
   cette classe). Le logo desktop restant à 46px (identique aux autres
   pages), seule la valeur mobile diffère réellement : 108px pour loger
   le logo simplifié de 80px, contre 76px partout ailleurs. */
.page_logo_double {
  --h-header: 108px;
}
@media (min-width: 1280px) {
  .page_logo_double {
    --h-header: 125px;
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--gris-texte);
  background: var(--fond);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 1280px) {
  body { font-size: 18px; }
}

h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--bleu-marine);
  line-height: 1.25;
}
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.25rem; }

p { max-width: 68ch; }

.accent { color: var(--vert-fonce); }

.signature {
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: currentColor;
  opacity: .85;
  max-width: 46ch;
}

/* ---------- Accessibilité ---------- */
.skip_link {
  position: absolute;
  left: 16px;
  top: -60px;
  background: var(--bleu-marine);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--rayon-btn);
  z-index: 1000;
  transition: top 180ms;
  font-weight: 600;
}
.skip_link:focus {
  top: 16px;
  outline: 3px solid var(--vert-fonce);
  outline-offset: 3px;
}

:focus-visible {
  outline: 3px solid var(--vert-fonce);
  outline-offset: 3px;
}

.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;
}

/* Paragraphes de portée générale : pleine largeur du conteneur en
   desktop, largeur de lecture confortable en mobile. */
.texte_large { max-width: 68ch; }

@media (min-width: 1024px) {
  /* Spécificité (0,1,1) : nécessaire pour l'emporter sur .chapo,
     .approche_cloture et .souverainete_cloture (0,1,0 chacune), sans
     recourir à !important. */
  p.texte_large {
    max-width: none;
    width: 100%;
  }
}

section { scroll-margin-top: 88px; }

/* index.html : décalage dérivé de --h-header, seule
   source de hauteur de header (voir .page_logo_double plus haut). */
.page_logo_double section,
.page_logo_double #merci,
.page_logo_double #top {
  scroll-margin-top: calc(var(--h-header, var(--header-h)) + 12px);
}

/* ---------- Structure générale ---------- */
.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 640px) {
  .container { padding: 0 24px; }
}

.section_pad { padding: 56px 0; }
@media (min-width: 1024px) {
  .section_pad { padding: 96px 0; }
}

.fond_alt { background: var(--fond-alt); }

.eyebrow {
  display: block;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
  font-weight: 700;
  color: var(--vert-fonce);
  margin-bottom: 12px;
}

.divider {
  width: 64px;
  height: 3px;
  background: var(--degrade);
  border: 0;
  margin: 0 0 24px;
}

.section_head { margin-bottom: 48px; }
.section_head h2 { margin-top: 12px; }
.chapo {
  font-size: 20px;
  color: var(--gris-clair);
  margin-top: 16px;
  max-width: 62ch;
}

/* arc décoratif (SVG inline positionné en arrière-plan) */
.arc_decor {
  position: absolute;
  opacity: .07;
  color: var(--bleu-marine);
  pointer-events: none;
  z-index: 0;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 14px 28px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--rayon-btn);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 180ms, border-color 180ms, transform 180ms, box-shadow 180ms;
}
.btn_primaire {
  background: var(--vert-fonce);
  color: #fff;
}
.btn_primaire:hover, .btn_primaire:focus-visible {
  background: var(--vert-fonce-hover);
}
.btn_secondaire {
  background: transparent;
  border-color: #fff;
  color: #fff;
}
.btn_secondaire:hover, .btn_secondaire:focus-visible {
  background: rgba(255,255,255,.12);
}
.btn_pleine_largeur { width: 100%; }

/* ============================================================
   HEADER
   ============================================================ */
.site_header {
  position: sticky;
  top: 0;
  z-index: 500;
  min-height: var(--h-header, var(--header-h));
  height: auto;
  overflow: visible;
  background: var(--fond);
  box-shadow: 0 1px 0 var(--bordure);
  box-sizing: border-box;
}
.site_header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 24px;
  padding-top: 14px;
  padding-bottom: 14px;
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  .site_header .container {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}
/* index.html, à partir de 1280px (levier 3 : la bascule
   nav/logo/header agrandi est repoussée de 1024 à 1280px, faute de place
   à 1024px même avec les leviers 1 et 2 — voir bloc nav_desktop/burger/
   nav_mobile/logo plus bas pour la même bascule à 1280px). max-width
   élargi à 1360px pour cette seule barre : le conteneur des sections
   (.container ailleurs sur la page) reste à 1180px, aucun effet de bord
   visible pour le visiteur. Gap resserré (levier 2) en complément. */
@media (min-width: 1280px) {
  .page_logo_double .site_header .container {
    max-width: 1360px;
    padding-top: 23px;
    padding-bottom: 23px;
    gap: 16px;
  }
}
.logo_link {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  min-height: 44px;
}
.logo_link img { height: 46px; width: auto; }

/* index.html : logo double, complet sur desktop,
   simplifié en mobile/tablette. N'introduit aucune règle de largeur
   contrainte sur les logos : la hauteur pilote, la largeur suit. */
.header_logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  min-height: 44px;
}
.logo_simple  { display: none; }
.logo_complet { display: block; height: 79px; width: auto; }
@media (max-width: 1023.98px) {
  .logo_complet { display: none; }
  .logo_simple  { display: block; height: 80px; width: auto; }
}
/* index.html (levier 3) : la bascule vers le logo complet
   est repoussée à 1280px, comme la nav/le burger plus bas. Entre 1024
   et 1279.98px, index.html reste en logo simplifié + burger. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .page_logo_double .logo_complet { display: none; }
  .page_logo_double .logo_simple  { display: block; height: 80px; width: auto; }
}

.nav_desktop {
  display: none;
}
@media (min-width: 1024px) {
  .nav_desktop {
    display: flex;
    align-items: center;
    gap: 32px;
    flex: 1;
    justify-content: flex-end;
  }
  .nav_desktop ul {
    display: flex;
    gap: 28px;
  }
  .nav_desktop a:not(.btn) {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 13px;
    font-weight: 600;
    color: var(--gris-texte);
    padding: 10px 2px;
    border-bottom: 2px solid transparent;
    transition: border-color 180ms, color 180ms;
  }
  .nav_desktop a:not(.btn):hover,
  .nav_desktop a:not(.btn):focus-visible {
    color: var(--bleu-marine);
    border-bottom-color: var(--vert-fonce);
  }
  /* CTA du header uniquement : ne doit jamais passer sur deux lignes ni
     déformer la hauteur du header. Le bouton du menu mobile (plein
     largeur) n'est pas concerné par cette règle. */
  .nav_desktop .btn {
    flex: 0 0 auto;
    white-space: nowrap;
    align-self: center;
    line-height: 1.2;
    padding: 12px 20px;
    min-height: 44px;
    box-sizing: border-box;
  }
}
/* index.html (levier 3) : la bascule nav_desktop/burger est
   repoussée à 1280px — entre 1024 et 1279.98px, index.html reste en
   menu burger malgré la largeur ≥1024px, faute de place pour le header
   agrandi (logo, nav et bouton à leur taille normale y débordaient
   encore de 131px même avec les leviers 1 et 2). Les autres pages ne
   sont pas concernées et basculent toujours à 1024px. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .page_logo_double .nav_desktop { display: none; }
  .page_logo_double .burger { display: flex; }
  .page_logo_double .nav_mobile { display: flex; }
}
@media (min-width: 1280px) {
  /* index.html : navigation et CTA agrandis avec le header
     (progression mesurée, pas le facteur 1,5 brut qui déséquilibrerait
     la nav). Les autres pages gardent 13px / 14px inchangés. */
  .page_logo_double .nav_desktop a:not(.btn) {
    font-size: 15px;
    letter-spacing: .06em;
  }
  .page_logo_double .nav_desktop .btn {
    font-size: 16px;
    padding: 14px 26px;
    min-height: 52px;
  }
  /* Lot 9 : l'ajout du lien "Parcours" fait déborder la nav de ~9px à
     1280px (levier 2, resserrement déjà utilisé au lot 5.2). */
  .page_logo_double .nav_desktop ul {
    gap: 22px;
  }
}

/* burger + panneau mobile (ancre :target, sans JavaScript) */
.burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  cursor: pointer;
  border-radius: var(--rayon-btn);
  text-decoration: none;
  flex: 0 0 auto;
}
.burger span {
  display: block;
  height: 2px;
  background: var(--bleu-marine);
  border-radius: 2px;
  transition: transform 180ms, opacity 180ms;
}
@media (min-width: 1024px) {
  .burger { display: none; }
}

.nav_mobile {
  position: fixed;
  inset: var(--h-header, var(--header-h)) 0 0 0;
  background: var(--fond);
  z-index: 400;
  display: flex;
  flex-direction: column;
  padding: 24px;
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 180ms;
}
#menu:target {
  transform: translateX(0);
  visibility: visible;
}

.menu_fermer {
  align-self: flex-end;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -8px -8px 12px 0;
  font-size: 32px;
  line-height: 1;
  color: var(--bleu-marine);
  text-decoration: none;
  border-radius: var(--rayon-btn);
}
.menu_fermer:hover,
.menu_fermer:focus-visible {
  color: var(--vert);
}

@media (min-width: 1024px) {
  .nav_mobile { display: none; }
}

.nav_mobile ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 24px;
}
.nav_mobile a:not(.btn) {
  display: flex;
  align-items: center;
  min-height: 44px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 15px;
  font-weight: 600;
  color: var(--bleu-marine);
  border-bottom: 1px solid var(--bordure);
}
.nav_mobile .btn { margin-top: auto; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 88vh;
  max-height: 820px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  background-image: url("../assets/hero_industrie.jpg");
  background-size: cover;
  background-position: 68% center;
  border-bottom: 4px solid transparent;
  border-image: var(--degrade) 1;
}
/* Mobile/tablette portrait uniquement (<1280px ET portrait) : le centrage
   vertical (align-items:center ci-dessus) fait déborder le H1 par le
   haut, hors d'atteinte, quand le contenu dépasse min-height:88vh. On
   neutralise le centrage et la hauteur contrainte dans ce cas précis
   seulement — le paysage et le desktop portrait gardent le comportement
   centré d'origine, testé sans régression.
   padding-top de .hero volontairement à 0 : .site_header est en
   position:sticky, pas fixed, donc il réserve déjà sa hauteur dans le
   flux normal — un padding-top supplémentaire ici ne fait que dupliquer
   cet espace (testé : calc(--h-header + 24px) empilé sur le padding-top
   de .hero_content donnait 180px de blanc avant le H1, très supérieur à
   la hauteur d'une ligne du H1 — critère demandé). Le padding-top de
   .hero_content est réduit ci-dessous spécifiquement en portrait pour
   respecter ce critère (48px desktop → 24px), sans toucher son
   padding-bottom (96px, nécessaire à l'écart avec les piliers). */
@media (max-width: 1279.98px) and (orientation: portrait) {
  .hero {
    min-height: 0;
    max-height: none;
    height: auto;
    overflow: visible;
    align-items: flex-start;
    padding-top: 0;
    padding-bottom: 56px;
    box-sizing: border-box;
  }
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,
    rgba(10,42,107,.94) 0%,
    rgba(10,42,107,.80) 42%,
    rgba(27,107,176,.52) 100%);
}
@media (max-width: 640px) {
  .hero {
    background-image: url("../assets/hero_industrie_mobile.jpg");
    background-position: 72% center;
  }
  .hero::before {
    background: rgba(10,42,107,.93);
  }
}

.hero_inner {
  position: relative;
  z-index: 1;
  width: 100%;
}
.hero_content {
  max-width: 620px;
  color: #fff;
  padding: 48px 0 96px;
}
/* Mobile/tablette portrait (<1280px) : réduit l'écart sous le header à
   24px (moins que la hauteur d'une ligne du H1, 40px à 375px de large),
   sans toucher au padding-bottom (96px, nécessaire à l'écart avec les
   piliers). Placé après la règle de base pour ne pas être écrasé par
   elle (même spécificité, le "padding" raccourci plus bas dans le
   fichier l'emporterait sinon sur ce "padding-top"). */
@media (max-width: 1279.98px) and (orientation: portrait) {
  .hero_content {
    padding-top: 24px;
  }
}
.hero_content h1 {
  color: #fff;
}
.hero_sous_titre {
  font-size: 20px;
  color: rgba(255,255,255,.88);
  margin-top: 20px;
  max-width: 56ch;
}
.hero_cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 32px;
}
.hero_content .signature {
  margin-top: 32px;
}

/* ============================================================
   PILIERS
   ============================================================ */
.piliers_carte {
  position: relative;
  z-index: 2;
  background: var(--fond);
  margin: 0 16px 0;
  border-radius: var(--rayon);
  box-shadow: var(--ombre-forte);
  padding: 40px 24px;
  display: grid;
  gap: 32px;
}
@media (min-width: 640px) {
  .piliers_carte {
    margin-left: 24px;
    margin-right: 24px;
    grid-template-columns: repeat(3, 1fr);
    padding: 48px 40px;
  }
}
@media (min-width: 1280px) {
  .piliers_carte {
    margin-left: auto;
    margin-right: auto;
    max-width: 1180px;
  }
}
.pilier {
  padding: 0 8px;
  position: relative;
}
@media (min-width: 640px) {
  .pilier:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -16px;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: var(--bordure);
  }
}
.pilier svg { color: var(--vert-fonce); margin-bottom: 16px; }
.pilier h3 { margin-bottom: 8px; }
.pilier p { color: var(--gris-clair); font-size: 15px; }

section#piliers { padding-top: 0; padding-bottom: 56px; }
@media (min-width: 1024px) {
  section#piliers { padding-bottom: 96px; }
}

/* ============================================================
   APPROCHE
   ============================================================ */
#approche { position: relative; overflow: hidden; }
#approche .arc_decor {
  width: 640px;
  height: 640px;
  right: -220px;
  top: -160px;
}
.approche_grille {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 40px;
  margin-top: 48px;
}
@media (min-width: 1024px) {
  .approche_grille { grid-template-columns: 1fr 1fr; gap: 64px; }
}
.symptomes { display: grid; gap: 16px; }
.symptomes li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.symptomes svg {
  color: var(--vert-fonce);
  flex-shrink: 0;
  margin-top: 3px;
}
.encart_fort {
  position: relative;
  background: var(--fond);
  border-left: 4px solid var(--vert-fonce);
  padding: 32px;
  border-radius: 0 var(--rayon) var(--rayon) 0;
  box-shadow: var(--ombre);
}
.encart_fort h3 { margin-bottom: 16px; }
.encart_fort_intro {
  font-weight: 600;
  color: var(--bleu-marine);
  font-size: 18px;
  margin-bottom: 16px;
}
.approche_filet {
  position: relative;
  z-index: 1;
  border: none;
  border-top: 1px solid var(--bordure);
  width: 64px;
  margin: 40px 0 0;
}
.approche_cloture {
  position: relative;
  z-index: 1;
  margin-top: 24px;
  font-size: 18px;
  color: var(--gris-texte);
  max-width: 68ch;
}

/* ============================================================
   SERVICES
   ============================================================ */
.cartes_services {
  display: grid;
  gap: 24px;
  margin-top: 48px;
}
@media (min-width: 640px) {
  .cartes_services { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .cartes_services { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
.carte_service {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 32px;
  background: var(--fond);
  transition: border-color 180ms, transform 180ms, box-shadow 180ms;
}
.carte_service:hover, .carte_service:focus-within {
  border-color: var(--vert-fonce);
  transform: translateY(-3px);
  box-shadow: var(--ombre);
}
.carte_service svg { color: var(--bleu-marine); margin-bottom: 20px; }
.carte_service h3 { margin-bottom: 12px; }
.carte_service p { color: var(--gris-texte); font-size: 16px; }
.livrables {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--bordure);
  font-size: 14px;
  color: var(--gris-clair);
}
.livrables strong { color: var(--gris-texte); font-weight: 600; }

.encarts_infos {
  display: grid;
  gap: 24px;
  margin-top: 40px;
}
@media (min-width: 640px) {
  .encarts_infos { grid-template-columns: repeat(2, 1fr); }
}
.encart_info {
  background: var(--fond-alt);
  border-radius: var(--rayon);
  padding: 28px;
}
.encart_info h3 { font-size: 1.05rem; margin-bottom: 12px; }
.encart_info p, .encart_info li { font-size: 15px; color: var(--gris-texte); }
.encart_info ul { display: grid; gap: 8px; }
.encart_info li { display: flex; gap: 8px; }
.encart_info .signature { margin-bottom: 20px; }
.encart_filet {
  border: none;
  border-top: 1px solid var(--bordure);
  width: 48px;
  margin: 0 0 20px;
}
.liste_format { display: grid; gap: 10px; }
.liste_format li {
  position: relative;
  display: block;
  padding-left: 20px;
}
.liste_format li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vert);
}

/* ============================================================
   SOUVERAINETÉ
   Bandeau plein bleu marine (comme #expertise) inséré entre #services
   et #methode pour ne pas casser l'alternance clair/fond_alt des
   sections suivantes : clair → bleu marine → fond_alt → clair → alt…
   ============================================================ */
.bandeau_souverainete {
  background: var(--bleu-marine);
  color: #fff;
}
.bandeau_souverainete .eyebrow,
.bandeau_souverainete .accent {
  color: var(--vert);
}
.bandeau_souverainete h2 { color: #fff; }
.bandeau_souverainete .divider {
  background: rgba(255,255,255,.3);
}
.bandeau_souverainete .chapo {
  color: #fff;
}
.souverainete_grille {
  display: grid;
  gap: 32px;
  margin-top: 48px;
}
@media (min-width: 640px) {
  .souverainete_grille { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .souverainete_grille { grid-template-columns: repeat(4, 1fr); }
}
.souverainete_grille li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.souverainete_grille svg {
  color: var(--vert);
  margin-bottom: 16px;
}
.souverainete_grille h3 {
  color: #fff;
  margin-bottom: 8px;
}
.souverainete_grille p {
  color: rgba(255,255,255,.82);
  font-size: 15px;
}
.souverainete_cloture {
  margin-top: 48px;
  color: #fff;
  max-width: 68ch;
}

/* ============================================================
   MÉTHODE
   ============================================================ */
.frise {
  margin-top: 48px;
  display: grid;
  gap: 40px;
}
@media (min-width: 1024px) {
  .frise {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    position: relative;
  }
  .frise::before {
    content: "";
    position: absolute;
    top: 28px;
    left: calc(12.5% - 12px);
    right: calc(12.5% - 12px);
    height: 2px;
    background: var(--degrade);
    z-index: 0;
  }
}
.etape { position: relative; z-index: 1; }
.etape_pastille {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 20px;
}
.etape:nth-child(1) .etape_pastille { background: linear-gradient(135deg, var(--bleu-marine), var(--bleu-moyen)); }
.etape:nth-child(2) .etape_pastille { background: linear-gradient(135deg, var(--bleu-moyen), var(--bleu-clair)); }
.etape:nth-child(3) .etape_pastille { background: linear-gradient(135deg, var(--bleu-clair), var(--vert-fonce)); }
.etape:nth-child(4) .etape_pastille { background: linear-gradient(135deg, var(--vert-fonce), var(--vert-fonce-hover)); }
.etape h3 { font-size: 1.1rem; margin-bottom: 4px; }
.etape_duree {
  display: block;
  font-size: 13px;
  color: var(--vert-fonce);
  font-weight: 600;
  margin-bottom: 12px;
}
.etape p { font-size: 15px; color: var(--gris-texte); }

.convictions { margin-top: 64px; }
.convictions_titre { margin-bottom: 32px; }
.convictions_grille {
  display: grid;
  gap: 24px;
}
@media (min-width: 1024px) {
  .convictions_grille { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
.conviction {
  background: var(--fond);
  border-radius: var(--rayon);
  padding: 28px;
  box-shadow: var(--ombre);
}
.conviction h4 {
  font-size: 1.05rem;
  color: var(--bleu-marine);
  margin-bottom: 12px;
}
.conviction p {
  font-size: 15px;
  color: var(--gris-texte);
}

/* ============================================================
   CAS / RÉALISATIONS
   ============================================================ */
.avertissement {
  background: var(--fond-alt);
  border-left: 4px solid var(--vert-fonce);
  padding: 20px 24px;
  font-style: italic;
  font-size: 15px;
  color: var(--gris-texte);
  border-radius: 0 var(--rayon) var(--rayon) 0;
  margin-bottom: 48px;
}
.cartes_cas {
  display: grid;
  gap: 24px;
}
@media (min-width: 1024px) {
  .cartes_cas {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(5, auto);
  }
}
.carte_cas {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 1024px) {
  .carte_cas {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
    gap: 16px;
  }
}
.tag_secteur {
  align-self: flex-start;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  background: rgba(101,171,34,.12);
  color: var(--vert-fonce);
  padding: 6px 12px;
  border-radius: 999px;
}
.bloc_cas dt {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gris-clair);
  font-weight: 700;
  margin-bottom: 4px;
}
.bloc_cas dd { font-size: 15px; margin-bottom: 16px; }
.bloc_resultats {
  background: var(--fond-alt);
  border-radius: var(--rayon);
  padding: 20px;
  margin-top: auto;
}
@media (min-width: 1024px) {
  .bloc_resultats {
    margin-top: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  @supports not (grid-template-rows: subgrid) {
    .bloc_resultats { min-height: 150px; }
  }
}
.bloc_resultats dt {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--gris-clair);
  font-weight: 700;
  margin-bottom: 8px;
}
.chiffre_cle {
  display: block;
  font-size: 28px;
  color: var(--vert-fonce);
  font-weight: 700;
  margin-bottom: 6px;
}
.bloc_resultats dd:last-child { font-size: 15px; margin-bottom: 0; }
.resultat_fort {
  color: var(--vert-fonce);
  font-weight: 700;
}
.preuve_perennite {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 16px;
  background: rgba(101, 171, 34, .10);
  border-left: 3px solid var(--vert);
  border-radius: var(--rayon);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--vert-fonce);
  font-style: normal;
}
.preuve_perennite svg {
  flex-shrink: 0;
  margin-top: 1px;
}
.liste_resultats { display: grid; gap: 10px; }
.liste_resultats li {
  position: relative;
  padding-left: 20px;
}
.liste_resultats li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vert);
}

/* ============================================================
   PARCOURS
   ============================================================ */
.parcours_groupe + .parcours_groupe {
  margin-top: 40px;
}

.parcours_secteur {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 700;
  color: var(--vert);
  margin-bottom: 14px;
}
.parcours_secteur::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin-top: 8px;
  background: var(--degrade);
}

.parcours_mur {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 1023.98px) { .parcours_mur { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 639.98px)  { .parcours_mur { grid-template-columns: repeat(2, 1fr); } }

.ref {
  background: #fff;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  transition: border-color 180ms, filter 180ms, color 180ms;
}

.ref_img img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .62;
  transition: filter 180ms, opacity 180ms;
}
.ref_img:hover img,
.ref_img:focus-within img {
  filter: grayscale(0);
  opacity: 1;
}

.parcours_mention {
  margin-top: 32px;
  font-size: 14px;
  color: var(--gris-clair);
  text-align: center;
}
@media (min-width: 1024px) {
  .parcours_mention { white-space: nowrap; }
}

/* ============================================================
   EXPERTISE
   ============================================================ */
.bandeau_expertise {
  background: var(--degrade);
  color: #fff;
}
.bandeau_expertise ul {
  display: grid;
  gap: 32px;
  text-align: center;
  align-items: start;
}
@media (min-width: 640px) {
  .bandeau_expertise ul { grid-template-columns: repeat(2, 1fr); }
  /* Filet vertical uniquement entre les deux colonnes d'une même ligne :
     en grille 2 colonnes, la 2e colonne est toujours un enfant pair. */
  .bandeau_expertise li:nth-child(even) {
    border-left: 1px solid rgba(255,255,255,.2);
  }
}
@media (min-width: 1024px) {
  .bandeau_expertise ul {
    grid-template-columns: repeat(4, 1fr);
  }
  .bandeau_expertise li {
    border-left: 1px solid rgba(255,255,255,.2);
  }
  .bandeau_expertise li:first-child { border-left: none; }
}
.chiffre_fort {
  display: block;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 6px;
}
.chiffre_label {
  display: block;
  font-size: 14px;
  color: rgba(255,255,255,.82);
}

/* ============================================================
   AVIS
   ============================================================ */
.carte_avis {
  position: relative;
  max-width: 780px;
  margin: 48px auto 0;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 48px 32px 32px;
}
.guillemet {
  position: absolute;
  top: 8px;
  left: 24px;
  font-size: 72px;
  color: var(--vert);
  opacity: .25;
  font-family: Georgia, serif;
  line-height: 1;
}
.carte_avis blockquote {
  font-size: 19px;
  line-height: 1.7;
  color: var(--gris-texte);
  position: relative;
  z-index: 1;
}
.carte_avis cite {
  display: block;
  margin-top: 20px;
  font-style: normal;
  font-weight: 600;
  color: var(--bleu-marine);
  font-size: 15px;
}

/* ============================================================
   CONTACT
   ============================================================ */
#contact { position: relative; overflow: hidden; }
#contact .arc_decor {
  width: 600px;
  height: 600px;
  left: -240px;
  bottom: -220px;
}
.contact_grille {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 48px;
  margin-top: 48px;
}
@media (min-width: 1024px) {
  .contact_grille { grid-template-columns: .9fr 1.1fr; gap: 64px; }
}

.coordonnees { display: grid; gap: 24px; align-content: start; }
.coord_item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.coord_item svg { color: var(--vert-fonce); flex-shrink: 0; margin-top: 2px; }
.coord_label {
  display: block;
  font-size: 13px;
  color: var(--gris-clair);
  margin-bottom: 4px;
}
.coord_valeur {
  font-size: 18px;
  font-weight: 600;
  color: var(--bleu-marine);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: border-color 180ms, color 180ms;
}
a.coord_valeur:hover, a.coord_valeur:focus-visible {
  border-color: var(--vert-fonce);
}
.coord_valeur.no_link { min-height: auto; }
.coord_ext_icon { color: var(--gris-clair); margin-left: 4px; }

.form_carte {
  background: var(--fond);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 32px;
}
.champ { margin-bottom: 20px; }
.champ label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--gris-texte);
  margin-bottom: 8px;
}
.champ input,
.champ select,
.champ textarea {
  width: 100%;
  min-height: 44px;
  padding: 12px 14px;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-btn);
  background: var(--fond);
  font-size: 16px;
  transition: border-color 180ms;
}
.champ textarea { min-height: 140px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  border-color: var(--bleu-moyen);
}
.champ input:user-invalid,
.champ textarea:user-invalid,
.champ input:not(:placeholder-shown):invalid {
  border-color: var(--erreur);
}
.champ input:user-valid,
.champ textarea:user-valid {
  border-color: var(--vert-fonce);
}
.aide_champ {
  display: block;
  font-size: 13px;
  color: var(--gris-clair);
  margin-top: 6px;
}
.champ_rgpd {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--gris-texte);
}
.champ_rgpd input {
  width: 20px;
  height: 20px;
  min-height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}
.champ_rgpd a { color: var(--bleu-marine); text-decoration: underline; }
.mention_form {
  margin-top: 16px;
  font-size: 14px;
  color: var(--gris-clair);
  text-align: center;
}
.mention_form a { color: var(--bleu-moyen); text-decoration: underline; }

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

.mention_requis {
  font-size: 13px;
  color: var(--gris-clair);
  margin-bottom: 20px;
}

#merci {
  display: none;
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-left: 4px solid var(--succes);
  border-radius: var(--rayon);
  padding: 28px;
  margin-bottom: 24px;
}
#merci:target { display: block; }
#merci svg { color: var(--succes); margin-bottom: 12px; }
#merci h3 { margin-bottom: 8px; }
#merci p { font-size: 15px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site_footer {
  background: var(--bleu-marine);
  color: #fff;
  padding: 64px 0 24px;
}
.footer_grille {
  display: grid;
  gap: 40px;
  margin-bottom: 40px;
}
@media (min-width: 640px) {
  .footer_grille { grid-template-columns: repeat(3, 1fr); }
}
.footer_lockup .pro { color: #fff; }
.footer_lockup .nexion { color: var(--vert); }
.logotype_footer {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .06em;
  font-size: 30px;
}
.footer_baseline {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .18em;
  color: rgba(255,255,255,.7);
  margin-top: 8px;
}
.footer_signature {
  font-style: italic;
  font-size: 15px;
  color: rgba(255,255,255,.8);
  margin-top: 16px;
}
.footer_lockup .signature {
  margin-top: 16px;
}
.footer_col h3 {
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 16px;
}
.footer_col ul { display: grid; gap: 10px; }
.footer_col a {
  color: rgba(255,255,255,.85);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: color 180ms, border-color 180ms;
}
.footer_col a:hover, .footer_col a:focus-visible {
  color: var(--vert);
  border-bottom-color: var(--vert);
}
.footer_bas {
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  font-size: 13px;
  color: rgba(255,255,255,.7);
}
.footer_bas a {
  color: rgba(255,255,255,.85);
  text-decoration: underline;
}
.footer_bas a:hover, .footer_bas a:focus-visible { color: var(--vert); }
.footer_bas .sep { color: rgba(255,255,255,.4); }
.footer_mention_legale {
  font-size: 12px;
  color: rgba(255,255,255,.5);
  margin-top: 8px;
}

/* ============================================================
   PAGES LÉGALES
   ============================================================ */
.page_legale {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 24px 96px;
}
.page_legale h1 { margin-bottom: 32px; }
.page_legale h2 {
  font-size: 1.35rem;
  margin-top: 40px;
  margin-bottom: 16px;
}
.page_legale p { margin-bottom: 16px; }
.page_legale ul { margin: 16px 0; display: grid; gap: 8px; }
.page_legale li { padding-left: 20px; position: relative; }
.page_legale li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vert);
}
.placeholder {
  background: rgba(192,57,43,.08);
  color: var(--erreur);
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
}
.retour_accueil {
  display: inline-block;
  margin-top: 8px;
  font-weight: 600;
  color: var(--bleu-marine);
  text-decoration: underline;
}

/* ============================================================
   RETOUR EN HAUT (footer)
   ============================================================ */
.retour_haut { font-weight: 600; }

/* ============================================================
   MOUVEMENT RÉDUIT
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
}