:root {
  --blanc: #ffffff;
  --noir: #0b0a09;
  --or: #c8a96e;
  --or-texte: #80652f;
  --gris-texte: #55504a;
  --filet: rgba(11, 10, 9, .12);
  --placeholder: #e6e3df;
  --rayon-pastille: 999px;
  --rayon-bloc: 28px;
  --max: 1440px;
  --police: "Geist", ui-sans-serif, "Segoe UI Variable Display", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  /* Calage des 12 lettres d'AUTOMATEFLOW avec la police système actuelle. */
  --avance-nom: 9.7;
  --t-hero: min(15rem, calc((min(100vw, var(--max)) - 3.5rem) / var(--avance-nom)));
  --t-accroche: clamp(2.2rem, 7vw, 6rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--blanc); color: var(--noir); font-family: var(--police); }
img { display: block; max-width: 100%; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--noir); outline-offset: 3px; }

.entete, main > section, .pied { width: min(calc(100% - 2rem), var(--max)); margin-inline: auto; }
.entete { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1rem; background: var(--blanc); }
.entete__logo, .pied__logo { font-size: 1.4rem; font-weight: 900; letter-spacing: -.08em; text-decoration: none; }
.nav, .contact__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.pastille { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--filet); border-radius: var(--rayon-pastille); padding: .55rem 1.15rem; font-weight: 600; text-decoration: none; transition: color .25s, border-color .25s, background-color .25s; }
.pastille:hover, .pastille:focus-visible { color: var(--or-texte); border-color: var(--or); }
.pastille--or { background: var(--noir); color: var(--blanc); }
.pastille--or:hover, .pastille--or:focus-visible { background: var(--or); color: var(--noir); }

.hero { padding-block: clamp(3rem, 9vw, 8rem); overflow: hidden; }
.hero__scene { position: relative; display: grid; min-width: 0; isolation: isolate; }
.hero__titre { display: grid; grid-area: 1 / 1; min-width: 0; width: 100%; margin: 0; }
.hero__nom { grid-area: 1 / 1; display: flex; flex-wrap: nowrap; align-self: start; justify-content: center; min-width: 0; width: 100%; font-size: var(--t-hero); font-weight: 900; letter-spacing: -.04em; line-height: .86; text-transform: uppercase; white-space: pre; }
.hero__nom--arriere { z-index: 1; color: var(--noir); }
/* Photo detouree : hauteur libre, sinon le ratio imposé la déformerait. */
.hero__photo { display: block; grid-area: 1 / 1; z-index: 2; align-self: end; justify-self: center; width: min(30vw, 340px); height: auto; }
.hero__nom--avant { z-index: 3; align-self: start; color: transparent; pointer-events: none; user-select: none; }
.hero__nom--avant .is-devant { color: var(--noir); }
.hero__role { position: relative; z-index: 4; display: block; grid-area: 2 / 1; margin-top: 2rem; color: var(--gris-texte); font-size: clamp(.95rem, 1.6vw, 1.35rem); font-weight: 400; letter-spacing: 0; text-align: center; }
.hero__signature { position: relative; z-index: 4; grid-area: 3 / 1; margin-top: .6rem; color: var(--gris-texte); font-size: .95rem; text-align: center; }
.hero__signature a { text-underline-offset: .2em; transition: color .25s; }
.hero__signature a:hover, .hero__signature a:focus-visible { color: var(--or-texte); }

.accroche, .apropos, .travaux, .services, .contact { padding-block: clamp(5rem, 11vw, 10rem); }
.accroche__texte, .contact__accroche { max-width: 15ch; font-size: var(--t-accroche); font-weight: 900; letter-spacing: -.04em; line-height: 1.04; }
.accroche__sous { max-width: 52ch; margin-top: 2rem; color: var(--gris-texte); font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.65; }
.souligne { position: relative; display: inline-block; padding-bottom: .24em; }
.trait { position: absolute; top: calc(100% - .08em); right: 0; left: 0; width: 100%; height: auto; overflow: visible; }
.trait path { fill: none; stroke: var(--or); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 320; stroke-dashoffset: 0; }
.js .trait path { stroke-dashoffset: 320; transition: stroke-dashoffset .5s ease-out; }
.js .est-visible .trait path { stroke-dashoffset: 0; }

