/* ═══════════════════════════════════════════════════════════════
   SERVICES (/services.html) · refonte du 12/10/2026
   La page charge aussi css/v4/offre-design.css (composants « od- »
   des pages d'offre) et, en différé, offre-design-figma.css (Réserver,
   FAQ, tuiles des métiers). Ici : le plan de mission de l'ouverture,
   les quatre tuiles en deux par deux, la frise du rythme, les liens
   « Selon votre projet ». Préfixe : .sv-
   ═══════════════════════════════════════════════════════════════ */

/* ─── Le plan de mission ───
   Une fenêtre d'outil, comme les démonstrations des pages d'offre :
   barre de titre, puis à gauche la situation, à droite les quatre
   métiers sur trois temps. */
.sv-plan-cadre { margin-top: var(--e8); max-width: 1240px; position: relative; z-index: 2; }
.sv-plan {
  border-radius: var(--r4);
  background: var(--carte);
  box-shadow: 0 0 0 1px var(--trait), 0 40px 90px -50px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  text-align: left;
}
.sv-plan-barre {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 44px;
  padding: 0 var(--e4);
  border-bottom: 1px solid var(--trait-fin);
  background: var(--fond-2);
  font-size: 12.5px;
  color: var(--encre-3);
}
.sv-plan-points { display: flex; gap: 7px; }
.sv-plan-points i { width: 11px; height: 11px; border-radius: 50%; background: #dcdcdc; }
.sv-plan-titre { font-weight: 600; color: var(--encre-2); }
.sv-plan-marque { justify-self: end; display: inline-flex; align-items: center; gap: 7px; }
.sv-plan-marque svg { width: 13px; height: 13px; fill: none; stroke: var(--or); stroke-width: 1.4; stroke-linejoin: round; }
.sv-plan-marque svg .p { fill: var(--or); stroke: none; }

.sv-plan-corps { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }

/* La situation : quatre onglets empilés. */
.sv-plan-choix { padding: var(--e6) var(--e5); border-right: 1px solid var(--trait-fin); background: var(--fond); }
.sv-plan-question { margin: 0 0 var(--e4); font-size: var(--p-2); font-weight: 600; }
.sv-cas-liste { display: grid; gap: 8px; }
.sv-cas-onglet {
  position: relative;
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 14px 16px 14px 18px;
  border: 0;
  border-radius: var(--r2);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--trait);
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: background-color var(--pose) ease, box-shadow var(--pose) ease;
}
.sv-cas-onglet::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--or);
  transform: scaleY(0);
  transition: transform 450ms var(--ressort);
}
.sv-cas-onglet:hover { background: var(--carte); }
.sv-cas-onglet[aria-selected="true"] { background: var(--carte); box-shadow: inset 0 0 0 1px rgba(209, 163, 38, 0.55), 0 10px 24px -18px rgba(0, 0, 0, 0.4); }
.sv-cas-onglet[aria-selected="true"]::before { transform: none; }
.sv-cas-onglet:focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.sv-cas-quand { font-size: var(--p-5); color: var(--encre-3); }
.sv-cas-nom { font-size: var(--p-2); font-weight: 600; color: var(--encre); }
/* Le minuteur de la démonstration : un filet doré qui se remplit sous
   l'onglet actif, tant que le visiteur n'a pas pris la main. */
.sv-cas-onglet::after {
  content: '';
  position: absolute;
  left: 18px; right: 16px; bottom: 7px;
  height: 2px;
  border-radius: 2px;
  background: var(--or);
  opacity: 0.45;
  transform: scaleX(0);
  transform-origin: left;
}
.sv-plan.est-auto .sv-cas-onglet[aria-selected="true"]::after { animation: sv-minuteur var(--sv-tour, 6s) linear forwards; }
@keyframes sv-minuteur { to { transform: scaleX(1); } }

.sv-plan-droite { display: grid; grid-template-rows: auto 1fr; min-width: 0; }

/* La frise : une colonne de noms, trois temps. Les barres sont posées
   en pourcentage sur la piste ; leurs bords sont des variables pour
   que le passage d'une situation à l'autre glisse. */
