/* ==========================================================
   ASC Consult : feuille de style unique.
   Sommaire : 1. Réglages (:root)  2. Polices  3. Base
              4. En-tête  5. Titre de page  6. Sections
              6 bis. Situations fréquentes  7. Expériences (et réalisations) ...
   ========================================================== */

/* ---------- 1. RÉGLAGES ----------
   Couleurs : modifier ici, et seulement ici.
   Les teintes "dérivées" sont calculées à partir de la palette. */
:root {
  /* Palette */
  --graphite: #2B2D31;
  --gris: #6B6F76;
  --cuivre: #B8683A;
  --cuivre-fonce: #9E5529;   /* texte cuivre sur fond clair */
  --cuivre-clair: #E0966A;   /* texte cuivre sur fond graphite */
  --creme: #F4F2EE;
  --neutre: #E3DFD8;

  /* Dérivés (mélanges de la palette) */
  --creme-2: color-mix(in srgb, var(--neutre) 45%, var(--creme));   /* fond clair alterné */
  --filet: color-mix(in srgb, var(--graphite) 14%, var(--creme));   /* filets fins sur clair */
  --filet-sombre: color-mix(in srgb, var(--creme) 18%, var(--graphite));   /* filets fins sur graphite */
  --texte-sombre: color-mix(in srgb, var(--creme) 72%, var(--graphite));   /* texte secondaire sur graphite */

  /* Mise en page */
  --largeur: 1200px;                           /* largeur maximale du contenu */
  --marge: clamp(16px, 4vw, 48px);             /* marge gauche / droite */
  --entete: 76px;                              /* hauteur de l'en-tête collant */
  --rayon: 4px;                                /* rayon d'angle, partout le même */
  --duree: 200ms;                              /* durée des transitions */

  /* Échelle typographique (taille mini, fluide, maxi) */
  --t-hero: clamp(2.6rem, 1.5rem + 5vw, 5.5rem);
  --t-h2: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);
  --t-h3: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
  --t-accroche: clamp(1.3rem, 1.05rem + 1vw, 1.85rem);
  --t-texte: 1.125rem;                         /* 18 px */
  --t-petit: 0.9375rem;                        /* 15 px */
}

/* ---------- 2. POLICES ----------
   Hébergées sur le site (aucun appel à un service externe). */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin-500-normal.woff2") format("woff2");
}

/* ---------- 3. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--entete);           /* les ancres ne passent pas sous l'en-tête */
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }            /* défilement fluide, sauf si l'utilisateur l'a désactivé */
}
body {
  margin: 0;
  background: var(--creme);
  color: var(--graphite);
  font: 400 var(--t-texte)/1.7 "Source Sans 3", system-ui, sans-serif;
  overflow-x: clip;                            /* aucun défilement horizontal */
}
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 {
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
a { color: var(--cuivre-fonce); text-underline-offset: 0.2em; }
:focus-visible { outline: 2px solid var(--cuivre-fonce); outline-offset: 3px; border-radius: 2px; }
.inner { max-width: var(--largeur); margin-inline: auto; padding-inline: var(--marge); }

/* ---------- 4. EN-TÊTE (logo + menu) ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--creme);                    /* doit rester crème : le logo a un fond crème */
  border-bottom: 1px solid var(--filet);
}
.site-header .inner {
  height: var(--entete);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.logo { display: block; flex-shrink: 0; }
.logo img { display: block; height: 52px; width: auto; }
.site-header nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 32px;
  margin: 0;
  padding: 0;
}
.site-header nav a {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  color: var(--graphite);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
}
/* Soulignement cuivre qui se dessine au survol */
.site-header nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--cuivre);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duree) ease;
}
.site-header nav a:hover::after,
.site-header nav a:focus-visible::after { transform: scaleX(1); }
/* "Contact" en petit bouton plein */
.site-header nav a.nav-contact {
  padding: 9px 18px;
  background: var(--graphite);
  color: var(--creme);
  border-radius: var(--rayon);
  transition: background-color var(--duree) ease;
}
.site-header nav a.nav-contact::after { display: none; }
.site-header nav a.nav-contact:hover,
.site-header nav a.nav-contact:focus-visible { background: var(--cuivre-fonce); }