.apropos__grille { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.apropos__portrait { width: 100%; height: auto; border-radius: var(--rayon-bloc); }
.apropos__texte h2 { margin-bottom: 1.5rem; font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 900; letter-spacing: -.03em; }
.apropos__texte p { max-width: 62ch; margin-bottom: 1.1rem; color: var(--gris-texte); line-height: 1.7; }
.apropos__texte .a-completer { border: 1px dashed var(--or); border-radius: 12px; padding: .75rem 1rem; color: var(--or-texte); font-weight: 700; }

.travaux > h2, .services > h2 { margin-bottom: 2rem; font-size: clamp(1rem, 2vw, 1.3rem); text-transform: uppercase; letter-spacing: .1em; }
.travaux__note { max-width: 62ch; margin: -1rem 0 2rem; color: var(--gris-texte); line-height: 1.6; }
.ligne { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; padding: clamp(1.4rem, 3vw, 2.4rem) 0; border-bottom: 1px solid var(--filet); text-decoration: none; }
.liste__ligne:first-child .ligne { border-top: 1px solid var(--filet); }
.ligne__titre { flex: 1; font-size: clamp(1.8rem, 4.5vw, 3.4rem); font-weight: 800; letter-spacing: -.04em; transition: color .25s, transform .3s; }
.ligne__meta { display: grid; min-width: min(28rem, 42vw); grid-template-columns: auto 1fr; gap: .4rem 1.5rem; color: var(--gris-texte); }
.ligne__statut { grid-column: 1 / -1; justify-self: start; margin-top: .25rem; border-radius: var(--rayon-pastille); padding: .18rem .7rem; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ligne__statut--client { background: var(--noir); color: var(--blanc); }
.ligne__statut--demo { border: 1px solid var(--or); color: var(--or-texte); }
.ligne__fleche { width: 1.7rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .3s; }
.ligne:hover .ligne__titre, .ligne:focus-visible .ligne__titre { color: var(--or-texte); transform: translateX(10px); }
.ligne:hover .ligne__fleche, .ligne:focus-visible .ligne__fleche { transform: translate(6px, -6px); }
.lien-suite { display: inline-block; margin-top: 2rem; border-bottom: 1px solid currentColor; font-weight: 700; text-decoration: none; transition: color .25s; }
.lien-suite:hover, .lien-suite:focus-visible { color: var(--or-texte); }
.visuellement-cache { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.services__liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-top: 1px solid var(--filet); border-left: 1px solid var(--filet); }
.services__liste li { min-height: 13rem; padding: 1.5rem; border-right: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.services__liste h3 { margin-bottom: 1rem; font-size: 1.35rem; }
.services__liste a { text-decoration: none; transition: color .25s; }
.services__liste a:hover, .services__liste a:focus-visible { color: var(--or-texte); }
.services__liste p { color: var(--gris-texte); line-height: 1.6; }

.contact { border-top: 1px solid var(--filet); }
#contact { scroll-margin-top: 5rem; }
.contact__mail { display: inline-block; margin-block: 2rem 3rem; font-size: clamp(1.1rem, 2.5vw, 1.9rem); text-decoration-thickness: 1px; text-underline-offset: .3em; transition: color .25s; }
.contact__mail:hover, .contact__mail:focus-visible { color: var(--or-texte); }

.pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4rem; padding-block: 4rem 2rem; border-top: 1px solid var(--filet); }
.pied__marque { display: flex; flex-direction: column; gap: 1rem; }
.pied__tag { max-width: 16rem; color: var(--gris-texte); }
.pied__colonnes { display: flex; flex-wrap: wrap; gap: clamp(2rem, 6vw, 6rem); }
.pied nav { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; }
.pied__titre { margin-bottom: .4rem; color: var(--gris-texte); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.pied nav a { text-decoration: none; transition: color .25s; }
.pied nav a:hover, .pied nav a:focus-visible { color: var(--or-texte); }
.pied__copie { width: 100%; padding-top: 2rem; border-top: 1px solid var(--filet); color: var(--gris-texte); font-size: .85rem; }

/* Pages internes : même vocabulaire visuel que l'accueil, avec une lecture
   plus resserrée pour les contenus éditoriaux et légaux. */
.svc, .page-article { width: min(calc(100% - 2rem), var(--max)); margin-inline: auto; padding-block: clamp(4rem, 9vw, 8rem); }
.svc > *, .page-article > article { max-width: 74rem; }
.crumbs { margin-bottom: clamp(3rem, 7vw, 6rem); color: var(--gris-texte); font-size: .9rem; }
.crumbs a, .svc a:not(.pastille), .prose a, .legal a { text-underline-offset: .22em; text-decoration-thickness: 1px; transition: color .25s; }
.crumbs a:hover, .crumbs a:focus-visible, .svc a:not(.pastille):hover, .svc a:not(.pastille):focus-visible,
.prose a:hover, .prose a:focus-visible, .legal a:hover, .legal a:focus-visible { color: var(--or-texte); }
.eyebrow { margin-bottom: .8rem; color: var(--or-texte); font-weight: 750; }
.svc > h1, .prose > h1, .legal > h1 { max-width: 18ch; margin-bottom: 1.5rem; font-size: clamp(2.75rem, 7vw, 6rem); font-weight: 900; letter-spacing: -.04em; line-height: .98; text-wrap: balance; }
.prose__lead, .prose > p:first-of-type { max-width: 70ch; color: var(--gris-texte); font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.65; text-wrap: pretty; }
.svc__block { display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr); gap: clamp(1.5rem, 5vw, 6rem); max-width: none; padding-block: clamp(2.5rem, 6vw, 5rem); border-top: 1px solid var(--filet); }
.svc > .prose__lead + .svc__block { margin-top: clamp(4rem, 8vw, 7rem); }
.svc__block > h2 { font-size: clamp(1.55rem, 3vw, 2.5rem); letter-spacing: -.03em; line-height: 1.08; text-wrap: balance; }
.svc__block > :not(h2) { grid-column: 2; }
.svc__block p, .svc__block li, .prose p, .prose li, .legal p, .legal li { max-width: 72ch; line-height: 1.75; text-wrap: pretty; }
.svc__block ul, .prose ul, .legal ul { display: grid; gap: .65rem; padding-left: 1.2rem; list-style: disc; }
.svc__block .prose__cta { justify-self: start; display: inline-flex; margin-top: 1rem; border: 1px solid var(--noir); border-radius: var(--rayon-pastille); padding: .75rem 1.25rem; font-weight: 750; text-decoration: none; }
.svc__block .prose__cta:hover, .svc__block .prose__cta:focus-visible { background: var(--or); color: var(--noir); border-color: var(--or); }

.prose, .legal { max-width: 74rem; margin-inline: auto; }
.prose > h2, .legal > h2 { margin-top: clamp(3rem, 6vw, 5rem); padding-top: 2rem; border-top: 1px solid var(--filet); font-size: clamp(1.5rem, 3vw, 2.35rem); letter-spacing: -.03em; }
.prose > h2 + p, .legal > h2 + p, .legal > h2 + ul { margin-top: 1rem; }
.prose > p, .prose > ul, .legal > p, .legal > ul { margin-top: 1.1rem; }
.legal__updated { color: var(--or-texte); font-weight: 700; }
.legal__back { display: inline-block; margin-top: clamp(3rem, 7vw, 6rem); font-weight: 750; }

.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s, transform .6s; }
.js [data-reveal].est-visible { opacity: 1; transform: none; }

@keyframes lettre-monte { from { opacity: 0; transform: translateY(.35em); } to { opacity: 1; transform: none; } }
@keyframes bloc-monte { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } }
.hero__nom > span { animation: lettre-monte .38s cubic-bezier(.2,.7,.3,1) both; }
.hero__nom > span:nth-child(1) { animation-delay: 0ms; }
.hero__nom > span:nth-child(2) { animation-delay: 35ms; }
.hero__nom > span:nth-child(3) { animation-delay: 70ms; }
.hero__nom > span:nth-child(4) { animation-delay: 105ms; }
.hero__nom > span:nth-child(5) { animation-delay: 140ms; }
.hero__nom > span:nth-child(6) { animation-delay: 175ms; }
.hero__nom > span:nth-child(7) { animation-delay: 210ms; }
.hero__nom > span:nth-child(8) { animation-delay: 245ms; }
.hero__nom > span:nth-child(9) { animation-delay: 280ms; }
.hero__nom > span:nth-child(10) { animation-delay: 315ms; }
.hero__nom > span:nth-child(11) { animation-delay: 350ms; }
.hero__nom > span:nth-child(12) { animation-delay: 385ms; }
.hero__photo { animation: bloc-monte .5s ease-out .28s both; }
.hero__role { animation: bloc-monte .4s ease-out .52s both; }
.hero__signature { animation: bloc-monte .4s ease-out .6s both; }

