/* ------------------------------------------------------------------
   HexaFlow v2 — charte unique du site
   Sombre, sobre. Titres Petrona en graisse normale, corps Inter,
   étiquettes en Plex Mono. Filets de 1 px comme sur les couvertures PDF.
   Une seule animation : un fondu à l'apparition.
   ------------------------------------------------------------------ */

:root {
  --fond: #0a0a0a;
  --fond-2: #111111;
  --fond-3: #181818;
  --encre: #f2f2f2;
  --texte: #b5b5b5;
  --discret: #808080;
  --filet: rgba(255, 255, 255, .10);
  --filet-fort: rgba(255, 255, 255, .20);
  /* Noir et blanc (décision du 07/11) : l'accent est le blanc, le mot mis en avant passe en gris. */
  --accent: #ffffff;
  --accent-doux: #8c8c8c;     /* mot mis en avant dans les titres */
  --accent-plein: #f2f2f2;    /* fond des boutons pleins */
  --accent-survol: #d4d4d4;

  --titre: 'Petrona', Georgia, serif;
  --corps: 'Inter Reprise', system-ui, sans-serif;
  --mono: 'Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  --large: 1280px;
  --gouttiere: 40px;
  --haut-barre: 64px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--haut-barre) + 16px); }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 400 16px/1.6 var(--corps);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.cadre { width: 100%; max-width: var(--large); margin: 0 auto; padding: 0 var(--gouttiere); }

/* ----------------------------- Typo ------------------------------ */

.etiquette {
  font: 400 12px/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--discret);
}
.etiquette b { font-weight: 500; color: var(--accent); }

.titre-1, .titre-2, .titre-3 {
  font-family: var(--titre);
  font-weight: 400;
  color: var(--encre);
  letter-spacing: -0.02em;
}
.titre-1 { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -0.04em; } /* Petrona 400, interlettrage du site v1 (-1,48 px pour 37 px) */
.titre-2 { font-size: clamp(25px, 2.5vw, 32px); line-height: 1.15; }
.titre-3 { font-size: 24px; line-height: 1.2; }
.titre-1 em, .titre-2 em { font-style: italic; color: inherit; } /* une seule teinte : le mot mis en avant passe en italique */

.chapo { font-size: 19px; line-height: 1.55; color: var(--texte); max-width: 36em; }
.lien-fleche { color: var(--encre); border-bottom: 1px solid var(--filet-fort); padding-bottom: 2px; transition: border-color .2s; }
.lien-fleche:hover { border-color: var(--accent); }
.lien-fleche::after { content: " →"; }

/* ----------------------------- Boutons ---------------------------- */

.bouton {
  display: inline-flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 22px;
  border-radius: 8px;
  font: 500 15px/1 var(--corps);
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background-color .2s, border-color .2s;
}
.bouton--plein { background: var(--accent-plein); color: #0a0a0a; }
.bouton--plein:hover { background: var(--accent-survol); }
.bouton--borde { border: 1px solid var(--filet-fort); color: var(--encre); }
.bouton--borde:hover { border-color: var(--encre); }
.bouton--petit { height: 38px; padding: 0 16px; font-size: 14px; }

/* ------------------------------ Barre ----------------------------- */

.barre {
  position: sticky; top: 0; z-index: 50;
  height: var(--haut-barre);
  background: rgba(10, 10, 10, .88);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--filet);
}
.barre__interieur { height: 100%; display: flex; align-items: center; gap: 40px; }
.marque { display: flex; align-items: center; gap: 10px; color: var(--encre); font: 500 18px/1 var(--corps); letter-spacing: -0.02em; }
.marque svg { width: 23px; height: 26px; flex: none; }

.nav { display: flex; align-items: center; gap: 4px; height: 100%; flex: 1; }
.nav__item { height: 100%; display: flex; align-items: center; }
.nav__lien {
  display: flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px; border-radius: 6px;
  font-size: 14.5px; color: var(--texte);
  transition: color .15s, background-color .15s;
}
.nav__lien:hover, .nav__item:focus-within > .nav__lien, .nav__item:hover > .nav__lien { color: var(--encre); background: rgba(255,255,255,.05); }
.nav__lien svg { width: 10px; height: 10px; opacity: .6; }
.barre__actions { display: flex; align-items: center; gap: 12px; }

/* Méga-menu : s'ouvre au survol ou au clavier. Positionné sous toute la barre. */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--fond-2);
  border-bottom: 1px solid var(--filet);
  box-shadow: 0 24px 48px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility 0s .15s;
}
.nav__item:hover > .mega, .nav__item:focus-within > .mega {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .15s, transform .15s;
}
.mega__grille { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; padding-top: 32px; padding-bottom: 36px; }
.mega__col { grid-column: span 3; }
.mega__col--large { grid-column: span 6; }
.mega__col .etiquette { margin-bottom: 14px; }
.mega__liste a { display: block; padding: 7px 0; color: var(--encre); font-size: 15px; }
.mega__liste a:hover { color: var(--accent); }
.mega__liste a small { display: block; font-size: 13px; color: var(--discret); line-height: 1.4; }
.mega__secteurs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; }
.mega__secteurs a { display: block; padding: 12px 0; border-top: 1px solid var(--filet); }
.mega__secteurs strong { display: block; font: 400 22px/1.2 var(--titre); color: var(--encre); }
.mega__secteurs span { font-size: 13.5px; color: var(--discret); }
.mega__secteurs a:hover strong { color: var(--accent); }
.mega__preuve { grid-column: span 3; display: block; border: 1px solid var(--filet); border-radius: 8px; overflow: hidden; background: var(--fond-3); }
.mega__preuve img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.mega__preuve div { padding: 16px; }
.mega__preuve strong { display: block; font: 400 28px/1.1 var(--titre); color: var(--encre); margin: 8px 0 4px; }
.mega__preuve p { font-size: 13.5px; line-height: 1.45; }

/* Menu mobile */
.burger { display: none; width: 40px; height: 40px; border-radius: 6px; border: 1px solid var(--filet-fort); align-items: center; justify-content: center; }
.burger span, .burger span::before, .burger span::after { display: block; width: 16px; height: 1.5px; background: var(--encre); position: relative; transition: transform .2s, background-color .2s; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -5px; } .burger span::after { top: 5px; }
.menu-ouvert .burger span { background: transparent; }
.menu-ouvert .burger span::before { transform: translateY(5px) rotate(45deg); }
.menu-ouvert .burger span::after { transform: translateY(-5px) rotate(-45deg); }

.tiroir {
  display: none;
  position: fixed; inset: var(--haut-barre) 0 0 0; z-index: 49;
  background: var(--fond);
  overflow-y: auto; padding: 8px 20px 40px;
}
.menu-ouvert .tiroir { display: block; }
.menu-ouvert { overflow: hidden; }
.tiroir details { border-bottom: 1px solid var(--filet); }
.tiroir summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font: 400 26px/1.2 var(--titre); color: var(--encre); cursor: pointer; }
.tiroir summary::-webkit-details-marker { display: none; }
.tiroir summary::after { content: "+"; font: 300 24px/1 var(--corps); color: var(--discret); }
.tiroir details[open] summary::after { content: "−"; }
.tiroir details ul { padding: 0 0 16px; }
.tiroir details a { display: block; padding: 9px 0; color: var(--texte); font-size: 16px; }
.tiroir > a:not(.bouton) { display: block; padding: 18px 0; border-bottom: 1px solid var(--filet); font: 400 26px/1.2 var(--titre); color: var(--encre); }
.tiroir .bouton { margin-top: 28px; width: 100%; justify-content: center; }

/* ------------------------------ Sections -------------------------- */

.section { padding: 120px 0; border-top: 1px solid var(--filet); }
.section--claire { background: var(--fond-2); }
.entete { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; margin-bottom: 64px; }
.entete .etiquette { grid-column: 1 / span 3; padding-top: 12px; }
.entete__texte { grid-column: 4 / span 8; display: grid; gap: 20px; }

/* ------------------------------ Héros ----------------------------- */

.heros { padding: 96px 0 0; overflow: hidden; }
.heros__grille { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; align-items: end; }
.heros__texte { grid-column: 1 / span 6; display: grid; gap: 28px; padding-bottom: 72px; }
.heros__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.heros__vue { grid-column: 7 / span 6; position: relative; margin-right: calc(-1 * var(--gouttiere)); }

/* Capture produit dans un cadre fin, légendée en mono */
.ecran { border: 1px solid var(--filet-fort); border-radius: 10px 10px 0 0; border-bottom: 0; background: var(--fond-3); padding: 10px 10px 0; }
.ecran__barre { display: flex; gap: 6px; padding: 2px 4px 10px; }
.ecran__barre i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.14); }
.ecran img { border-radius: 4px 4px 0 0; width: 100%; }
.legende { margin-top: 14px; display: flex; justify-content: space-between; gap: 16px; }

.lieux { border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.lieux__liste { display: flex; flex-wrap: wrap; }
.lieux__liste li { flex: 1 1 0; padding: 16px 20px; border-left: 1px solid var(--filet); min-width: 220px; }
.lieux__liste li:first-child { border-left: 0; padding-left: 0; }
.lieux__liste strong { display: block; color: var(--encre); font-weight: 500; font-size: 14px; }

/* ------------------------------ Logos ----------------------------- */

.logos { padding: 56px 0; }
.logos__grille { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px 48px; margin-top: 24px; }
.logos__grille img { height: 34px; width: auto; filter: brightness(0) invert(1); opacity: .62; }

/* ----------------------------- Chiffres --------------------------- */

.chiffres { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.chiffres > div { padding: 32px 24px 28px; border-left: 1px solid var(--filet); }
.chiffres > div:first-child { border-left: 0; padding-left: 0; }
.chiffres strong { display: block; font: 400 52px/1 var(--titre); color: var(--encre); letter-spacing: -0.02em; white-space: nowrap; }
.chiffres sup { font: 400 12px var(--mono); color: var(--accent); vertical-align: top; margin-left: 4px; }
.chiffres p { margin-top: 12px; font-size: 14.5px; line-height: 1.45; }
.notes { margin-top: 16px; display: grid; gap: 4px; font: 400 11.5px/1.5 var(--mono); color: var(--discret); }

/* ----------------------------- Secteurs --------------------------- */

.secteurs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.secteur { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--filet); border-radius: 10px; overflow: hidden; background: var(--fond-2); transition: border-color .2s; }
.secteur:hover { border-color: var(--filet-fort); }
.secteur__photo { aspect-ratio: 16 / 9; overflow: hidden; background: var(--fond-3); }
.secteur__photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
.secteur__corps { padding: 28px 28px 24px; display: grid; gap: 16px; align-content: start; }
.secteur__outils { display: flex; flex-wrap: wrap; gap: 8px; }
.secteur__outils li { font: 400 12px/1 var(--mono); padding: 7px 10px; border: 1px solid var(--filet); border-radius: 4px; color: var(--texte); }
.secteur__pied { display: flex; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid var(--filet); margin-top: 8px; font-size: 14px; }
.secteur__pied .lien-fleche { white-space: nowrap; }

/* Emplacement de photo à produire : visible en recette, à remplacer. */
.a-produire { display: grid; place-items: center; height: 100%; border: 1px dashed var(--filet-fort); color: var(--discret); text-align: center; padding: 20px; }

/* --------------------------- Lignes de specs ---------------------- */

.specs > li { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; padding: 32px 0; border-top: 1px solid var(--filet); }
.specs > li:last-child { border-bottom: 1px solid var(--filet); }
.specs__gauche { grid-column: 1 / span 4; display: grid; gap: 10px; align-content: start; }
.specs__droite { grid-column: 5 / span 8; }
.specs__gauche p { font-size: 15px; line-height: 1.5; max-width: 26em; }
.liens-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.liens-2col a { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--filet); color: var(--encre); font-size: 16px; }
.liens-2col a::after { content: "→"; color: var(--discret); transition: color .15s, transform .15s; }
.liens-2col a:hover::after { color: var(--accent); transform: translateX(3px); }
.specs__droite > p { font-size: 17px; line-height: 1.6; color: var(--texte); max-width: 40em; }

/* ------------------------------- Cas ------------------------------ */

.cas { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; padding: 48px 0; border-top: 1px solid var(--filet); }
.cas:last-of-type { border-bottom: 1px solid var(--filet); }
.cas__visuel { grid-column: 1 / span 7; position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--fond-3); }
.cas__visuel > img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.8); }
.cas__visuel--plein > img { filter: none; }
.cas__visuel .cas__ecran { position: absolute; right: 6%; bottom: 0; width: 64%; border-radius: 6px 6px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.5); }
.cas__visuel .cas__ecran--mobile { width: 24%; right: 8%; border-radius: 10px 10px 0 0; }
.cas__texte { grid-column: 8 / span 5; display: grid; gap: 20px; align-content: start; }
.cas__chiffre strong { display: block; font: 400 64px/1 var(--titre); color: var(--encre); letter-spacing: -0.03em; }
.cas__chiffre span { display: block; margin-top: 8px; font-size: 15px; }
.cas blockquote { font: 400 20px/1.45 var(--titre); color: var(--encre); padding-left: 18px; border-left: 2px solid var(--accent-plein); }
.cas cite { font-style: normal; font-size: 14px; color: var(--discret); }
.cas cite strong { color: var(--texte); font-weight: 500; }
.cas__pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 18px; border-top: 1px solid var(--filet); }

.cas-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 32px; }
.cas-mini a { display: grid; gap: 12px; padding: 28px; border: 1px solid var(--filet); border-radius: 10px; transition: border-color .2s; }
.cas-mini a:hover { border-color: var(--filet-fort); }
.cas-mini strong { font: 400 40px/1 var(--titre); color: var(--encre); }

/* ------------------------------ Méthode --------------------------- */

.etapes { display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 48px; gap: 0; counter-reset: etape; }
.etapes li { padding: 24px 24px 0 0; border-top: 1px solid var(--filet-fort); position: relative; display: grid; gap: 12px; align-content: start; }
.etapes li::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; }
.etapes h3 { font: 400 22px/1.2 var(--titre); color: var(--encre); }
.etapes p { font-size: 15px; line-height: 1.5; }

/* ---------------------------- Intégrations ------------------------ */

.integrations { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--filet); border-left: 1px solid var(--filet); }
.integrations li { padding: 22px 18px; border-right: 1px solid var(--filet); border-bottom: 1px solid var(--filet); display: grid; gap: 4px; }
.integrations strong { color: var(--encre); font-weight: 500; font-size: 15px; }
.integrations span { font: 400 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--discret); }

/* ---------------------------- Témoignages ------------------------- */

.temoins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.temoin { display: grid; gap: 24px; align-content: space-between; padding: 28px 0 0; border-top: 1px solid var(--filet); }
.temoin blockquote { font: 400 19px/1.45 var(--titre); color: var(--encre); }
.temoin cite { font-style: normal; font-size: 14px; color: var(--discret); display: block; }
.temoin cite strong { display: block; color: var(--texte); font-weight: 500; }

/* ----------------------------- Fondateur -------------------------- */

.fondateur { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; align-items: center; }
.fondateur__photo { grid-column: 1 / span 4; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--fond-3); }
.fondateur__photo img { width: 100%; height: 100%; object-fit: cover; }
.fondateur__texte { grid-column: 6 / span 7; display: grid; gap: 24px; }

/* ------------------------------ Appel ----------------------------- */

.appel { padding: 140px 0; border-top: 1px solid var(--filet); text-align: center; }
.appel .cadre { display: grid; gap: 24px; justify-items: center; }
.appel .chapo { text-align: center; }

/* ------------------------------- Pied ----------------------------- */

.pied { border-top: 1px solid var(--filet); padding: 72px 0 32px; font-size: 14px; }
.pied__grille { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 32px; }
.pied__marque { display: grid; gap: 16px; align-content: start; }
.pied__marque p { max-width: 22em; }
.pied h2 { font: 400 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--discret); margin-bottom: 14px; }
.pied li a { display: block; padding: 5px 0; color: var(--texte); }
.pied li a:hover { color: var(--encre); }
.pied__bas { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--filet); display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--discret); font-size: 13px; }
.pied__bas span:first-child { margin-right: auto; }
.pied__bas a:hover { color: var(--encre); }

/* ----------------------------- Apparition ------------------------- */
/* Contenu visible sans JS. Le fondu n'existe que si main.js a posé .js. */

.js .apparait { opacity: 0; transform: translateY(12px); transition: opacity .7s ease, transform .7s ease; }
.js .apparait.vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .apparait { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------ Réactif --------------------------- */

@media (max-width: 1100px) {
  .nav, .barre__actions .bouton--borde { display: none; }
  .burger { display: inline-flex; }
  .barre__actions { margin-left: auto; }
  .integrations { grid-template-columns: repeat(3, 1fr); }
  .etapes { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .pied__grille { grid-template-columns: 1fr 1fr; }
  .pied__marque { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  :root { --gouttiere: 20px; }
  .section { padding: 80px 0; }
  .heros { padding-top: 56px; }
  .heros__texte, .heros__vue { grid-column: 1 / -1; }
  .heros__texte { padding-bottom: 40px; }
  .heros__vue { margin-right: 0; }
  .entete { display: grid; gap: 16px; margin-bottom: 40px; }
  .entete .etiquette, .entete__texte { grid-column: 1 / -1; padding: 0; }
  .chiffres { grid-template-columns: 1fr 1fr; }
  .chiffres > div { padding: 24px 16px; }
  .chiffres > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .chiffres > div:nth-child(n+3) { border-top: 1px solid var(--filet); }
  .chiffres strong { font-size: 34px; }
  .secteurs, .cas-mini, .temoins { grid-template-columns: 1fr; }
  .specs > li { display: grid; grid-template-columns: 1fr; gap: 16px; }
  .specs__gauche, .specs__droite { grid-column: 1 / -1; }
  .liens-2col { grid-template-columns: 1fr; }
  .cas { grid-template-columns: 1fr; }
  .cas__visuel, .cas__texte { grid-column: 1 / -1; }
  .cas__chiffre strong { font-size: 48px; }
  .fondateur { grid-template-columns: 1fr; }
  .fondateur__photo, .fondateur__texte { grid-column: 1 / -1; }
  .fondateur__photo { max-width: 320px; }
  .lieux__liste li { flex-basis: 50%; min-width: 0; padding: 14px 12px; }
  .lieux__liste li:nth-child(odd) { border-left: 0; padding-left: 0; }
  .logos__grille { justify-content: flex-start; gap: 24px 36px; }
  .logos__grille img { height: 26px; }
  .appel { padding: 96px 0; }
}

@media (max-width: 560px) {
  .etapes { grid-template-columns: 1fr; }
  .integrations { grid-template-columns: 1fr 1fr; }
  .barre__actions .bouton--plein { display: none; }
  .chapo { font-size: 17px; }
}

/* ---------------------------- Pages secteur ----------------------- */

.heros--secteur { padding-bottom: 96px; }
.heros--secteur .heros__grille { align-items: center; }
.heros--secteur .heros__texte { padding-bottom: 0; }
.heros__photo { grid-column: 7 / span 6; display: grid; gap: 12px; }
.heros__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }

.paroles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 32px; }
.parole { display: grid; gap: 14px; align-content: start; padding: 32px 0; border-top: 1px solid var(--filet); }
.parole blockquote { font: 400 26px/1.35 var(--titre); color: var(--encre); letter-spacing: -0.01em; }
.chiffre-audit { margin-top: 48px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px 32px; align-items: baseline; padding: 32px 0; border-top: 1px solid var(--filet-fort); border-bottom: 1px solid var(--filet-fort); }
.chiffre-audit strong { grid-column: 1 / span 4; font: 400 64px/1 var(--titre); color: var(--encre); letter-spacing: -0.03em; }
.chiffre-audit p { grid-column: 5 / span 8; font-size: 19px; color: var(--encre); }
.chiffre-audit p.etiquette { font-size: 12px; color: var(--discret); }

.specs .titre-3 { margin-top: 2px; }
.specs__lien { margin-top: 14px; font-size: 14.5px; }

.ecrans { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 56px; }
.ecran--plein { border-radius: 10px; border-bottom: 1px solid var(--filet-fort); padding: 10px; }
.ecran--plein img { border-radius: 4px; }
.photo-large { margin-top: 56px; display: grid; gap: 12px; }
.photo-large img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 10px; }

