/* --- 1. les pièces communes : le bouton « Voir plus », le triangle de lecture ---------------------------------- */
.sv-voir { flex: none; }
/* le triangle de lecture : le seul jaune de la carte au repos */
.sv-lecture { position: relative; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--ha-jaune); }
.sv-lecture::after {
  content: ""; position: absolute; left: 5px; top: 4px; width: 0; height: 0;
  border-left: 5px solid var(--ha-noir); border-top: 3px solid transparent; border-bottom: 3px solid transparent;
}

/* --- 2. les fenêtres des étapes et leurs vidéos ------------------------------------------------- */
.sv-fenetre-etape { width: min(920px, calc(100vw - 48px)); }
.sv-exemples { padding: 30px 40px 4px; }
.sv-exemples-titre {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--ha-mono); font-size: 12px; font-weight: 400; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase;
}
.sv-exemples-titre::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--ha-jaune); box-shadow: 0 0 0 1px var(--ha-noir); }
.sv-videos { display: grid; gap: 30px; margin-top: 16px; }
.sv-video { margin: 0; min-width: 0; }
.sv-video-cadre {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px;
  background: var(--ha-fond); box-shadow: inset 0 0 0 1px var(--ha-trait);
}
/* avant le film : un grand triangle de lecture, posé tant que rien n'est monté */
.sv-video-cadre::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%;
  background: var(--ha-blanc); box-shadow: 0 0 0 1px var(--ha-trait);
}
.sv-video-cadre::after {
  content: ""; position: absolute; left: 50%; top: 50%; margin: -9px 0 0 -5px; width: 0; height: 0;
  border-left: 16px solid var(--ha-noir); border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
.sv-monte .sv-video-cadre::before, .sv-monte .sv-video-cadre::after { content: none; }
.sv-scene { position: absolute; inset: 0; }
.sv-iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: var(--ha-fond); }
.sv-video-legende { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 12px; }
.sv-video-titre { font-weight: 900; font-size: 19px; line-height: 1.2; letter-spacing: -.014em; }
.sv-video-ligne { flex: 1 1 22em; font-size: 15px; line-height: 1.45; color: var(--ha-texte-2); text-wrap: pretty; }
.sv-video-lien {
  display: inline-flex; align-items: center; gap: 8px; flex-basis: 100%; margin-top: 4px; color: var(--ha-noir);
  font-family: var(--ha-mono); font-size: 12px; letter-spacing: .02em; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.sv-video-lien:hover { text-decoration-color: var(--ha-jaune); text-decoration-thickness: 3px; }
.sv-lien-fleche { position: relative; width: 7px; height: 7px; border-top: 1.4px solid currentColor; border-right: 1.4px solid currentColor; transform: rotate(45deg); }
.sv-fe-parties { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 30px; }

/* --- 3. les fenêtres des offres ------------------------------------------------------------------ */
.sv-fenetre { width: min(820px, calc(100vw - 48px)); }
.sv-fo-tete { padding: 40px 72px 32px 40px; background: var(--ha-fond); }
.sv-fo-tete .td-fe-titre { font-size: 48px; }
.sv-fo-corps { padding: 18px 40px 40px; }

/* --- 3 bis. les fenêtres des offres : l'atelier -------------------------------------------------------
   L'illustration de chaque offre sur un post-it jaune, posé de travers ; les puces en fiches côte à côte ; l'appel en
   grand bouton noir, sur toute la largeur. L'illustration est un dessin en ligne : i-p plein, i-c contour, i-t trait,
   i-j le repère, i-inv le trait posé sur un plein, i-jl la ligne et i-jlf son ombre. */
.sv-fo .sv-fo-tete { display: grid; grid-template-columns: minmax(0, 1fr) 172px; gap: 28px; align-items: start; padding-right: 80px; }
.sv-fo-illu {
  margin-top: 14px; padding: 24px 18px 26px; border-radius: 4px; background: var(--ha-jaune); transform: rotate(-3deg);
  box-shadow: 0 1px 0 rgba(24, 25, 27, .08), 0 20px 30px -14px rgba(24, 25, 27, .35);
}
.sv-fo-illu svg { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sv-fo-illu .i-p { fill: var(--ha-noir); }
.sv-fo-illu .i-c { stroke: var(--ha-noir); stroke-width: 2.6; }
.sv-fo-illu .i-t { stroke: var(--ha-noir); stroke-width: 2.6; }
.sv-fo-illu .i-j { fill: var(--ha-blanc); stroke: var(--ha-noir); stroke-width: 2.6; }
.sv-fo-illu .i-inv { stroke: var(--ha-jaune); stroke-width: 3; }
.sv-fo-illu .i-jlf { stroke: var(--ha-noir); stroke-width: 8; }
.sv-fo-illu .i-jl { stroke: var(--ha-blanc); stroke-width: 4; }
.sv-fo .sv-fo-corps { padding-top: 24px; padding-bottom: 26px; }
.sv-fo .sv-fo-corps > p { max-width: 36em; font-size: 18px; line-height: 1.55; }
.sv-fo .td-rubrique-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: none; margin-top: 20px; counter-reset: sv-fo; }
.sv-fo .td-rubrique-liste li { counter-increment: sv-fo; padding: 44px 20px 20px; border-radius: 18px; background: var(--ha-fond); font-size: 15.5px; line-height: 1.5; }
.sv-fo .td-rubrique-liste li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sv-fo .td-rubrique-liste li::before {
  content: counter(sv-fo, decimal-leading-zero); left: 20px; top: 18px; width: auto; height: auto; border-radius: 0; background: none;
  font-family: var(--ha-mono); font-size: 11.5px; line-height: 1; letter-spacing: .1em; color: var(--ha-texte-2);
}
.sv-fo .td-rubrique-liste strong { font-weight: 900; }
.sv-fo-appel { padding: 6px 40px 40px; }
.sv-fo .sv-fo-cta { justify-content: space-between; width: 100%; height: 64px; padding: 0 10px 0 30px; font-size: 17px; }
.sv-fo .sv-fo-cta svg {
  box-sizing: border-box; width: 44px; height: 44px; padding: 13px; border-radius: 50%; background: var(--ha-jaune); color: var(--ha-noir); stroke-width: 2;
}
.sv-fo .sv-fo-cta:hover { transform: none; }

@media (max-width: 640px) {
  .sv-fo .sv-fo-tete { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-right: 18px; }
  .sv-fo-illu { order: -1; width: 132px; margin: 6px 0 4px 4px; padding: 16px 12px 18px; }
  .sv-fo .sv-fo-corps { padding-top: 18px; padding-bottom: 20px; }
  .sv-fo .sv-fo-corps > p { font-size: 16.5px; }
  .sv-fo .td-rubrique-liste { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sv-fo .td-rubrique-liste li { padding: 40px 16px 16px; }
  .sv-fo .td-rubrique-liste li::before { left: 16px; top: 16px; }
  .sv-fo-appel { padding: 0 18px calc(32px + var(--rt-barre, 0px)); }
  .sv-fo .sv-fo-cta { height: 58px; padding-left: 24px; font-size: 16px; }
}

/* --- 4. le téléphone ---------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .sv-fenetre, .sv-fenetre-etape { width: 100%; }
  .sv-exemples { padding: 22px 18px 4px; }
  .sv-videos { gap: 24px; }
  .sv-video-cadre { border-radius: 14px; }
  .sv-video-titre { font-size: 17px; }
  .sv-fe-parties { grid-template-columns: minmax(0, 1fr); padding-top: 22px; }
  .sv-fo-tete { padding: 22px 64px 22px 18px; }
  .sv-fo-tete .td-fe-titre { font-size: 34px; }
  .sv-fo-corps { padding: 8px 18px calc(32px + var(--rt-barre, 0px)); }
}

/* --- 5. le titre et la phrase d'entrée ------------------------------------------------------------- */
.sv-services-tete { max-width: 760px; }
.sv-services-titre { font-weight: 900; font-size: 40px; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.sv-services-entree { margin-top: 14px; font-size: 19px; line-height: 1.5; font-weight: 500; color: var(--ha-texte-2); text-wrap: pretty; }
.sv-entrees { margin-top: 36px; }

/* --- 6. une catégorie : son titre (un bouton, services.js) et son contenu ------------------------------------- */
.sv-entrees { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sv-entree { display: contents; }
.sv-tete { grid-row: 1; margin: 0; font-weight: 900; font-size: 21px; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; }
.sv-entree[data-categorie="1"] .sv-tete { grid-column: 1; }
.sv-entree[data-categorie="2"] .sv-tete { grid-column: 2; }
.sv-entree[data-categorie="3"] .sv-tete { grid-column: 3; }
.sv-entree[data-categorie="4"] .sv-tete { grid-column: 4; }
.sv-situation {
  position: relative; display: flex; align-items: flex-start; width: 100%; height: 100%; min-height: 118px; margin: 0; padding: 22px 24px;
  border: 0; border-radius: 26px; background: var(--ha-blanc); color: var(--ha-noir); box-shadow: inset 0 0 0 1.5px var(--ha-trait);
  font: inherit; text-align: left; letter-spacing: inherit; cursor: pointer;
  transition: background-color 200ms var(--ha-courbe), color 200ms var(--ha-courbe);
}
.sv-situation:hover { background: var(--ha-fond-fonce); }
.sv-situation:focus-visible { outline: 2px solid var(--ha-noir); outline-offset: 3px; }
.sv-situation[aria-pressed="true"] { background: var(--ha-noir); color: var(--ha-blanc); box-shadow: none; cursor: default; }
/* la catégorie ouverte pointe vers son contenu */
.sv-situation[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 50%; bottom: -9px; width: 18px; height: 18px; margin-left: -9px; border-radius: 3px; background: var(--ha-noir); transform: rotate(45deg);
}
.sv-corps {
  grid-row: 2; grid-column: 1 / -1; min-width: 0; margin-top: 8px; padding: 34px 38px; border-radius: 30px; background: var(--ha-blanc);
  box-shadow: 0 1px 2px rgba(24, 25, 27, .04), 0 18px 40px rgba(24, 25, 27, .05);
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: start;
}
.sv-corps[hidden] { display: none; }
.sv-corps > * { grid-column: 1; }
/* le « Voir plus » de la catégorie 4 (la seule à en garder un), discret, sous son paragraphe */
.sv-corps > .sv-actions { grid-column: 1; margin: 14px 0 0; justify-self: start; }
.sv-corps-cycle > .sv-actions { display: flex; justify-content: flex-end; margin-top: 18px; }
.sv-corps-cycle .td-savoir { background: var(--ha-blanc); color: var(--ha-noir); }
/* les lignes d'une catégorie : de grandes lignes à carré jaune, cliquables en entier ; la flèche ronde au bout est leur bouton */
html {
  --sv-fleche-jaune: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7h10M8 3l4 4-4 4' fill='none' stroke='%23f8ff07' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sv-fleche-noire: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7h10M8 3l4 4-4 4' fill='none' stroke='%2318191b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.sv-lignes { max-width: 880px; margin: 0; padding: 0; list-style: none; }
.sv-lignes li {
  position: relative; margin: 0 -18px; padding: 14px 18px 14px 44px; border-top: 1px solid var(--ha-trait); border-radius: 16px;
  font-weight: 700; font-size: 22px; line-height: 1.25; letter-spacing: -.015em; text-wrap: pretty; transition: background-color 200ms var(--ha-courbe);
}
.sv-lignes li:first-child { border-top: 0; }
.sv-lignes li::before { content: ""; position: absolute; left: 18px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; background: var(--ha-jaune); box-shadow: 0 0 0 1px var(--ha-noir); }
.sv-lignes li:has(.sv-ligne-ouvre:hover) { background: var(--ha-fond); }
.sv-ligne-ouvre {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 28px; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 16px;
  background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer;
}
.sv-ligne-mots { flex: 1 1 16em; min-width: 0; text-wrap: pretty; }
.sv-ligne-ouvre:focus-visible { outline: 2px solid var(--ha-noir); outline-offset: 0; }
.sv-ligne-plus, .sv-voir-discret {
  display: inline-flex; flex: none; align-items: center; gap: 12px; margin: 0; white-space: nowrap;
  font-family: var(--ha-sans); font-weight: 700; font-size: 15px; line-height: 1.2; letter-spacing: -.005em; color: var(--ha-noir); text-decoration: none;
}
/* le disque de la flèche : celui de la ligne et celui du bouton seul (catégorie 4, développement de produits) */
.sv-ligne-fleche, .sv-voir-discret .td-plus {
  display: block; flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; transform: none;
  background: var(--ha-noir) var(--sv-fleche-jaune) center / 14px no-repeat; transition: background-color 200ms var(--ha-courbe), transform 260ms var(--ha-courbe);
}
.sv-ligne-ouvre:hover .sv-ligne-fleche, .sv-voir-discret:hover .td-plus { background-color: var(--ha-jaune); background-image: var(--sv-fleche-noire); transform: translateX(3px); }
/* le « Voir plus » de la catégorie 4 et du développement de produits : le même, hors d'une ligne */
.sv-voir-discret { height: auto; padding: 0; border: 0; border-radius: 100px; background: none; }
.sv-voir-discret .td-plus::before, .sv-voir-discret .td-plus::after, .sv-voir-discret::after { content: none; }
.sv-voir-discret:focus-visible { outline: 2px solid var(--ha-noir); outline-offset: 4px; }

/* --- 7. les quatre cartes de choix : un pictogramme au-dessus du titre ; la carte choisie passe à la nuit -------- */
.sv-entrees { gap: 14px; }
.sv-entrees .sv-situation {
  --sv-fond: var(--ha-blanc);
  flex-direction: column; justify-content: space-between; gap: 18px; min-height: 216px; padding: 18px 22px 22px; border-radius: 26px;
  transition: transform 260ms var(--ha-courbe), background-color 200ms var(--ha-courbe), box-shadow 200ms var(--ha-courbe);
}
.sv-entrees .sv-situation:hover { transform: translateY(-3px); background: var(--ha-blanc); box-shadow: inset 0 0 0 2px var(--ha-noir); }
.sv-entrees .sv-situation[aria-pressed="true"] { --sv-fond: var(--ha-noir); background: var(--ha-noir); box-shadow: none; transform: none; }
.sv-pict { display: block; flex: none; width: 76px; height: 76px; }
.sv-pict svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sv-pict .ja { fill: var(--ha-jaune); }
.sv-pict .fd { fill: var(--sv-fond); stroke: none; }
.sv-pict .pl { fill: currentColor; stroke: none; }
.sv-pict .jt { stroke: var(--ha-jaune); }
@media (max-width: 1240px) {
  .sv-entrees .sv-situation { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 900px) {
  .sv-services .sv-entrees { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sv-services .sv-entree[data-categorie] .sv-tete { grid-column: auto; order: 0; }
  .sv-services .sv-entree[data-categorie] .sv-corps { grid-column: 1 / -1; order: 5; }
  .sv-entrees .sv-situation { min-height: 184px; padding: 16px 16px 18px; border-radius: 20px; gap: 16px; align-items: flex-start; }
  .sv-entrees .sv-situation:hover { transform: none; }
}
@media (max-width: 640px) {
  .sv-entrees .sv-situation { min-height: 166px; padding: 14px 14px 16px; gap: 12px; }
  .sv-pict { width: 58px; height: 58px; }
  .sv-entrees .sv-tete { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-entrees .sv-situation { transition: none; }
}
@media (max-width: 640px) {
  .sv-ligne-mots { flex-basis: 100%; }
  .sv-lignes li { margin: 0 -10px; padding: 14px 10px 14px 32px; }
  .sv-lignes li::before { left: 10px; top: 27px; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-lignes li, .sv-ligne-fleche, .sv-voir-discret .td-plus { transition: none; }
}
.sv-dev { margin-top: 84px; max-width: 760px; }
.sv-dev-phrase { margin-top: 20px; font-weight: 700; font-size: 22px; line-height: 1.35; letter-spacing: -.015em; text-wrap: pretty; }
.sv-dev .sv-actions { margin-top: 18px; }
.sv-description { max-width: 34em; font-size: 20px; line-height: 1.55; font-weight: 500; text-wrap: pretty; }
.sv-corps-cycle { display: block; padding: 22px; background: var(--ha-noir); box-shadow: none; }

.sv-c5-rangee { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.sv-c5-place { display: flex; min-width: 0; }
.sv-c5 {
  position: relative; display: flex; flex-direction: column; flex: 1; min-width: 0; overflow: hidden; border-radius: 18px;
  background: var(--ha-blanc); color: var(--ha-noir); text-decoration: none;
  transition: transform 260ms var(--ha-courbe), box-shadow 200ms var(--ha-courbe);
}
.sv-c5:hover { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--ha-jaune); }
.sv-c5:focus-visible { outline: 2px solid var(--ha-jaune); outline-offset: 3px; }
/* la moitié haute : la scène du cycle animé (§ 13) */
.sv-c5-haut { position: relative; display: block; overflow: hidden; aspect-ratio: 254 / 214; border-bottom: 1px solid rgba(24, 25, 27, .16); }
/* la moitié basse : le texte, que la silhouette ne touche jamais */
.sv-c5-bas { display: flex; flex: 1; flex-direction: column; gap: 6px; min-height: 0; padding: 16px 18px 16px; }
.sv-c5-num { font-family: var(--ha-mono); font-size: 11px; line-height: 1.3; color: var(--ha-texte-2); }
.sv-c5-nom { font-weight: 900; font-size: 22px; line-height: 1.1; letter-spacing: -.022em; overflow-wrap: anywhere; hyphens: auto; }
.sv-c5-phrase { margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: #3a3c42; text-wrap: pretty; }
.sv-c5-pied { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; }
.sv-c5-media { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-weight: 700; font-size: 13.5px; line-height: 1.2; }
.sv-c5-chevron { flex: none; width: 8px; height: 8px; margin-right: 3px; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; transform: rotate(45deg); }

/* --- 8. le cycle animé (services/cycle/, cycle.css et lumiere.css) : la moitié haute de chaque carte est sa scène,
   sur la nuit ; « ▶ » se pose au coin haut droit de la rangée (.sv-cycle5) ------------------------------------------- */
.sv-cycle5 { position: relative; }
.sv-c5-haut.cy-scene { background: var(--ha-noir); }

/* --- 9. les largeurs moyennes --------------------------------------------------------------------------- */
@media (max-width: 1240px) {
  .sv-services-titre { font-size: 36px; }
  .sv-tete { font-size: 22px; }
  .sv-c5-nom { font-size: 19px; }
  .sv-c5-phrase { font-size: 12.5px; }
  .sv-c5-bas { padding: 14px 14px 14px; }
}
/* en dessous, les cinq cartes défilent dans leur cadre, à leur largeur */
@media (max-width: 1100px) {
  .sv-cycle5 { overflow: hidden; }
  .sv-c5-rangee {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 232px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding: 0 4px; padding-bottom: 6px; scrollbar-width: thin;
  }
  .sv-c5-place { scroll-snap-align: start; }
  .sv-c5:hover { transform: none; }
}
@media (max-width: 900px) {
  .sv-entrees { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .sv-entree[data-categorie] .sv-tete, .sv-corps { grid-column: 1; grid-row: auto; }
  .sv-entree[data-categorie="1"] .sv-tete { order: 1; }
  .sv-entree[data-categorie="2"] .sv-tete { order: 2; }
  .sv-entree[data-categorie="3"] .sv-tete { order: 3; }
  .sv-entree[data-categorie="4"] .sv-tete { order: 4; }
  .sv-entree[data-categorie] .sv-corps { order: 5; margin-top: 4px; }
  .sv-situation { min-height: 0; padding: 12px 18px; border-radius: 16px; align-items: center; }
  .sv-situation[aria-pressed="true"]::after { display: none; }
  .sv-corps { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .sv-corps > .sv-actions { grid-column: 1; grid-row: auto; }
  .sv-corps-cycle { display: block; }
  .sv-dev { margin-top: 56px; }
}

/* --- 10. le téléphone ----------------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .sv-services-titre { font-size: 28px; }
  .sv-services-entree { font-size: 16.5px; }
  .sv-entrees { margin-top: 24px; }
  .sv-tete { font-size: 16.5px; }
  .sv-situation { padding: 12px 16px; border-radius: 16px; }
  .sv-corps { padding: 22px 18px; border-radius: 22px; }
  .sv-corps-cycle { padding: 14px; }
  .sv-c5-rangee { grid-auto-columns: 74%; gap: 10px; }
  .sv-lignes li { font-size: 19px; }
  .sv-dev-phrase { font-size: 19px; }
  .sv-description { font-size: 17px; }
}

/* --- 11. le mouvement réduit ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sv-c5, .sv-situation { transition: none; }
  .sv-c5:hover { transform: none; }
}