.js [data-stagger] > * { opacity: 0; transform: translateY(14px); transition: opacity .4s ease, transform .4s ease; }
.js [data-stagger="opacite"] > * { transform: none; }
.js .est-visible [data-stagger] > *, .js [data-stagger].est-visible > * { opacity: 1; transform: none; }
.js [data-stagger] > *:nth-child(2) { transition-delay: 15ms; }
.js [data-stagger] > *:nth-child(3) { transition-delay: 30ms; }
.js [data-stagger] > *:nth-child(4) { transition-delay: 45ms; }
.js [data-stagger] > *:nth-child(5) { transition-delay: 60ms; }
.js [data-stagger] > *:nth-child(6) { transition-delay: 75ms; }
.js [data-stagger] > *:nth-child(7) { transition-delay: 90ms; }
.js [data-stagger] > *:nth-child(8) { transition-delay: 100ms; }

@media (max-width: 767px) {
  .hero__photo { width: min(40vw, 150px); }
}

@media (max-width: 700px) {
  .ligne { position: relative; flex-direction: column; align-items: flex-start; gap: .8rem; }
  .ligne__meta { min-width: 0; width: calc(100% - 2.5rem); grid-template-columns: 1fr; }
  .apropos__grille { grid-template-columns: 1fr; }
  .apropos__portrait { max-width: 16rem; }
  .ligne__fleche { position: absolute; right: 0; top: 1.7rem; }
  .svc__block { grid-template-columns: 1fr; }
  .svc__block > :not(h2) { grid-column: auto; }
}