.faq { border-bottom: 1px solid var(--filet); }
.faq details { border-top: 1px solid var(--filet); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 24px 0; font: 400 22px/1.3 var(--titre); color: var(--encre); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 300 24px/1 var(--corps); color: var(--discret); flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 0 28px; max-width: 44em; font-size: 17px; }
.faq__suite { margin-top: 32px; }

.autres { border-top: 1px solid var(--filet); padding: 40px 0; }
.autres .cadre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px 40px; }
.autres ul { display: flex; flex-wrap: wrap; gap: 8px 40px; }
.autres a { font: 400 26px/1.2 var(--titre); color: var(--encre); }
.autres a:hover { color: var(--accent); }
.autres a::after { content: " →"; color: var(--discret); font-family: var(--corps); font-size: 20px; }

[aria-current="page"] { color: var(--encre) !important; text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 860px) {
  .heros--secteur { padding-bottom: 64px; }
  .heros__photo { grid-column: 1 / -1; margin-top: 8px; }
  .paroles, .ecrans { grid-template-columns: 1fr; }
  .parole blockquote { font-size: 22px; }
  .chiffre-audit { grid-template-columns: 1fr; }
  .chiffre-audit strong, .chiffre-audit p { grid-column: 1 / -1; }
  .chiffre-audit strong { font-size: 48px; }
  .faq summary { font-size: 19px; }
  .autres a { font-size: 22px; }
  .photo-large img { aspect-ratio: 4 / 3; }
}