.sv-frise { --sv-c1: 22%; --sv-c2: 46%; padding: var(--e6) var(--e6) var(--e4); }
.sv-frise-tete,
.sv-ligne { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; }
.sv-frise-tete { position: relative; padding-bottom: 12px; }
.sv-frise-tete .sv-temps { position: absolute; top: 0; display: grid; gap: 2px; padding-left: 10px; }
.sv-temps b { font-size: var(--p-5); font-weight: 600; }
.sv-temps small { font-size: 11.5px; color: var(--encre-3); }
.sv-frise-tete { min-height: 46px; }
.sv-temps--1 { left: 150px; }
.sv-temps--2 { left: calc(150px + (100% - 150px) * 0.22); }
.sv-temps--3 { left: calc(150px + (100% - 150px) * 0.68); }

.sv-frise-lignes { position: relative; display: grid; gap: 10px; }
/* Les séparations des temps, en pointillés, sur toute la hauteur. */
.sv-frise-lignes::before {
  content: '';
  position: absolute;
  top: -8px; bottom: -8px;
  left: 150px; right: 0;
  background:
    linear-gradient(var(--trait) 50%, transparent 0) calc((100% * 0.22)) 0 / 1px 8px repeat-y,
    linear-gradient(var(--trait) 50%, transparent 0) calc((100% * 0.68)) 0 / 1px 8px repeat-y;
  pointer-events: none;
}
/* Le cadrage : commun aux quatre métiers, une bande sur toute la hauteur. */
.sv-cadrage {
  position: absolute;
  top: 0; bottom: 0;
  left: calc(150px + 6px);
  width: calc((100% - 150px) * 0.22 - 12px);
  display: grid;
  place-items: center;
  padding: var(--e3);
  border-radius: var(--r2);
  z-index: 1;
  background: repeating-linear-gradient(135deg, rgba(209, 163, 38, 0.10) 0 6px, rgba(209, 163, 38, 0.04) 6px 12px), var(--carte);
  box-shadow: inset 0 0 0 1px rgba(209, 163, 38, 0.35);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  color: var(--or-lisible);
  font-weight: 600;
}
.sv-ligne { min-height: 52px; }
.sv-ligne-nom { display: flex; align-items: center; gap: 10px; font-size: var(--p-4); font-weight: 600; transition: opacity var(--pose) ease; }
.sv-ligne-nom i { font-style: normal; font-size: 11px; font-weight: 600; color: var(--or-lisible); }
.sv-piste { position: relative; height: 40px; border-radius: var(--r1); background: var(--fond-2); }
.sv-barre {
  --de: 0.22; --a: 0.68;
  position: absolute;
  top: 4px; bottom: 4px;
  left: calc(var(--de) * 100% + 6px);
  width: calc((var(--a) - var(--de)) * 100% - 12px);
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 7px;
  background: linear-gradient(90deg, #E4BC4C, var(--or));
  color: #111;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: scaleX(0.2);
  transform-origin: left center;
  transition: opacity 260ms ease, transform 0ms linear 260ms;
}
.sv-barre[data-de="2"] { --de: 0.22; }
.sv-barre[data-de="3"] { --de: 0.68; }
.sv-barre[data-a="3"] { --a: 0.68; }
.sv-barre[data-a="4"] { --a: 1; }
.sv-barre--appui {
  background: repeating-linear-gradient(135deg, rgba(209, 163, 38, 0.22) 0 6px, rgba(209, 163, 38, 0.10) 6px 12px);
  box-shadow: inset 0 0 0 1px var(--or);
  color: var(--or-lisible);
}
/* La situation affichée : ses barres poussent de gauche à droite, en vague. */
.sv-plan[data-cas="zero"] .sv-barre[data-cas="zero"],
.sv-plan[data-cas="conversion"] .sv-barre[data-cas="conversion"],
.sv-plan[data-cas="visibilite"] .sv-barre[data-cas="visibilite"],
.sv-plan[data-cas="interface"] .sv-barre[data-cas="interface"] {
  opacity: 1;
  transform: none;
  transition: opacity 300ms ease calc(var(--sv-i, 0) * 90ms + 120ms), transform 800ms var(--ressort) calc(var(--sv-i, 0) * 90ms + 120ms);
}
.sv-ligne[data-metier="dev"] { --sv-i: 1; }
.sv-ligne[data-metier="seo"] { --sv-i: 2; }
.sv-ligne[data-metier="strategie"] { --sv-i: 3; }
/* Un métier qui n'est pas mobilisé s'efface. */
.sv-plan[data-cas="zero"] .sv-ligne:not(:has([data-cas="zero"])) .sv-ligne-nom,
.sv-plan[data-cas="conversion"] .sv-ligne:not(:has([data-cas="conversion"])) .sv-ligne-nom,
.sv-plan[data-cas="visibilite"] .sv-ligne:not(:has([data-cas="visibilite"])) .sv-ligne-nom,
.sv-plan[data-cas="interface"] .sv-ligne:not(:has([data-cas="interface"])) .sv-ligne-nom { opacity: 0.3; }

.sv-legende { display: flex; gap: var(--e5); margin: var(--e4) 0 0 150px; font-size: 12px; color: var(--encre-3); }
.sv-legende span { display: inline-flex; align-items: center; gap: 7px; }
.sv-pastille { width: 18px; height: 9px; border-radius: 3px; background: var(--or); }
.sv-pastille--appui { background: rgba(209, 163, 38, 0.18); box-shadow: inset 0 0 0 1px var(--or); }

/* Le texte de la situation. */
.sv-cas-textes { padding: var(--e5) var(--e6) var(--e6); border-top: 1px solid var(--trait-fin); }
.sv-cas { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--e5); align-items: baseline; }
.sv-cas[hidden] { display: none; }
.sv-cas-titre { margin: 0; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; }
.sv-cas p { margin: 0; max-width: 62ch; font-size: var(--p-3); line-height: 1.6; color: var(--encre-2); }
.od-anime .sv-cas:not([hidden]) { animation: sv-texte 520ms var(--ressort) both; }
@keyframes sv-texte { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1100px) {
  .sv-plan-corps { grid-template-columns: minmax(0, 1fr); }
  .sv-plan-choix { border-right: 0; border-bottom: 1px solid var(--trait-fin); }
  .sv-cas-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sv-plan-cadre { margin-top: var(--e7); }
  .sv-plan-barre { grid-template-columns: auto 1fr; gap: var(--e3); }
  .sv-plan-marque { display: none; }
  .sv-plan-titre { justify-self: end; }
  .sv-plan-choix { padding: var(--e5) var(--e4); }
  .sv-cas-liste { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .sv-cas-onglet { padding: 11px 14px 11px 16px; }
  .sv-frise { padding: var(--e5) var(--e4) var(--e3); }
  /* Sur téléphone, les noms passent au-dessus de leur piste. */
  .sv-frise-tete, .sv-ligne { grid-template-columns: minmax(0, 1fr); }
  .sv-frise-tete { min-height: 40px; }
  .sv-temps--1 { left: 0; }
  .sv-temps--2 { left: 22%; }
  .sv-temps--3 { left: 68%; }
  .sv-temps small { display: none; }
  .sv-temps b { font-size: 11.5px; }
  .sv-frise-lignes::before { left: 0; }
  .sv-cadrage { left: 4px; width: calc(22% - 8px); font-size: 0; padding: 0; }
  .sv-ligne { gap: 6px; min-height: 0; }
  .sv-ligne-nom { position: relative; z-index: 1; padding-left: calc(22% + 4px); font-size: 12.5px; }
  .sv-barre { font-size: 11.5px; padding: 0 8px; }
  .sv-legende { margin-left: 0; }
  .sv-cas-textes { padding: var(--e4); }
  .sv-cas { grid-template-columns: minmax(0, 1fr); gap: var(--e2); }
}
@media (prefers-reduced-motion: reduce) {
  .sv-barre, .sv-plan .sv-barre { transition: none !important; }
  .sv-cas-onglet::before { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   REFONTE DU 15/10/2026 — sous le plan de mission (gardé tel quel)
   Le registre propre à la page : le SOMMAIRE. Des numéros, des filets,
   des lignes qui s'allument comme les entrées d'une table des matières.
   Survol propre à Services : le numéro se remplit d'or et le filet
   court jusqu'à la flèche.
   ═══════════════════════════════════════════════════════════════ */

/* ─── 01 · Les quatre métiers : le sommaire et sa vitrine ─── */
.sv-index-grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--e7); align-items: start; margin-top: var(--e7); }
.sv-index-liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--encre); }
.sv-index-ligne {
  position: relative;
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr) 44px;
  gap: var(--e4);
  align-items: start;
  padding: var(--e5) 0;
  border-bottom: 1px solid var(--trait);
  color: var(--encre);
  text-decoration: none;
}
.sv-index-ligne::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%; height: 1.5px;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
}
.sv-index-num {
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(0, 0, 0, 0.28);
  background: linear-gradient(90deg, var(--or) 50%, transparent 50%) 100% 0 / 200% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  transition: background-position 600ms cubic-bezier(0.65, 0, 0.35, 1), -webkit-text-stroke-color 400ms ease;
}
.sv-index-texte { display: grid; gap: 6px; min-width: 0; }
.sv-index-disc { color: var(--or-lisible); }
.sv-index-accroche { font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; }
.sv-index-accroche em { font-style: normal; color: var(--or-titre, var(--or-lisible)); }
.sv-index-desc { max-width: 48ch; color: var(--encre-3); font-size: var(--p-3); line-height: 1.55; }
.sv-index-fleche { display: grid; place-items: center; width: 44px; height: 44px; margin-top: 4px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--trait); transition: background-color 300ms ease, color 300ms ease, box-shadow 300ms ease, transform 450ms var(--ressort); }
.sv-index-fleche svg { width: 18px; height: 18px; }
.sv-index-ligne:is(:hover, :focus-visible, .est-actif)::after { transform: scaleX(1); }
.sv-index-ligne:is(:hover, :focus-visible, .est-actif) .sv-index-num { background-position: 0 0; -webkit-text-stroke-color: transparent; }
.sv-index-ligne:is(:hover, :focus-visible) .sv-index-fleche { background: var(--encre); color: var(--or); box-shadow: none; transform: rotate(45deg); }
.sv-index-ligne:focus-visible { outline: 2px solid var(--or-lisible); outline-offset: 4px; }