@media (max-width: 640px) {
  .entete { align-items: flex-start; flex-direction: column; }
  .nav { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pastille { padding-inline: .5rem; font-size: .82rem; }
  .nav .pastille { min-width: 0; width: 100%; }
  .hero__role { justify-self: center; max-width: 28ch; padding-inline: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .trait path { stroke-dashoffset: 0; }
  .js .trait path { stroke-dashoffset: 0 !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ---- Apercu des realisations au survol -------------------------------------
   Une seule image, positionnee en fixed et deplacee au pointeur. `translate`
   est une propriete distincte de `transform`, qui porte le centrage et
   l'echelle : les deux ne se marchent pas dessus. */
.apercu {
  position: fixed; z-index: 5; top: 0; left: 0;
  width: min(30vw, 420px); aspect-ratio: 16 / 10;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(11, 10, 9, .28);
  opacity: 0; transform: translate(-50%, -50%) scale(.96);
  transition: opacity .28s ease, transform .28s ease;
  pointer-events: none;
}
.apercu.est-actif { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.apercu__img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* La vignette n'apparait que la ou le survol n'existe pas. */
.ligne__vignette { display: none; }

@media (max-width: 900px), (hover: none) {
  .apercu { display: none; }
  .ligne { flex-wrap: wrap; }
  .ligne__vignette {
    display: block; order: 9; width: 100%; height: auto;
    margin-top: 1.2rem; border-radius: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .apercu { transition: none; }
}
/* Le trait suit la ligne de base du mot souligne : sans reserve d'espace,
   il barre la ligne suivante quand l'interligne est serre. */
.accroche__texte { line-height: 1.14; }
.souligne { padding-bottom: .3em; }
.trait { top: calc(100% - .16em); }
/* ---- Titres : survol lettre par lettre ------------------------------------
   Au passage de la souris, la lettre se vide et ne garde que son contour.
   Chaque lettre reagit independamment, ce qui donne un effet de trainee
   quand le pointeur balaie le mot. `-webkit-text-stroke` est reconnu par
   tous les navigateurs courants malgre son prefixe. */
.lettre {
  display: inline-block;
  transition: color .18s ease, -webkit-text-stroke-width .18s ease, transform .18s ease;
  -webkit-text-stroke: 0 var(--noir);
}
.lettre:hover {
  color: transparent;
  -webkit-text-stroke: .022em var(--noir);
  transform: translateY(-.02em);
}

/* Sur le hero, les deux couches doivent se vider ensemble : sinon la couche
   arriere resterait pleine derriere la lettre creusee. */
.hero__nom span { transition: color .18s ease, -webkit-text-stroke-width .18s ease; }
.hero__titre.est-creuse .hero__nom--arriere span.est-survolee,
.hero__titre.est-creuse .hero__nom--avant span.est-survolee.is-devant {
  color: transparent;
  -webkit-text-stroke: .018em var(--noir);
}

/* L'accent or sur la lettre survolee des titres de section. */
.accroche__texte .lettre:hover,
.contact__accroche .lettre:hover { -webkit-text-stroke-color: var(--or); }

@media (prefers-reduced-motion: reduce) {
  .lettre, .hero__nom span { transition: none; }
}

@media (hover: none) {
  .lettre:hover { color: inherit; -webkit-text-stroke-width: 0; transform: none; }
}
/* Le mot reste solidaire : les lettres sont des blocs, sans cela le navigateur
   couperait a l'interieur des mots. */
.mot { display: inline-block; white-space: nowrap; }
/* ---- Confort de lecture des articles --------------------------------------
   Une ligne au-dela de 75 caracteres fatigue : l'oeil perd le debut de la
   ligne suivante. On borne la largeur et on aere les paragraphes. */
.page-article article { max-width: 68ch; }
.page-article h1 { margin-bottom: .6rem; font-size: clamp(2rem, 4.5vw, 3.4rem); letter-spacing: -.03em; line-height: 1.06; }
.page-article h2 { margin-top: 3.2rem; margin-bottom: .9rem; font-size: clamp(1.35rem, 2.4vw, 1.9rem); letter-spacing: -.02em; line-height: 1.2; }
.page-article h3 { margin-top: 1.8rem; margin-bottom: .5rem; font-size: 1.1rem; }
.page-article p { margin-bottom: 1.15rem; font-size: 1.06rem; line-height: 1.72; color: #2a2724; }
.page-article strong { color: var(--noir); }

.article__meta { color: var(--gris-texte); font-size: .9rem; }
.article__chapeau { margin-top: 1.4rem; font-size: 1.2rem !important; line-height: 1.6 !important; color: var(--gris-texte) !important; }
.article__note { margin-top: 3rem; color: var(--gris-texte); }
.article__cta { margin: 2.6rem 0 1rem; }

.article__liens { margin-top: .5rem; }
.article__liens li { margin-bottom: .7rem; }
.article__liens a { text-decoration-thickness: 1px; text-underline-offset: .25em; }

/* Les questions de FAQ sur les pages metier suivent la meme respiration. */
.faq h3 { margin-top: 1.9rem; margin-bottom: .4rem; font-size: 1.12rem; }
.faq p { max-width: 68ch; color: #2a2724; line-height: 1.7; }