/* ---------- 5. TITRE DE PAGE (texte + œil) ---------- */
.hero { background: var(--creme); }
.hero .inner {
  padding-block: clamp(64px, 11vw, 152px) clamp(64px, 9vw, 128px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: end;
}
.hero-texte { grid-column: 1 / span 8; }
.hero h1 {
  font-size: var(--t-hero);
  line-height: 1.03;
  letter-spacing: -0.025em;
  margin: 0 0 clamp(24px, 3vw, 40px);
}
.accroche {
  margin: 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: var(--t-accroche);
  line-height: 1.35;
  color: var(--cuivre-fonce);
}
.accroche::before {                            /* filet cuivre court au-dessus de l'accroche */
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  margin-bottom: 20px;
  background: var(--cuivre);
}
/* ---------- 5 bis. ŒIL EN FILIGRANE ----------
   Fixe au centre de l'écran : il reste en place pendant que la page défile.
   Réglage de l'intensité : "opacity" (0.03 = 3 %).
   Au-delà de 0.12, le texte cuivre perd en contraste là où il croise l'œil.
   "mix-blend-mode: multiply" fait disparaître le fond crème de l'image
   sur les autres fonds ; sur le graphite (Contact), l'œil devient invisible. */
.filigrane {
  position: fixed;
  inset: 0;
  z-index: 5;                                  /* au-dessus des fonds, sous l'en-tête */
  overflow: hidden;                            /* l'œil agrandi ne crée aucun défilement horizontal */
  pointer-events: none;                        /* les liens et le texte restent cliquables */
  mix-blend-mode: multiply;
}
.filigrane img {
  position: absolute;                          /* centré à l'écran */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(80vw, 980px);
  max-width: none;
  opacity: 0.03;
}

/* ---------- 6. SECTIONS (réglages communs) ---------- */
.section { padding-block: clamp(80px, 10vw, 144px); }
.section .w { max-width: var(--largeur); margin-inline: auto; padding-inline: var(--marge); }
.section h2 {
  margin: 0;
  font-size: var(--t-h2);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* ---------- 6 bis. SITUATIONS FRÉQUENTES ----------
   Juste sous le titre de page, sur le même fond crème.
   Titre à gauche (4 colonnes), texte et liste à droite (7 colonnes), chacun sous un filet fin. */
.situations { padding-top: 0; }
.situations .w {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: start;
}
.situations h2,
.situations-texte {
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--filet);
}
.situations h2 { grid-column: 1 / span 4; }
.situations-texte {
  grid-column: 6 / span 7;
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.65;
}
.situations-texte p { margin: 0; }
.situations-texte ul {
  list-style: none;
  margin: 24px 0 32px;
  padding: 0;
}
.situations-texte li {                         /* une ligne par situation, tiret cuivre */
  position: relative;
  padding: 12px 0 12px 32px;
  border-bottom: 1px solid var(--filet);
}
.situations-texte li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(12px + 0.82em);
  width: 16px;
  height: 2px;
  background: var(--cuivre);
}
.situations .conclusion {                      /* phrase de conclusion en serif cuivre */
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
  line-height: 1.35;
  color: var(--cuivre-fonce);
}

/* ---------- 7. EXPÉRIENCES ----------
   Ordinateur : titre et nom à gauche (4 colonnes), texte à droite (7 colonnes). */
.experiences { background: var(--creme-2); }
.experiences .w {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr;           /* titre, nom, puis l'espace restant */
  column-gap: 24px;
  align-items: start;
}
.experiences h2 { grid-column: 1 / span 4; grid-row: 1; }
.experiences .qui {
  grid-column: 1 / span 4;
  grid-row: 2;
  margin: 28px 0 0;
  max-width: 22ch;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--graphite);
}
.experiences .qui::before {                    /* même filet cuivre court que l'accroche */
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin-bottom: 14px;
  background: var(--cuivre);
}
.cols {
  grid-column: 6 / span 7;
  grid-row: 1 / span 3;
  display: grid;
  gap: 32px;
  padding-top: 0.6rem;                         /* aligne le texte sur le haut du titre */
}
.cols p {                                      /* les deux paragraphes, même taille */
  margin: 0;
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.65;
}
.cols p + p {                                  /* filet fin entre les deux paragraphes */
  padding-top: 32px;
  border-top: 1px solid var(--filet);
}
/* Quelques réalisations : trois cartes crème sur toute la largeur, sous le texte */
.realisations {
  grid-column: 1 / -1;
  grid-row: 4;
  margin-top: clamp(56px, 7vw, 96px);
}
.realisations h3 {
  margin: 0 0 clamp(24px, 3vw, 40px);
  font-size: var(--t-h3);
}
.realisations ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.realisations li {
  padding: clamp(24px, 3vw, 36px);
  background: var(--creme);
  border-top: 2px solid var(--cuivre);
  border-radius: var(--rayon);
}
.realisations h4 {
  margin: 0 0 14px;
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.4rem);
  line-height: 1.2;
}
.realisations p { margin: 0; font-size: 1rem; line-height: 1.6; }

/* ---------- 8. OFFRES ----------
   Deux offres côte à côte, de même hauteur, en aplat crème sans bordure. */