/* ------------------------ Consentement cookies --------------------- */
/* Bandeau posé par assets/consentement.js. Discret, en bas à gauche, ne couvre pas le héros sur mobile. */
.consentement {
  position: fixed; left: 24px; bottom: 24px; z-index: 60; width: 360px;
  padding: 18px; border-radius: 10px;
  background: var(--fond-3); border: 1px solid var(--filet-fort);
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
  font-size: 13.5px; line-height: 1.5;
}
.consentement__texte { margin: 0; color: var(--texte); }
.consentement__texte a { color: var(--encre); text-decoration: underline; text-underline-offset: 3px; }
.consentement__choix { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.consentement__bouton { height: 38px; border-radius: 6px; font-weight: 500; font-size: 14px; border: 1px solid var(--filet-fort); color: var(--encre); }
.consentement__bouton[data-choix="accepte"] { background: var(--accent-plein); border-color: var(--accent-plein); color: #0a0a0a; }
.consentement__bouton:hover { border-color: var(--encre); }
@media (max-width: 560px) {
  .consentement { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 14px; }
}
[hidden] { display: none !important; }

/* ------------------- Héros variante B (portable) ------------------- */
.heros--visuel { position: relative; padding: 0; min-height: min(760px, 56vw); display: grid; grid-template-rows: 1fr auto; overflow: hidden; }
.heros__fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; z-index: 0; }
.heros--visuel::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.6) 38%, rgba(10,10,10,0) 62%); }
.heros--visuel .cadre, .heros--visuel .lieux { position: relative; z-index: 2; }
.heros--visuel .heros__grille { align-items: center; min-height: inherit; }
.heros--visuel .heros__texte { grid-column: 1 / span 6; padding: 96px 0; }
.heros--visuel .lieux { background: rgba(10,10,10,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.heros--visuel .titre-1 em { font-style: italic; color: var(--encre); }
.bouton__fleche { width: 16px; height: 16px; transition: transform .2s; }
.bouton:hover .bouton__fleche { transform: translateX(3px); }
.reassurance { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 12px; font-size: 14px; color: var(--texte); }
.reassurance li { display: flex; align-items: center; gap: 9px; }
.reassurance svg { width: 18px; height: 18px; color: var(--encre); flex: none; }
@media (max-width: 860px) {
  .heros--visuel { min-height: 0; display: block; }
  .heros__fond { position: relative; height: auto; aspect-ratio: 16 / 10; object-position: center; margin-top: 24px; }
  .heros--visuel::before { display: none; }
  .heros--visuel .heros__texte { padding: 56px 0 8px; grid-column: 1 / -1; }
  .heros--visuel { display: flex; flex-direction: column; }
  .heros--visuel .cadre { order: 1; } .heros__fond { order: 2; } .heros--visuel .lieux { order: 3; }
}
.heros__fond-cadre { display: contents; }

/* ---------------------------- Pages solution ---------------------- */
.chiffre-audit--parole { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 0; }
.chiffre-audit--parole blockquote { font: 400 clamp(24px, 2.6vw, 34px)/1.3 var(--titre); color: var(--encre); max-width: 32em; }
.ecran-solution { margin-top: 56px; display: grid; gap: 12px; }
.liens-secteurs { display: flex; flex-wrap: wrap; gap: 12px; }
.liens-secteurs a { display: inline-flex; padding: 14px 20px; border: 1px solid var(--filet-fort); border-radius: 8px; font: 400 22px/1.2 var(--titre); color: var(--encre); transition: border-color .2s; }
.liens-secteurs a:hover { border-color: var(--encre); }
.liens-secteurs a::after { content: "→"; margin-left: 10px; color: var(--discret); font-family: var(--corps); }
.cas-mini__texte { font-size: 15.5px; line-height: 1.55; }
.heros--index { padding-bottom: 72px; }
.heros--index .cadre { display: grid; gap: 24px; }
.tuiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
.tuile { display: grid; gap: 14px; align-content: start; }
.tuile img { aspect-ratio: 3 / 2; width: 100%; object-fit: cover; border-radius: 8px; filter: saturate(.9); transition: filter .3s; }
.tuile:hover img { filter: saturate(1); }
.tuile__corps { display: grid; gap: 6px; }
.tuile strong { font: 400 22px/1.25 var(--titre); color: var(--encre); }
.tuile:hover strong { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.tuile__corps > span { font-size: 14.5px; line-height: 1.5; }
.etiquette a:hover { color: var(--encre); }
@media (max-width: 1000px) { .tuiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tuiles { grid-template-columns: 1fr; } }

/* ----------------------------- Pages fixes ------------------------ */
.integrations--prod em { font-style: normal; font-size: 13px; color: var(--texte); }
.section--agenda { padding-top: 0; border-top: 0; }
.agenda { width: 100%; height: 760px; border: 1px solid var(--filet); border-radius: 10px; background: var(--fond-2); }
.lieux__liste--seul { border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.heros--index .chapo a { color: var(--encre); }
.chiffre-audit--parole > * { grid-column: 1 / -1 !important; }

/* ------------- Héros : le logiciel se construit dans l'écran ------------- */
/* La scène (photo + interface) est placée par assets/heros.js. */
.scene-cadre { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.scene { position: absolute; }
.scene > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ecran-anime {
  position: absolute; left: 0; top: 0; width: 1280px; height: 800px;
  transform-origin: 0 0;
  display: grid; grid-template-columns: 96px 1fr;
  background: #0d0d0e; color: #eaeaea; font-family: var(--corps);
  border-radius: 6px; overflow: hidden;
  opacity: 0; transition: opacity 1.2s ease;
}
.construit .ecran-anime { opacity: .96; }
.ea-cote { border-right: 1px solid rgba(255,255,255,.07); display: flex; flex-direction: column; align-items: center; gap: 26px; padding-top: 38px; }
.ea-logo { width: 34px; height: 38px; color: #fff; margin-bottom: 18px; }
.ea-nav { width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,.06); }
.ea-nav--actif { background: rgba(255,255,255,.16); }
.ea-corps { padding: 46px 52px; display: grid; grid-template-rows: auto auto 1fr; gap: 34px; }
.ea-titre { display: block; font: 400 46px/1 var(--titre); letter-spacing: -0.03em; }
.ea-sous { display: block; margin-top: 12px; font-size: 20px; color: #8c8c8c; }
.ea-cartes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ea-carte { padding: 24px; border-radius: 14px; background: #161617; border: 1px solid rgba(255,255,255,.07); display: grid; gap: 14px; }
.ea-carte span { font-size: 18px; color: #9a9a9a; }
.ea-carte b { font: 400 44px/1 var(--titre); color: #fff; letter-spacing: -0.02em; }
.ea-bas { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; }
.ea-bloc { padding: 26px; border-radius: 14px; background: #161617; border: 1px solid rgba(255,255,255,.07); display: grid; align-content: start; gap: 18px; }
.ea-etiq { font: 400 15px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #7d7d7d; }
.ea-courbe svg { width: 100%; height: 230px; }
.ea-ligne { fill: none; stroke: #f1f1f1; stroke-width: 3; stroke-dasharray: 600; stroke-dashoffset: 600; }
.ea-aire { fill: rgba(255,255,255,.06); opacity: 0; }
.ea-ligne-l { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 16px; height: 44px; border-bottom: 1px solid rgba(255,255,255,.06); }
.ea-ligne-l i { width: 18px; height: 18px; border-radius: 5px; border: 2px solid #5a5a5a; }
.ea-ligne-l span { height: 10px; border-radius: 6px; background: linear-gradient(90deg, #dcdcdc var(--p), rgba(255,255,255,.08) var(--p)); transform-origin: left; transform: scaleX(0); }

/* Séquence de construction : chaque élément apparaît à son tour, puis tout reste en place. */
.ea-cote, .ea-tete, .ea-carte, .ea-bloc { opacity: 0; transform: translateY(14px); }
.construit .ea-cote { animation: eaEntre .8s ease .3s both; }
.construit .ea-tete { animation: eaEntre .8s ease .7s both; }
.construit .ea-carte:nth-child(1) { animation: eaEntre .7s ease 1.1s both; }
.construit .ea-carte:nth-child(2) { animation: eaEntre .7s ease 1.3s both; }
.construit .ea-carte:nth-child(3) { animation: eaEntre .7s ease 1.5s both; }
.construit .ea-carte:nth-child(4) { animation: eaEntre .7s ease 1.7s both; }
.construit .ea-bloc:nth-child(1) { animation: eaEntre .8s ease 2.1s both; }
.construit .ea-bloc:nth-child(2) { animation: eaEntre .8s ease 2.3s both; }
.construit .ea-ligne { animation: eaTrace 2.2s cubic-bezier(.5,0,.2,1) 2.6s both; }
.construit .ea-aire { animation: eaApparait 1.2s ease 3.8s both; }
.construit .ea-ligne-l:nth-of-type(1) span { animation: eaBarre 1s ease 2.8s both; }
.construit .ea-ligne-l:nth-of-type(2) span { animation: eaBarre 1s ease 3.0s both; }
.construit .ea-ligne-l:nth-of-type(3) span { animation: eaBarre 1s ease 3.2s both; }
.construit .ea-ligne-l:nth-of-type(4) span { animation: eaBarre 1s ease 3.4s both; }
@keyframes eaEntre { to { opacity: 1; transform: none; } }
@keyframes eaTrace { to { stroke-dashoffset: 0; } }
@keyframes eaApparait { to { opacity: 1; } }
@keyframes eaBarre { to { transform: scaleX(1); } }
.sans-animation .ea-cote, .sans-animation .ea-tete, .sans-animation .ea-carte, .sans-animation .ea-bloc, .sans-animation .ea-aire { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
.sans-animation .ea-ligne { stroke-dashoffset: 0; animation: none !important; }
.sans-animation .ea-ligne-l span { transform: none; animation: none !important; }
.sans-animation .ecran-anime { opacity: .96; transition: none; }

@media (max-width: 860px) {
  .heros--visuel .scene-cadre { position: relative; inset: auto; order: 2; aspect-ratio: 4 / 3; margin-top: 24px; }
}

/* Bande de logos : grille régulière, chaque logo tient dans la même boîte. */
.logos__grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 40px 36px; align-items: center; justify-items: center; }
.logos__grille img { height: auto; max-height: 34px; max-width: 120px; width: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: .6; }
@media (max-width: 1000px) { .logos__grille { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 620px) { .logos__grille { grid-template-columns: repeat(3, 1fr); gap: 28px 24px; } .logos__grille img { max-height: 26px; max-width: 96px; } }
/* Bande : les logos sont déjà blancs et recadrés ; leur taille vient de width/height (taille optique). */
.logos__grille img { max-height: none; max-width: 100%; filter: none; opacity: .62; }
@media (max-width: 620px) { .logos__grille img { transform: scale(.8); } }

/* Tiroirs : le « + » pivote en croix, le texte apparaît en fondu. */
.faq summary::after, .tiroir summary::after { content: "+" !important; display: inline-block; transition: transform .32s cubic-bezier(.4,0,.2,1), color .2s; }
.faq details.ouvert summary::after, .tiroir details.ouvert summary::after,
.faq details[open]:not(.ouvert) summary::after { transform: rotate(45deg); color: var(--encre); }
.faq details p { opacity: 0; transform: translateY(-4px); transition: opacity .3s ease .08s, transform .3s ease .08s; }
.faq details.ouvert p, .faq details[open] p { opacity: 1; transform: none; }
.faq details:not(.ouvert) p { opacity: 0; }
html:not(.js) .faq details[open] p { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .faq details p { transition: none; opacity: 1 !important; transform: none; } .faq summary::after, .tiroir summary::after { transition: none; } }

/* Méga-menu Secteurs : vignette de l'illustration du secteur à gauche. */
.mega__secteurs a { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; }
.mega__secteurs img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--filet); filter: saturate(.85); transition: filter .2s, border-color .2s; }
.mega__secteurs a:hover img { filter: saturate(1.05) brightness(1.08); border-color: var(--filet-fort); }
.mega__secteur-texte { display: grid; gap: 4px; }
.mega__secteurs a[aria-current="page"] { text-decoration: none; }
.mega__secteurs a[aria-current="page"] strong { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.mega__col--secteurs { grid-column: span 9; }
.mega__col--secteurs .mega__secteurs { grid-template-columns: 1fr 1fr; gap: 8px 40px; }
.mega { background: #111111; }

/* Le flou de la barre vit sur un calque à part : appliqué à la barre elle-même,
   Chrome le propage au méga-menu, qui laisse alors voir la page en transparence. */
.barre { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.barre::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(10, 10, 10, .88); -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px); }
.barre__interieur { position: relative; }

/* ---------- Héros v2 de l'interface animée : plus de données, sans saturer ---------- */
.ecran-anime { grid-template-columns: 84px 1fr; }
.ea-cote { gap: 22px; padding-top: 30px; }
.ea-corps { padding: 30px 36px 30px; display: grid; grid-template-rows: auto auto 1fr auto; gap: 18px; }
.ea-tete { display: flex; justify-content: space-between; align-items: flex-end; }
.ea-titre { font-size: 36px; }
.ea-sous { margin-top: 8px; font-size: 16px; }
.ea-periode { display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: #161617; border: 1px solid rgba(255,255,255,.07); font-size: 15px; color: #8a8a8a; }
.ea-periode span { padding: 6px 14px; border-radius: 7px; }
.ea-periode .ea-on { background: rgba(255,255,255,.12); color: #fff; }
.ea-cartes { gap: 14px; }
.ea-carte { padding: 16px 18px 12px; gap: 6px; border-radius: 12px; }
.ea-k { font-size: 15px; color: #8f8f8f; }
.ea-kv { display: flex; align-items: baseline; gap: 10px; }
.ea-kv b { font: 400 34px/1 var(--titre); color: #fff; letter-spacing: -0.02em; }
.ea-kv em { font-style: normal; font-size: 14px; color: #bdbdbd; padding: 2px 7px; border-radius: 6px; background: rgba(255,255,255,.07); }
.ea-spark { width: 100%; height: 30px; }
.ea-spark path { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 2; stroke-dasharray: 260; stroke-dashoffset: 260; }
.ea-milieu { display: grid; grid-template-columns: 1.75fr 1fr; gap: 14px; min-height: 0; }
.ea-bas { display: grid; grid-template-columns: 1.75fr 1fr; gap: 14px; }
.ea-bloc { padding: 16px 18px; gap: 10px; border-radius: 12px; }
.ea-bt { display: flex; justify-content: space-between; align-items: center; }
.ea-leg { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #8a8a8a; }
.ea-leg i { width: 10px; height: 10px; border-radius: 2px; background: rgba(255,255,255,.28); margin-left: 8px; }
.ea-leg .ea-leg-l { height: 2px; width: 14px; background: #fff; }
.ea-graphe { width: 100%; height: 220px; display: block; }
.ea-grille { stroke: rgba(255,255,255,.06); stroke-width: 1; }
.ea-axe { fill: #6f6f6f; font: 400 12px var(--mono); }
.ea-barre { fill: rgba(255,255,255,.2); transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); }
.ea-courbe-l { fill: none; stroke: #fff; stroke-width: 2.5; stroke-dasharray: 900; stroke-dashoffset: 900; }
.ea-point { fill: #0d0d0e; stroke: #fff; stroke-width: 2; opacity: 0; }
.ea-anneau-bloc { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 16px; }
.ea-anneau { width: 150px; height: 150px; }
.ea-seg { stroke-dasharray: 0 999; }
.ea-anneau-v { fill: #fff; font: 400 30px var(--titre); }
.ea-legende { display: grid; gap: 10px; font-size: 14px; color: #a5a5a5; }
.ea-legende li { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 10px; opacity: 0; }
.ea-legende i { width: 10px; height: 10px; border-radius: 3px; }
.ea-legende b { font-weight: 500; color: #e5e5e5; }
.ea-table { display: grid; font-size: 14px; }
.ea-tr { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr .8fr; align-items: center; gap: 12px; height: 40px; border-bottom: 1px solid rgba(255,255,255,.05); color: #d6d6d6; opacity: 0; }
.ea-th { color: #6f6f6f; font: 400 12px var(--mono); text-transform: uppercase; letter-spacing: .06em; height: 28px; opacity: 1; }
.ea-tr span:first-child { display: flex; align-items: center; gap: 10px; }
.ea-av { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.1); font: 500 10px var(--corps); font-style: normal; color: #ddd; }
.ea-pill { font-style: normal; font-size: 12px; padding: 3px 9px; border-radius: 20px; background: rgba(255,255,255,.08); color: #cfcfcf; }
.ea-prog { display: block; height: 6px; border-radius: 4px; background: linear-gradient(90deg, #dcdcdc var(--p), rgba(255,255,255,.08) var(--p)); }
.ea-tr span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.ea-chaleur { display: grid; grid-template-columns: 18px repeat(10, 1fr); gap: 5px; align-items: center; }
.ea-chaleur i { aspect-ratio: 1; border-radius: 3px; background: rgba(255,255,255,var(--v)); opacity: 0; }

/* Séquence */
.ea-bloc { opacity: 0; transform: translateY(12px); }
.construit .ea-cartes .ea-carte { animation: eaEntre .7s ease calc(1.0s + var(--i) * .15s) both; }
.construit .ea-spark path { animation: eaTrace 1.2s ease calc(1.5s + var(--i) * .15s) both; }
.construit .ea-bloc.ea-b1 { animation: eaEntre .8s ease 1.8s both; }
.construit .ea-bloc.ea-b2 { animation: eaEntre .8s ease 2.0s both; }
.construit .ea-bloc.ea-b3 { animation: eaEntre .8s ease 2.2s both; }
.construit .ea-bloc.ea-b4 { animation: eaEntre .8s ease 2.4s both; }
.construit .ea-barre { animation: eaMonte .7s cubic-bezier(.3,0,.2,1) calc(2.3s + var(--i) * .06s) both; }
.construit .ea-courbe-l { animation: eaTrace 1.8s cubic-bezier(.5,0,.2,1) 3.0s both; }
.construit .ea-point { animation: eaApparait .3s ease calc(3.1s + var(--i) * .13s) both; }
.construit .ea-seg { animation: eaSeg 1s cubic-bezier(.4,0,.2,1) calc(2.6s + var(--i) * .25s) both; }
.construit .ea-legende li { animation: eaApparait .5s ease 3.2s both; }
.construit .ea-tr:not(.ea-th) { animation: eaEntre .5s ease calc(2.8s + var(--i) * .14s) both; }
.construit .ea-chaleur i { animation: eaApparait .4s ease calc(3.0s + var(--i) * .02s) both; }
@keyframes eaMonte { to { transform: scaleY(1); } }
@keyframes eaSeg { from { stroke-dasharray: 0 999; } to { stroke-dasharray: var(--l) var(--c); } }
.sans-animation .ea-bloc, .sans-animation .ea-tr, .sans-animation .ea-legende li, .sans-animation .ea-point, .sans-animation .ea-chaleur i { opacity: 1 !important; transform: none !important; animation: none !important; }
.sans-animation .ea-barre { transform: none !important; animation: none !important; }
.sans-animation .ea-courbe-l, .sans-animation .ea-spark path { stroke-dashoffset: 0 !important; animation: none !important; }
.sans-animation .ea-seg { stroke-dasharray: var(--l) var(--c) !important; animation: none !important; }

/* Accueil : logos puis chiffres, en deux temps bien séparés. */
.logos { padding: 72px 0 40px; }
.logos + section { padding: 40px 0 112px; }
.notes--sources { margin-top: 14px; display: block; }
.notes--sources summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; color: var(--discret); }
.notes--sources summary::-webkit-details-marker { display: none; }
.notes--sources summary::after { content: "+"; font: 300 14px/1 var(--corps); transition: transform .2s; }
.notes--sources[open] summary::after { transform: rotate(45deg); }
.notes--sources summary:hover { color: var(--encre); }
.notes--sources p { margin-top: 6px; }
@media (max-width: 860px) { .logos + section { padding-bottom: 80px; } }
.heros--visuel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(10,10,10,0), var(--fond)); }
.logos { padding-bottom: 64px; }
.logos + section { padding-top: 56px; }
@media (max-width: 860px) { .heros--visuel::after { display: none; } }

/* Pages solution : galerie des vraies captures. Web sur deux colonnes, mobile sur une. */
.galerie-tete { margin-top: 64px; margin-bottom: 20px; }
.galerie { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px 28px; align-items: end; }
.galerie__item { display: grid; gap: 14px; margin: 0; }
.galerie__item--web { grid-column: span 2; }
.galerie__item--mobile { grid-column: span 1; }
.galerie__cadre { border: 1px solid var(--filet-fort); background: var(--fond-3); overflow: hidden; }
.galerie__item--web .galerie__cadre { border-radius: 10px; padding: 8px; }
.galerie__item--web img { width: 100%; border-radius: 5px; display: block; }
.galerie__item--mobile .galerie__cadre { border-radius: 26px; padding: 7px; max-width: 260px; margin: 0 auto; width: 100%; }
.galerie__item--mobile img { width: 100%; border-radius: 20px; display: block; max-height: 520px; object-fit: cover; object-position: top; }
.galerie figcaption { display: grid; gap: 4px; }
.galerie figcaption strong { font: 400 18px/1.3 var(--titre); color: var(--encre); }
.galerie__item--mobile figcaption { text-align: center; }
@media (max-width: 1000px) { .galerie { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .galerie { grid-template-columns: 1fr 1fr; gap: 28px 16px; } .galerie__item--web { grid-column: 1 / -1; } }
/* Sans bandeau de chiffres, les logos ouvrent directement sur les secteurs. */
.logos { padding-bottom: 96px; }
.etapes { row-gap: 56px; }

/* -------- Galerie v2 : tuiles uniformes 4:3 sur un fond commun -------- */
:root { --fond-galerie: radial-gradient(120% 90% at 85% 10%, rgba(196,140,70,.22), rgba(196,140,70,0) 45%), linear-gradient(160deg, #17171a, #0c0c0d); }
.galerie { grid-template-columns: 1fr 1fr; gap: 48px 32px; align-items: start; }
.galerie__item--web, .galerie__item--mobile { grid-column: auto; }
.galerie__cadre { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; border: 1px solid var(--filet); background: var(--fond-galerie); background-size: cover; background-position: center; padding: 0 !important; display: grid; place-items: center; overflow: hidden; max-width: none !important; margin: 0 !important; }
.galerie__item--web .galerie__cadre img { width: 84%; height: auto; max-height: 82%; object-fit: contain; border-radius: 6px; box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06); }
.galerie__item--mobile .galerie__cadre img { height: 86%; width: auto; max-height: none; border-radius: 18px; object-fit: cover; object-position: top; box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 6px #111, 0 0 0 7px rgba(255,255,255,.12); }
.galerie__item--mobile figcaption { text-align: left; }
@media (max-width: 700px) { .galerie { grid-template-columns: 1fr; } }
.galerie__item--mobile .galerie__cadre img { position: absolute; top: 7%; left: 50%; transform: translateX(-50%); height: 86% !important; width: auto !important; max-width: none; max-height: none !important; }
/* Méga-menu Solutions : une vignette d'outil en tête de chaque colonne. */
.mega__vignette { display: block; position: relative; margin: 0 0 12px; border-radius: 8px; overflow: hidden; border: 1px solid var(--filet); aspect-ratio: 16 / 9; }
.mega__vignette img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease, filter .3s; filter: saturate(.9); }
.mega__vignette:hover img { transform: scale(1.03); filter: saturate(1.05); }
.mega__vignette span { position: absolute; left: 10px; bottom: 8px; font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.8); }
/* Méga-menu Solutions : même grammaire que Secteurs, une vignette carrée par outil. */
.mega__outils { display: grid; gap: 2px; }
.mega__outil { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 5px 0; color: var(--encre); font-size: 14.5px; line-height: 1.3; }
.mega__outil img { width: 40px; height: 40px; border-radius: 7px; border: 1px solid var(--filet); object-fit: cover; filter: saturate(.85); transition: filter .2s, border-color .2s; }
.mega__outil:hover span { color: var(--encre); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.mega__outil:hover img { filter: saturate(1.05) brightness(1.08); border-color: var(--filet-fort); }
.mega__col .etiquette + .mega__outils { padding-top: 14px; border-top: 1px solid var(--filet); }
:root { --fond-galerie: url(/assets/img/fond-galerie.webp); }
/* Méga-menu Solutions : une vignette par catégorie, comme Secteurs ; les outils en texte. */
.mega__famille { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center; padding-bottom: 14px; margin-bottom: 10px; border-bottom: 1px solid var(--filet); }
.mega__famille img { width: 72px; height: 72px; border-radius: 8px; border: 1px solid var(--filet); object-fit: cover; filter: saturate(.85); }
.mega__famille strong { display: block; font: 400 19px/1.2 var(--titre); color: var(--encre); }
.mega__famille > span > span { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.4; color: var(--discret); }
.mega__liste--solutions a { padding: 6px 0; font-size: 14.5px; }
.mega__famille { min-height: 100px; align-items: start; } .mega__famille img { margin-top: 2px; }
.tiroir__famille { padding: 16px 0 4px; font: 400 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--discret); }

/* ---------------- Scènes des pages solution (portable + écran qui se construit) ---------------- */
.section--scene { padding: 40px 0 0; border-top: 0; }
.scene-cadre--bloc { position: relative; inset: auto; aspect-ratio: 1813 / 868; width: 100%; border-radius: 12px; overflow: hidden; border: 1px solid var(--filet); }
.ea-corps--plein { grid-template-rows: auto auto 1fr; }

/* Planning */
.pl { position: relative; display: grid; align-content: start; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: #141415; overflow: hidden; }
.pl-ligne { display: grid; grid-template-columns: 260px 1fr; align-items: center; height: 62px; border-bottom: 1px solid rgba(255,255,255,.05); opacity: 0; }
.pl-ligne--tete { height: 44px; opacity: 1; color: #6f6f6f; font: 400 13px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.pl-nom { display: flex; align-items: center; gap: 12px; padding-left: 20px; font-size: 16px; color: #dcdcdc; }
.pl-piste { position: relative; height: 100%; border-left: 1px solid rgba(255,255,255,.06); background-image: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(255,255,255,.04) calc(10% - 1px) 10%); }
.pl-semaines { display: grid; grid-template-columns: repeat(10, 1fr); align-items: center; text-align: center; background: none; }
.pl-barre { position: absolute; top: 18px; height: 26px; left: calc(var(--d) * 10% + 6px); width: calc(var(--l) * 10% - 12px); border-radius: 7px; background: rgba(255,255,255,.78); transform-origin: left; transform: scaleX(0); }
.pl-barre--retard { background: repeating-linear-gradient(135deg, rgba(255,255,255,.85) 0 8px, rgba(255,255,255,.55) 8px 16px); }
.pl-aujourdhui { position: absolute; top: 44px; bottom: 0; left: calc(260px + (100% - 260px) * .32); width: 2px; background: #c9a36b; opacity: 0; }
.pl-legende { display: flex; gap: 22px; font-size: 14px; color: #8a8a8a; margin-top: -10px; }
.pl-legende i { display: inline-block; width: 18px; height: 10px; border-radius: 3px; background: rgba(255,255,255,.78); margin-right: 8px; vertical-align: middle; }
.pl-legende i.r { background: repeating-linear-gradient(135deg, rgba(255,255,255,.85) 0 4px, rgba(255,255,255,.45) 4px 8px); }
.construit .pl-ligne { animation: eaApparait .5s ease calc(.6s + var(--i) * .12s) both; }
.construit .pl-barre { animation: eaBarre .9s cubic-bezier(.3,0,.2,1) calc(1.3s + var(--i) * .14s) both; }
.construit .pl-aujourdhui { animation: eaApparait .6s ease 2.6s both; }

/* CRM */
.crm-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.crm-kpis div { padding: 14px 18px; border-radius: 12px; background: #161617; border: 1px solid rgba(255,255,255,.07); display: flex; justify-content: space-between; align-items: baseline; }
.crm-kpis span { font-size: 15px; color: #8f8f8f; }
.crm-kpis b { font: 400 30px/1 var(--titre); color: #fff; }
.crm { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
.crm-col { border-radius: 12px; background: #131314; border: 1px solid rgba(255,255,255,.06); padding: 12px; display: grid; gap: 10px; min-height: 380px; align-content: start; }
.crm-col-t { display: flex; justify-content: space-between; font: 400 13px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: #8a8a8a; padding: 2px 4px 6px; }
.crm-col-t i { font-style: normal; color: #cfcfcf; }
.crm-carte { padding: 14px; border-radius: 10px; background: #1b1b1d; border: 1px solid rgba(255,255,255,.08); display: grid; gap: 6px; opacity: 0; transform: translateY(14px); }
.crm-carte b { font-size: 16px; font-weight: 500; color: #eee; }
.crm-carte span { font-size: 13px; color: #8a8a8a; }
.crm-carte em { font-style: normal; font-size: 15px; color: #dcdcdc; justify-self: end; }
.construit .crm-carte { animation: eaEntre .55s ease calc(.8s + var(--i) * .13s) both; }

/* IA documents */
.ia { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; align-items: start; }
.doc { position: relative; background: #f2f2f0; color: #222; border-radius: 10px; padding: 26px 28px; overflow: hidden; display: grid; gap: 4px; }
.doc-t { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.doc-t b { font: 600 22px var(--corps); letter-spacing: .08em; }
.doc-t span { font-size: 13px; color: #777; }
.doc-l { display: grid; grid-template-columns: 1fr 70px 130px; gap: 10px; padding: 10px 8px; font-size: 15px; border-bottom: 1px solid #ddd; border-radius: 4px; }
.doc-l span:last-child, .doc-l span:nth-child(2) { text-align: right; font-variant-numeric: tabular-nums; }
.doc-l--tete { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: .05em; }
.doc-l--ecart { transition: background-color .5s; }
.construit .doc-l--ecart { animation: iaSurligne .6s ease 3.2s both; }
@keyframes iaSurligne { to { background: rgba(201,163,107,.35); box-shadow: inset 3px 0 0 #b8863c; } }
.doc-total { display: flex; justify-content: space-between; padding: 14px 8px 0; font-size: 16px; }
.doc-scan { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, transparent, #c9a36b, transparent); box-shadow: 0 0 18px rgba(201,163,107,.8); opacity: 0; }
.construit .doc-scan { animation: iaScan 2.2s cubic-bezier(.4,0,.6,1) .9s both; }
@keyframes iaScan { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.ia-panneau { border-radius: 12px; background: #161617; border: 1px solid rgba(255,255,255,.07); padding: 20px; display: grid; gap: 14px; }
.ia-panneau ul { display: grid; gap: 12px; }
.ia-c { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 15px; line-height: 1.4; color: #d4d4d4; opacity: 0; transform: translateY(8px); }
.ia-c i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); position: relative; }
.ia-c--ok i::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ia-c--ecart { color: #f0d9b0; }
.ia-c--ecart i { border-color: #c9a36b; }
.ia-c--ecart i::after { content: "!"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 13px var(--corps); color: #c9a36b; }
.construit .ia-c { animation: eaEntre .45s ease calc(1.6s + var(--i) * .45s) both; }
.ia-actions { display: flex; gap: 10px; margin-top: 6px; opacity: 0; }
.ia-b { padding: 10px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,.2); font-size: 14px; color: #e6e6e6; }
.ia-b--plein { background: #f2f2f2; color: #111; border-color: #f2f2f2; }
.ia-note { font: 400 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #7a7a7a; opacity: 0; }
.construit .ia-actions, .construit .ia-note { animation: eaApparait .6s ease 3.7s both; }
.sans-animation .pl-ligne, .sans-animation .crm-carte, .sans-animation .ia-c, .sans-animation .ia-actions, .sans-animation .ia-note, .sans-animation .pl-aujourdhui { opacity: 1 !important; transform: none !important; animation: none !important; }
.sans-animation .pl-barre { transform: none !important; animation: none !important; }
.sans-animation .doc-l--ecart { background: rgba(201,163,107,.35); animation: none !important; }
@media (max-width: 860px) { .section--scene { padding-top: 24px; } }

/* Page IA : cas d'usage */
.usages { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.usage { display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: center; padding: 16px; border: 1px solid var(--filet); border-radius: 12px; background: var(--fond-2); }
.usage img { width: 200px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; }
.usage__corps { display: grid; gap: 8px; align-content: start; }
.usage h3 { font: 400 21px/1.25 var(--titre); color: var(--encre); }
.usage p { font-size: 14.5px; line-height: 1.55; }
.usage__badge { justify-self: start; font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: 4px; border: 1px solid var(--filet-fort); color: var(--discret); }
.usage__badge--actif { color: var(--fond); background: var(--encre); border-color: var(--encre); }
@media (max-width: 1000px) { .usages { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .usage { grid-template-columns: 1fr; } .usage img { width: 100%; } }
/* Haut des pages solution : le portable recadré à droite, l'écran se construit dedans. */
.heros__photo--scene { align-self: center; }
.scene-cadre--heros { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; }
/* Haut des pages solution : image plus large, interface plus compacte donc plus lisible. */
.heros--secteur .heros__grille:has(.heros__photo--scene) .heros__texte { grid-column: 1 / span 5; }
.heros__photo--scene { grid-column: 6 / span 7; margin-right: calc(-1 * var(--gouttiere)); }
.scene-cadre--heros { aspect-ratio: 16 / 11; border-radius: 10px 0 0 10px; }
.scene-cadre--heros .ecran-anime { width: 960px; height: 600px; }
.scene-cadre--heros .ea-corps { padding: 26px 28px; gap: 16px; }
.scene-cadre--heros .pl-ligne { grid-template-columns: 220px 1fr; height: 52px; }
.scene-cadre--heros .pl-barre { top: 14px; height: 24px; }
.scene-cadre--heros .pl-aujourdhui { left: calc(220px + (100% - 220px) * .32); }
.scene-cadre--heros .crm-col { min-height: 300px; padding: 10px; gap: 8px; }
.scene-cadre--heros .crm-carte { padding: 11px; }
.scene-cadre--heros .doc { padding: 20px 22px; }
@media (max-width: 860px) { .heros__photo--scene { grid-column: 1 / -1; margin-right: 0; } .scene-cadre--heros { border-radius: 10px; } }

/* ---------- Briques communes des écrans des pages solution ---------- */
.g-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.g-kpi { padding: 12px 14px; border-radius: 11px; background: #161617; border: 1px solid rgba(255,255,255,.07); display: grid; gap: 6px; opacity: 0; transform: translateY(10px); }
.g-kpi span { font-size: 13px; color: #8f8f8f; }
.g-kpi b { font: 400 26px/1 var(--titre); color: #fff; }
.g-kpi em { font-style: normal; font-size: 12px; color: #bdbdbd; }
.g-bloc { padding: 14px 16px; gap: 10px; opacity: 0; transform: translateY(12px); }
.g-deux { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; align-items: start; }
.g-deux--devis { grid-template-columns: 1.7fr 1fr; }
.g-table { display: grid; font-size: 14px; }
.g-tr { display: grid; gap: 10px; align-items: center; min-height: 40px; border-bottom: 1px solid rgba(255,255,255,.05); color: #d6d6d6; opacity: 0; }
.g-th { min-height: 26px; opacity: 1; color: #6f6f6f; font: 400 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.g-tr--surligne { background: rgba(201,163,107,.12); box-shadow: inset 3px 0 0 #b8863c; padding-left: 6px; }
.g-nom { display: flex; align-items: center; gap: 9px; }
.g-num { text-align: right; font-variant-numeric: tabular-nums; }
.g-pill { font-style: normal; font-size: 12px; padding: 3px 9px; border-radius: 20px; background: rgba(255,255,255,.08); color: #cfcfcf; white-space: nowrap; }
.g-pill--clair { background: rgba(255,255,255,.18); color: #fff; }
.g-pill--ambre { background: rgba(201,163,107,.22); color: #f0d9b0; }
.g-prog { display: block; height: 6px; border-radius: 4px; background: linear-gradient(90deg, #dcdcdc var(--p), rgba(255,255,255,.08) var(--p)); }
.g-barres { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 14px; align-items: end; padding-top: 8px; }
.g-b { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 6px; }
.g-b i { align-self: end; display: block; border-radius: 4px 4px 0 0; background: rgba(255,255,255,.32); transform-origin: bottom; transform: scaleY(0); }
.g-b:last-child i { background: rgba(255,255,255,.75); }
.g-b span { font: 400 11px var(--mono); color: #6f6f6f; text-align: center; }
.dv-lot { font: 400 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: #8a8a8a; padding: 12px 0 4px; opacity: 0; }
.dv-l { display: grid; grid-template-columns: 1.8fr .7fr .9fr; gap: 10px; font-size: 14px; color: #d6d6d6; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.05); opacity: 0; }
.dv-resume { display: grid; gap: 12px; }
.dv-resume div { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid rgba(255,255,255,.06); padding-bottom: 10px; }
.dv-resume span { font-size: 13px; color: #8f8f8f; }
.dv-resume b { font: 400 24px var(--titre); color: #fff; }
.lc-flux { display: flex; align-items: center; gap: 14px; font: 400 13px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: #cfcfcf; }
.lc-flux span { padding: 10px 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; background: #161617; }
.lc-flux i { flex: 1; height: 2px; background: linear-gradient(90deg, rgba(201,163,107,0), #c9a36b, rgba(201,163,107,0)); background-size: 200% 100%; }
.construit .lc-flux i { animation: lcFlux 2s linear 1s infinite; }
@keyframes lcFlux { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.hr-pr { display: grid; gap: 14px; }
.hr-pr > div { display: grid; gap: 6px; opacity: 0; }
.hr-pr span { font-size: 13px; color: #cfcfcf; }
.hr-p, .hr-r { display: block; height: 8px; border-radius: 4px; width: var(--p); transform-origin: left; transform: scaleX(0); }
.hr-p { background: rgba(255,255,255,.3); }
.hr-r { background: rgba(255,255,255,.85); }
.mg { display: grid; grid-template-columns: 1.2fr 1.4fr .8fr; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.05); opacity: 0; }
.mg b { display: block; font-size: 15px; font-weight: 500; color: #eee; }
.mg span { font-size: 12px; color: #8a8a8a; }
.mg em { font-style: normal; font-size: 13px; color: #cfcfcf; text-align: right; }
.g-prog--anime { background: rgba(255,255,255,.08); position: relative; overflow: hidden; }
.g-prog--anime::after { content: ""; position: absolute; inset: 0; width: var(--p); background: #dcdcdc; border-radius: 4px; transform-origin: left; transform: scaleX(0); }
.mg-c { display: grid; gap: 8px; font-size: 14px; color: #cfcfcf; }
.mg-c li::before { content: "\2713  "; color: #fff; }
.gd { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 14.5px; color: #dcdcdc; opacity: 0; }
.doc--pv .doc-l { grid-template-columns: 1fr 0 1fr; }
.pc-e { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 14.5px; color: #8f8f8f; opacity: 0; }
.pc-e i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); flex: none; }
.pc-e--fait { color: #eee; }
.pc-e--fait i { background: #f2f2f2; border-color: #f2f2f2; }
.construit .g-kpi { animation: eaEntre .6s ease calc(.5s + var(--i) * .12s) both; }
.construit .g-bloc { animation: eaEntre .7s ease 1s both; }
.construit .g-bloc + .g-bloc, .construit .g-deux .g-bloc:nth-child(2) { animation-delay: 1.2s; }
.construit .g-tr:not(.g-th) { animation: eaEntre .45s ease calc(1.4s + var(--i) * .12s) both; }
.construit .g-b i { animation: eaMonte .7s cubic-bezier(.3,0,.2,1) calc(1.4s + var(--i) * .1s) both; }
.construit .dv-lot, .construit .dv-l, .construit .gd, .construit .pc-e, .construit .mg, .construit .hr-pr > div { animation: eaEntre .45s ease calc(1.3s + var(--i) * .11s) both; }
.construit .hr-p, .construit .hr-r { animation: eaBarre .8s ease calc(1.6s + var(--i) * .15s) both; }
.construit .g-prog--anime::after { animation: eaBarre 1.4s cubic-bezier(.3,0,.2,1) calc(1.5s + var(--i) * .25s) both; }
.sans-animation .g-kpi, .sans-animation .g-bloc, .sans-animation .g-tr, .sans-animation .dv-lot, .sans-animation .dv-l, .sans-animation .gd, .sans-animation .pc-e, .sans-animation .mg, .sans-animation .hr-pr > div { opacity: 1 !important; transform: none !important; animation: none !important; }
.sans-animation .g-b i, .sans-animation .hr-p, .sans-animation .hr-r, .sans-animation .g-prog--anime::after { transform: none !important; animation: none !important; }

/* ---------- Écrans de téléphone (smartphone sur socle) ---------- */
.ecran-anime--mobile { width: 390px !important; height: 750px !important; display: block; border-radius: 34px; background: #0d0d0e; }
.scene-cadre--mobile { aspect-ratio: 16 / 11; }
.m-corps { padding: 14px 18px 20px; display: grid; gap: 12px; align-content: start; height: 100%; }
.m-statut { display: flex; justify-content: space-between; font-size: 12px; color: #9a9a9a; padding: 4px 8px 0; }
.m-tete { display: grid; gap: 4px; padding: 6px 2px 4px; opacity: 0; }
.m-tete b { font: 400 28px/1.1 var(--titre); color: #fff; }
.m-tete span { font-size: 13px; color: #8f8f8f; }
.m-l { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: center; padding: 11px 12px; border-radius: 12px; background: #161617; border: 1px solid rgba(255,255,255,.07); opacity: 0; transform: translateY(10px); }
.m-l em { font-style: normal; font: 400 12px var(--mono); color: #9a9a9a; }
.m-l b { display: block; font-size: 14px; font-weight: 500; color: #eee; }
.m-l span { font-size: 12px; color: #8a8a8a; }
.m-p { font-style: normal; font-size: 11px; padding: 3px 8px; border-radius: 20px; background: rgba(255,255,255,.08); color: #cfcfcf; }
.m-p--fait { background: rgba(255,255,255,.2); color: #fff; }
.m-p--en { background: rgba(201,163,107,.25); color: #f0d9b0; }
.m-bloc { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: #161617; border: 1px solid rgba(255,255,255,.07); opacity: 0; transform: translateY(10px); }
.m-bloc b { font-size: 15px; font-weight: 500; color: #eee; }
.m-bloc > span:not(.ea-etiq) { font-size: 12.5px; color: #8f8f8f; }
.m-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.m-photos i { aspect-ratio: 1; border-radius: 8px; background: linear-gradient(135deg, #3a3a3c, #232325); opacity: 0; }
.m-photos span { aspect-ratio: 1; border-radius: 8px; border: 1px dashed rgba(255,255,255,.25); display: grid; place-items: center; font-size: 11px; color: #9a9a9a; }
.m-btn { display: block; text-align: center; padding: 13px; border-radius: 12px; background: #f2f2f2; color: #111; font-size: 14px; font-weight: 500; opacity: 0; }
.m-btn--clair { background: transparent; color: #e6e6e6; border: 1px solid rgba(255,255,255,.2); }
.m-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.m-btns .m-btn { opacity: 1; padding: 10px; }
.m-e { display: flex; align-items: center; gap: 12px; padding: 10px 4px; font-size: 14px; color: #7f7f7f; opacity: 0; }
.m-e i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); flex: none; }
.m-e--fait { color: #e8e8e8; }
.m-e--fait i { background: #f2f2f2; border-color: #f2f2f2; }
.m-e--actif { color: #f0d9b0; }
.m-e--actif i { border-color: #c9a36b; box-shadow: 0 0 0 4px rgba(201,163,107,.2); }
.m-bloc--devis { border-color: rgba(201,163,107,.35); }
.m-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.m-j { text-align: center; padding: 8px 0; border-radius: 8px; font-size: 13px; color: #cfcfcf; background: rgba(255,255,255,.05); }
.m-j--off { color: #555; background: none; }
.m-j--on { background: #f2f2f2; color: #111; }
.m-cr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.m-c { text-align: center; padding: 10px 0; border-radius: 9px; border: 1px solid rgba(255,255,255,.14); font-size: 13px; color: #dcdcdc; opacity: 0; }
.m-c--on { background: rgba(201,163,107,.25); border-color: #c9a36b; color: #fff; }
.m-doc { display: grid; gap: 9px; padding: 16px; border-radius: 12px; background: #f2f2f0; opacity: 0; }
.m-doc b { color: #222; font-size: 15px; }
.m-doc i { display: block; height: 7px; border-radius: 4px; background: #d6d6d2; }
.m-sig { position: relative; border-radius: 12px; border: 1px dashed rgba(255,255,255,.25); padding: 10px; display: grid; gap: 4px; opacity: 0; }
.m-sig svg { width: 100%; height: 90px; }
.m-trait { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; }
.m-sig span { font: 400 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #7a7a7a; }
.m-pay { display: grid; gap: 0; border-radius: 14px; background: #161617; border: 1px solid rgba(255,255,255,.07); opacity: 0; }
.m-pay div { display: flex; justify-content: space-between; padding: 13px 14px; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 13px; }
.m-pay span { color: #8f8f8f; }
.m-pay b { color: #eee; font-weight: 500; }
.m-montant { font: 400 22px var(--titre) !important; }
.m-carte { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; border: 1px solid #c9a36b; font-size: 14px; color: #eee; }
.m-carte i { width: 16px; height: 16px; border-radius: 50%; border: 5px solid #c9a36b; }
.m-carte--off { border-color: rgba(255,255,255,.14); color: #9a9a9a; }
.m-carte--off i { border: 2px solid rgba(255,255,255,.3); }
.m-ok { font: 400 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #8a8a8a; text-align: center; opacity: 0; }
.m-onde { display: flex; align-items: center; gap: 4px; height: 60px; }
.m-onde i { flex: 1; height: calc(var(--h) * 1%); border-radius: 3px; background: rgba(255,255,255,.7); transform: scaleY(.15); }
.m-t { display: block; height: 8px; border-radius: 4px; background: rgba(255,255,255,.22); transform-origin: left; transform: scaleX(0); }
.construit .m-tete { animation: eaApparait .5s ease .4s both; }
.construit .m-l, .construit .m-e { animation: eaEntre .45s ease calc(.8s + var(--i) * .16s) both; }
.construit .m-bloc, .construit .m-doc, .construit .m-pay, .construit .m-sig { animation: eaEntre .55s ease 1.5s both; }
.construit .m-bloc + .m-bloc { animation-delay: 1.8s; }
.construit .m-btn { animation: eaApparait .5s ease 2.6s both; }
.construit .m-photos i { animation: eaApparait .4s ease calc(2s + var(--i) * .2s) both; }
.construit .m-c { animation: eaApparait .35s ease calc(2s + var(--i) * .08s) both; }
.construit .m-trait { animation: eaTrace 1.6s cubic-bezier(.5,0,.3,1) 2s both; }
.construit .m-ok { animation: eaApparait .5s ease 3s both; }
.construit .m-onde i { animation: mOnde 1.2s ease-in-out calc(1.6s + var(--i) * .05s) 2 alternate both; }
@keyframes mOnde { to { transform: scaleY(1); } }
.construit .m-t { animation: eaBarre .7s ease calc(2.4s + var(--i) * .15s) both; }
.sans-animation .m-tete, .sans-animation .m-l, .sans-animation .m-e, .sans-animation .m-bloc, .sans-animation .m-doc, .sans-animation .m-pay, .sans-animation .m-sig, .sans-animation .m-btn, .sans-animation .m-photos i, .sans-animation .m-c, .sans-animation .m-ok { opacity: 1 !important; transform: none !important; animation: none !important; }
.sans-animation .m-trait { stroke-dashoffset: 0; animation: none !important; }
.sans-animation .m-onde i, .sans-animation .m-t { transform: none !important; animation: none !important; }

/* Méthode : frise verticale, la ligne se trace et chaque étape s'allume en descendant. */
.frise { position: relative; display: grid; gap: 0; }
.frise__etape { position: relative; display: grid; grid-template-columns: 72px 1fr 260px; gap: 32px; align-items: center; padding: 28px 0; }
.frise__etape::before { content: ""; position: absolute; left: 35px; top: 0; bottom: 0; width: 1px; background: var(--filet); }
.frise__etape::after { content: ""; position: absolute; left: 35px; top: 0; bottom: 0; width: 1px; background: linear-gradient(#c9a36b, rgba(201,163,107,.2)); transform-origin: top; transform: scaleY(0); transition: transform 1s cubic-bezier(.4,0,.2,1) .2s; }
.frise__etape:first-child::before, .frise__etape:first-child::after { top: 50%; }
.frise__etape:last-child::before, .frise__etape:last-child::after { bottom: 50%; }
.frise__noeud { position: relative; z-index: 1; width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--filet-fort); background: var(--fond); display: grid; place-items: center; transition: border-color .6s, box-shadow .6s; }
.frise__noeud b { font: 400 14px var(--mono); color: var(--discret); transition: color .6s; }
.frise__texte { display: grid; gap: 8px; max-width: 40em; }
.frise__texte p { font-size: 16px; line-height: 1.6; }
.frise__img { width: 260px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; border: 1px solid var(--filet); opacity: .55; filter: saturate(.6); transition: opacity .8s, filter .8s; }
.js .frise__etape.apparait { opacity: 1; transform: none; }
.frise__etape.vu::after { transform: scaleY(1); }
.frise__etape.vu .frise__noeud { border-color: #c9a36b; box-shadow: 0 0 0 6px rgba(201,163,107,.12); }
.frise__etape.vu .frise__noeud b { color: var(--encre); }
.frise__etape.vu .frise__img { opacity: 1; filter: none; }
html:not(.js) .frise__img { opacity: 1; filter: none; }
@media (prefers-reduced-motion: reduce) { .frise__etape::after, .frise__noeud, .frise__img { transition: none; } }
@media (max-width: 860px) {
  .frise__etape { grid-template-columns: 56px 1fr; gap: 18px; }
  .frise__noeud { width: 56px; height: 56px; }
  .frise__etape::before, .frise__etape::after { left: 27px; }
  .frise__img { grid-column: 2; width: 100%; max-width: 320px; }
}

/* Méthode : frise verticale, la ligne se trace et chaque étape s'allume en descendant. */
.frise { position: relative; display: grid; gap: 0; }
.frise__etape { position: relative; display: grid; grid-template-columns: 72px 1fr 260px; gap: 32px; align-items: center; padding: 28px 0; }
.frise__etape::before { content: ""; position: absolute; left: 35px; top: 0; bottom: 0; width: 1px; background: var(--filet); }
.frise__etape::after { content: ""; position: absolute; left: 35px; top: 0; bottom: 0; width: 1px; background: linear-gradient(#c9a36b, rgba(201,163,107,.2)); transform-origin: top; transform: scaleY(0); transition: transform 1s cubic-bezier(.4,0,.2,1) .2s; }
.frise__etape:first-child::before, .frise__etape:first-child::after { top: 50%; }
.frise__etape:last-child::before, .frise__etape:last-child::after { bottom: 50%; }
.frise__noeud { position: relative; z-index: 1; width: 72px; height: 72px; border-radius: 50%; border: 1px solid var(--filet-fort); background: var(--fond); display: grid; place-items: center; transition: border-color .6s, box-shadow .6s; }
.frise__noeud b { font: 400 14px var(--mono); color: var(--discret); transition: color .6s; }
.frise__texte { display: grid; gap: 8px; max-width: 40em; }
.frise__texte p { font-size: 16px; line-height: 1.6; }
.frise__img { width: 260px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; border: 1px solid var(--filet); opacity: .55; filter: saturate(.6); transition: opacity .8s, filter .8s; }
.js .frise__etape.apparait { opacity: 1; transform: none; }
.frise__etape.vu::after { transform: scaleY(1); }
.frise__etape.vu .frise__noeud { border-color: #c9a36b; box-shadow: 0 0 0 6px rgba(201,163,107,.12); }
.frise__etape.vu .frise__noeud b { color: var(--encre); }
.frise__etape.vu .frise__img { opacity: 1; filter: none; }
html:not(.js) .frise__img { opacity: 1; filter: none; }
@media (prefers-reduced-motion: reduce) { .frise__etape::after, .frise__noeud, .frise__img { transition: none; } }
@media (max-width: 860px) {
  .frise__etape { grid-template-columns: 56px 1fr; gap: 18px; }
  .frise__noeud { width: 56px; height: 56px; }
  .frise__etape::before, .frise__etape::after { left: 27px; }
  .frise__img { grid-column: 2; width: 100%; max-width: 320px; }
}

/* ---------- Écrans redessinés : chacun sa forme ---------- */
.frise__etape::after { background: rgba(201,163,107,.65); }
.g-anneau { width: 150px; height: 150px; }
.g-anneau-f { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 10; }
.g-anneau-v { fill: none; stroke: #f2f2f2; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 0 999; }
.construit .g-anneau-v { animation: eaSeg 1.4s cubic-bezier(.4,0,.2,1) 1.3s both; }
.sans-animation .g-anneau-v { stroke-dasharray: var(--l) var(--c); animation: none !important; }
.g-anneau-t { fill: #fff; font: 400 26px var(--titre); }
/* ERP : fiche d'affaire */
.fa { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto; gap: 14px; }
.fa-a { grid-row: span 2; grid-template-columns: 150px 1fr; display: grid; align-items: center; gap: 18px; }
.fa-a .ea-etiq { grid-column: 1 / -1; }
.fa-etapes { display: grid; gap: 6px; }
.fa-e { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #7f7f7f; opacity: 0; }
.fa-e i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); }
.fa-e--fait { color: #e6e6e6; }
.fa-e--fait i { background: #f2f2f2; border-color: #f2f2f2; }
.fa-budget { display: grid; gap: 10px; }
.fa-budget div { display: flex; justify-content: space-between; font-size: 13px; color: #8f8f8f; }
.fa-budget b { font: 400 20px var(--titre); color: #fff; }
.fa-equipe { display: flex; gap: 8px; }
.fa-equipe .ea-av { width: 38px; height: 38px; font-size: 12px; opacity: 0; }
.construit .fa-e { animation: eaEntre .4s ease calc(1.5s + var(--i) * .12s) both; }
.construit .fa-equipe .ea-av { animation: eaApparait .4s ease calc(1.8s + var(--i) * .1s) both; }
/* Liaison comptable : flux */
.lc { display: grid; grid-template-columns: 1fr 1.4fr 1fr; align-items: center; gap: 14px; padding: 10px 0; }
.lc-noeud { padding: 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: #1b1b1d; display: grid; gap: 4px; }
.lc-noeud b { font: 400 20px var(--titre); color: #fff; }
.lc-noeud span { font-size: 12.5px; color: #8f8f8f; }
.lc-noeud--dest { border-color: rgba(201,163,107,.45); }
.lc-voie { position: relative; height: 2px; background: rgba(255,255,255,.12); }
.lc-paquet { position: absolute; top: -6px; left: 0; width: 22px; height: 14px; border-radius: 3px; background: #f2f2f2; box-shadow: 0 0 12px rgba(201,163,107,.6); opacity: 0; }
.construit .lc-paquet { animation: lcPaquet 2.4s cubic-bezier(.4,0,.6,1) calc(1.2s + var(--i) * .6s) infinite; }
@keyframes lcPaquet { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% - 22px); opacity: 0; } }
/* Stock : bacs */
.st { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.st-bac { display: grid; gap: 10px; justify-items: center; text-align: center; font-size: 12.5px; color: #cfcfcf; opacity: 0; }
.st-jauge { position: relative; width: 70px; height: 190px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); background: #121213; overflow: hidden; }
.st-jauge i { position: absolute; left: 0; right: 0; bottom: 0; height: var(--p); background: linear-gradient(#e8e8e8, #bdbdbd); transform-origin: bottom; transform: scaleY(0); }
.st-jauge em { position: absolute; left: 0; right: 0; bottom: 25%; border-top: 2px dashed rgba(201,163,107,.8); }
.st-bac--alerte .st-jauge { border-color: rgba(201,163,107,.7); }
.st-bac--alerte .st-jauge i { background: linear-gradient(#d9b37a, #b8863c); }
.construit .st-bac { animation: eaApparait .4s ease calc(1.2s + var(--i) * .1s) both; }
.construit .st-jauge i { animation: eaMonte 1.1s cubic-bezier(.3,0,.2,1) calc(1.4s + var(--i) * .12s) both; }
.construit .st-bac--alerte .st-jauge { animation: stAlerte 1.2s ease-in-out 3s 3; }
@keyframes stAlerte { 50% { box-shadow: 0 0 0 4px rgba(201,163,107,.25); } }
/* GMAO : frise */
.gm { display: grid; }
.gm-l { display: grid; grid-template-columns: 180px 1fr; align-items: center; height: 54px; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 14px; color: #dcdcdc; opacity: 0; }
.gm-l--tete { height: 30px; opacity: 1; }
.gm-sem { display: grid; grid-template-columns: repeat(8, 1fr); font: 400 11px var(--mono); color: #6f6f6f; text-align: center; }
.gm-piste { position: relative; height: 100%; background-image: repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 1px), rgba(255,255,255,.05) calc(12.5% - 1px) 12.5%); }
.gm-pt { position: absolute; top: 50%; left: calc(var(--x) * 12.5% + 6.25%); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #f2f2f2; transform: scale(0); }
.gm-pt--urgent { background: #c9a36b; box-shadow: 0 0 0 5px rgba(201,163,107,.25); }
.construit .gm-l { animation: eaApparait .4s ease calc(1s + var(--i) * .1s) both; }
.construit .gm-pt { animation: gmPop .4s cubic-bezier(.3,1.6,.5,1) calc(1.6s + var(--i) * .1s) both; }
@keyframes gmPop { to { transform: scale(1); } }
/* Qualité : Pareto + 8D */
.pa { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; height: 240px; align-items: end; }
.pa-b { display: grid; grid-template-rows: 1fr auto; height: 100%; gap: 6px; }
.pa-b i { align-self: end; display: block; border-radius: 4px 4px 0 0; background: rgba(255,255,255,.35); transform-origin: bottom; transform: scaleY(0); }
.pa-b:first-child i { background: rgba(255,255,255,.8); }
.pa-b span { font-size: 11px; color: #8a8a8a; text-align: center; line-height: 1.2; }
.pa-c { position: absolute; left: 0; right: 0; top: 0; height: calc(100% - 30px); width: 100%; overflow: visible; }
.pa-c polyline { fill: none; stroke: #c9a36b; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 400; stroke-dashoffset: 400; }
.q8s { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.q8 { text-align: center; padding: 14px 0; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); font: 400 15px var(--mono); color: #8f8f8f; opacity: 0; }
.q8--fait { background: rgba(255,255,255,.14); color: #fff; }
.construit .pa-b i { animation: eaMonte .8s cubic-bezier(.3,0,.2,1) calc(1.3s + var(--i) * .12s) both; }
.construit .pa-c polyline { animation: eaTrace 1.4s ease 2.2s both; }
.construit .q8 { animation: eaApparait .35s ease calc(1.6s + var(--i) * .1s) both; }
/* Facture électronique : deux flux et la plateforme */
.fe { display: grid; grid-template-columns: 1fr 200px 1fr; gap: 14px; align-items: center; }
.fe-voie { display: grid; gap: 10px; padding: 14px; border-radius: 12px; background: #141415; border: 1px solid rgba(255,255,255,.06); }
.fe-doc { padding: 12px; border-radius: 9px; background: #1d1d1f; border: 1px solid rgba(255,255,255,.08); display: grid; gap: 4px; opacity: 0; transform: translateX(-12px); }
.fe-voie:last-child .fe-doc { transform: translateX(12px); }
.fe-doc b { font-size: 14px; font-weight: 500; color: #eee; }
.fe-doc span { font-size: 12px; color: #8f8f8f; }
.fe-pf { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 22px 10px; border-radius: 14px; border: 1px solid rgba(201,163,107,.45); background: radial-gradient(circle at 50% 30%, rgba(201,163,107,.16), transparent 70%); }
.fe-pf i { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #c9a36b; }
.fe-pf b { font: 400 18px var(--titre); color: #fff; }
.fe-pf span { font-size: 12px; color: #8f8f8f; }
.construit .fe-doc { animation: eaEntre .5s ease calc(1.2s + var(--i) * .2s) both; }
.construit .fe-pf i { animation: stAlerte 1.6s ease-in-out 1.4s infinite; }
/* Comparaison de devis : 3 cartes */
.cds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cd { padding: 16px; border-radius: 12px; background: #161617; border: 1px solid rgba(255,255,255,.07); display: grid; gap: 8px; align-content: start; opacity: 0; transform: translateY(12px); }
.cd--meilleur { border-color: rgba(255,255,255,.35); }
.cd-total { font: 400 30px var(--titre); color: #fff; margin-bottom: 4px; }
.cd-l { display: flex; justify-content: space-between; font-size: 13.5px; color: #bdbdbd; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.05); }
.cd-l b { font-weight: 400; color: #e6e6e6; }
.cd-l--manque b { color: #f0d9b0; }
.cd-note { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(201,163,107,.45); background: rgba(201,163,107,.1); font-size: 14.5px; color: #f0d9b0; opacity: 0; }
.cd-note i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #c9a36b; flex: none; }
.construit .cd { animation: eaEntre .55s ease calc(.9s + var(--i) * .2s) both; }
.construit .cd-l--manque { animation: iaSurligne .6s ease 2.2s both; }
.construit .cd-note { animation: eaApparait .6s ease 2.6s both; }
/* Facturation */
.g-deux--fc { grid-template-columns: 1fr 1.3fr; }
.fc-chiffres { display: grid; gap: 10px; margin-top: 6px; }
.fc-chiffres div { display: flex; justify-content: space-between; font-size: 13px; color: #8f8f8f; }
.fc-chiffres b { font: 400 20px var(--titre); color: #fff; }
.fc-l { display: grid; grid-template-columns: 110px 1fr 50px; gap: 12px; align-items: center; padding: 10px 0; font-size: 14px; color: #dcdcdc; border-bottom: 1px solid rgba(255,255,255,.05); opacity: 0; }
.fc-l b { font-weight: 400; text-align: right; }
.construit .fc-l { animation: eaApparait .4s ease calc(1.2s + var(--i) * .12s) both; }
.sans-animation .fa-e, .sans-animation .fa-equipe .ea-av, .sans-animation .st-bac, .sans-animation .gm-l, .sans-animation .q8, .sans-animation .fe-doc, .sans-animation .cd, .sans-animation .cd-note, .sans-animation .fc-l, .sans-animation .lc-paquet { opacity: 1 !important; transform: none !important; animation: none !important; }
.sans-animation .st-jauge i, .sans-animation .pa-b i, .sans-animation .gm-pt { transform: none !important; animation: none !important; }
.sans-animation .pa-c polyline { stroke-dashoffset: 0; animation: none !important; }
.ea-corps--plein { grid-template-rows: none; grid-auto-rows: max-content; align-content: start; }
.ecran-anime--mobile { width: 360px !important; height: 825px !important; border-radius: 30px; } .m-corps { gap: 14px; padding: 18px 16px 22px; }

/* ---------- Méthode : dessins animés au trait, un par étape ---------- */
.frise__anim { width: 260px; aspect-ratio: 3 / 2; border-radius: 10px; border: 1px solid var(--filet); background: radial-gradient(120% 100% at 80% 10%, rgba(201,163,107,.10), transparent 55%), #0f0f10; overflow: visible; }
.frise__anim * { fill: none; stroke: #e6e6e6; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.frise__anim .t { stroke-dasharray: 1; stroke-dashoffset: 1; }
.frise__anim .t-or, .frise__anim .or-t, .frise__anim .tr { stroke: #c9a36b; }
.frise__anim .or { fill: rgba(201,163,107,.18); stroke: #c9a36b; }
.frise__anim .pt { fill: #c9a36b; stroke: none; }
.frise__anim .pt-or { fill: #c9a36b; stroke: none; }
.frise__anim .pl { fill: rgba(255,255,255,.75); stroke: none; }
.frise__anim .pl-or { fill: #c9a36b; stroke: none; }
.frise__anim .p { opacity: 0; }
.frise__anim .bar { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); }
.frise__anim .bar rect { transform-box: fill-box; }
.frise__anim .mod { fill: rgba(255,255,255,.06); stroke: #e6e6e6; opacity: 0; transform: translate(var(--x), var(--y)); }
.frise__anim .mod--or { stroke: #c9a36b; fill: rgba(201,163,107,.15); }
.frise__anim .prog-or { fill: #c9a36b; stroke: none; transform-box: fill-box; transform-origin: left; transform: scaleX(0); }
.frise__anim .m--loupe { transform: translate(80px, 105px); opacity: 0; }
.frise__anim .m--curseur { fill: #fff; stroke: #0f0f10; stroke-width: 1; transform: translate(60px, 160px); opacity: 0; }
.frise__anim .m--boucle { transform: translate(230px, 100px) rotate(0deg); transform-box: view-box; transform-origin: 230px 100px; opacity: 0; }
.frise__anim .m--boucle path { transform: translate(-230px, -100px); }
.frise__anim .m--interrupteur { fill: #f2f2f2; stroke: none; transform: translateX(0); opacity: 0; }
.frise__anim .m--engrenage { transform: translate(250px, 150px); opacity: 0; }

.scene-etape.actif .frise__anim .t { animation: maTrace 1s cubic-bezier(.4,0,.2,1) var(--d, 0s) forwards; }
.scene-etape.actif .frise__anim .p { animation: maApparait .5s ease var(--d, 0s) forwards; }
.scene-etape.actif .frise__anim .bar { animation: maMonte .6s cubic-bezier(.3,0,.2,1) var(--d, 0s) forwards; }
.scene-etape.actif .frise__anim .mod { animation: maModule .7s cubic-bezier(.3,1.3,.5,1) var(--d, 0s) forwards; }
.scene-etape.actif .frise__anim .prog-or { animation: maBarre 1.3s cubic-bezier(.4,0,.2,1) .7s forwards; }
.scene-etape.actif .frise__anim .m--loupe { animation: maLoupe 2.4s ease-in-out .6s forwards; }
.scene-etape.actif .frise__anim .m--curseur { animation: maCurseur 1.6s ease-in-out 1.6s forwards; }
.scene-etape.actif .frise__anim .m--boucle { animation: maApparait .4s ease 1.8s forwards, maTourne 6s linear 1.8s infinite; }
.scene-etape.actif .frise__anim .m--interrupteur { animation: maApparait .3s ease 1.8s forwards, maInter .5s cubic-bezier(.4,0,.2,1) 2.3s forwards; }
.scene-etape.actif .frise__anim .m--engrenage { animation: maApparait .5s ease 1.4s forwards, maEngrenage 10s linear 1.4s infinite; }
@keyframes maTrace { to { stroke-dashoffset: 0; } }
@keyframes maApparait { to { opacity: 1; } }
@keyframes maMonte { to { transform: scaleY(1); } }
@keyframes maBarre { to { transform: scaleX(1); } }
@keyframes maModule { to { opacity: 1; transform: none; } }
@keyframes maLoupe { 0% { opacity: 0; transform: translate(70px, 110px); } 15% { opacity: 1; } 100% { opacity: 1; transform: translate(150px, 92px); } }
@keyframes maCurseur { 0% { opacity: 0; transform: translate(60px, 175px); } 20% { opacity: 1; } 100% { opacity: 1; transform: translate(200px, 118px); } }
@keyframes maTourne { to { transform: translate(0, 0) rotate(360deg); } }
@keyframes maInter { to { transform: translateX(40px); } }
@keyframes maEngrenage { from { transform: translate(250px, 150px) rotate(0deg); } to { transform: translate(250px, 150px) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .frise__anim .t { stroke-dashoffset: 0; } .frise__anim .p, .frise__anim .mod, .frise__anim [class*="m--"] { opacity: 1; }
  .frise__anim .bar, .frise__anim .prog-or { transform: none; } .frise__anim .mod { transform: none; }
  .scene-etape.actif .frise__anim * { animation: none !important; }
}
@media (max-width: 860px) { .frise__anim { grid-column: 2; width: 100%; max-width: 320px; } }
.frise__anim .m--boucle { transform: none; transform-box: fill-box; transform-origin: center; }
.frise__anim .m--boucle path { transform: none; }
@keyframes maTourne2 { to { transform: rotate(360deg); } }
.scene-etape.actif .frise__anim .m--boucle { animation: maApparait .4s ease 1.8s forwards, maTourne2 6s linear 1.8s infinite; }

/* ---------- Méthode : dessins détaillés (v2, 480 x 320) ---------- */
.frise__etape:has(.frise__anim--riche) { grid-template-columns: 72px 1fr 460px; }
.frise__anim--riche { width: 460px; aspect-ratio: 3 / 2; background: radial-gradient(90% 80% at 50% 50%, #141415, #0c0c0d); }
.frise__anim--riche * { stroke-width: 1.1; }
.frise__anim--riche .fin { stroke: #8d8d8d; stroke-width: .9; }
.frise__anim--riche .or { stroke: #c9a36b; }
.frise__anim--riche .cote { stroke: #4a4a4a; stroke-width: .8; }
.frise__anim--riche .cote-txt { stroke: #6a6a6a; stroke-width: 1.4; }
.frise__anim--riche .pt-fond { fill: #2a2a2b; stroke: none; }
.frise__anim--riche .fond-pts, .frise__anim--riche .halo { stroke: none; }
.frise__anim--riche .halo { fill: url(#ma-halo); }
.frise__anim--riche .fond-pts { fill: url(#ma-pts); }
.frise__anim--riche .masque { fill: #0e0e0f; stroke: #3a3a3b; stroke-width: .8; }
.frise__anim--riche .trait { stroke: #e6e6e6; }
.frise__anim--riche .trait.or { stroke: #c9a36b; }
.frise__anim--riche .pl { fill: #6a6a6a; stroke: none; }
.frise__anim--riche .fum { stroke: #5a5a5a; stroke-width: .8; }
.frise__anim--riche .pointille { stroke: #c9a36b; stroke-width: .7; stroke-dasharray: 2 3; opacity: .7; }
.frise__anim--riche .eti { fill: rgba(201,163,107,.08); stroke: #c9a36b; stroke-width: .9; }
.frise__anim--riche .eti--alerte { fill: rgba(201,163,107,.18); }
.frise__anim--riche .eti-txt { stroke: #bdbdbd; stroke-width: 1.6; }
.frise__anim--riche .flux { stroke: #c9a36b; stroke-width: 1.1; stroke-dasharray: 3 9; opacity: 0; }
.frise__anim--riche .graduation { stroke: #6a6a6a; stroke-width: 1; }
.frise__anim--riche .arc-or { stroke: #c9a36b; stroke-width: 3; stroke-dasharray: 0 60; filter: drop-shadow(0 0 3px rgba(201,163,107,.6)); }
.frise__anim--riche .anneau-or { stroke: #c9a36b; stroke-width: 3; stroke-dasharray: 0 100; }
.frise__anim--riche .aire { fill: rgba(201,163,107,.12); stroke: none; }
.frise__anim--riche .aiguille { transform-box: view-box; transform-origin: 420px 58px; opacity: 0; }
.frise__anim--riche .onde path { opacity: 0; }
.frise__anim--riche .stylo { opacity: 0; }
.frise__anim--riche .rec { fill: #c9a36b; }
.frise__anim--riche .p { transform: translateY(4px); }

.scene-etape.actif .frise__anim--riche .p { animation: maApparaitR .6s cubic-bezier(.2,.7,.2,1) var(--d, 0s) forwards; }
.scene-etape.actif .frise__anim--riche .flotte { animation: maApparaitR .6s cubic-bezier(.2,.7,.2,1) var(--d, 0s) forwards, maFlotte 5s ease-in-out calc(var(--d, 0s) + .6s) infinite; }
.scene-etape.actif .frise__anim--riche .flux { animation: maApparait .4s ease 1.9s forwards, maFlux 1.6s linear 1.9s infinite; }
.scene-etape.actif .frise__anim--riche .arc-or { animation: maArc 2.2s cubic-bezier(.4,0,.2,1) 1s forwards; }
.scene-etape.actif .frise__anim--riche .anneau-or { animation: maAnneau 1.6s cubic-bezier(.4,0,.2,1) 1.8s forwards; }
.scene-etape.actif .frise__anim--riche .aiguille { animation: maApparait .3s ease 1s forwards, maAiguille 2.2s cubic-bezier(.4,0,.2,1) 1s forwards; }
.scene-etape.actif .frise__anim--riche .onde path { animation: maOnde 1.4s ease-in-out 2s infinite; }
.scene-etape.actif .frise__anim--riche .onde path + path { animation-delay: 2.2s; }
.scene-etape.actif .frise__anim--riche .rec { animation: maClignote 1.2s ease-in-out 2s infinite; }
.scene-etape.actif .frise__anim--riche .note { animation: maTrace 1.1s cubic-bezier(.4,0,.2,1) var(--d, 0s) forwards; }
.scene-etape.actif .frise__anim--riche .stylo { animation: maApparait .4s ease 2.1s forwards, maStylo 1.4s ease-in-out 2.1s 4 alternate; }
@keyframes maApparaitR { to { opacity: 1; transform: none; } }
@keyframes maFlotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes maFlux { to { stroke-dashoffset: -24; } }
@keyframes maArc { to { stroke-dasharray: 30 60; } }
@keyframes maAnneau { to { stroke-dasharray: 68 100; } }
@keyframes maAiguille { from { transform: rotate(0deg); } to { transform: rotate(180deg); } }
@keyframes maOnde { 0%, 100% { opacity: 0; } 40% { opacity: 1; } }
@keyframes maClignote { 50% { opacity: .2; } }
@keyframes maStylo { from { transform: translate(0, 0); } to { transform: translate(-6px, 14px); } }
@media (prefers-reduced-motion: reduce) {
  .frise__anim--riche .flux, .frise__anim--riche .aiguille, .frise__anim--riche .stylo { opacity: 1; }
  .frise__anim--riche .aiguille { transform: rotate(180deg); }
  .frise__anim--riche .arc-or { stroke-dasharray: 30 60; } .frise__anim--riche .anneau-or { stroke-dasharray: 68 100; }
  .frise__anim--riche .p { transform: none; }
}
@media (max-width: 1100px) { .frise__etape:has(.frise__anim--riche) { grid-template-columns: 72px 1fr 360px; } .frise__anim--riche { width: 360px; } }
@media (max-width: 860px) { .frise__etape:has(.frise__anim--riche) { grid-template-columns: 56px 1fr; } .frise__anim--riche { width: 100%; max-width: 460px; } }
.frise__anim--riche .plein { fill: #0f0f10; stroke: none; }
.frise__anim--riche .lumiere { stroke: url(#ma-lum); stroke-width: 1.2; filter: drop-shadow(0 0 4px rgba(232,196,138,.55)); }
.scene-etape.actif .frise__anim--riche .lumiere { animation: maTrace 2.4s cubic-bezier(.4,0,.2,1) .1s forwards; }

/* Galerie : chaque capture mobile dans le même contour de smartphone, à la même taille. */
.telephone { position: absolute; top: 6%; left: 50%; transform: translateX(-50%); height: 112%; aspect-ratio: 9 / 19.5; padding: 9px; border-radius: 40px;
  background: linear-gradient(145deg, #3a3a3c, #161617 40%, #0b0b0c 70%, #2a2a2b); box-shadow: 0 30px 70px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.14), 0 0 0 1px rgba(0,0,0,.8); }
.telephone::before { content: ""; position: absolute; z-index: 2; top: 17px; left: 50%; transform: translateX(-50%); width: 30%; height: 18px; border-radius: 10px; background: #050505; }
.telephone::after { content: ""; position: absolute; right: -2px; top: 22%; width: 3px; height: 12%; border-radius: 2px; background: #2c2c2e; }
.telephone__ecran { display: block; width: 100%; height: 100%; border-radius: 32px; overflow: hidden; background: #fff; }
.galerie__item--mobile .galerie__cadre .telephone img { position: static; transform: none; width: 100% !important; height: 100% !important; object-fit: cover; object-position: top; border-radius: 0; box-shadow: none; }
.galerie__item--mobile .galerie__cadre { place-items: start center; }
.telephone__ecran { padding-top: 40px; }
.galerie__item--mobile .galerie__cadre .telephone img { height: auto !important; }

/* ---------- Méthode : scène fixe à gauche, étapes à droite ---------- */
.methode-defile { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.scene-etapes { position: sticky; top: calc(50vh - 220px); display: grid; gap: 18px; }
.scene-etapes__cadre { position: relative; aspect-ratio: 3 / 2; border-radius: 14px; border: 1px solid var(--filet); overflow: hidden;
  background: radial-gradient(120% 100% at 80% 0%, rgba(201,163,107,.10), transparent 55%), #0f0f10; }
.scene-etape { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.scene-etape.actif { opacity: 1; }
.scene-etape .frise__anim { width: 100% !important; height: 100%; max-width: none !important; border: 0; border-radius: 0; background: none; }
.scene-etapes__legende { display: flex; align-items: baseline; gap: 12px; }
.scene-etapes__num { font: 400 13px var(--mono); color: #c9a36b; }
.scene-etapes__titre { font: 400 22px/1.2 var(--titre); color: var(--encre); }
.scene-etapes__total { margin-left: auto; font: 400 13px var(--mono); color: var(--discret); }
.scene-etapes__barre { display: block; height: 1px; background: var(--filet); }
.scene-etapes__barre i { display: block; height: 100%; background: #c9a36b; transform-origin: left; transform: scaleX(.125); transition: transform .6s cubic-bezier(.4,0,.2,1); }
.frise--defile .frise__etape { grid-template-columns: 72px 1fr !important; min-height: 46vh; padding: 0; align-items: center; }
.frise--defile .frise__etape .frise__texte { transition: opacity .5s; }
.methode-defile--js .frise__etape:not(.actif) .frise__texte { opacity: .35; }
.methode-defile--js .frise__etape:not(.actif) .frise__noeud { box-shadow: none; }
@media (max-width: 860px) {
  .methode-defile { grid-template-columns: 1fr; gap: 24px; }
  .scene-etapes { top: 64px; z-index: 2; background: var(--fond); padding: 12px 0; gap: 10px; }
  .scene-etapes__titre { font-size: 18px; }
  .frise--defile .frise__etape { grid-template-columns: 56px 1fr !important; min-height: 52vh; }
}

/* ---------- Méthode : scènes « interface » (cartes sombres, légère 3D) ---------- */
.scene-etape { container-type: size; }
.scn { position: absolute; inset: 0; font-size: calc(100cqw / 48); overflow: hidden; color: #e8e8e8; font-family: var(--texte, Inter, sans-serif); }
.scn-fond { position: absolute; inset: 0;
  background: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 2.4em 2.4em, linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 2.4em 2.4em;
  -webkit-mask-image: radial-gradient(60% 65% at 55% 45%, #000 20%, transparent 80%); mask-image: radial-gradient(60% 65% at 55% 45%, #000 20%, transparent 80%); }
.scn-halo { position: absolute; left: 14%; top: 30%; width: 70%; height: 70%; background: radial-gradient(closest-side, rgba(201,163,107,.28), rgba(201,163,107,.08) 55%, transparent); filter: blur(1.5em); opacity: 0; }
.scn-plan { position: absolute; inset: 0; perspective: 70em; perspective-origin: 30% 40%; }
.scn-carte { position: absolute; border-radius: 1em; background: linear-gradient(155deg, rgba(40,40,43,.96), rgba(17,17,19,.97) 60%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.14), 0 3em 6em -1em rgba(0,0,0,.7), 0 .6em 1.4em rgba(0,0,0,.45); opacity: 0; }
.scn-eti { font: 400 .62em/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #8a8a8e; }

/* Fenêtre de visio, inclinée */
.scn-visio { left: 16em; top: 5em; width: 30em; height: 21em; padding: .9em; display: grid; grid-template-rows: auto 1fr auto; gap: .8em;
  transform-origin: 0 50%; transform: rotateY(-22deg) rotateX(6deg) translateZ(-2em) translateX(2em); }
.scn-barre { display: flex; align-items: center; }
.scn-pts { display: flex; gap: .35em; } .scn-pts i { width: .5em; height: .5em; border-radius: 50%; background: #3c3c40; }
.scn-rec { margin-left: auto; display: flex; align-items: center; gap: .45em; font: 400 .6em/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #c9a36b; }
.scn-rec i { width: .7em; height: .7em; border-radius: 50%; background: #c9a36b; box-shadow: 0 0 .9em rgba(201,163,107,.9); }
.scn-tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; }
.scn-tuile { position: relative; border-radius: .7em; overflow: hidden; background: radial-gradient(90% 80% at 50% 30%, #2a2a2e, #111113 75%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.scn-tuile .scn-eti { position: absolute; left: .9em; top: .9em; z-index: 1; display: flex; align-items: center; gap: .6em; }
.scn-tuile .scn-eti::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: #5a5a5e; }
.scn-tuile--parle { box-shadow: inset 0 0 0 1px rgba(201,163,107,.9), 0 0 2.4em rgba(201,163,107,.22); background: radial-gradient(90% 80% at 50% 30%, #2f2a22, #121110 75%); }
.scn-tuile--parle .scn-eti { color: #d9b57c; } .scn-tuile--parle .scn-eti::before { background: #c9a36b; }
.scn-buste { position: absolute; left: 50%; bottom: 0; width: 80%; height: 82%; transform: translateX(-50%); }
.scn-cheveux { opacity: .9; }
.scn-onde { position: absolute; left: 50%; bottom: .9em; transform: translateX(-50%); display: flex; align-items: center; gap: .22em; height: 1.6em; }
.scn-onde i { width: .2em; height: 100%; border-radius: 1em; background: #c9a36b; box-shadow: 0 0 .5em rgba(201,163,107,.6); transform: scaleY(.15); }
.scn-commandes { display: flex; justify-content: center; gap: .55em; }
.scn-commandes span { width: 2.2em; height: 2.2em; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.scn-commandes svg, .scn-ic svg { width: 1em; height: 1em; fill: none; stroke: #cfcfd2; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.scn-commandes .scn-fin { width: 3.4em; border-radius: 1.1em; background: rgba(201,163,107,.18); box-shadow: inset 0 0 0 1px rgba(201,163,107,.55); }
.scn-commandes .scn-fin svg { stroke: #d9b57c; }

/* Notes, au premier plan */
.scn-notes { left: 3em; top: 16em; width: 17.5em; padding: 1.1em 1em 1em; display: grid; gap: .45em; z-index: 2; }
.scn-eti--titre { padding: 0 .3em .5em; }
.scn-rang { position: relative; display: grid; grid-template-columns: 2em 6.2em 1fr; align-items: center; gap: .5em; padding: .6em .55em; border-radius: .6em; opacity: 0; }
.scn-rang::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(201,163,107,.22), rgba(201,163,107,.06)); box-shadow: inset 0 0 0 1px rgba(201,163,107,.55); opacity: 0; }
.scn-ic { position: relative; width: 2em; height: 2em; border-radius: .5em; display: grid; place-items: center; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.scn-lib { position: relative; font: 400 .62em/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #bdbdc0; }
.scn-sq { position: relative; display: grid; gap: .35em; }
.scn-sq i { display: block; height: .32em; width: var(--w); border-radius: 1em; background: rgba(255,255,255,.14); transform-origin: left; transform: scaleX(0); }

/* Minuteur */
.scn-minuteur { left: 38.6em; top: 1.6em; width: 7.6em; height: 7.6em; border-radius: 50%; display: grid; place-items: center; align-content: center; z-index: 2; }
.scn-minuteur svg { position: absolute; inset: .5em; width: calc(100% - 1em); height: calc(100% - 1em); }
.scn-arc-f { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 2.4; }
.scn-arc { fill: none; stroke: #c9a36b; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 0 100; filter: drop-shadow(0 0 3px rgba(201,163,107,.8)); }
.scn-minuteur b { font: 400 1.35em/1 var(--mono); letter-spacing: .04em; color: #f2f2f2; }
.scn-minuteur span { font: 400 .55em/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: #8a8a8e; margin-top: .5em; }

/* Animation, quand l'étape est lue */
.scene-etape.actif .scn-halo { animation: maApparait 1.4s ease .2s forwards; }
.scene-etape.actif .scn-visio { animation: scnVisio 1.1s cubic-bezier(.2,.8,.2,1) .1s forwards; }
.scene-etape.actif .scn-notes { animation: scnMonte .9s cubic-bezier(.2,.8,.2,1) .5s forwards; }
.scene-etape.actif .scn-minuteur { animation: scnMonte .9s cubic-bezier(.2,.8,.2,1) .7s forwards; }
.scene-etape.actif .scn-onde i { animation: scnOnde .7s ease-in-out calc(1.2s + var(--k) * .09s) infinite alternate; }
.scene-etape.actif .scn-rec i { animation: maClignote 1.6s ease-in-out 1s infinite; }
.scene-etape.actif .scn-rang { animation: maApparait .5s ease calc(1.1s + var(--r) * .25s) forwards; }
.scene-etape.actif .scn-sq i { animation: scnLigne .8s cubic-bezier(.4,0,.2,1) calc(1.3s + var(--r) * .25s) forwards; }
.scene-etape.actif .scn-rang::before { animation: scnSurligne 7.5s ease-in-out calc(2s + var(--r) * 2.5s) infinite; }
.scene-etape.actif .scn-arc { animation: scnArc 2.6s cubic-bezier(.4,0,.2,1) 1s forwards; }
@keyframes scnVisio { from { opacity: 0; transform: rotateY(-30deg) rotateX(10deg) translateZ(-6em) translateX(4em); } to { opacity: 1; transform: rotateY(-22deg) rotateX(6deg) translateZ(-2em) translateX(2em); } }
@keyframes scnMonte { from { opacity: 0; transform: translateY(1.4em); } to { opacity: 1; transform: none; } }
@keyframes scnOnde { to { transform: scaleY(var(--h)); } }
@keyframes scnLigne { to { transform: scaleX(1); } }
@keyframes scnSurligne { 0%, 36%, 100% { opacity: 0; } 4%, 30% { opacity: 1; } }
@keyframes scnArc { to { stroke-dasharray: 100 100; } }
@media (prefers-reduced-motion: reduce) {
  .scn-carte, .scn-rang, .scn-halo { opacity: 1; animation: none !important; } .scn-sq i { transform: none; } .scn-arc { stroke-dasharray: 100 100; }
  .scn-visio { transform: rotateY(-22deg) rotateX(6deg) translateZ(-2em) translateX(2em); } .scn-rang:first-of-type::before { opacity: 1; }
}
.scn-visio { left: 14.5em; top: 7.2em; width: 27.5em; height: 19.5em; }
@keyframes scnVisio { from { opacity: 0; transform: rotateY(-30deg) rotateX(10deg) translateZ(-6em) translateX(3em); } to { opacity: 1; transform: rotateY(-20deg) rotateX(6deg) translateZ(-2em); } }
.scn-visio { transform: rotateY(-20deg) rotateX(6deg) translateZ(-2em); }
.scn-minuteur { left: 37.2em; top: 1.4em; width: 6.8em; height: 6.8em; }
.scn-onde { left: auto; right: .9em; bottom: .9em; transform: none; height: 1.3em; }
.scn-halo { left: 22%; top: 22%; }
/* Découverte : la fenêtre de visio seule, centrée */
.scn-visio { left: 8.5em; top: 4.6em; width: 33em; height: 23em; padding: 1.1em; gap: 1em; }
@keyframes scnVisio { from { opacity: 0; transform: rotateY(-26deg) rotateX(10deg) translateZ(-6em) translateX(2em); } to { opacity: 1; transform: rotateY(-14deg) rotateX(5deg) translateZ(-1em); } }
.scn-visio { transform: rotateY(-14deg) rotateX(5deg) translateZ(-1em); }
.scn-plan { perspective-origin: 50% 40%; }
.scn-halo { left: 15%; top: 18%; width: 72%; height: 72%; }
.scn-tuile .scn-eti { font-size: .7em; }
.scn-rec { font-size: .66em; }

/* Audit : le plan des locaux, posé en perspective */
.pa-carte { left: 7em; top: 4em; width: 34em; height: 22.1em; padding: 1.2em; overflow: hidden;
  transform: rotateX(42deg) rotateZ(-9deg) translateY(1em); transform-origin: 50% 50%; }
.pa-plan { width: 100%; height: 100%; display: block; overflow: visible; }
.pa-mur { fill: none; stroke: #bdbdc0; stroke-width: 1.6; stroke-linejoin: round; }
.pa-fin, .pa-fin * { fill: none; stroke: #6f6f74; stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; }
.pa-eti { font: 400 6.4px var(--mono); letter-spacing: .18em; fill: #8a8a8e; }
.pa-pt { fill: #c9a36b; filter: drop-shadow(0 0 3px rgba(201,163,107,.9)); }
.pa-onde { fill: rgba(201,163,107,.18); stroke: rgba(201,163,107,.6); stroke-width: .6; transform-box: fill-box; transform-origin: center; }
.pa-trait { stroke: rgba(201,163,107,.7); stroke-width: .6; fill: none; }
.pa-bulle { fill: #101012; stroke: rgba(201,163,107,.55); stroke-width: .6; }
.pa-bulle-t { font: 400 5.6px var(--mono); letter-spacing: .12em; fill: #e3c48f; }
.pa-rep { opacity: 0; }
.pa-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #e8c48a 20%, #fff3dc 50%, #e8c48a 80%, transparent);
  box-shadow: 0 0 1.2em .3em rgba(201,163,107,.55), 0 0 3em 1em rgba(201,163,107,.18); opacity: 0; }
.pa-mur, .pa-fin { stroke-dasharray: 1; stroke-dashoffset: 1; }
.pa-mur { stroke-dasharray: 2400; stroke-dashoffset: 2400; }
.pa-fin, .pa-fin * { stroke-dasharray: none; }
.pa-fin { opacity: 0; }

.scene-etape.actif .scn--audit .scn-halo { animation: maApparait 1.4s ease .2s forwards; }
.scene-etape.actif .pa-carte { animation: paEntre 1.1s cubic-bezier(.2,.8,.2,1) .1s forwards; }
.scene-etape.actif .pa-mur { animation: paMur 1.6s cubic-bezier(.4,0,.2,1) .5s forwards; }
.scene-etape.actif .pa-fin { animation: maApparait .8s ease 1.2s forwards; }
.scene-etape.actif .pa-scan { animation: paScan 4.5s cubic-bezier(.45,0,.55,1) 1.6s infinite; }
.scene-etape.actif .pa-rep { animation: paRep .5s cubic-bezier(.2,.8,.2,1) calc(2.1s + var(--k) * .7s) forwards; }
.scene-etape.actif .pa-onde { animation: paOnde 2.2s ease-out calc(2.4s + var(--k) * .7s) infinite; }
@keyframes paEntre { from { opacity: 0; transform: rotateX(55deg) rotateZ(-16deg) translateY(3em); } to { opacity: 1; transform: rotateX(42deg) rotateZ(-9deg) translateY(1em); } }
@keyframes paMur { to { stroke-dashoffset: 0; } }
@keyframes paScan { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 50% { top: calc(100% - 2px); opacity: 1; } 58% { opacity: 0; } 100% { top: calc(100% - 2px); opacity: 0; } }
@keyframes paRep { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes paOnde { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .pa-carte, .pa-rep, .pa-fin { opacity: 1; animation: none !important; } .pa-carte { transform: rotateX(42deg) rotateZ(-9deg) translateY(1em); }
  .pa-mur { stroke-dashoffset: 0; animation: none !important; } .pa-scan { display: none; }
}
.pa-plan * { vector-effect: non-scaling-stroke; }
.pa-mur { stroke: #d6d6d8; stroke-width: 1.1; }
.pa-fin, .pa-fin * { stroke: #7c7c81; stroke-width: .75; }
.pa-onde, .pa-trait, .pa-bulle { stroke-width: .8; }
.scn--audit .scn-halo { left: 12%; top: 25%; width: 76%; height: 70%; background: radial-gradient(closest-side, rgba(201,163,107,.32), rgba(201,163,107,.08) 60%, transparent); }
.pa-carte { -webkit-font-smoothing: antialiased; }
.pa-eti { font-size: 7.6px; fill: #9a9a9e; }
.pa-bulle-t { font-size: 6px; }
.scn--audit .scn-halo { z-index: 0; }
.scn--audit .scn-plan { z-index: 1; }
/* Les repères s'allument au passage de la ligne de balayage */
.scene-etape.actif .pa-rep { animation: paRep .5s cubic-bezier(.2,.8,.2,1) calc(2.15s + var(--k) * .45s) forwards; }
.scene-etape.actif .pa-onde { animation: paOnde 2.2s ease-out calc(2.3s + var(--k) * .45s) infinite; }

/* ---------- Méthode : écrans par étape (même moteur que l'accueil) ---------- */
.scn-ui { position: absolute; inset: 0; overflow: hidden; }
.scn-ui .ecran-anime { left: 50%; top: 50%; transform-origin: 50% 50%; transform: translate(-50%, -50%) scale(var(--s, .44)); border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 90px rgba(0,0,0,.6); transition: opacity .8s ease; }
.scn-ui .ea-corps--plein { grid-template-rows: auto auto 1fr; }
.vi-rec { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 30px; background: rgba(201,163,107,.12); border: 1px solid rgba(201,163,107,.4); font: 400 14px var(--mono); letter-spacing: .06em; color: #e3c48f; }
.vi-rec i { width: 9px; height: 9px; border-radius: 50%; background: #c9a36b; box-shadow: 0 0 10px rgba(201,163,107,.9); }
.vi-rec--clair { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #dcdcdc; }
.vi-rec--clair i { background: #e6e6e6; box-shadow: none; }
/* Visio */
.ecran-anime--decouverte .ea-corps { grid-template-rows: auto 1fr auto auto; gap: 16px; }
.vi-tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; min-height: 0; }
.vi-tuile { position: relative; border-radius: 14px; background: radial-gradient(70% 70% at 50% 40%, #1d1d1f, #121213); border: 1px solid rgba(255,255,255,.07); display: grid; place-items: center; opacity: 0; transform: translateY(12px); }
.vi-tuile--parle { border-color: rgba(201,163,107,.75); box-shadow: 0 0 0 3px rgba(201,163,107,.12), 0 0 40px rgba(201,163,107,.12); }
.vi-av { width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center; background: #2a2a2d; font: 400 38px var(--titre); color: #f2f2f2; }
.vi-tuile--parle .vi-av { background: #3a3125; box-shadow: 0 0 0 0 rgba(201,163,107,.45); }
.vi-nom { position: absolute; left: 16px; bottom: 14px; display: grid; gap: 2px; font-size: 13px; color: #9a9a9a; }
.vi-nom b { font-size: 16px; font-weight: 500; color: #eee; }
.vi-onde { position: absolute; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 4px; height: 26px; }
.vi-onde i { width: 4px; height: 100%; border-radius: 4px; background: #c9a36b; transform: scaleY(.15); }
.vi-legende { display: grid; gap: 8px; padding: 14px 18px; border-radius: 12px; background: #161617; border: 1px solid rgba(255,255,255,.07); opacity: 0; }
.vi-legende p { margin: 0; font-size: 19px; line-height: 1.4; color: #e6e6e6; }
.vi-legende p span { opacity: 0; }
.vi-commandes { display: flex; justify-content: center; gap: 12px; opacity: 0; }
.vi-b { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); }
.vi-b--fin { width: 70px; border-radius: 24px; background: rgba(201,163,107,.2); border-color: rgba(201,163,107,.5); }
.construit .vi-tuile { animation: eaEntre .7s ease calc(1s + var(--x, 0s)) both; }
.construit .vi-tuile + .vi-tuile { --x: .2s; }
.construit .vi-tuile--parle .vi-av { animation: viParle 1.8s ease-out 2s infinite; }
.construit .vi-onde i { animation: scnOnde .6s ease-in-out calc(1.8s + var(--k) * .08s) infinite alternate; }
.construit .vi-legende { animation: eaApparait .5s ease 1.8s both; }
.construit .vi-legende p span { animation: eaApparait .25s ease calc(2.1s + var(--m) * .16s) both; }
.construit .vi-commandes { animation: eaApparait .6s ease 1.4s both; }
.construit .vi-rec i { animation: maClignote 1.6s ease-in-out 1s infinite; }
@keyframes viParle { 0% { box-shadow: 0 0 0 0 rgba(201,163,107,.45); } 100% { box-shadow: 0 0 0 26px rgba(201,163,107,0); } }
@keyframes scnOnde { to { transform: scaleY(var(--h)); } }
/* Audit */
.au-deux { grid-template-columns: 1fr 1.6fr; }
.au-postes { display: grid; gap: 4px; }
.au-poste { display: grid; grid-template-columns: 90px 1fr 80px; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 15px; color: #dcdcdc; opacity: 0; }
.au-poste b { font-weight: 400; font-size: 13px; color: #8f8f8f; text-align: right; }
.au-cs { display: grid; }
.au-c { display: grid; grid-template-columns: 130px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 15px; color: #dcdcdc; opacity: 0; transform: translateX(-10px); }
.au-c em { justify-self: start; }
.au-c b { font-weight: 400; font: 400 14px var(--mono); color: #bdbdbd; }
.construit .au-poste { animation: eaApparait .4s ease calc(1.3s + var(--i) * .12s) both; }
.construit .au-c { animation: eaEntre .5s ease calc(2.2s + var(--i) * .45s) both; }
.construit .au-c .g-pill--ambre { animation: iaSurligne .8s ease calc(2.5s + var(--i) * .45s) both; }
@media (prefers-reduced-motion: reduce) {
  .scn-ui .vi-tuile, .scn-ui .vi-legende, .scn-ui .vi-legende p span, .scn-ui .vi-commandes, .scn-ui .au-poste, .scn-ui .au-c { opacity: 1 !important; transform: none !important; animation: none !important; }
}
.ecran-anime--audit .ea-corps { grid-template-rows: auto auto auto auto; align-content: start; }
.au-barre { display: flex; gap: 4px; height: 14px; }
.au-seg { display: block; width: var(--p); height: 100%; border-radius: 4px; transform-origin: left; transform: scaleX(0); }
.au-seg--or { background: #c9a36b; } .au-seg--clair { background: #e6e6e6; } .au-seg--gris { background: rgba(255,255,255,.28); }
.au-legs { display: flex; gap: 28px; }
.au-leg { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #bdbdbd; opacity: 0; }
.au-leg i { display: block; width: 10px; height: 10px; border-radius: 3px; }
.au-leg b { font-weight: 400; color: #fff; margin-left: 4px; }
.construit .au-seg { animation: eaBarre 1s cubic-bezier(.3,0,.2,1) calc(3.4s + var(--i) * .25s) both; }
.construit .au-leg { animation: eaApparait .4s ease calc(3.6s + var(--i) * .2s) both; }
.construit .au-temps { animation: eaEntre .8s ease 3s both; }

/* ---------- Méthode : écrans 03 à 08 ---------- */
.scn-ui .ea-corps { grid-template-rows: auto auto 1fr; align-content: start; }
/* 03 Estimation */
.es-deux { grid-template-columns: 1fr 1.15fr; }
.es-anneau { display: flex; align-items: center; gap: 22px; }
.es-anneau .g-anneau { width: 130px; height: 130px; }
.es-gros { display: grid; gap: 6px; }
.es-gros b { font: 400 46px/1 var(--titre); color: #fff; }
.es-gros span { font-size: 14px; color: #8f8f8f; }
.es-l { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 16px; color: #e0e0e0; opacity: 0; transform: translateX(-10px); }
.es-synth { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 10px; margin-top: 10px; opacity: 0; }
.es-synth div { padding: 12px 14px; border-radius: 10px; background: rgba(201,163,107,.08); border: 1px solid rgba(201,163,107,.3); display: grid; gap: 6px; }
.es-synth span { font-size: 12px; color: #a89a85; }
.es-synth b { font: 400 20px/1.15 var(--titre); color: #f3e3c6; }
.construit .es-l { animation: eaEntre .5s ease calc(2s + var(--i) * .3s) both; }
.construit .es-synth { animation: eaEntre .7s ease 3.4s both; }
.construit .es-gros { animation: eaApparait .6s ease 1.6s both; }
.es-gros { opacity: 0; }
/* 04 Maquette */
.mq-grille { display: grid; grid-template-columns: 200px 1fr 240px; gap: 14px; height: 560px; }
.mq-e { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 8px; font-size: 14.5px; color: #a6a6a6; opacity: 0; }
.mq-e i { width: 22px; height: 16px; border-radius: 3px; border: 1.5px solid rgba(255,255,255,.3); }
.mq-e--on { background: rgba(255,255,255,.08); color: #fff; }
.mq-toile { position: relative; border-radius: 12px; background: #f4f3f0; overflow: hidden;
  background-image: radial-gradient(rgba(0,0,0,.08) 1px, transparent 1px); background-size: 18px 18px; opacity: 0; }
.mq-b { position: absolute; border: 2px dashed rgba(20,20,22,.35); border-radius: 8px; background: rgba(20,20,22,.03); opacity: 0; transform: scale(.94); }
.mq-b--a { left: 4%; top: 4%; right: 4%; height: 9%; }
.mq-b--b { left: 4%; top: 17%; width: 28%; height: 34%; }
.mq-b--c { left: 35%; top: 17%; width: 28%; height: 34%; }
.mq-b--d { left: 66%; top: 17%; width: 30%; height: 34%; background: rgba(201,163,107,.12); border-color: rgba(176,128,60,.7); }
.mq-b--e { left: 4%; top: 55%; width: 59%; height: 40%; }
.mq-b--f { left: 66%; top: 55%; width: 30%; height: 40%; }
.mq-pin { position: absolute; left: 60%; top: 44%; display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 7px; border-radius: 20px; background: #141415; color: #f0e2c8; font-size: 13px; box-shadow: 0 10px 30px rgba(0,0,0,.35); opacity: 0; transform: translateY(6px); }
.mq-pin b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #c9a36b; color: #111; font-size: 12px; }
.mq-curseur { position: absolute; left: 30%; top: 80%; width: 16px; height: 22px; background: #111; clip-path: polygon(0 0, 0 100%, 30% 72%, 52% 100%, 66% 94%, 45% 66%, 100% 66%); opacity: 0; }
.mq-v { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 14px; color: #dcdcdc; opacity: 0; }
.construit .mq-e { animation: eaApparait .4s ease calc(1.1s + var(--i) * .1s) both; }
.construit .mq-toile { animation: eaEntre .7s ease 1.2s both; }
.construit .mq-b { animation: mqBloc .5s cubic-bezier(.2,.8,.2,1) calc(1.7s + var(--i) * .22s) both; }
.construit .mq-curseur { animation: mqCurseur 1.6s ease-in-out 3.1s both; }
.construit .mq-pin { animation: eaEntre .5s ease 4.6s both; }
.construit .mq-v { animation: eaApparait .4s ease calc(3.2s + var(--i) * .35s) both; }
@keyframes mqBloc { to { opacity: 1; transform: none; } }
@keyframes mqCurseur { 0% { opacity: 0; left: 30%; top: 80%; } 20% { opacity: 1; } 100% { opacity: 1; left: 64%; top: 40%; } }
/* 05 Création */
.cr-tableau { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cr-col { padding: 14px; border-radius: 12px; background: #141415; border: 1px solid rgba(255,255,255,.06); display: grid; align-content: start; gap: 10px; min-height: 380px; }
.cr-col--cours { border-color: rgba(201,163,107,.35); }
.cr-c { display: grid; gap: 10px; justify-items: start; padding: 14px; border-radius: 10px; background: #1c1c1e; border: 1px solid rgba(255,255,255,.08); font-size: 15px; color: #e6e6e6; opacity: 0; transform: translateY(10px); }
.cr-col--ok .cr-c { border-color: rgba(255,255,255,.16); }
.cr-c--glisse { position: relative; }
.construit .cr-c { animation: eaEntre .5s ease calc(1.6s + var(--i) * .18s) both; }
.construit .cr-c--glisse { animation: eaEntre .5s ease 2.1s both, crGlisse 1.1s cubic-bezier(.5,0,.2,1) 3.8s both; }
@keyframes crGlisse { 0% { transform: none; } 60% { transform: translate(calc(100% + 42px), 0) rotate(1.5deg); } 100% { transform: translate(calc(100% + 28px), 200px); opacity: 1; } }
/* 06 Tests */
.te-deux { grid-template-columns: 1.7fr 1fr; }
.te-l { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.05); opacity: 0; transform: translateX(-10px); }
.te-l .ea-av { width: 30px; height: 30px; font-size: 11px; }
.te-l span { display: grid; gap: 2px; font-size: 14.5px; color: #dcdcdc; }
.te-l span b { font-size: 12px; font-weight: 400; color: #8f8f8f; }
.te-vs { display: grid; gap: 10px; position: relative; }
.te-v { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.08); opacity: 0; }
.te-v b { font: 400 18px var(--mono); color: #cfcfcf; }
.te-v span { font-size: 13px; color: #8f8f8f; }
.te-v--on { border-color: rgba(201,163,107,.6); background: rgba(201,163,107,.1); }
.te-v--on b, .te-v--on span { color: #f0d9b0; }
.construit .te-l { animation: eaEntre .5s ease calc(1.6s + var(--i) * .35s) both; }
.construit .te-v { animation: eaApparait .4s ease calc(2s + var(--i) * .5s) both; }
/* 07 Livraison */
.li-deux { grid-template-columns: 1.5fr 1fr; }
.li-l { display: grid; grid-template-columns: 24px 1fr 120px; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.05); opacity: 0; }
.li-l span { display: grid; gap: 3px; font-size: 13px; color: #8f8f8f; }
.li-l span b { font-size: 15.5px; font-weight: 400; color: #e6e6e6; }
.li-ok { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.25); position: relative; }
.li-ok::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid #111; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; }
.li-prod { display: grid; justify-items: center; gap: 18px; padding: 26px 0 10px; text-align: center; }
.li-inter { width: 120px; height: 62px; border-radius: 40px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); position: relative; }
.li-inter i { position: absolute; left: 6px; top: 6px; width: 48px; height: 48px; border-radius: 50%; background: #e6e6e6; box-shadow: 0 6px 16px rgba(0,0,0,.4); }
.li-etat { position: relative; height: 34px; width: 100%; }
.li-etat b { position: absolute; inset: 0; font: 400 28px/1.2 var(--titre); color: #fff; }
.li-apres { opacity: 0; color: #f0d9b0 !important; }
.li-note { font-size: 13px; color: #8f8f8f; opacity: 0; }
.construit .li-l { animation: eaApparait .4s ease calc(1.2s + var(--i) * .3s) both; }
.construit .li-ok { animation: liOk .35s ease calc(2.3s + var(--i) * .3s) both; }
.construit .li-ok::after { animation: eaApparait .2s ease calc(2.45s + var(--i) * .3s) both; }
.construit .li-inter { animation: liFond .5s ease 4.2s both; }
.construit .li-inter i { animation: liBouton .5s cubic-bezier(.4,0,.2,1) 4.2s both; }
.construit .li-avant { animation: liSort .3s ease 4.3s both; }
.construit .li-apres { animation: eaApparait .4s ease 4.5s both; }
.construit .li-note { animation: eaApparait .5s ease 4.9s both; }
@keyframes liOk { to { background: #c9a36b; border-color: #c9a36b; } }
@keyframes liFond { to { background: rgba(201,163,107,.35); border-color: rgba(201,163,107,.7); box-shadow: 0 0 30px rgba(201,163,107,.25); } }
@keyframes liBouton { to { transform: translateX(58px); background: #fff; } }
@keyframes liSort { to { opacity: 0; } }
/* 08 Suivi */
.su-deux { grid-template-columns: 1.5fr 1fr; }
.su-c { width: 100%; height: 300px; display: block; }
.su-l { fill: none; stroke: #c9a36b; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.su-aire { fill: rgba(201,163,107,.12); opacity: 0; }
.su-e { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 15px; color: #dcdcdc; opacity: 0; transform: translateX(-10px); }
.construit .su-l { animation: eaTrace 2s cubic-bezier(.4,0,.2,1) 1.8s both; }
.construit .su-aire { animation: eaApparait .8s ease 3.2s both; }
.construit .su-e { animation: eaEntre .5s ease calc(2.2s + var(--i) * .35s) both; }
@keyframes eaTrace { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .scn-ui [class*="es-"], .scn-ui [class*="mq-"], .scn-ui [class*="cr-"], .scn-ui [class*="te-"], .scn-ui [class*="li-"], .scn-ui [class*="su-"] { opacity: 1 !important; animation: none !important; }
  .scn-ui .su-l { stroke-dashoffset: 0; } .scn-ui .li-avant { opacity: 0 !important; }
}

/* ---------- Méthode : scènes mixtes (illustration + interface animée) ---------- */
.hy { position: absolute; inset: 0; font-size: calc(100cqw / 48); overflow: hidden; color: #e8e8e8; }
.hy-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transform-origin: 65% 60%; opacity: 0; }
.hy-voile { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,8,9,.55), rgba(8,8,9,0) 45%); pointer-events: none; }
.hy-carte { position: absolute; padding: .9em 1em; border-radius: .9em; background: rgba(16,16,18,.78); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.12), 0 1.6em 3em rgba(0,0,0,.5); display: grid; gap: .6em; opacity: 0; transform: translateY(.8em); }
.hy-eti { display: flex; align-items: center; gap: .55em; font: 400 .62em/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: #9a9a9e; }
.hy-rec { width: .75em; height: .75em; border-radius: 50%; background: #c9a36b; box-shadow: 0 0 .8em rgba(201,163,107,.9); }
.hy-av { flex: none; width: 2.1em; height: 2.1em; border-radius: 50%; display: grid; place-items: center; background: #2c2c2f; font: 500 .72em/1 var(--corps); color: #eee; }
.hy-av--or { background: #3b3226; color: #f0d9b0; box-shadow: 0 0 0 1.5px rgba(201,163,107,.8); }
.hy-t { display: grid; gap: .15em; font-size: .62em; color: #8f8f93; line-height: 1.25; }
.hy-t b { font-size: 1.25em; font-weight: 500; color: #eee; }
.hy-ligne { display: flex; align-items: center; gap: .7em; }
.hy-onde { margin-left: auto; display: flex; align-items: center; gap: .16em; height: 1.2em; }
.hy-onde i { width: .17em; height: 100%; border-radius: 1em; background: #c9a36b; transform: scaleY(.15); }
.hy-mots { margin: 0; font-size: .78em; line-height: 1.45; color: #f0f0f0; max-width: 17em; }
.hy-mots span { opacity: 0; }
/* Repères posés sur l'illustration */
.hy-pin { position: absolute; display: flex; align-items: center; gap: .5em; opacity: 0; transform: translateY(.4em); }
.hy-pin--g { flex-direction: row-reverse; }
.hy-pt { position: relative; flex: none; width: .8em; height: .8em; border-radius: 50%; background: #c9a36b; box-shadow: 0 0 1em rgba(201,163,107,.95); }
.hy-pt::after { content: ""; position: absolute; inset: -.6em; border-radius: 50%; border: 1px solid rgba(201,163,107,.7); opacity: 0; }
.hy-bulle { padding: .45em .7em; border-radius: .5em; background: rgba(14,14,16,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(201,163,107,.5);
  font: 400 .58em/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #ecd3a5; white-space: nowrap; }
.hy-postes { display: grid; gap: .45em; }
.hy-poste { display: flex; align-items: center; gap: .6em; font-size: .72em; color: #cfcfd2; opacity: .35; }
.hy-poste i { width: 1em; height: 1em; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); }
/* Tests */
.hy-retour { display: grid; grid-template-columns: auto 1fr auto; gap: .7em; align-items: center; opacity: 0; transform: translateX(-.6em); }
.hy-etat { font: 400 .55em/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; font-style: normal; padding: .45em .6em; border-radius: 1em; background: rgba(201,163,107,.18); color: #ecd3a5; }
.hy-etat--ok { background: rgba(255,255,255,.12); color: #eee; }
.hy-retours { width: 19em; }
.hy-versions { display: flex; align-items: center; gap: .5em; }
.hy-v { font: 400 .7em/1 var(--mono); padding: .5em .7em; border-radius: .5em; color: #8f8f93; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
/* Livraison */
.hy-liste { width: 15em; }
.hy-check { display: flex; align-items: center; gap: .7em; font-size: .74em; color: #dcdcdc; opacity: 0; }
.hy-check i { position: relative; width: 1.4em; height: 1.4em; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); }
.hy-check i::after { content: ""; position: absolute; left: .45em; top: .2em; width: .3em; height: .65em; border: solid #111; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; }
.hy-prod { grid-template-columns: auto 1fr; align-items: center; gap: .9em; width: 15em; }
.hy-inter { position: relative; width: 3.4em; height: 1.9em; border-radius: 1em; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.hy-inter i { position: absolute; left: .2em; top: .2em; width: 1.5em; height: 1.5em; border-radius: 50%; background: #e6e6e6; }
.hy-statut { position: relative; height: 1.4em; }
.hy-statut b { position: absolute; inset: 0; font: 400 1.05em/1.3 var(--titre); color: #fff; white-space: nowrap; }
.hy-apres { opacity: 0; color: #f0d9b0 !important; }

/* Animations */
.scene-etape.actif .hy-img { animation: hyImg 1.4s cubic-bezier(.2,.8,.2,1) forwards, hyZoom 14s ease-in-out 1.4s infinite alternate; }
.scene-etape.actif .hy-carte { animation: hyEntre .8s cubic-bezier(.2,.8,.2,1) var(--d) forwards; }
.scene-etape.actif .hy-pin { animation: hyEntre .6s cubic-bezier(.2,.8,.2,1) var(--d) forwards; }
.scene-etape.actif .hy-pt::after { animation: hyOnde 2s ease-out calc(var(--d) + .3s) infinite; }
.scene-etape.actif .hy-rec { animation: maClignote 1.6s ease-in-out 1s infinite; }
.scene-etape.actif .hy-onde i { animation: hyOndeB .6s ease-in-out calc(1s + var(--k) * .08s) infinite alternate; }
.scene-etape.actif .hy-mots span { animation: maApparait .25s ease calc(1.8s + var(--m) * .17s) forwards; }
.scene-etape.actif .hy-poste { animation: hyPoste .4s ease calc(1.6s + var(--k) * .6s) forwards; }
.scene-etape.actif .hy-poste i { animation: hyCoche .4s ease calc(1.6s + var(--k) * .6s) forwards; }
.scene-etape.actif .hy-retour { animation: hyEntre .5s ease calc(1s + var(--k) * .7s) forwards; }
.scene-etape.actif .hy-v { animation: hyVersion .4s ease calc(1.6s + var(--k) * .8s) forwards; }
.scene-etape.actif .hy-check { animation: maApparait .4s ease calc(.9s + var(--k) * .55s) forwards; }
.scene-etape.actif .hy-check i { animation: hyCoche .35s ease calc(1.2s + var(--k) * .55s) forwards; }
.scene-etape.actif .hy-check i::after { animation: maApparait .2s ease calc(1.35s + var(--k) * .55s) forwards; }
.scene-etape.actif .hy-inter { animation: hyInterF .45s ease 3.4s forwards; }
.scene-etape.actif .hy-inter i { animation: hyInterB .45s cubic-bezier(.4,0,.2,1) 3.4s forwards; }
.scene-etape.actif .hy-avant { animation: liSort .25s ease 3.5s forwards; }
.scene-etape.actif .hy-apres { animation: maApparait .4s ease 3.7s forwards; }
@keyframes hyImg { from { opacity: 0; transform: scale(1.1); } to { opacity: 1; transform: scale(1.06); } }
@keyframes hyZoom { to { transform: scale(1.12); } }
@keyframes hyEntre { to { opacity: 1; transform: none; } }
@keyframes hyOnde { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes hyOndeB { to { transform: scaleY(var(--h)); } }
@keyframes hyPoste { to { opacity: 1; } }
@keyframes hyCoche { to { background: #c9a36b; border-color: #c9a36b; } }
@keyframes hyVersion { to { color: #ecd3a5; box-shadow: inset 0 0 0 1px rgba(201,163,107,.7); background: rgba(201,163,107,.12); } }
@keyframes hyInterF { to { background: rgba(201,163,107,.4); box-shadow: inset 0 0 0 1px rgba(201,163,107,.8), 0 0 1.4em rgba(201,163,107,.35); } }
@keyframes hyInterB { to { transform: translateX(1.5em); background: #fff; } }
@media (prefers-reduced-motion: reduce) {
  .hy-img, .hy-carte, .hy-pin, .hy-mots span, .hy-retour, .hy-check { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hy-poste { opacity: 1; } .hy-avant { opacity: 0; } .hy-apres { opacity: 1; }
}

/* Scènes mixtes : estimation, maquette, création, suivi */
.hy-anneau { width: 3.4em; height: 3.4em; flex: none; }
.hy-anneau-f { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 3.5; }
.hy-anneau-v { fill: none; stroke: #c9a36b; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 0 100; filter: drop-shadow(0 0 2px rgba(201,163,107,.8)); }
.hy-gros { display: grid; gap: .2em; font-size: .62em; color: #8f8f93; }
.hy-gros b { font: 400 2.6em/1 var(--titre); color: #fff; }
.hy-sols { width: 17.5em; }
.hy-sol, .hy-valid, .hy-ecran { display: grid; grid-template-columns: 1fr auto; gap: .8em; align-items: center; font-size: .74em; color: #dcdcdc; opacity: 0; transform: translateX(-.6em); }
.hy-sol .hy-etat, .hy-valid .hy-etat, .hy-ecran .hy-etat { font-size: .74em; }
.hy-valid { grid-template-columns: auto 1fr auto; }
.hy-valids { width: 16em; }
.hy-ecrans { width: 17em; }
.hy-ecran { grid-template-columns: auto 1fr auto; }
.hy-ecran > i { width: 1.4em; height: 1em; border-radius: .2em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.hy-prog { display: flex; justify-content: space-between; align-items: baseline; font-size: .7em; color: #9a9a9e; }
.hy-prog b { font: 400 1.6em/1 var(--titre); color: #fff; }
.hy-barre { display: block; height: .3em; border-radius: 1em; background: rgba(255,255,255,.1); overflow: hidden; }
.hy-barre i { display: block; width: 58%; height: 100%; background: #c9a36b; transform-origin: left; transform: scaleX(0); }
.hy-kpis { display: flex; gap: 1.6em; }
.hy-kpis span { display: grid; gap: .25em; font-size: .62em; color: #8f8f93; }
.hy-kpis b { font: 400 2.2em/1 var(--titre); color: #fff; }
.scene-etape.actif .hy-anneau-v { animation: hyAnneau 1.8s cubic-bezier(.4,0,.2,1) 1s forwards; }
.scene-etape.actif .hy-sol, .scene-etape.actif .hy-valid, .scene-etape.actif .hy-ecran { animation: hyEntre .5s ease calc(1.6s + var(--k) * .5s) forwards; }
.scene-etape.actif .hy-barre i { animation: eaBarre 1.4s cubic-bezier(.3,0,.2,1) 1.1s forwards; }
@keyframes hyAnneau { to { stroke-dasharray: 72 100; } }
@media (prefers-reduced-motion: reduce) {
  .hy-sol, .hy-valid, .hy-ecran { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hy-anneau-v { stroke-dasharray: 72 100; } .hy-barre i { transform: none; }
}
.scene-etape.actif .hy-constats .hy-sol { animation-delay: calc(2.2s + var(--k) * .6s); }
.hy-constats { width: 19em; }

/* À propos : l'équipe */
.section--equipe { padding-top: 0; }
.equipe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.equipe__membre { display: grid; grid-template-columns: 160px 1fr; gap: 24px; align-items: center; padding: 24px; border: 1px solid var(--filet); border-radius: 14px; }
.equipe__membre img { width: 160px; height: 160px; object-fit: cover; border-radius: 10px; filter: grayscale(1); }
.equipe__membre div { display: grid; gap: 8px; }
.equipe__membre p:not(.etiquette) { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--discret); }
@media (max-width: 860px) { .equipe { grid-template-columns: 1fr; } .equipe__membre { grid-template-columns: 96px 1fr; gap: 16px; padding: 16px; } .equipe__membre img { width: 96px; height: 96px; } }
.section--equipe { border-top: 0 !important; padding-top: 8px; }

/* Pied mobile : le copyright seul sur sa ligne, les liens légaux dessous */
@media (max-width: 860px) { .pied__bas span:first-child { flex-basis: 100%; margin-right: 0; } }
/* Surtitres plus discrets au-dessus des titres */
.etiquette { opacity: .68; }
.etiquette b { opacity: 1; }

/* À propos : les 3 associés, même format */
.equipe { grid-template-columns: repeat(3, 1fr); gap: 28px; }
.equipe__membre { display: grid; grid-template-columns: none; align-content: start; align-items: start; gap: 10px; padding: 0; border: 0; border-radius: 0; }
.equipe__membre img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; margin-bottom: 10px; filter: grayscale(1); }
.equipe__membre p:not(.etiquette) { font-size: 16px; }
.section--equipe { display: none; }
@media (max-width: 860px) {
  .equipe { grid-template-columns: 1fr; gap: 40px; }
  .equipe__membre { grid-template-columns: none; padding: 0; gap: 8px; }
  .equipe__membre img { width: 100%; max-width: 360px; height: auto; }
}

/* Galerie : contour de smartphone réaliste (cadre titane, bord noir, Dynamic Island, boutons, reflet) */
.telephone { padding: 3px; border-radius: 48px; height: 108%;
  background: linear-gradient(140deg, #b9b9be 0%, #5d5d62 12%, #2a2a2d 30%, #1a1a1c 52%, #3b3b3f 74%, #8c8c92 92%, #cfcfd4 100%);
  box-shadow: 0 40px 80px rgba(0,0,0,.65), 0 12px 24px rgba(0,0,0,.45), inset 0 0 0 .5px rgba(255,255,255,.35); }
.telephone__ecran { position: relative; padding-top: 0; border: 9px solid #030303; border-radius: 45px; background: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.telephone__ecran::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: 36px;
  background: linear-gradient(115deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 22%, rgba(255,255,255,0) 38%); }
.telephone::before { top: 22px; width: 32%; height: 22px; border-radius: 14px; background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); z-index: 4; }
.telephone::after { right: -3px; top: 27%; width: 3px; height: 13%; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, #6a6a6f, #2a2a2d); }
.telephone__boutons { position: absolute; left: -3px; top: 18%; width: 3px; height: 5%; border-radius: 3px 0 0 3px; background: linear-gradient(270deg, #6a6a6f, #2a2a2d);
  box-shadow: 0 calc(var(--h, 1) * 3.2em) 0 0 #3a3a3e, 0 calc(var(--h, 1) * 5.6em) 0 0 #3a3a3e; }
.telephone__boutons { box-shadow: none; }
.telephone__boutons::before, .telephone__boutons::after { content: ""; position: absolute; left: 0; width: 3px; height: 180%; border-radius: 3px 0 0 3px; background: linear-gradient(270deg, #6a6a6f, #2a2a2d); }
.telephone__boutons::before { top: 160%; } .telephone__boutons::after { top: 380%; }
.telephone__ecran { background: var(--statut, #fff); display: flex; flex-direction: column; }
.telephone__statut { flex: none; display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 6px 22px 0 26px; background: var(--statut, #fff); color: var(--statut-encre, #111); }
.telephone__statut b { font: 600 12px/1 var(--corps); letter-spacing: -.01em; }
.telephone__icones { display: flex; align-items: center; gap: 4px; }
.telephone__icones i { display: block; background: currentColor; border-radius: 1.5px; }
.telephone__icones i:nth-child(1) { width: 14px; height: 8px; clip-path: polygon(0 100%, 20% 100%, 20% 70%, 0 70%, 0 100%, 27% 100%, 27% 45%, 47% 45%, 47% 100%, 54% 100%, 54% 22%, 74% 22%, 74% 100%, 80% 100%, 80% 0, 100% 0, 100% 100%); }
.telephone__icones i:nth-child(2) { width: 11px; height: 8px; border-radius: 6px 6px 1px 1px; clip-path: polygon(50% 100%, 0 25%, 100% 25%); }
.telephone__icones i:nth-child(3) { width: 21px; height: 10px; border-radius: 3px; background: transparent; box-shadow: inset 0 0 0 1px currentColor; position: relative; opacity: .9; }
.telephone__icones i:nth-child(3)::after { content: ""; position: absolute; left: 2px; top: 2px; bottom: 2px; width: 13px; border-radius: 1.5px; background: currentColor; }
.telephone::before { top: 19px; height: 20px; width: 30%; }
.galerie__item--mobile .galerie__cadre .telephone img { flex: none; }
.telephone__statut { height: 30px; padding: 5px 16px 0 20px; }
.telephone__statut b { font-size: 9.5px; }
.telephone__icones { gap: 3px; transform: scale(.7); transform-origin: right center; }
.telephone::before { top: 17px; height: 17px; width: 27%; }

/* ---------- Méthode : scènes portable, l'interface progresse d'une étape à l'autre ---------- */
.hy--portable .hy-img { transform: none; }
.scene-etape.actif .hy--portable .hy-img { animation: maApparait 1s ease forwards; }
.hy-ui { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; transform-origin: 0 0; pointer-events: none; }
.pu { position: relative; width: 1280px; height: 800px; display: grid; grid-template-columns: 110px 1fr; background: #0e0e10; color: #eaeaea; font-family: var(--corps); opacity: 0; transition: opacity .6s ease .3s; }
.construit .pu { opacity: .97; }
.pu-cote { border-right: 2px solid rgba(255,255,255,.07); display: flex; flex-direction: column; align-items: center; gap: 30px; padding-top: 42px; }
.pu-logo { width: 46px; height: 46px; border-radius: 12px; border: 3px solid #f2f2f2; transform: rotate(45deg) scale(.8); margin-bottom: 14px; }
.pu-nav { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,.08); }
.pu-nav--on { background: rgba(255,255,255,.24); }
.pu-corps { padding: 48px 56px; display: grid; align-content: start; gap: 34px; }
.pu-tete { display: flex; align-items: center; justify-content: space-between; }
.pu-tete b { font: 400 62px/1 var(--titre); letter-spacing: -.02em; }
.pu-badge { font: 500 24px/1 var(--mono); font-style: normal; padding: 14px 22px; border-radius: 40px; background: rgba(255,255,255,.1); color: #e6e6e6; }
.pu-badge--ambre { background: rgba(201,163,107,.22); color: #f0d9b0; }
.pu-badge--or { background: #c9a36b; color: #141414; }
.pu-grille { display: grid; gap: 26px; }
.pu-grille--riche { grid-template-columns: 1fr 1fr; }
.pu-liste { display: grid; gap: 18px; }
.pu-l { display: grid; grid-template-columns: 62px 1fr 90px; gap: 22px; align-items: center; padding: 22px 24px; border-radius: 18px; background: #18181b; border: 2px solid rgba(255,255,255,.06); opacity: 0; transform: translateY(14px); }
.pu-av { width: 62px; height: 62px; border-radius: 50%; background: #2e2e32; }
.pu-l span { display: grid; gap: 12px; }
.pu-l span b { display: block; height: 16px; border-radius: 8px; background: rgba(255,255,255,.55); }
.pu-l span b + b { height: 12px; background: rgba(255,255,255,.2); }
.pu-p { height: 34px; border-radius: 20px; background: rgba(255,255,255,.14); }
.pu-p--or { background: rgba(201,163,107,.7); }
.pu--n1 .pu-l { background: #151517; }
.pu-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pu-kpi { padding: 24px 28px; border-radius: 18px; background: #18181b; border: 2px solid rgba(255,255,255,.06); display: grid; gap: 14px; opacity: 0; transform: translateY(14px); }
.pu-kpi span { display: block; width: 46%; height: 12px; border-radius: 6px; background: rgba(255,255,255,.22); }
.pu-kpi b { font: 400 64px/1 var(--titre); color: #fff; }
.pu-graphe { border-radius: 18px; background: #18181b; border: 2px solid rgba(255,255,255,.06); padding: 26px; opacity: 0; }
.pu-graphe svg { width: 100%; height: 100%; min-height: 300px; display: block; }
.pu-courbe { fill: none; stroke: #c9a36b; stroke-width: 5; vector-effect: non-scaling-stroke; stroke-dasharray: 900; stroke-dashoffset: 900; }
.pu-aire { fill: rgba(201,163,107,.16); opacity: 0; }
.pu-note { position: absolute; display: flex; align-items: center; gap: 16px; padding: 16px 26px 16px 16px; border-radius: 40px; background: #c9a36b; color: #141414; font: 500 26px/1 var(--corps); box-shadow: 0 16px 40px rgba(0,0,0,.5); opacity: 0; transform: translateY(12px) scale(.96); white-space: nowrap; }
.pu-note b { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #141414; color: #f0d9b0; font-size: 22px; }
.pu-module { position: absolute; right: 56px; bottom: 48px; width: 420px; padding: 26px 30px; border-radius: 20px; background: #1d1a15; border: 3px solid #c9a36b; box-shadow: 0 0 60px rgba(201,163,107,.35); display: grid; gap: 14px; opacity: 0; transform: translateX(60px); }
.pu-module span { font: 500 20px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #c9a36b; }
.pu-module b { font: 400 36px/1.1 var(--titre); color: #fff; }
.pu-module i { display: block; height: 14px; border-radius: 7px; background: rgba(255,255,255,.18); }
.pu-module i + i { width: 60%; }

.construit .pu-l { animation: eaEntre .5s ease calc(.8s + var(--i) * .15s) both; }
.construit .pu-kpi { animation: eaEntre .5s ease calc(.7s + var(--i) * .15s) both; }
.construit .pu-graphe { animation: eaApparait .6s ease 1.2s both; }
.construit .pu-courbe { animation: eaTrace 1.8s cubic-bezier(.4,0,.2,1) 1.4s both; }
.construit .pu-aire { animation: eaApparait .8s ease 2.6s both; }
.construit .pu-note { animation: puNote .5s cubic-bezier(.2,.9,.3,1.2) calc(1.8s + var(--n) * .7s) both; }
.construit .pu-module { animation: puModule .8s cubic-bezier(.2,.8,.2,1) 2.4s both; }
@keyframes puNote { to { opacity: 1; transform: none; } }
@keyframes puModule { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pu, .pu-l, .pu-kpi, .pu-graphe, .pu-aire, .pu-note, .pu-module { opacity: 1 !important; transform: none !important; animation: none !important; }
  .pu-courbe { stroke-dashoffset: 0; }
}
/* Accueil : 9 étapes en 3 colonnes */
@media (min-width: 1001px) { .etapes { grid-template-columns: repeat(3, 1fr); } }
/* Scènes portable : zoom sur l'écran pour lire l'interface */
.hy-zoom { position: absolute; inset: 0; }
.hy--portable .hy-zoom { transform-origin: 65% 44%; transform: translate(-5%, 3%) scale(1.42); }
.hy--portable .hy-carte { width: 14.5em; }
.methode-defile { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 64px; }
.scene-etapes { top: calc(50vh - 260px); }
.hy--portable .hy-zoom { transform-origin: 70% 44%; transform: translate(-1%, 2%) scale(1.2); }
.hy--portable .hy-carte { width: 13.5em; font-size: .92em; }
/* Coche centrée dans son rond (SVG), et interrupteur intégré à la carte */
.hy-check i { display: grid; place-items: center; }
.hy-check i::after { position: absolute; inset: 0; left: 0; top: 0; width: auto; height: auto; border: 0; transform: none;
  background: center / 62% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.6' fill='none' stroke='%23111' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.hy-prod-ligne { display: flex; align-items: center; gap: .9em; margin-top: .3em; padding-top: .7em; border-top: 1px solid rgba(255,255,255,.08); }
.hy-prod-ligne .hy-statut { flex: 1; }
.hy-prod-ligne .hy-statut b { font-size: .95em; }
.pu-badge { font-size: 26px; letter-spacing: .02em; padding: 14px 24px; }

/* Pied : zones d'intervention (pages villes) */
.pied__villes { margin-top: 56px; display: grid; gap: 14px; }
.pied__villes div { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pied__villes a { color: var(--discret); font-size: 13px; }
.pied__villes a:hover { color: var(--encre); }

/* Carte de Denys Loiret */
.dl-tete { display: grid; justify-items: center; gap: 12px; text-align: center; margin-bottom: 48px; }
.dl-portrait { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; filter: grayscale(1); border: 1px solid var(--filet-fort); margin-bottom: 8px; }
.dl-cartes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 920px; margin: 0 auto; }
.dl-carte { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--filet); border-radius: 14px; overflow: hidden; background: var(--fond-2, #111); transition: border-color .3s; }
.dl-carte:hover { border-color: var(--filet-fort); }
.dl-carte__texte { display: grid; gap: 10px; padding: 24px 24px 20px; }
.dl-carte__texte p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--discret); }
.dl-carte img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
@media (max-width: 760px) { .dl-cartes { grid-template-columns: 1fr; } }

/* Blog : profil du lecteur (sur Excel / changer de logiciel) */
.filtre-profil { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 auto 32px; padding: 0 var(--gouttiere, 20px); max-width: 1200px; }
.filtre-profil .etiquette { margin-right: 6px; }
.filtre-profil a { padding: 9px 16px; border-radius: 30px; border: 1px solid var(--filet-fort); font-size: 14px; color: var(--texte); transition: background .2s, color .2s, border-color .2s; }
.filtre-profil a:hover { border-color: var(--encre); color: var(--encre); }
.filtre-profil a[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: #0b0b0b; }
.profils { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.profil { font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: 4px; border: 1px solid var(--filet-fort); color: var(--discret); }
a.profil:hover { color: var(--encre); border-color: var(--encre); }
.cms__tete .profils { margin-top: 10px; }

/* Blog : profil du lecteur (sur Excel / changer de logiciel) */
.filtre-profil { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: min(1200px, calc(100% - 40px)); margin: 0 auto 32px; }
.filtre-profil .etiquette { margin-right: 6px; }
.filtre-profil a { padding: 9px 16px; border-radius: 30px; border: 1px solid var(--filet-fort); font-size: 14px; color: var(--texte); transition: background .2s, color .2s, border-color .2s; }
.filtre-profil a:hover { border-color: var(--encre); color: var(--encre); }
.filtre-profil a[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: #0b0b0b; }
.profils { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.profil { font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 5px 8px; border-radius: 4px; border: 1px solid var(--filet-fort); color: var(--discret); }
a.profil:hover { color: var(--encre); border-color: var(--encre); }
.cms__tete .profils { margin-top: 10px; }
.filtre-profil { padding: 0; }

/* Galerie : smartphone à dimensions fixes (proportions d'un vrai téléphone, 71,5 x 146,6 mm),
   indépendantes de la tuile. La tuile ne montre que le haut du téléphone. */
.galerie__item--mobile .telephone { height: auto !important; width: 236px !important; aspect-ratio: auto !important; height: 484px !important; top: 26px; padding: 3px; border-radius: 44px; }
.galerie__item--mobile .telephone__ecran { width: 100%; height: 100%; border-width: 8px; border-radius: 41px; }
.galerie__item--mobile .telephone::before { top: 15px; width: 72px; height: 20px; }
@media (max-width: 700px) {
  .galerie__item--mobile .telephone { width: 200px !important; height: 410px !important; top: 20px; border-radius: 38px; }
  .galerie__item--mobile .telephone__ecran { border-radius: 35px; border-width: 7px; }
  .galerie__item--mobile .telephone::before { top: 13px; width: 62px; height: 18px; }
}

/* Méga-menus : verre dépoli, plus transparent vers le coin bas-droit */
.mega { background: linear-gradient(135deg, rgba(17,17,17,.97) 0%, rgba(17,17,17,.94) 45%, rgba(17,17,17,.72) 78%, rgba(17,17,17,.5) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); }

/* Méga-menu : au survol, un trait part de la gauche et grandit sous le texte */
.mega__liste a { width: fit-content; background: linear-gradient(currentColor, currentColor) left calc(100% - 3px) / 0 1px no-repeat; transition: background-size .35s cubic-bezier(.4,0,.2,1), color .2s; }
.mega__liste a:hover, .mega__liste a:focus-visible { background-size: 100% 1px; color: var(--encre); }
@media (prefers-reduced-motion: reduce) { .mega__liste a { transition: none; } }
/* Méga-menu Secteurs : même trait qui grandit sous le nom du secteur */
.mega__secteurs strong { width: fit-content; background: linear-gradient(currentColor, currentColor) left 100% / 0 1px no-repeat; padding-bottom: 3px; transition: background-size .35s cubic-bezier(.4,0,.2,1), color .2s; }
.mega__secteurs a:hover strong, .mega__secteurs a:focus-visible strong { background-size: 100% 1px; color: var(--encre); }
@media (prefers-reduced-motion: reduce) { .mega__secteurs strong { transition: none; } }
/* Méga-menu Secteurs : survol du cas client (zoom lent de l'illustration, bord éclairé, trait sous le chiffre) */
.mega__preuve { transition: border-color .3s, transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s; }
.mega__preuve img { transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .4s; }
.mega__preuve strong { width: fit-content; background: linear-gradient(currentColor, currentColor) left 100% / 0 1px no-repeat; padding-bottom: 4px; transition: background-size .35s cubic-bezier(.4,0,.2,1); }
.mega__preuve:hover, .mega__preuve:focus-visible { border-color: var(--filet-fort); transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.mega__preuve:hover img, .mega__preuve:focus-visible img { transform: scale(1.05); filter: brightness(1.08); }
.mega__preuve:hover strong, .mega__preuve:focus-visible strong { background-size: 100% 1px; }
@media (prefers-reduced-motion: reduce) { .mega__preuve, .mega__preuve img, .mega__preuve strong { transition: none; } }

/* Cas clients : toute la carte est cliquable, avec une animation au survol */
.cas { position: relative; }
.cas__lien::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 12px; }
.cas__visuel > img { transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .4s; }
.cas__chiffre strong { background: linear-gradient(currentColor, currentColor) left 100% / 0 1px no-repeat; transition: background-size .4s cubic-bezier(.4,0,.2,1); }
.cas__lien { transition: border-color .2s, letter-spacing .3s; }
.cas:hover .cas__visuel > img, .cas:focus-within .cas__visuel > img { transform: scale(1.04); filter: brightness(1.08); }
.cas:hover .cas__chiffre strong, .cas:focus-within .cas__chiffre strong { background-size: 100% 1px; }
.cas:hover .cas__lien, .cas:focus-within .cas__lien { border-color: var(--encre); }
.cas:hover .cas__lien::after, .cas:focus-within .cas__lien::after { display: inline-block; transform: translateX(4px); transition: transform .3s; }
.cas__lien::after { display: inline-block; transition: transform .3s; }
@media (prefers-reduced-motion: reduce) { .cas__visuel > img, .cas__chiffre strong, .cas__lien::after { transition: none; } }
.cas__chiffre strong { width: fit-content; padding-bottom: 4px; }

/* Méthode sur téléphone : une colonne, la scène collée en haut sur toute la largeur */
@media (max-width: 860px) {
  .methode-defile { grid-template-columns: 1fr !important; gap: 8px; }
  .scene-etapes { position: sticky; top: 64px; z-index: 3; margin: 0 -20px; padding: 12px 20px 14px; gap: 10px;
    background: linear-gradient(var(--fond) 88%, rgba(10,10,10,0)); }
  .scene-etapes__cadre { border-radius: 12px; }
  .scene-etapes__legende { gap: 10px; }
  .scene-etapes__titre { font-size: 18px; }
  .frise--defile .frise__etape { grid-template-columns: 44px 1fr !important; gap: 16px; min-height: 58vh; align-items: start; padding-top: 24px; }
  .frise--defile .frise__noeud { width: 44px; height: 44px; }
  .frise--defile .frise__noeud b { font-size: 12px; }
  .frise--defile .frise__etape::before, .frise--defile .frise__etape::after { left: 21px; }
  .frise__texte p { font-size: 15.5px; }
  .hy-carte { font-size: .92em; }
}
/* Accueil : les 9 étapes en 3 phases. Chaque ligne porte son nom à gauche,
   les étapes s'alignent sur la colonne du titre de section. */
.phases { display: grid; gap: 56px; }
.phase { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; }
.phase > .etiquette { grid-column: 1 / span 3; padding-top: 24px; }
.phase .etapes { grid-column: 4 / -1; grid-template-columns: repeat(3, 1fr); gap: 0; row-gap: 0; }
@media (max-width: 1000px) {
  .phase { display: grid; grid-template-columns: 1fr; gap: 20px; }
  .phase > .etiquette, .phase .etapes { grid-column: 1 / -1; padding-top: 0; }
  .phase .etapes { grid-template-columns: 1fr; gap: 32px; }
}