/* La vitrine : un panneau noir fixe pendant le défilement du sommaire. */
.sv-index-vitrine {
  position: sticky;
  top: 14vh;
  display: grid;
  min-height: 460px;
  overflow: hidden;
  border-radius: var(--r4);
  background: radial-gradient(70% 50% at 80% 0%, rgba(209, 163, 38, 0.18), transparent 70%), var(--noir);
  color: var(--sur-noir);
}
.sv-vue { grid-area: 1 / 1; display: grid; grid-template-rows: auto 1fr auto; gap: var(--e5); padding: var(--e6); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 450ms ease, transform 600ms var(--ressort), visibility 0s linear 450ms; }
[data-actif="1"] .sv-vue--1, [data-actif="2"] .sv-vue--2, [data-actif="3"] .sv-vue--3, [data-actif="4"] .sv-vue--4 { opacity: 1; visibility: visible; transform: none; transition: opacity 450ms ease 80ms, transform 600ms var(--ressort) 80ms, visibility 0s; }
.sv-vue-tete { display: grid; gap: 4px; }
.sv-vue-tete .donnee { color: var(--or); }
.sv-vue-tete b { font-size: 1.15rem; font-weight: 500; }
.sv-vue-scene { display: grid; place-items: center; min-height: 220px; }
.sv-vue-couvre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: var(--e4); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.sv-vue-couvre small { width: 100%; margin-bottom: 4px; color: var(--sur-noir-2); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.sv-vue-couvre i { padding: 5px 11px; border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(209, 163, 38, 0.45); color: #F2D27A; font-style: normal; font-size: 12px; }

/* 1 · Le code */
.sv-vue-code { display: grid; gap: 4px; width: min(100%, 380px); padding: 0 0 12px; overflow: hidden; border-radius: 12px; background: #141414; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 30px 50px -30px rgba(0, 0, 0, 0.9); font: 12px/1.7 ui-monospace, 'SF Mono', Menlo, monospace; }
.sv-code-barre { display: flex; align-items: center; gap: 6px; padding: 9px 12px; margin-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.sv-code-barre i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.sv-code-barre b { margin-left: 8px; color: var(--sur-noir-2); font-weight: 400; }
.sv-code-l { display: block; padding: 0 14px; white-space: nowrap; color: #D4D4D4; }
.sv-code-l u { display: inline-block; width: 22px; color: #555; text-decoration: none; }
.sv-code-l em { color: #C586C0; font-style: normal; }
.sv-code-l b { color: #569CD6; font-weight: 400; }
.sv-code-l s { color: #4EC9B0; text-decoration: none; }
.sv-code-l q { color: #E6BA42; quotes: none; }
.sv-code-etat { display: flex; align-items: center; gap: 8px; margin: 8px 14px 0; padding: 7px 10px; border-radius: 8px; background: rgba(61, 220, 132, 0.1); color: #9FE8BE; font-family: inherit; }
.sv-code-etat i { width: 7px; height: 7px; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 8px #3DDC84; }

/* 2 · La courbe du coût */
.sv-vue-courbe { position: relative; display: grid; gap: 12px; width: min(100%, 380px); padding: 16px; border-radius: 12px; background: #141414; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.sv-courbe-titre { display: grid; }
.sv-courbe-titre small { color: var(--sur-noir-2); font-size: 11px; }
.sv-courbe-titre b { font-size: 15px; font-weight: 500; }
.sv-courbe-barres { display: grid; grid-template-columns: repeat(6, 1fr); align-items: end; gap: 10px; height: 130px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.sv-courbe-barres i { height: var(--h); border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--or), rgba(209, 163, 38, 0.35)); transform-origin: bottom; transition: transform 700ms var(--ressort); }
.sv-courbe-barres i:nth-child(n+4) { background: linear-gradient(180deg, #F2D27A, var(--or)); }
.sv-courbe-axe { display: flex; justify-content: space-between; color: var(--sur-noir-2); font-size: 11px; }
.sv-courbe-note { position: absolute; right: 16px; top: 16px; color: rgba(255, 255, 255, 0.35); font-size: 10px; }
[data-actif="2"] .sv-courbe-barres i { animation: sv-monte 700ms var(--ressort) backwards; }
[data-actif="2"] .sv-courbe-barres i:nth-child(2) { animation-delay: 60ms; } [data-actif="2"] .sv-courbe-barres i:nth-child(3) { animation-delay: 120ms; } [data-actif="2"] .sv-courbe-barres i:nth-child(4) { animation-delay: 180ms; } [data-actif="2"] .sv-courbe-barres i:nth-child(5) { animation-delay: 240ms; } [data-actif="2"] .sv-courbe-barres i:nth-child(6) { animation-delay: 300ms; }
@keyframes sv-monte { from { transform: scaleY(0); } }

/* 3 · Le résultat de recherche */
.sv-vue-serp { display: grid; gap: 8px; width: min(100%, 380px); padding: 14px; border-radius: 12px; background: #fff; color: #202124; font: 12.5px/1.35 Arial, sans-serif; }
.sv-serp-req { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; padding: 8px 12px; border-radius: 99px; box-shadow: 0 1px 5px rgba(32, 33, 36, 0.22); }
.sv-serp-req svg { width: 13px; height: 13px; fill: none; stroke: #9AA0A6; stroke-width: 1.6; }
.sv-serp-l { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px; border-radius: 9px; }
.sv-serp-l b { color: #9AA0A6; text-align: center; }
.sv-serp-l > span, .sv-serp-ia > span { display: grid; gap: 5px; }
.sv-serp-l i, .sv-serp-ia i { display: block; height: 6px; border-radius: 3px; background: #EEF0F2; }
.sv-serp-l i:first-child { width: 55%; background: #DCE3F5; }
.sv-serp-l.est-nous { background: #FFFBEE; box-shadow: inset 0 0 0 1px rgba(209, 163, 38, 0.5); }
.sv-serp-l.est-nous b { color: #8A6B12; }
.sv-serp-l.est-nous i:first-child { background: #1A0DAB; }
.sv-serp-ia { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 4px; padding: 10px; border-radius: 10px; background: #F4F1FB; }
.sv-serp-ia img { width: 18px; height: 18px; }
.sv-serp-ia i:nth-child(2) { width: 70%; background: #D1A326; }

/* 4 · Le design */
.sv-vue-design { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; gap: 14px 20px; align-items: center; width: min(100%, 380px); padding: 18px; border-radius: 12px; background: #FFFDF7; color: #141414; }
.sv-design-aa { grid-row: 1 / span 2; font-size: 76px; font-weight: 600; line-height: 0.9; letter-spacing: -0.04em; }
.sv-design-nuancier { display: flex; gap: 6px; }
.sv-design-nuancier i { width: 30px; height: 30px; border-radius: 8px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.sv-design-bouton { justify-self: start; padding: 9px 16px; border-radius: 99px; background: #141414; color: #FFFDF7; font-size: 12px; font-weight: 600; }
.sv-design-regle { grid-column: 1 / -1; display: grid; grid-template-columns: 2fr 1fr 1fr 3fr; gap: 6px; }
.sv-design-regle i { height: 6px; border-radius: 3px; background: rgba(209, 163, 38, 0.45); }

@media (max-width: 1000px) {
  .sv-index-grille { grid-template-columns: minmax(0, 1fr); }
  .sv-index-vitrine { display: none; }
}
@media (max-width: 600px) {
  .sv-index-ligne { grid-template-columns: 3.4rem minmax(0, 1fr); }
  .sv-index-fleche { display: none; }
}

/* ─── 02 · Le rythme : un mois type ─── */
.sv-rythme-tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--e6); align-items: end; margin-bottom: var(--e7); }
.sv-rythme-lead { margin: 0; }
.sv-rythme .sv-mois { background: #111; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 34px 60px -40px rgba(0, 0, 0, 0.9); }
.sv-rythme .sv-mois-tete { border-bottom-color: rgba(255, 255, 255, 0.1); }
.sv-rythme .sv-mois-tete small, .sv-rythme .sv-mois-jours i, .sv-rythme .sv-jour small { color: var(--sur-noir-2); }
.sv-rythme .sv-jour { background: rgba(255, 255, 255, 0.05); }
.sv-rythme .sv-jour--cadrage { background: rgba(209, 163, 38, 0.14); box-shadow: inset 0 0 0 1px rgba(209, 163, 38, 0.45); }
.sv-rythme .sv-jour--cadrage b { background: #fff; color: #111; }
.sv-rythme .sv-jour--revue b { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.sv-rythme .sv-pas { border-left-color: rgba(255, 255, 255, 0.14); }
.sv-rythme .sv-pas-quoi { color: var(--sur-noir-2); }
.sv-rythme .sv-pas--cadrage .sv-pas-quand i { background: #fff; box-shadow: none; }
.sv-rythme .sv-pas--revue .sv-pas-quand i { background: transparent; box-shadow: inset 0 0 0 1.5px #fff; }
.sv-rythme .sv-pas-quand { color: var(--or); }
.sv-rythme-grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--e7); align-items: start; }
.sv-mois { display: grid; gap: 10px; padding: var(--e5); border-radius: var(--r4); background: var(--carte); box-shadow: 0 0 0 1px var(--trait), 0 34px 60px -44px rgba(0, 0, 0, 0.45); }
.sv-mois-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--trait); }
.sv-mois-tete b { font-size: var(--p-2); font-weight: 600; }
.sv-mois-tete small { color: var(--encre-3); font-size: var(--p-5); }
.sv-mois-jours, .sv-mois-grille { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sv-mois-jours i { color: var(--encre-3); font-style: normal; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; }
.sv-jour { position: relative; display: grid; align-content: space-between; min-height: 64px; padding: 7px 8px; border-radius: 10px; background: var(--fond-2, #F6F2E6); }
.sv-jour small { color: var(--encre-3); font-size: 10.5px; }
.sv-jour b { justify-self: start; padding: 3px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 600; line-height: 1.1; }
.sv-jour--cadrage b { background: var(--encre); color: var(--or); }
.sv-jour--point b { background: rgba(209, 163, 38, 0.18); color: var(--or-lisible); box-shadow: inset 0 0 0 1px rgba(209, 163, 38, 0.5); }
.sv-jour--version b { background: var(--or); color: #111; }
.sv-jour--revue b { background: #fff; color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--encre); }
.sv-jour--cadrage { background: rgba(0, 0, 0, 0.06); }
.od-anime .sv-mois:not(.est-vu) .sv-jour b { opacity: 0; transform: translateY(6px) scale(0.9); }
.sv-jour b { transition: opacity 400ms ease calc(var(--k) * 45ms + 150ms), transform 500ms var(--ressort) calc(var(--k) * 45ms + 150ms); }

.sv-pas-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--e5); }
.sv-pas { display: grid; gap: 6px; padding-left: var(--e5); border-left: 2px solid var(--trait); transition: border-color 300ms ease; }
.sv-pas:hover { border-left-color: var(--or); }
.sv-pas-quand { display: flex; align-items: center; gap: 8px; color: var(--or-lisible); font-size: var(--p-5); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.sv-pas-quand i { width: 14px; height: 14px; border-radius: 4px; }
.sv-pas--cadrage .sv-pas-quand i { background: var(--encre); box-shadow: inset 0 0 0 3px var(--or); }
.sv-pas--point .sv-pas-quand i { background: rgba(209, 163, 38, 0.18); box-shadow: inset 0 0 0 1px rgba(209, 163, 38, 0.6); }
.sv-pas--version .sv-pas-quand i { background: var(--or); }
.sv-pas--revue .sv-pas-quand i { background: #fff; box-shadow: inset 0 0 0 1.5px var(--encre); }
.sv-pas-nom { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
.sv-pas-quoi { margin: 0; max-width: 46ch; color: var(--encre-3); font-size: var(--p-3); line-height: 1.6; }
@media (max-width: 1000px) {
  .sv-rythme-tete, .sv-rythme-grille { grid-template-columns: minmax(0, 1fr); gap: var(--e5); }
}
@media (max-width: 520px) {
  .sv-mois { padding: var(--e4) 10px; }
  .sv-jour { min-height: 54px; padding: 5px; }
  .sv-jour b { font-size: 9px; padding: 2px 4px; }
}

/* ─── ◆ · Selon votre projet : secteurs en photos, projets en lignes, régions en plaques ─── */
.sv-selon-bloc { margin-top: var(--e7); }
.sv-selon-titre { margin: 0 0 var(--e4); padding-bottom: var(--e3); border-bottom: 2px solid var(--encre); font-size: var(--p-2); font-weight: 600; }
.sv-secteurs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e4); margin: 0; padding: 0; list-style: none; }
.sv-secteur { position: relative; display: grid; overflow: hidden; border-radius: var(--r3); color: #fff; text-decoration: none; isolation: isolate; }
.sv-secteur-photo { grid-area: 1 / 1; aspect-ratio: 16 / 10; }
.sv-secteur-photo { overflow: hidden; }
.sv-secteur-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1)); transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.sv-secteur::after { content: ''; grid-area: 1 / 1; background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.72)); z-index: 0; }
.sv-secteur-nom { grid-area: 1 / 1; align-self: end; z-index: 1; padding: var(--e4) 70px var(--e4) var(--e4); font-size: 1.12rem; font-weight: 600; line-height: 1.2; }
.sv-secteur-fleche { grid-area: 1 / 1; align-self: end; justify-self: end; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; margin: var(--e4); border-radius: 50%; background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(6px); transition: background-color 300ms ease, color 300ms ease, transform 450ms var(--ressort); }
.sv-secteur-fleche svg { width: 16px; height: 16px; }
.sv-secteur:is(:hover, :focus-visible) .sv-secteur-photo img { transform: scale(calc(var(--zoom, 1) * 1.06)); }
.sv-secteur:is(:hover, :focus-visible) .sv-secteur-fleche { background: var(--or); color: #111; transform: rotate(45deg); }
.sv-secteur:focus-visible { outline: 2px solid var(--or-lisible); outline-offset: 3px; }

.sv-selon-duo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--e7); }
.sv-projets, .sv-regions { margin: 0; padding: 0; list-style: none; }
.sv-projet { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr) 24px; align-items: center; gap: var(--e4); padding: var(--e3) 0; border-bottom: 1px solid var(--trait); color: var(--encre); text-decoration: none; }
.sv-projet-vue { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 8px; background: var(--fond-2, #F6F2E6); }
.sv-projet-vue img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.sv-projet-nom { font-size: var(--p-1, 1.1rem); font-weight: 500; }
.sv-projet-fleche svg, .sv-region-fleche svg { width: 18px; height: 18px; transition: transform 450ms var(--ressort), color 300ms ease; }
.sv-projet::after, .sv-region::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1.5px; background: var(--or); transform: scaleX(0); transform-origin: left; transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1); }
.sv-projet:is(:hover, :focus-visible)::after, .sv-region:is(:hover, :focus-visible)::after { transform: scaleX(1); }
.sv-projet:is(:hover, :focus-visible) .sv-projet-vue img { transform: scale(1.06); }
.sv-projet:is(:hover, :focus-visible) svg, .sv-region:is(:hover, :focus-visible) svg { transform: rotate(45deg); color: var(--or-lisible); }

.sv-regions { display: grid; gap: var(--e3); }
.sv-region { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 24px; grid-template-rows: auto auto auto; row-gap: 2px; padding: var(--e4) var(--e4) var(--e4) var(--e5); border-radius: var(--r3); background: var(--noir); color: var(--sur-noir); text-decoration: none; overflow: hidden; }
.sv-region-coord { grid-column: 1; color: var(--or); }
.sv-region-ville { grid-column: 1; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.sv-region-nom { grid-column: 1; color: var(--sur-noir-2); font-size: var(--p-4); }
.sv-region-fleche { grid-column: 2; grid-row: 1 / span 3; align-self: center; color: var(--sur-noir); }
.sv-region:focus-visible, .sv-projet:focus-visible { outline: 2px solid var(--or-lisible); outline-offset: 3px; }

@media (max-width: 1000px) {
  .sv-secteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-selon-duo { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 560px) {
  .sv-secteurs { grid-template-columns: minmax(0, 1fr); }
  .sv-projet { grid-template-columns: 76px minmax(0, 1fr) 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-index-ligne::after, .sv-index-num, .sv-vue, .sv-jour b, .sv-secteur-photo img, .sv-projet-vue img { transition: none !important; animation: none !important; }
}

/* ─── Voir aussi (15/10/2026) : un bandeau de liens sobres, à la place
   des tuiles photo, des lignes et des plaques. ─── */
.sv-voir { padding-block: var(--e6) var(--e8); }
.sv-voir-barre { display: grid; justify-items: center; gap: var(--e4); padding-top: var(--e6); border-top: 1px solid var(--trait); text-align: center; }
.sv-voir-titre { margin: 0; color: var(--encre-3); font-size: var(--p-5); letter-spacing: 0.12em; text-transform: uppercase; }
.sv-voir-liens { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 4px; max-width: 62rem; margin: 0; padding: 0; list-style: none; }
.sv-voir-liens li + li::before { content: '·'; margin-right: 4px; color: var(--or); }
.sv-voir-liens a { color: var(--encre); font-size: var(--p-4); text-decoration: none; background: linear-gradient(var(--or), var(--or)) 0 100% / 0 1px no-repeat; transition: background-size 300ms ease, color 200ms ease; }
.sv-voir-liens a:hover, .sv-voir-liens a:focus-visible { background-size: 100% 1px; color: var(--or-lisible); }

/* ═══ L'OUVERTURE, PROPRE À LA PAGE (15/10/2026, demande du fondateur) ═══
   Plus le cadre de sélection du Web design :
   · le titre : quatre fils (les quatre métiers) qui se rejoignent en un
     seul sous « interlocuteur ». Posé d'emblée, sans animation (le
     titre est l'élément LCP du téléphone) ;
   · les trois propriétés : au survol, la barre du plan de mission se
     remplit en quatre segments, un par métier, et l'icône passe au noir. */
.sv-ouverture .od-titre em { padding: 0 0.04em 0.16em; }
.sv-ouverture .od-titre em::before { inset: auto 0 -0.08em; height: 0.3em; border: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 30' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M2 3C120 3 160 22 250 22' stroke='%23F2D27A' stroke-width='3'/%3E%3Cpath d='M2 11C120 11 170 22 250 22' stroke='%23E6BA42' stroke-width='3'/%3E%3Cpath d='M2 19C120 19 180 22 250 22' stroke='%23D1A326' stroke-width='3'/%3E%3Cpath d='M2 27C120 27 190 22 250 22' stroke='%23A8801A' stroke-width='3'/%3E%3Cpath d='M250 22H398' stroke='%23D1A326' stroke-width='5'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.sv-ouverture .od-titre em::after { inset: auto -0.04em -0.12em auto; width: 0.16em; height: 0.16em; background: var(--or); transform: rotate(45deg); }

.sv-ouverture .od-propriete::before {
  inset: auto 14px 6px 76px;
  height: 4px;
  opacity: 1;
  background:
    linear-gradient(90deg, #F2D27A 0 24%, transparent 24% 25.3%, #E6BA42 25.3% 49.3%, transparent 49.3% 50.6%, #D1A326 50.6% 74.6%, transparent 74.6% 75.9%, #A8801A 75.9% 100%);
  border-radius: 2px;
  clip-path: inset(0 100% 0 0);
  transform: none;
  transition: clip-path 800ms steps(4, jump-end);
}
.sv-ouverture .od-propriete:hover::before { clip-path: inset(0 0 0 0); }
.sv-ouverture .od-propriete:hover { background: rgba(209, 163, 38, 0.05); box-shadow: none; }
.sv-ouverture .od-propriete:hover .od-propriete-icone { background: #111; color: var(--or); transform: none; }
@media (prefers-reduced-motion: reduce) { .sv-ouverture .od-propriete::before { transition: none; } }