#offres h2 { margin-bottom: clamp(40px, 5vw, 64px); }
/* Les offres sont l'une sous l'autre, chacune en deux parties alignées :
   à gauche (5 colonnes sur 12) le nom, à droite (7 colonnes) le contenu. */
.offres { display: grid; gap: 24px; }
.offre {
  --pad: clamp(28px, 4vw, 52px);               /* marge intérieure des offres */
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--creme-2);
  border-radius: var(--rayon);
  overflow: hidden;                            /* garde les angles arrondis sur la méthode */
}
.offre-gauche, .offre-droite { padding: var(--pad); }
.offre-droite > p { margin-top: 0; }
.offre h3 {
  margin: 0;
  font-size: var(--t-h3);
  line-height: 1.1;
}
.mode {                                        /* mode de facturation, en libellé cuivre */
  margin: 14px 0 0;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--filet);
  font-size: var(--t-petit);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--cuivre-fonce);
}
.offre p { margin: 0 0 16px; }
.offre .mode + p { margin-top: 24px; }
.offre p:last-child { margin-bottom: 0; }
.flux { font-size: var(--t-petit); line-height: 1.6; }
.offre .suite {                                /* mise en œuvre possible ensuite, sous un filet */
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--filet);
  font-weight: 500;
}

/* ---------- 9. MÉTHODE EN 4 ÉTAPES (offre Analyse de flux) ----------
   Partie droite de l'offre 1, en aplat graphite ; étapes en 2 × 2, puis 1 colonne sur mobile. */
.methode {
  background: var(--graphite);
  color: var(--creme);
}
.methode h4 {
  margin: 0 0 clamp(28px, 3.5vw, 44px);
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
  line-height: 1.15;
}
.etapes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 32px;
}
.etapes li {
  padding-top: 20px;
  border-top: 1px solid var(--filet-sombre);
}
.num {                                         /* grands chiffres cuivre */
  display: block;
  margin-bottom: 20px;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(3rem, 2rem + 2.5vw, 4.25rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--cuivre-clair);
}
.etapes p { margin: 0; font-size: 1rem; line-height: 1.6; }
.etapes strong {                               /* intitulé de l'étape, sur sa propre ligne */
  display: block;
  margin-bottom: 8px;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.35;
}

/* ---------- 10. CIBLE ET APPEL À L'ACTION ---------- */
.cible {
  margin: clamp(56px, 7vw, 96px) 0 0;
  padding: 32px 0;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  display: flex;                               /* phrase en gras à gauche, domaines à droite */
  align-items: baseline;
  gap: 24px;
}
.cible strong {                                /* "Pour les PME / PMI du Grand Est." */
  flex: 0 0 calc(41.66% - 24px);               /* 5 colonnes sur 12 */
  font-family: "Source Serif 4", Georgia, serif;
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.15;
}
.cta {
  margin-top: clamp(56px, 7vw, 96px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 32px;
  align-items: end;
}
.cta p {
  grid-column: 1 / span 8;
  margin: 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.bouton {
  grid-column: 9 / span 4;
  justify-self: end;
  display: inline-block;
  padding: 18px 32px;
  background: var(--cuivre-fonce);
  color: var(--creme);
  border-radius: var(--rayon);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duree) ease;
}
.bouton:hover,
.bouton:focus-visible { background: var(--graphite); }

/* ---------- 11. CONTACT ----------
   Fond graphite. Titre et nom à gauche (5 colonnes), coordonnées à droite (7 colonnes). */
.contact { background: var(--graphite); color: var(--creme); }
.contact .inner {
  padding-block: clamp(80px, 10vw, 144px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr;           /* titre, nom, puis l'espace restant */
  column-gap: 24px;
  row-gap: 28px;
  align-items: start;
}
.contact h2 {
  grid-column: 1 / span 5;
  margin: 0;
  font-size: var(--t-h2);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.contact .qui {
  grid-column: 1 / span 5;
  grid-row: 2;
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--creme);
}
.contact .qui::before {                        /* même filet cuivre court que plus haut */
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin-bottom: 14px;
  background: var(--cuivre-clair);
}
.contact dl {
  grid-column: 6 / span 7;
  grid-row: 1 / span 3;
  margin: 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 40px;
  border-bottom: 1px solid var(--filet-sombre);
}
.contact dt, .contact dd {
  padding-block: 22px;
  border-top: 1px solid var(--filet-sombre);
}
.contact dt {                                  /* intitulés : E-mail, Téléphone, LinkedIn */
  align-self: baseline;
  font-size: var(--t-petit);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--cuivre-clair);
}
.contact dd {                                  /* coordonnées en grand serif */
  margin: 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  line-height: 1.25;
  overflow-wrap: anywhere;                     /* l'adresse e-mail ne déborde jamais */
}
.contact a {
  color: var(--creme);
  text-decoration-color: color-mix(in srgb, var(--creme) 35%, transparent);
  text-decoration-thickness: 1px;
  transition: color var(--duree) ease, text-decoration-color var(--duree) ease;
}
.contact a:hover,
.contact a:focus-visible { color: var(--cuivre-clair); text-decoration-color: var(--cuivre-clair); }
.contact :focus-visible { outline-color: var(--cuivre-clair); }

/* ---------- 12. PIED DE PAGE ----------
   Prolonge le fond graphite du Contact, séparé par un filet fin. */
.site-footer {
  padding: 24px max(var(--marge), (100% - var(--largeur)) / 2 + var(--marge));
  display: flex;
  justify-content: space-between;
  gap: 16px;
  background: var(--graphite);
  border-top: 1px solid var(--filet-sombre);
  font-size: var(--t-petit);
  color: var(--texte-sombre);
}
.site-footer a {
  color: var(--texte-sombre);
  transition: color var(--duree) ease;
}
.site-footer a:hover,
.site-footer a:focus-visible { color: var(--cuivre-clair); }
.site-footer :focus-visible { outline-color: var(--cuivre-clair); }

/* ---------- 13. PAGE DES MENTIONS LÉGALES ---------- */
.legal {
  max-width: calc(760px + 2 * var(--marge));
  margin-inline: auto;
  padding: clamp(56px, 8vw, 112px) var(--marge) clamp(64px, 9vw, 128px);
}
.legal h1 {
  margin: 0 0 clamp(32px, 4vw, 56px);
  font-size: var(--t-h2);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.legal h2 {                                    /* chaque rubrique s'ouvre sur un filet fin */
  margin: 40px 0 12px;
  padding-top: 24px;
  border-top: 1px solid var(--filet);
  font-size: 1.375rem;
}
.legal p { margin: 0 0 10px; overflow-wrap: anywhere; }

/* ---------- TABLETTE ---------- */
@media (max-width: 1000px) {
  /* Offres : la partie gauche passe au-dessus de la partie droite */
  .offre { grid-template-columns: minmax(0, 1fr); }
  .offre-gauche:has(+ .offre-droite:not(.methode)) { padding-bottom: 24px; }
  .offre-gauche + .offre-droite:not(.methode) { padding-top: 0; }
  /* Réalisations : cartes l'une sous l'autre */
  .realisations ul { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* ---------- MOBILE ---------- */
@media (max-width: 760px) {
  :root { --entete: 64px; }
  body { font-size: 1.0625rem; }               /* 17 px */
  /* En-tête */
  .logo img { height: 40px; }
  .site-header nav ul { gap: 16px; }
  .site-header nav a { font-size: var(--t-petit); }
  .site-header nav a.nav-contact { padding: 7px 12px; }
  /* Titre de page : texte sur toute la largeur */
  .hero .inner { grid-template-columns: minmax(0, 1fr); }
  .hero-texte { grid-column: 1; }
  /* Œil en filigrane : plus large que l'écran, coupé aux bords */
  .filigrane img { width: 140vw; }
  /* Situations : titre au-dessus du texte, un seul filet */
  .situations .w { grid-template-columns: minmax(0, 1fr); }
  .situations h2, .situations-texte { grid-column: 1; }
  .situations-texte { margin-top: 24px; padding-top: 0; border-top: 0; }
  /* Expériences : tout sur une colonne */
  .experiences .w { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .experiences h2, .experiences .qui, .cols, .realisations { grid-column: 1; grid-row: auto; }
  .experiences .qui { margin-top: 20px; }
  .cols { margin-top: 40px; padding-top: 0; gap: 24px; }
  .cols p + p { padding-top: 24px; }
  /* Offres, méthode, cible, appel à l'action : une colonne */
  .offres { gap: 16px; }
  .etapes { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cible { flex-direction: column; gap: 12px; }
  .cta { grid-template-columns: minmax(0, 1fr); }
  .cta p, .bouton { grid-column: 1; }
  .bouton { justify-self: stretch; text-align: center; white-space: normal; }
  /* Contact : une colonne ; intitulé au-dessus de chaque coordonnée */
  .contact .inner { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .contact h2, .contact .qui, .contact dl { grid-column: 1; grid-row: auto; }
  .contact dl { margin-top: 12px; grid-template-columns: minmax(0, 1fr); }
  .contact dt { padding-bottom: 4px; }
  .contact dd { padding-top: 0; border-top: 0; }
  .site-footer { flex-direction: column; gap: 6px; }
}

/* ---------- ANIMATIONS RÉDUITES ----------
   Si l'utilisateur a demandé moins d'animations à son système : aucune transition. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}